* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 0; background: #1a1a2e; color: #e0e0e0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
#map { flex: 1; min-height: 0; }

/* Bottom toolbar — CSS Grid: labels row + controls row */
#toolbar { display: grid; grid-template-columns: auto auto auto auto auto 1fr auto auto; grid-template-rows: auto auto; background: #16213e; border-top: 1px solid #0f3460; font-size: 13px; }
.tb-label { padding: 3px 12px 0; font-size: 10px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: flex-end; justify-content: center; white-space: nowrap; gap: 6px; }
.tb-cell { padding: 4px 12px 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Vertical separators between groups (continuous across both rows) */
.col-hole, .col-place, .col-mode, .col-section, .col-misc { border-right: 1px solid #0f3460; }
.col-config { border-left: 1px solid #0f3460; border-right: 1px solid #0f3460; }
#toolbar button { background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
#toolbar button:hover { background: #1a3a6e; }
#toolbar button.active { background: #e94560; color: #fff; border-color: #e94560; }
/* Aimpoint button stands out with accent color */
#toggleCircleBtn { background: #1a4a3a; border-color: #2a8a6a; color: #5fd5a5; font-weight: 600; padding: 5px 14px; font-size: 13px; }
#toggleCircleBtn:hover { background: #2a5a4a; }
#toggleCircleBtn.active { background: #2a8a6a; color: #fff; border-color: #5fd5a5; }
#toolbar select, #toolbar input { background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 3px 6px; font-size: 12px; }
#toolbar label { font-size: 12px; color: #a0a0b0; white-space: nowrap; }
#holePicker { width: 56px; }

/* Stats bar */
#statsBar { background: #0d1b30; border-top: 1px solid #0f3460; padding: 5px 12px; font-size: 12px; display: flex; align-items: center; min-height: 28px; gap: 0; position: relative; }
.rough-select { display: inline-flex; align-items: center; gap: 4px; background: #0f3460; border: 1px solid #1a3a6e; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px; color: #e0e0e0; user-select: none; }
.rough-select:hover { background: #1a3a6e; border-color: #7eb8da; }
.rough-select-check { color: #7eb8da; font-weight: bold; font-size: 10px; }
.rough-select-arrow { color: #a0a0b0; font-size: 8px; margin-left: 2px; }
.stat-hole { color: #7eb8da; font-weight: bold; font-size: 13px; margin-right: 16px; white-space: nowrap; }
.stat-escore { color: #e94560; font-weight: bold; font-size: 14px; margin-right: 16px; white-space: nowrap; }
.stat-tee { color: #e0e0e0; font-weight: bold; font-size: 14px; margin-right: 16px; white-space: nowrap; }
.stat-pin { color: #e0e0e0; font-weight: bold; font-size: 14px; margin-right: 16px; white-space: nowrap; }
.stat-wind { color: #5ab8e0; font-weight: bold; font-size: 13px; margin-right: 16px; white-space: nowrap; }
.stat-wind-detail { font-weight: 400; font-size: 10px; color: #7a9ab8; }
.stat-adj { font-weight: 400; font-size: 11px; color: #5ab8e0; }
.stat-surfaces { color: #a0a0b0; font-size: 12px; margin-right: 16px; }
.stat-dims { color: #666; font-size: 11px; margin-right: 16px; white-space: nowrap; }
.stat-auto { color: #5a9; font-size: 11px; white-space: nowrap; }
.stat-elev { color: #7a8a9a; font-size: 11px; white-space: nowrap; margin-left: auto; }

/* Tee + hole markers */
.tee-marker { width: 12px; height: 12px; background: #fff; border: 2px solid #000; border-radius: 50%; box-sizing: border-box; cursor: default; }
.hole-marker { width: 12px; height: 12px; background: #f00; border: 2px solid #000; border-radius: 50%; box-sizing: border-box; cursor: default; }
.approach-marker { width: 12px; height: 12px; background: #0ff; border: 2px solid #000; border-radius: 50%; box-sizing: border-box; cursor: default; }

/* Ellipse drag handle */
.ellipse-drag-handle { width: 14px; height: 14px; background: rgba(0,100,255,0.5); border: 2px solid #00f; border-radius: 50%; cursor: grab; }

/* Rotation handle — invisible drag target; visible arc is map geometry */
.rotation-handle { width: 28px; height: 28px; cursor: grab; background: transparent; border: none; border-radius: 50%; }

/* Legend */
.legend-control { background: rgba(13,27,48,0.9); border-radius: 6px; padding: 8px 10px; font-size: 11px; color: #ccc; line-height: 1.6; }
.legend-control b { color: #fff; font-size: 12px; }

/* E.Score panel — sits above the legend in the bottom-left control stack */
.escore-panel { background: rgba(13,27,48,0.92); border-radius: 6px; padding: 8px 10px; font-size: 11px; color: #e0e0e0; min-width: 150px; margin-bottom: 6px; border: 1px solid rgba(26,58,110,0.5); }
.esp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; }
.esp-row.esp-optimal { border-bottom: 1px solid rgba(126,184,218,0.25); padding-bottom: 4px; margin-bottom: 2px; }
.esp-name { color: #ccc; font-size: 11px; }
.esp-optimal .esp-name { color: #5fd5a5; font-weight: 700; }
.esp-score { color: #7eb8da; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.esp-optimal .esp-score { color: #5fd5a5; }
.esp-carry { color: #7a8a9c; font-size: 9px; font-weight: 400; }
.legend-row { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); }

/* Hole label on dotted line */
.hole-label-box { background: rgba(13,27,48,0.85); color: #7eb8da; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; border: 1px solid rgba(26,58,110,0.6); white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.3; }

/* Midpoint drag handle */
.midpoint-handle { width: 10px; height: 10px; background: rgba(126,184,218,0.5); border: 1.5px solid #7eb8da; border-radius: 50%; cursor: grab; }

/* Course control */
.course-control { background: rgba(13,27,48,0.95); border-radius: 6px; padding: 8px 10px; font-size: 13px; color: #e0e0e0; min-width: 250px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.course-control label { font-weight: bold; font-size: 11px; color: #7eb8da; display: block; margin-bottom: 4px; }
.course-control select, .course-control input { width: 100%; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 5px 8px; font-size: 12px; margin-top: 4px; box-sizing: border-box; }
.course-control input::placeholder { color: #667; }
.course-control .search-results { max-height: 150px; overflow-y: auto; margin-top: 2px; }
.course-control .search-result { padding: 5px 8px; cursor: pointer; border-radius: 3px; font-size: 11px; color: #ccc; }
.course-control .search-result:hover { background: #1a3a6e; color: #fff; }

/* Custom course dropdown */
.cc-dropdown-wrapper { margin-top: 4px; position: relative; }
.cc-dropdown-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 5px 8px; font-size: 12px; cursor: pointer; box-sizing: border-box; }
.cc-dropdown-btn:hover { border-color: #7eb8da; }
.cc-dropdown-list { position: absolute; left: 0; right: 0; top: 100%; background: #0d1b30; border: 1px solid #1a3a6e; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 10; }
.cc-dd-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; cursor: pointer; font-size: 12px; color: #ccc; border-bottom: 1px solid rgba(15,52,96,0.3); }
.cc-dd-item:hover { background: #1a3a6e; color: #fff; }
.cc-dd-item.active { background: #0f3460; color: #7eb8da; font-weight: 600; }
.cc-dd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dd-del { background: none; border: none; color: #666; cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.cc-dd-del:hover { color: #e94560; }

/* Scorecard */
.scorecard-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; gap: 12px; }
.scorecard-modal { background: #16213e; border-radius: 10px; padding: 20px; min-width: 700px; max-width: 85vw; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; }
.scorecard-modal .tee-dist-col { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.scorecard-modal .td-min, .scorecard-modal .td-max { font-size: 10px; color: #888; }
.scorecard-modal .td-ideal { font-size: 13px; font-weight: bold; color: #e0e0e0; }
.scorecard-modal .td-sep { font-size: 9px; color: #555; }
.scorecard-modal .tee-dist-col { white-space: nowrap; }
.scorecard-modal .adj-col { color: #5ab8e0; font-size: 11px; white-space: nowrap; }
.breakdown-panel { background: #16213e; border-radius: 10px; padding: 20px; width: 240px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; }
.breakdown-panel h3 { margin: 0 0 8px 0; font-size: 13px; color: #7eb8da; }
.breakdown-panel table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 16px; }
.breakdown-panel th { background: #0f3460; padding: 4px 6px; text-align: center; font-weight: 600; color: #7eb8da; border-bottom: 1px solid #1a3a6e; }
.breakdown-panel td { padding: 3px 6px; text-align: center; border-bottom: 1px solid rgba(15,52,96,0.3); }
.scorecard-modal h2 { margin: 0 0 12px 0; font-size: 16px; color: #7eb8da; }
.scorecard-modal table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scorecard-modal th { background: #0f3460; padding: 6px 10px; text-align: center; font-weight: 600; color: #7eb8da; border-bottom: 1px solid #1a3a6e; }
.scorecard-modal td { padding: 5px 10px; text-align: center; border-bottom: 1px solid rgba(15,52,96,0.3); }
.scorecard-modal tr.total-row td { border-top: 2px solid #1a3a6e; font-weight: bold; color: #7eb8da; }
.scorecard-modal .par-input { width: 42px; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; padding: 3px; text-align: center; font-size: 12px; }
.scorecard-modal .close-btn { float: right; background: none; border: none; color: #a0a0b0; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }
.scorecard-modal .close-btn:hover { color: #e94560; }
.scorecard-modal .escore-val { color: #e94560; font-weight: bold; }
.scorecard-modal .note-input { width: 100%; min-width: 60px; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; padding: 3px 5px; font-size: 11px; box-sizing: border-box; }
.scorecard-modal .escore-col { min-width: 90px; white-space: nowrap; }
.es-delta { font-size: 10px; font-weight: 600; margin-left: 3px; }
.delta-over { color: #e94560; }
.delta-under { color: #5fd5a5; }
.delta-even { color: #a0a0b0; }
.rank-col { min-width: 36px; font-weight: 600; color: #a0a0b0; }
.scorecard-modal .escore-hide { display: none; }
.scorecard-modal .toggle-row { margin-bottom: 10px; font-size: 11px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scorecard-modal .toggle-row label { cursor: pointer; color: #a0a0b0; }
.scorecard-modal .toggle-row input[type=checkbox] { margin-right: 4px; }
.scorecard-modal .export-row { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.scorecard-modal .export-row input[type=email] { background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; padding: 3px 6px; font-size: 11px; width: 160px; }
.scorecard-modal .export-row button { background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.scorecard-modal .export-row button:hover { background: #1a3a6e; }
.scorecard-modal .export-row button:disabled { opacity: 0.6; cursor: wait; }

/* Polygon start marker */
.poly-start-marker { width: 10px; height: 10px; background: rgba(255,255,255,0.8); border: 2px solid; border-radius: 50%; }

/* Config modal */
.config-modal { background: #16213e; border-radius: 10px; padding: 20px; min-width: 460px; max-width: 560px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; }
.config-modal h2 { margin: 0 0 14px 0; font-size: 16px; color: #7eb8da; }
.config-modal h3 { margin: 8px 0 8px 0; font-size: 12px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; }
.config-modal .close-btn { float: right; background: none; border: none; color: #a0a0b0; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }
.config-modal .close-btn:hover { color: #e94560; }
.config-modal .config-note { font-size: 10px; color: #667; margin-top: 12px; line-height: 1.4; }
.rough-level-row { display: flex; align-items: flex-start; padding: 10px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; background: #0d1b30; }
.rough-level-row:hover { background: #0f3460; }
.rough-level-row.selected { background: #0f3460; border-color: #7eb8da; }
.rough-level-check { width: 22px; color: #7eb8da; font-weight: bold; flex-shrink: 0; font-size: 14px; line-height: 1.2; }
.rough-level-info { flex: 1; }
.rough-level-header { display: flex; align-items: baseline; gap: 8px; }
.rough-level-name { font-weight: bold; font-size: 13px; color: #e0e0e0; }
.rough-level-mult { font-size: 11px; color: #e94560; font-weight: 600; }
.rough-level-ref { font-size: 11px; color: #a0a0b0; margin-top: 2px; }
.rough-level-turf { font-size: 10px; color: #667; font-style: italic; margin-top: 2px; }
.avg-drive-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #0d1b30; border-radius: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.avg-drive-row input[type=number] { width: 70px; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 5px 8px; font-size: 13px; text-align: center; }
.avg-drive-unit { color: #a0a0b0; font-size: 12px; }
.avg-drive-help { color: #667; font-size: 10px; flex: 1 1 100%; line-height: 1.4; margin-top: 4px; }

/* Toolbar Config column: "Config" label centered like other column headers;
   "Edit" button pinned to the top-right corner as a standard toolbar button;
   readouts laid out HORIZONTALLY below so the tb-cell row stays on one line */
.tb-label.col-config { justify-content: center; position: relative; padding-right: 12px; padding-left: 12px; gap: 0; }
.tb-label.col-misc { padding-right: 12px; padding-left: 12px; gap: 6px; }
#toolbar button.target-edit-btn { background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; padding: 1px 7px; cursor: pointer; font-size: 10px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
#toolbar button.target-edit-btn:hover { background: #1a3a6e; }
/* Scoped under #toolbar to win specificity over the global #toolbar button rule */
#toolbar button.config-edit-btn { position: absolute; top: 2px; right: 8px; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; padding: 1px 7px; cursor: pointer; font-size: 10px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.3px; text-decoration: none; white-space: nowrap; }
#toolbar button.config-edit-btn:hover { background: #1a3a6e; color: #e0e0e0; }
.config-readout { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; font-size: 11px; line-height: 1.1; vertical-align: middle; align-items: baseline; }
.config-readout-row { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.cro-label { color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; }
.cro-val { color: #e0e0e0; }

/* Wide config modal — settings on top, reference tables horizontal below. Sized to fit vertically without scrolling. */
.config-modal-wide { background: #16213e; border-radius: 10px; padding: 20px 24px; width: 1280px; max-width: 96vw; max-height: 92vh; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; display: flex; flex-direction: column; overflow: hidden; }
.config-modal-wide h2 { margin: 0 0 10px 0; font-size: 18px; color: #7eb8da; }
.config-modal-wide .close-btn { float: right; background: none; border: none; color: #a0a0b0; font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.config-modal-wide .close-btn:hover { color: #e94560; }

/* Settings row (across the top) */
.cfg-settings-bar { display: flex; gap: 16px; padding: 12px 14px; background: #0d1b30; border-radius: 6px; margin-bottom: 12px; align-items: flex-start; flex-wrap: wrap; }
.cfg-setting-group { display: flex; flex-direction: column; gap: 6px; }
.cfg-setting-group.cfg-rough-group, .cfg-setting-group.cfg-firmness-group { flex: 1; min-width: 0; }
.cfg-setting-label { font-size: 10px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.cfg-setting-sub { font-weight: 400; text-transform: none; color: #7a8a9c; letter-spacing: 0; }
.cfg-setting-ref { font-weight: 400; text-transform: none; color: #a0a0b0; font-style: italic; letter-spacing: 0; font-size: 12px; }
.cfg-drive-input { display: flex; align-items: center; gap: 6px; }
.cfg-drive-input input[type=number] { width: 64px; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 5px 8px; font-size: 13px; text-align: center; }
.cfg-drive-input .cfg-drive-unit { color: #a0a0b0; font-size: 11px; }
.cfg-rough-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cfg-rough-chip { background: #0f3460; color: #ccc; border: 1px solid #1a3a6e; border-radius: 4px; padding: 6px 10px; font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1.2; }
.cfg-rough-chip:hover { border-color: #7eb8da; background: #1a3a6e; }
.cfg-rough-chip.selected { background: #2a8a6a; color: #fff; border-color: #5fd5a5; }
.cfg-rough-chip .chip-name { font-weight: 600; font-size: 12px; }
.cfg-rough-chip .chip-ref { font-size: 9px; opacity: 0.8; margin-top: 1px; }
.cfg-save-row { margin-left: auto; align-self: center; }
.cfg-save-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cfg-save-btns { display: flex; gap: 8px; }
.cfg-save-btn { background: #2a8a6a; color: #fff; border: none; border-radius: 6px; padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cfg-save-btn:hover:not(:disabled) { background: #35a07a; }
.cfg-save-btn:disabled { opacity: 0.45; cursor: not-allowed; background: #1a3a6e; }
.cfg-cancel-btn { background: none; color: #a0a0b0; border: 1px solid #1a3a6e; border-radius: 6px; padding: 7px 12px; font-size: 11px; cursor: pointer; }
.cfg-cancel-btn:hover { color: #e0e0e0; border-color: #7eb8da; }
.cfg-dirty-hint { font-size: 10px; color: #e94560; font-style: italic; }

/* Slider controls for rough / firmness */
.cfg-slider-wrap { position: relative; }
.cfg-slider-row { display: flex; align-items: center; gap: 10px; }
.cfg-slider-val { font-size: 14px; font-weight: 700; color: #e0e0e0; min-width: 20px; text-align: center; flex-shrink: 0; }
.cfg-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; background: #1a3a6e; border-radius: 3px; outline: none; cursor: pointer; }
.cfg-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #2a8a6a; border: 2px solid #5fd5a5; border-radius: 50%; cursor: grab; }
.cfg-slider::-moz-range-thumb { width: 18px; height: 18px; background: #2a8a6a; border: 2px solid #5fd5a5; border-radius: 50%; cursor: grab; }
.cfg-slider::-webkit-slider-thumb:hover { background: #35a07a; }
.cfg-slider::-moz-range-thumb:hover { background: #35a07a; }
.cfg-slider-refs { position: relative; height: 22px; margin-top: 2px; margin-right: 30px; }
.cfg-slider-tick { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.cfg-slider-tick-mark { width: 1px; height: 5px; background: #3a5a8a; }
.cfg-slider-tick-label { font-size: 8px; color: #7a8a9c; white-space: nowrap; margin-top: 1px; }

/* Reference area — 4-column grid (severity tables + charts). No scrollbar: content sized to fit. */
.cfg-ref-area { flex: 1; min-height: 0; overflow: hidden; }
.cfg-ref-area > h3 { margin: 0 0 10px 0; font-size: 13px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #1a3a6e; padding-bottom: 6px; }
.cfg-ref-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cfg-ref-section { background: #0d1b30; border-radius: 6px; padding: 10px 12px; min-width: 0; }
.cfg-ref-section.cfg-chart-wide { grid-column: span 2; }
.cfg-ref-section h4 { margin: 0 0 8px 0; font-size: 11px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cfg-ref-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cfg-ref-table th { padding: 4px 6px; text-align: left; font-weight: 600; color: #7eb8da; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid #1a3a6e; }
.cfg-ref-table td { padding: 4px 6px; border-bottom: 1px solid rgba(15,52,96,0.3); color: #ccc; vertical-align: top; }
.cfg-ref-table tr:last-child td { border-bottom: none; }
.cfg-ref-num { color: #7eb8da; font-weight: 600; width: 20px; text-align: center; }
.cfg-ref-name { color: #e0e0e0; font-weight: 600; white-space: nowrap; }
.cfg-ref-desc { color: #a0a0b0; font-size: 10px; line-height: 1.3; }

/* Reference SVG charts */
.cfg-chart { width: 100%; height: auto; display: block; }
.cfg-chart .cht-grid { stroke: rgba(26,58,110,0.5); stroke-width: 0.5; }
.cfg-chart .cht-axis { stroke: #3a5a8a; stroke-width: 1; }
.cfg-chart .cht-tick { fill: #7a8a9c; font-size: 9px; font-family: inherit; }
.cfg-chart .cht-axis-lbl { fill: #7eb8da; font-size: 9px; font-family: inherit; text-transform: uppercase; letter-spacing: 0.3px; }
.cht-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; font-size: 10px; color: #a0a0b0; }
.cht-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.cht-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Chart title row (title + PGA tag + info icon) */
.cfg-ref-section .cht-title-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 0; flex-wrap: wrap; }
.cfg-ref-section .cht-title { font-size: 11px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cht-tag { background: rgba(126,184,218,0.12); color: #7eb8da; border: 1px solid rgba(126,184,218,0.35); border-radius: 3px; padding: 1px 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.cht-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #7eb8da; color: #7eb8da; background: none; cursor: help; font-size: 9px; font-weight: 700; font-style: italic; font-family: Georgia, serif; line-height: 1; padding: 0; position: relative; margin-left: auto; }
.cht-info:hover { background: #7eb8da; color: #0d1b30; }
.cht-info .cht-info-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 5000; width: 320px; max-width: 90vw; background: rgba(13,27,48,0.98); border: 1px solid #1a3a6e; border-radius: 6px; padding: 12px 14px; font-size: 12px; font-weight: 400; font-style: normal; font-family: inherit; color: #e0e0e0; text-transform: none; letter-spacing: normal; line-height: 1.5; text-align: left; white-space: normal; word-break: break-word; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.cht-info:hover .cht-info-pop, .cht-info:focus .cht-info-pop { display: block; }

/* Ruler control (MapLibre custom control) */
.ruler-btn { background: #fff; border: none; width: 29px; height: 29px; cursor: pointer; font-size: 16px; line-height: 29px; padding: 0; display: block; }
.ruler-btn:hover { background: #f0f0f0; }
.ruler-btn.active { background: #e0f0ff; }

/* Ruler tooltip (follows cursor while measuring) */
.ruler-tooltip { position: absolute; background: rgba(0,0,0,0.85); color: #ffeb3b; padding: 4px 8px; border-radius: 3px; font-size: 12px; font-weight: bold; pointer-events: none; z-index: 1000; white-space: nowrap; display: none; }

/* Polygon popup (severity picker + delete) */
.polygon-popup { position: absolute; z-index: 1500; background: rgba(13,27,48,0.95); border: 1px solid #1a3a6e; border-radius: 8px; padding: 8px 10px; min-width: 120px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); text-align: center; }
.polygon-popup .pp-title { font-size: 11px; color: #7eb8da; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.polygon-popup .pp-sev-row { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; }
.polygon-popup .sev-btn { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #1a3a6e; background: #0f3460; color: #e0e0e0; font-size: 13px; font-weight: bold; cursor: pointer; padding: 0; }
.polygon-popup .sev-btn:hover { background: #1a3a6e; border-color: #7eb8da; }
.polygon-popup .sev-btn.active { background: #e94560; color: #fff; border-color: #e94560; }
.polygon-popup .pp-sev-name { font-size: 10px; color: #a0a0b0; margin-bottom: 6px; }
.polygon-popup .del-btn { background: #5a1a2a; color: #ff6b6b; border: 1px solid #8a2a3a; border-radius: 4px; padding: 4px 14px; cursor: pointer; font-size: 11px; font-weight: 600; width: 100%; }
.polygon-popup .del-btn:hover { background: #8a2a3a; color: #fff; }

/* Info button in toolbar label */
.info-btn { background: none; border: 1.5px solid #7eb8da; color: #7eb8da; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; font-weight: 700; font-style: italic; font-family: Georgia, serif; line-height: 13px; padding: 0; cursor: pointer; margin-left: 4px; vertical-align: middle; text-align: center; }
.info-btn:hover { background: #7eb8da; color: #0d1b30; }

/* Info tooltip (compact, anchored near toolbar) */
.info-tooltip { position: fixed; z-index: 2500; background: rgba(13,27,48,0.97); border: 1px solid #1a3a6e; border-radius: 8px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); color: #e0e0e0; width: 210px; }
.info-tooltip .it-section { font-size: 10px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 6px 0 3px; }
.info-tooltip .it-section:first-child { margin-top: 0; }
.info-tooltip .it-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 2px; }
.info-tooltip .it-table th { background: #0f3460; padding: 2px 6px; text-align: left; font-weight: 600; color: #7eb8da; font-size: 10px; }
.info-tooltip .it-table td { padding: 2px 6px; border-bottom: 1px solid rgba(15,52,96,0.3); color: #ccc; }
.info-tooltip .it-hint { font-size: 9px; color: #556; margin-top: 6px; font-style: italic; }

/* Wind compass control */
.wind-control { background: rgba(13,27,48,0.92); border-radius: 50%; padding: 2px; }
.wind-compass { position: relative; width: 100px; height: 100px; }
.wind-ring { position: absolute; top: 0; left: 0; pointer-events: none; }
.ring-circle { fill: none; stroke: #1a3a6e; stroke-width: 1.5; }
.ring-tick { stroke: #7eb8da; stroke-width: 1.5; }
.wind-arrow { stroke: #5fd5a5; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(95,213,165,0.5)); }
.wind-dir-btn { position: absolute; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; background: transparent; color: #7eb8da; border: none; border-radius: 50%; font-size: 9px; font-weight: 600; cursor: pointer; padding: 0; line-height: 22px; text-align: center; z-index: 1; transition: all 0.15s; }
.wind-dir-btn.cardinal { font-size: 11px; color: #a0c8e0; }
.wind-dir-btn:hover { background: rgba(126,184,218,0.15); color: #fff; }
.wind-dir-btn.active { background: rgba(42,138,106,0.5); color: #5fd5a5; text-shadow: 0 0 6px rgba(95,213,165,0.6); }
.wind-dir-btn.dimmed { opacity: 0.3; pointer-events: none; }
.wind-speed-input { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: 30px; height: 18px; background: rgba(15,52,96,0.8); color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 3px; font-size: 12px; font-weight: 600; text-align: center; padding: 0; box-sizing: border-box; z-index: 1; -moz-appearance: textfield; }
.wind-speed-input::-webkit-inner-spin-button, .wind-speed-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wind-speed-input:focus { outline: 1px solid #7eb8da; border-color: #7eb8da; }
.wind-unit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 50%); font-size: 8px; color: #556; z-index: 1; pointer-events: none; }

/* Auth overlay */
#authOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,15,30,0.92); z-index: 5000; display: flex; align-items: center; justify-content: center; }
.auth-modal { background: #16213e; border-radius: 10px; padding: 32px; width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); color: #e0e0e0; }
.auth-modal h2 { margin: 0 0 20px 0; font-size: 20px; color: #7eb8da; text-align: center; }
.auth-modal label { display: block; font-size: 11px; color: #a0a0b0; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.auth-modal input { width: 100%; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 6px; padding: 10px 12px; font-size: 14px; box-sizing: border-box; }
.auth-modal input:focus { outline: none; border-color: #7eb8da; }
.auth-modal input::placeholder { color: #556; }
#authSubmitBtn { width: 100%; background: #2a8a6a; color: #fff; border: none; border-radius: 6px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 20px; }
#authSubmitBtn:hover { background: #35a07a; }
#authSubmitBtn:disabled { opacity: 0.6; cursor: wait; }
.auth-error { color: #e94560; font-size: 12px; text-align: center; min-height: 18px; margin-bottom: 4px; }
.auth-toggle { text-align: center; margin-top: 16px; font-size: 12px; color: #a0a0b0; }
.auth-toggle a { color: #7eb8da; text-decoration: none; margin-left: 4px; }
.auth-toggle a:hover { text-decoration: underline; }

/* Course control header + user menu */
.cc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cc-title { font-weight: 700; font-size: 13px; color: #7eb8da; letter-spacing: 0.3px; }
.cc-user-btn { background: none; border: 1.5px solid #1a3a6e; color: #7eb8da; border-radius: 50%; width: 26px; height: 26px; padding: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cc-user-btn:hover { border-color: #7eb8da; background: rgba(126,184,218,0.1); }
.cc-section-label { font-weight: bold; font-size: 11px; color: #7eb8da; margin-bottom: 4px; }
.cc-user-menu { border-top: 1px solid #1a3a6e; margin: 0 -10px; padding: 8px 10px 0; }
.cc-user-name { font-size: 11px; color: #a0a0b0; margin-bottom: 6px; }
.cc-logout-btn { width: 100%; background: none; border: 1px solid #1a3a6e; color: #a0a0b0; border-radius: 4px; padding: 4px; font-size: 11px; cursor: pointer; margin-bottom: 4px; }
.cc-logout-btn:hover { color: #e94560; border-color: #e94560; }

/* Tab name label in toolbar */
#tabNameLabel { font-size: 10px; color: #888; }

/* Scorecard tab bar */
.sc-tab-bar { display: flex; gap: 4px; margin: 8px 0; flex-wrap: wrap; }
.sc-tab { background: #1a1a2e; border: 1px solid #444; color: #aaa; padding: 4px 12px; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 12px; }
.sc-tab.active { background: #16213e; border-bottom-color: #16213e; color: #e0e0e0; }
.sc-tab:hover { color: #fff; }
.sc-tab-del { margin-left: 6px; font-size: 14px; color: #666; cursor: pointer; line-height: 1; }
.sc-tab-del:hover { color: #e94560; }
.sc-tab-add { background: transparent; border: 1px dashed #555; color: #888; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.sc-tab-add:hover { color: #5fd5a5; border-color: #5fd5a5; }

/* Tab config summary line */
.sc-tab-config { font-size: 11px; color: #a0a0b0; margin: 2px 0 6px 0; }

/* Scorecard right column (breakdown + cheat sheet) */
.sc-right-col { display: flex; flex-direction: column; gap: 12px; }

/* Wind/elevation cheat sheet */
.cheat-panel { background: #16213e; border-radius: 10px; padding: 14px; width: 240px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; }
.cheat-panel h3 { margin: 0 0 4px 0; font-size: 13px; color: #7eb8da; white-space: nowrap; }
.cheat-panel h3 .cp-note { font-size: 10px; color: #a0a0b0; font-weight: 400; margin-left: 6px; }
.cheat-panel table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 8px; }
.cheat-panel th { background: #0f3460; padding: 2px 4px; text-align: center; font-weight: 600; color: #7eb8da; border-bottom: 1px solid #1a3a6e; font-size: 10px; }
.cheat-panel td { padding: 2px 4px; text-align: center; border-bottom: 1px solid rgba(15,52,96,0.3); white-space: nowrap; }
.cheat-panel td:first-child { text-align: left; }
.cheat-panel .cp-add { color: #e94560; font-weight: 600; }
.cheat-panel .cp-sub { color: #5fd5a5; font-weight: 600; }

/* Scorecard toolbar button */
.scorecard-tb-btn { background: #1a4a3a !important; border-color: #2a8a6a !important; color: #5fd5a5 !important; font-weight: 600; padding: 5px 14px; font-size: 13px; letter-spacing: 0.3px; }
.scorecard-tb-btn:hover { background: #2a5a4a !important; }

/* MapLibre control overrides — our custom controls already set their own background */
.maplibregl-ctrl.course-control, .maplibregl-ctrl.legend-control { background-clip: padding-box; }

/* === TARGET CONFIG OVERLAY === */
.target-modal { background: #16213e; border-radius: 10px; padding: 20px 24px; width: 1120px; max-width: 96vw; max-height: 92vh; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; display: flex; flex-direction: column; overflow: hidden; }
.target-modal h2 { margin: 0 0 12px 0; font-size: 18px; color: #7eb8da; }
.target-modal .close-btn { float: right; background: none; border: none; color: #a0a0b0; font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.target-modal .close-btn:hover { color: #e94560; }
.target-body { display: flex; gap: 16px; flex: 1; min-height: 0; }
.target-col-left { flex: 0 0 460px; display: flex; flex-direction: column; gap: 12px; }
.target-col-right { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.target-section { background: #0d1b30; border-radius: 6px; padding: 12px 14px; }
.target-section h3 { margin: 0 0 8px 0; font-size: 12px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.target-sub { font-size: 10px; color: #7a8a9c; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.target-hint { font-size: 11px; color: #7a8a9c; margin-top: 6px; }
.target-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.target-toggle input { width: 16px; height: 16px; cursor: pointer; }
.target-clubs { width: 100%; border-collapse: collapse; }
.target-clubs th { text-align: left; font-size: 10px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 6px; border-bottom: 1px solid #1a3a6e; }
.target-clubs th:last-child { width: 120px; }
.target-clubs td { padding: 4px 6px; }
.target-clubs input { width: 100%; box-sizing: border-box; background: #16213e; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 5px 7px; font-size: 13px; }
.target-clubs input:focus { border-color: #5fd5a5; outline: none; }
.target-clubs input.tgt-readonly { background: #0a1425; color: #a0b8d0; border-color: #0f3460; cursor: default; }
.target-clubs input.tgt-readonly:focus { border-color: #0f3460; }
.target-chart-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 8px; }
.target-chart-controls label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.target-inline { display: flex; align-items: center; gap: 8px; }
.target-chart-controls input[type="number"] { width: 70px; background: #16213e; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 4px 6px; font-size: 13px; }
.target-chart-controls input[type="range"] { flex: 1; height: 4px; background: #1a3a6e; border-radius: 2px; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.target-chart-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #2a8a6a; border: 2px solid #5fd5a5; border-radius: 50%; cursor: grab; }
.target-chart-controls input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #2a8a6a; border: 2px solid #5fd5a5; border-radius: 50%; cursor: grab; }
.target-chart-controls select { background: #16213e; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 4px 6px; font-size: 13px; }
.target-chart-controls span { font-size: 12px; color: #e0e0e0; text-transform: none; letter-spacing: 0; font-weight: 400; min-width: 32px; }
.target-save-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #1a3a6e; }
.target-dirty-hint { font-size: 11px; color: #e94560; font-style: italic; }
.target-save-btns { display: flex; gap: 8px; }

/* Dispersion chart SVG */
.dch-svg { width: 100%; height: auto; display: block; background: #0a1425; border-radius: 4px; }
.dch-grid { stroke: #1a3a6e; stroke-width: 0.5; }
.dch-tick { fill: #7a8a9c; font-size: 10px; }
.dch-axis-lbl { fill: #7eb8da; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.dch-funnel-fill { fill: rgba(0, 170, 255, 0.10); }
.dch-funnel-edge { stroke: rgba(0, 170, 255, 0.55); stroke-width: 1.3; fill: none; }
.dch-ellipse { fill: rgba(255, 213, 74, 0.18); stroke: #ffd54a; stroke-width: 1.5; }
.dch-ellipse-center { fill: #ffd54a; }
.dch-slider-line { stroke: #ffd54a; stroke-width: 0.5; stroke-dasharray: 2 2; opacity: 0.5; }
.dch-dim-arrow { stroke: #ffd54a; stroke-width: 1; opacity: 0.8; }
.dch-readout-bg { fill: rgba(10, 20, 37, 0.85); stroke: #1a3a6e; stroke-width: 1; }
.dch-readout { fill: #ffd54a; font-size: 11px; font-weight: 600; }
.dch-tee-marker { fill: #5fd5a5; stroke: #0a1425; stroke-width: 1; }
.dch-tee-label { fill: #5fd5a5; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }

/* === CONFIG OVERLAY XL (v1.8.9) — unified config + target + chart === */
.config-modal-xl { background: #16213e; border-radius: 10px; padding: 18px 22px; width: 1480px; max-width: 97vw; max-height: 96vh; box-shadow: 0 4px 20px rgba(0,0,0,0.5); color: #e0e0e0; display: flex; flex-direction: column; overflow: hidden; }
/* Anchor config overlay to bottom so taller modals grow upward, keeping the bottom near its original position */
.scorecard-overlay.cfg-overlay { align-items: flex-end; padding-bottom: 14px; }
.config-modal-xl h2 { margin: 0 0 10px 0; font-size: 18px; color: #7eb8da; }
.config-modal-xl .close-btn { float: right; background: none; border: none; color: #a0a0b0; font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.config-modal-xl .close-btn:hover { color: #e94560; }

.cfg-body { display: flex; gap: 16px; flex: 1; min-height: 0; }
.cfg-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow: visible; }
.cfg-chart-col { flex: 0 0 400px; display: flex; flex-direction: column; }
.cfg-main-col .cfg-settings-bar { margin-bottom: 0; }

.cfg-section { background: #0d1b30; border-radius: 6px; padding: 10px 14px; }
.cfg-section > h3 { margin: 0 0 8px 0; font-size: 12px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #1a3a6e; padding-bottom: 5px; }
.cfg-section-sub { font-size: 10px; color: #7a8a9c; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }

/* === Card system (v1.8.10): Configure vs. Reference. Top-level distinction. === */
.cfg-card { background: #0d1b30; border: 1px solid #1a3a6e; border-radius: 8px; padding: 14px 18px 16px; box-sizing: border-box; display: flex; flex-direction: column; overflow: visible; }
.cfg-card-title { margin: 0 0 12px; padding-bottom: 8px; font-size: 15px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; border-bottom: 1px solid #1a3a6e; display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.cfg-configure-card { flex: 0 0 auto; }
.cfg-reference-card { flex: 1; min-height: 0; }
.cfg-reference-card .cfg-ref-grid-compact { flex: 1; min-height: 0; }

/* Sub-sections inside a card */
.cfg-sub { margin-bottom: 14px; }
.cfg-sub:last-child { margin-bottom: 0; }
.cfg-sub-title { margin: 0 0 8px; padding: 0 0 4px; font-size: 11px; color: #9fb5cf; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; border-bottom: 1px dashed rgba(26,58,110,0.6); padding-right: 12px; }
.cfg-sub-sub { font-size: 10px; color: #7a8a9c; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; opacity: 0.9; }
.cfg-sub-mini-label { display: block; font-size: 9px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 5px; opacity: 0.85; }

/* Settings bar and chart panel look transparent when nested inside a card */
.cfg-configure-card .cfg-settings-bar { background: transparent; border-radius: 0; padding: 0; margin-bottom: 0; }
.cfg-card.cfg-chart-panel { padding: 14px 16px 16px; }
.cfg-card.cfg-chart-panel .cfg-card-title { border-bottom: 1px solid #1a3a6e; }

/* Configure card 2-column layout: drive+clubs left, sliders+prefs right */
.cfg-configure-body { display: flex; gap: 28px; }
.cfg-configure-left { flex: 0 0 280px; display: flex; flex-direction: column; gap: 14px; }
.cfg-configure-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cfg-clubs-group { display: flex; flex-direction: column; gap: 4px; }
.cfg-clubs-group .target-clubs-compact { width: 100%; }
.cfg-prefs-group { display: flex; flex-direction: column; gap: 6px; }
.cfg-prefs-group .target-toggle-sm { font-size: 12px; }

.target-toggle-sm { font-size: 11px; gap: 6px; color: #d0d0d0; }
.target-toggle-sm input { width: 13px; height: 13px; }
/* Compact clubs table */
.target-clubs-compact th { font-size: 9px; padding: 3px 5px; }
.target-clubs-compact td { padding: 3px 5px; }
.target-clubs-compact th:first-child { width: auto; }
.target-clubs-compact th:last-child { width: 70px; }
.target-clubs-compact input { padding: 3px 6px; font-size: 12px; }

/* Chart title right-hand cluster: expand button + info icon */
.cht-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cht-right .cht-info { margin-left: 0; }
.cht-expand { background: none; border: 1px solid #7eb8da; color: #7eb8da; border-radius: 3px; width: 18px; height: 18px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-family: inherit; }
.cht-expand svg { width: 10px; height: 10px; display: block; }
.cht-expand:hover { background: #7eb8da; color: #0d1b30; }

/* Info-icon variants that open the popup rightward (for section/label headers near the left edge) */
.cht-info.cht-info-section { margin-left: 6px; font-style: normal; vertical-align: middle; position: relative; top: -1px; }
.cht-info.cht-info-section .cht-info-pop { left: 0; right: auto; }
.cht-info.cht-info-setting { margin-left: 4px; vertical-align: middle; position: relative; top: -1px; width: 13px; height: 13px; font-size: 8px; }
.cht-info.cht-info-setting .cht-info-pop { left: 0; right: auto; top: calc(100% + 4px); }

/* Condensed reference grid — severity tables in a row, charts below */
.cfg-ref-grid-compact { display: flex; gap: 6px; flex-wrap: wrap; }
.cfg-ref-grid-compact .cfg-ref-section { flex: 1 1 0; min-width: 0; padding: 6px 8px; }
.cfg-ref-grid-compact .cfg-ref-section h4 { margin: 0 0 4px 0; font-size: 10px; }
.cfg-ref-grid-compact .cfg-ref-table { font-size: 9px; }
.cfg-ref-grid-compact .cfg-ref-desc { font-size: 8px; line-height: 1.2; }
.cfg-ref-grid-compact .cfg-ref-table td { padding: 2px 4px; }
.cfg-ref-grid-compact .cfg-ref-table th { padding: 2px 4px; font-size: 8px; }
.cfg-ref-charts-row { display: flex; gap: 12px; margin-top: 6px; }
.cfg-ref-charts-row .cfg-ref-section { flex: 1; min-width: 0; padding: 8px 10px; }
.cfg-ref-charts-row .cfg-chart { height: 140px; }
.cfg-ref-charts-row .cht-legend { font-size: 9px; margin-top: 3px; }

/* Chart panel (right column): composes .cfg-card plus its own flex rhythm */
.cfg-chart-panel { gap: 10px; height: 100%; }
.dch-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.dch-controls label { display: flex; flex-direction: column; gap: 3px; font-size: 9px; color: #7eb8da; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.dch-inline { display: flex; align-items: center; gap: 6px; }
.dch-controls input[type="number"] { width: 58px; background: #16213e; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.dch-controls input[type="range"] { flex: 1; height: 4px; background: #1a3a6e; border-radius: 2px; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.dch-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #2a8a6a; border: 2px solid #5fd5a5; border-radius: 50%; cursor: grab; }
.dch-controls input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #2a8a6a; border: 2px solid #5fd5a5; border-radius: 50%; cursor: grab; }
.dch-controls select { background: #16213e; color: #e0e0e0; border: 1px solid #1a3a6e; border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.dch-controls span { font-size: 11px; color: #e0e0e0; text-transform: none; letter-spacing: 0; font-weight: 400; min-width: 26px; }
#dchChartWrap { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.dch-svg-vertical { height: 100%; width: auto; max-width: 100%; }
/* H/V dispersion readout sits at the bottom-left of the chart panel */
.dch-readout-below { align-self: flex-start; padding: 4px 2px 0; font-size: 13px; color: #ffd54a; font-weight: 600; letter-spacing: 0.2px; display: inline-flex; align-items: baseline; gap: 2px; }
.dch-readout-below .dch-readout-key { font-size: 10px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; }
.dch-readout-below .dch-readout-sep { color: #3a5a8a; margin: 0 8px; }
.dch-readout-below .dch-readout-roll { font-size: 11px; color: #a0a0b0; font-weight: 400; margin-left: 6px; }

/* Footer save row */
.cfg-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #1a3a6e; }
.cfg-footer .cfg-dirty-hint { margin-right: auto; font-size: 11px; color: #e94560; font-style: italic; }

/* Chart expand popup (strokes / putting) */
.chart-popup-overlay { align-items: center; }
.chart-popup-modal { background: #16213e; border-radius: 10px; padding: 28px 32px 22px; max-width: 95vw; max-height: 92vh; position: relative; color: #e0e0e0; box-shadow: 0 4px 30px rgba(0,0,0,0.6); }
.chart-popup-modal .close-btn { position: absolute; top: 8px; right: 14px; background: none; border: none; color: #a0a0b0; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; }
.chart-popup-modal .close-btn:hover { color: #e94560; }
.chart-popup-modal .cfg-ref-section { background: transparent; padding: 0; min-width: 0; }
.chart-popup-modal .cfg-ref-section h4 { font-size: 14px; margin-bottom: 10px; }
.chart-popup-modal .cfg-chart { height: auto; max-height: 72vh; width: 100%; }
.chart-popup-modal .cht-title { font-size: 14px; }
.chart-popup-modal .cht-legend { font-size: 12px; margin-top: 10px; }
.chart-popup-modal .cfg-chart .cht-tick { font-size: 10px; }
.chart-popup-modal .cfg-chart .cht-axis-lbl { font-size: 11px; }

/* Share button in scorecard */
.share-btn { background: none; border: 1px solid #7eb8da; color: #7eb8da; border-radius: 4px; padding: 4px 12px; font-size: 11px; cursor: pointer; margin-left: auto; }
.share-btn:hover { background: #7eb8da; color: #0d1b30; }

/* Share dialog */
.share-overlay { align-items: center; }
.share-modal { background: #16213e; border-radius: 10px; padding: 22px 26px; width: 420px; max-width: 95vw; color: #e0e0e0; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.share-modal h3 { margin: 0 0 14px; font-size: 16px; color: #7eb8da; }
.share-modal .close-btn { position: absolute; top: 8px; right: 14px; background: none; border: none; color: #a0a0b0; font-size: 22px; cursor: pointer; padding: 0; line-height: 1; }
.share-modal .close-btn:hover { color: #e94560; }
.share-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.share-form input[type="email"] { background: #0d1b30; border: 1px solid #1a3a6e; border-radius: 4px; padding: 8px 10px; color: #e0e0e0; font-size: 13px; }
.share-edit-toggle { font-size: 12px; color: #ccc; display: flex; align-items: center; gap: 6px; }
.share-edit-toggle input { width: 14px; height: 14px; }
.share-submit-btn { background: #2a8a6a; border: none; color: #fff; border-radius: 4px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-weight: 600; }
.share-submit-btn:hover { background: #5fd5a5; color: #0d1b30; }
.share-status { font-size: 12px; min-height: 16px; }
.share-list h4 { margin: 0 0 8px; font-size: 12px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid #1a3a6e; padding-top: 10px; }
.share-list-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; }
.share-perm { color: #7a8a9c; font-size: 11px; }

/* Course dropdown section headers */
.cc-dd-header { font-size: 9px; color: #7eb8da; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; padding: 6px 8px 2px; opacity: 0.8; }