/* Theme variables. Dark is the default (matches the app's original look); [data-theme="light"] on (set by wwwroot/js/theme.js, before Blazor renders, to avoid a flash of the wrong theme) overrides them for light mode. Every color below is a variable specifically so both themes stay defined in exactly one place each - see the light block for the light equivalents. */ :root { --bg: #0f1115; --text: #e8e9ec; --muted: #9aa0ab; --muted-2: #767c88; --card-bg: #171a21; --card-border: #262a33; --input-bg: #0f1115; --input-border: #2c313c; --stat-bg: #0f1115; --accent: #3d6bff; --accent-text: #ffffff; --secondary-btn-bg: #262a33; --secondary-btn-text: #e8e9ec; --status-color: #8fd19e; --warning-color: #f2b84b; } [data-theme="light"] { --bg: #f5f6f8; --text: #1a1d23; --muted: #5b6270; --muted-2: #6b7280; --card-bg: #ffffff; --card-border: #dde1e6; --input-bg: #f5f6f8; --input-border: #ccd2d9; --stat-bg: #f0f2f5; --accent: #3d6bff; --accent-text: #ffffff; --secondary-btn-bg: #e6e9ed; --secondary-btn-text: #1a1d23; --status-color: #1f8a44; --warning-color: #a3670a; } * { box-sizing: border-box; } body { font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); margin: 0; } .page { max-width: 1500px; margin: 0 auto; padding: 24px; } .layout { display: flex; flex-direction: column; } .left-col, .right-col { display: flex; flex-direction: column; min-width: 0; } @media (min-width: 1100px) { .layout { flex-direction: row; align-items: flex-start; gap: 20px; } .left-col { flex: 0 0 460px; max-width: 460px; } .right-col { flex: 1 1 auto; min-width: 0; position: sticky; top: 24px; } } .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; /* The gap below the top bar used to come entirely from .subtitle's own margin-bottom on the left side - the right side (lang/theme/share controls) had no bottom margin of its own, so whichever column happened to be shorter (usually the controls column) ended up sitting right against whatever came next, e.g. the "Copy share link" button touching the Import card's top edge. An explicit margin here guarantees the same clearance underneath either column, regardless of which one is taller. */ margin-bottom: 24px; } .lang-switch, .theme-switch { display: flex; gap: 6px; flex-shrink: 0; margin-top: 2px; } .lang-btn, .theme-btn { background: var(--card-bg); color: var(--muted); border: 1px solid var(--card-border); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; } .lang-btn.active, .theme-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .lang-btn:hover, .theme-btn:hover { opacity: 0.9; } .top-bar-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } .share-switch { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; } .share-switch button { padding: 6px 12px; font-size: 0.8rem; } .share-status { font-size: 0.72rem; color: var(--muted-2); word-break: break-all; text-align: right; } h1 { font-size: 1.6rem; margin-bottom: 4px; } .subtitle { color: var(--muted); margin-top: 0; /* No margin-bottom here anymore - it used to be the only source of clearance below the whole top bar (see .top-bar's own margin-bottom for why that was asymmetric/insufficient on the controls side), so it's centralized there instead of stacking two separate margins. */ margin-bottom: 0; } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; } .card h2 { font-size: 1.05rem; margin: 0; color: var(--text); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; margin-bottom: 14px; user-select: none; } .collapse-icon { color: var(--muted-2); font-size: 0.85rem; flex-shrink: 0; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 0.78rem; color: var(--muted); } .field input, .field select { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text); padding: 7px 9px; font-size: 0.9rem; } .row { display: flex; gap: 10px; /* flex-end (not center): several rows pair a .field (label + input, two lines tall) with a bare button/select alongside it (e.g. the brand search row, the frequency Min/Max/Reset row, the preset row). Centering against the taller .field's *overall* height - label included - pulled those buttons up above the actual input line they're meant to line up with. flex-end aligns everyone's bottom edge instead, which lines a bare button up with the input inside a neighboring .field (both single-line-tall from the bottom), and is a no-op for rows where every child is already the same height (checkboxes, plain buttons). */ align-items: flex-end; flex-wrap: wrap; margin-top: 10px; } /* Dual-handle frequency-range slider: two overlapping elements, the standard CSS-only way to build a two-thumb slider without a JS library. Each input's own track is made invisible/unclickable (pointer-events: none) so dragging only ever grabs a thumb, never jumps to a click on the shared track; .freq-range-track/-track-fill underneath is purely a visual backdrop, not interactive. */ .freq-range { position: relative; height: 20px; margin: 0 8px; /* Sits between the Min and Max number fields in the same .row, so it needs to grow and fill whatever space is left between them (rather than sizing to its own content, like the fields do) and a sensible minimum width so the two thumbs stay easy to grab even in a narrow card. */ flex: 1 1 160px; min-width: 120px; /* .row aligns everyone's bottom edge (see .row's own comment) since that's normally what lines a bare button up with a neighboring field's input - but this slider has no label above it the way the Min/Max fields do, so bottom-aligning it would leave it sitting noticeably lower than the fields' input boxes. Centering it against the field's full label+input height instead lines the track up with roughly the middle of those inputs, which reads better next to two labeled fields than either extreme. */ align-self: center; } .freq-range-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%); background: var(--input-border); border-radius: 2px; pointer-events: none; } .freq-range-track-fill { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 2px; } .freq-range-input { position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; } .freq-range-input:focus { outline: none; } .freq-range-input::-webkit-slider-runnable-track { background: transparent; height: 20px; } .freq-range-input::-moz-range-track { background: transparent; height: 20px; border: none; } .freq-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; } .freq-range-input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; } button { background: var(--accent); border: none; color: var(--accent-text); padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; } button.secondary { background: var(--secondary-btn-bg); color: var(--secondary-btn-text); } button:hover { opacity: 0.9; } button:disabled { opacity: 0.45; cursor: not-allowed; } .status { color: var(--status-color); font-size: 0.85rem; margin-top: 6px; } .warning { color: var(--warning-color); font-size: 0.85rem; margin: 3px 0; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; /* .row (the frequency Min/Max/Reset row directly above this) has no margin-bottom of its own, and when the "0 Hz" help note isn't showing (the common case, since the default Min is 10), nothing else sits between them - so without this, the stat boxes butted straight up against the row above. */ margin-top: 16px; margin-bottom: 16px; } .stat { background: var(--stat-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 14px; } .stat .value { font-size: 1.25rem; font-weight: 600; } .stat .label { font-size: 0.75rem; color: var(--muted); } .chart-wrap { position: relative; width: 100%; height: 280px; margin-bottom: 22px; } .chart-wrap canvas { width: 100% !important; height: 100% !important; } .suggestion-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.85rem; } .suggestion-table th, .suggestion-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--card-border); } .suggestion-table th { color: var(--muted); font-weight: 500; font-size: 0.78rem; } .suggestion-table button { padding: 5px 10px; font-size: 0.8rem; } .help { font-size: 0.78rem; color: var(--muted-2); margin-top: 8px; } .table-scroll { overflow-x: auto; } .compare-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 12px 0 20px; font-size: 0.85rem; } .compare-table th, .compare-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--card-border); } .compare-table th { color: var(--muted); font-weight: 500; font-size: 0.78rem; } .compare-table input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text); padding: 5px 8px; font-size: 0.85rem; width: 100%; box-sizing: border-box; } .compare-table button { padding: 5px 10px; font-size: 0.8rem; } .compare-table td:last-child { display: flex; gap: 6px; }