/* ==========================================================================
   XOTA Dashboard - kiosk stylesheet, 2560 x 720
   Values are taken verbatim from the reference mock-up.
   ========================================================================== */

:root {
    --page-top: oklch(97% 0.008 240);
    --page-bottom: oklch(95% 0.012 235);
    --surface: oklch(99% 0.004 240);
    --surface-2: oklch(97% 0.008 240);
    --surface-3: oklch(96% 0.012 240);
    --border: oklch(90% 0.014 240);
    --border-soft: oklch(92% 0.012 240);
    --border-header: oklch(89% 0.014 240);

    --text: oklch(26% 0.03 250);
    --text-strong: oklch(38% 0.03 250);
    --text-muted: oklch(52% 0.02 250);
    --text-dim: oklch(56% 0.02 250);
    --panel-title: oklch(55% 0.12 240);
    --accent: oklch(48% 0.16 250);
    --accent-grad: linear-gradient(140deg, oklch(52% 0.15 245), oklch(44% 0.15 262));

    --good: oklch(56% 0.14 150);
    --fair: oklch(70% 0.15 80);
    --poor: oklch(58% 0.19 25);
    --good-ink: oklch(50% 0.13 150);
    --fair-ink: oklch(58% 0.15 65);
    --poor-ink: oklch(55% 0.18 25);

    --cat-pota: oklch(56% 0.14 150);
    --cat-sota: oklch(63% 0.16 62);
    --cat-wwff: oklch(50% 0.11 175);
    --cat-iota: oklch(55% 0.15 250);
    --cat-dx: oklch(56% 0.19 25);
    --cat-contest: oklch(52% 0.16 300);

    --shadow-header: 0 1px 6px oklch(40% 0.03 250 / 0.06);
    --shadow-overlay: 0 3px 14px oklch(40% 0.03 250 / 0.14);
    --shadow-popup: 0 12px 34px oklch(35% 0.04 250 / 0.26);

    --font-ui: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-num: 'Outfit', 'Segoe UI', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    font-family: var(--font-ui);
}

html,
body {
    margin: 0;
    padding: 0;
    background: oklch(96% 0.008 240);
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: oklch(85% 0.02 240);
    border-radius: 3px;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.7); }
}

@keyframes markerPulse {
    0% { transform: scale(0.8); opacity: 0.75; }
    100% { transform: scale(2.8); opacity: 0; }
}

@keyframes alertIn {
    0% { transform: translateY(-12px) scale(0.97); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* --------------------------------------------------------------- shell -- */

.app {
    width: 2560px;
    height: 720px;
    background: linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 100%);
    color: var(--text);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 308px 1fr 566px 622px;
    gap: 12px;
    padding: 12px;
    min-height: 0;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.panel__title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--panel-title);
    margin-bottom: 6px;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.panel__head .panel__title {
    margin-bottom: 0;
}

.panel__note {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-dim);
}

/* -------------------------------------------------------------- header -- */

.header {
    height: 62px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-header);
    box-shadow: var(--shadow-header);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.brand__logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(145deg, oklch(56% 0.15 240), oklch(46% 0.16 255));
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand__mark {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--surface);
    border-bottom-color: transparent;
    transform: rotate(35deg);
}

.brand__call {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.4px;
    color: oklch(40% 0.09 250);
    line-height: 1.05;
}

.brand__sep {
    width: 1px;
    height: 30px;
    background: var(--border);
}

.brand__text {
    line-height: 1.15;
}

.brand__title {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--panel-title);
}

.brand__sub {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.clocks {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.clock {
    text-align: center;
    padding: 4px 14px;
    background: var(--surface-3);
    border-radius: 9px;
    min-width: 112px;
}

.clock__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    color: var(--text-muted);
}

.clock__value {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 19px;
}

.clock--utc .clock__value {
    color: oklch(38% 0.1 250);
}

.chips {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.chip {
    padding: 4px 10px;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid oklch(91% 0.014 240);
    text-align: center;
}

.chip__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    color: var(--text-muted);
}

.chip__value {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.15;
}

.chip__state {
    font-size: 9.5px;
    font-weight: 700;
    color: oklch(55% 0.02 250);
}

.is-good { color: var(--good-ink); }
.is-fair { color: var(--fair-ink); }
.is-poor { color: var(--poor-ink); }

.header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.noaa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 10px;
    background: oklch(56% 0.14 150 / 0.1);
    border: 1px solid oklch(56% 0.14 150 / 0.28);
}

.noaa[data-alert='true'] {
    background: oklch(58% 0.19 25 / 0.1);
    border-color: oklch(58% 0.19 25 / 0.3);
}

.noaa__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--good);
    animation: livePulse 1.7s ease-in-out infinite;
}

.noaa[data-alert='true'] .noaa__dot {
    background: var(--poor);
}

.noaa__body {
    line-height: 1.15;
}

.noaa__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: oklch(42% 0.1 150);
}

.noaa[data-alert='true'] .noaa__label {
    color: oklch(45% 0.17 25);
}

.noaa__text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-strong);
}

.updated {
    text-align: center;
    padding: 5px 12px;
    border-radius: 9px;
    background: var(--surface-3);
}

.updated__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.updated__value {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 14px;
}

.updated[data-stale='true'] .updated__value {
    color: var(--poor-ink);
}

/* ------------------------------------------------------------ column 1 -- */

.panel--fixed { flex: 0 0 auto; }
.panel--grow { flex: 1 1 auto; }

.station__call {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 28px;
    color: var(--accent);
    line-height: 1;
}

.station__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.station__grid {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 15px;
}

.station__qth {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.station__coords {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    margin-top: 2px;
}

.sun {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.sun__cell {
    border-radius: 9px;
    padding: 6px 10px;
}

.sun__cell--rise { background: oklch(96.5% 0.014 85); }
.sun__cell--set { background: oklch(96.5% 0.014 265); }

.sun__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    color: var(--text-muted);
}

.sun__value {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 15px;
}

.sun__cell--rise .sun__value { color: oklch(58% 0.13 70); }
.sun__cell--set .sun__value { color: oklch(50% 0.12 285); }

.weather__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weather__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(145deg, oklch(80% 0.14 85), oklch(68% 0.15 65));
}

.weather__temp {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
}

.weather__unit {
    font-size: 12px;
    color: var(--text-muted);
}

.weather__condition {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.weather__cells {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
}

.cell {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 5px 8px;
}

.cell__label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-dim);
}

.cell__value {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12.5px;
}

.radar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.radar__row {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.radar__band {
    width: 32px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 11.5px;
}

.radar__track {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: oklch(93% 0.01 240);
    overflow: hidden;
}

.radar__fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.radar__fill.is-good { background: var(--good); }
.radar__fill.is-fair { background: var(--fair); }
.radar__fill.is-poor { background: var(--poor); }

.radar__pct {
    width: 34px;
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    color: oklch(48% 0.02 250);
}

.target {
    flex: 0 0 auto;
    background: var(--accent-grad);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--surface);
}

.target__title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.target__body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rose {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid oklch(99% 0.004 240 / 0.45);
    position: relative;
    flex: 0 0 auto;
}

.rose__needle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 19px;
    background: var(--surface);
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform 0.4s ease;
}

.target__deg {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
}

.target__compass {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.9;
}

.target__rows {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}

.target__row {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
}

.target__row span:first-child { opacity: 0.8; }

/* --------------------------------------------------------- column 2 map -- */

.map-panel {
    flex: 1 1 auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    min-height: 0;
}

.map {
    position: absolute;
    inset: 0;
}

.leaflet-container {
    background: oklch(94% 0.02 240);
    font-family: var(--font-ui);
}

.leaflet-tile-pane {
    filter: saturate(0.7) brightness(1.06) contrast(0.95);
}

.leaflet-control-attribution {
    font-size: 9px;
    opacity: 0.55;
}

.leaflet-control-zoom a {
    border-radius: 6px !important;
}

.rare-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: markerPulse 1.9s ease-out infinite;
}

.map-filters {
    position: absolute;
    top: 10px;
    left: 52px;
    z-index: 600;
    display: flex;
    gap: 5px;
}

.filter {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    background: oklch(99% 0.004 240 / 0.94);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px oklch(40% 0.03 250 / 0.12);
}

.filter__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.filter__label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text-strong);
}

.filter.is-active {
    background: var(--cat-color);
    border-color: var(--cat-color);
}

.filter.is-active .filter__label {
    color: var(--surface);
}

.filter.is-active .filter__dot {
    background: var(--surface) !important;
}

.map-legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: oklch(99% 0.004 240 / 0.93);
    border-radius: 10px;
    padding: 8px 11px;
    box-shadow: var(--shadow-overlay);
}

.legend__item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.legend__label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-strong);
}

.map-toggles {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    gap: 8px;
    background: oklch(99% 0.004 240 / 0.94);
    border-radius: 10px;
    padding: 7px 10px;
    box-shadow: var(--shadow-overlay);
}

.toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 6px;
}

.toggle__track {
    width: 30px;
    height: 16px;
    border-radius: 9px;
    background: oklch(88% 0.014 240);
    position: relative;
    transition: background 0.2s;
}

.toggle.is-on .toggle__track {
    background: var(--good);
}

.toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px oklch(30% 0.02 250 / 0.35);
    transition: left 0.2s;
}

.toggle.is-on .toggle__knob {
    left: 16px;
}

.toggle__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: oklch(42% 0.03 250);
}

.spot-card {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 600;
    background: oklch(99% 0.004 240 / 0.95);
    border-radius: 10px;
    padding: 9px 12px;
    box-shadow: 0 3px 14px oklch(40% 0.03 250 / 0.16);
    width: 212px;
}

.spot-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.spot-card__call {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 16px;
}

.badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--surface);
}

.spot-card__ref {
    font-size: 11px;
    font-weight: 700;
    color: oklch(50% 0.02 250);
}

.spot-card__rule {
    height: 1px;
    background: var(--border-soft);
    margin: 7px 0;
}

.spot-card__rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
}

.spot-card__row {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
}

.spot-card__row span:first-child {
    color: oklch(54% 0.02 250);
}

/* ------------------------------------------------------------ column 3 -- */

.panel--prop { flex: 1.15 1 0; }
.panel--forecast { flex: 1 1 0; }
.panel--dx { flex: 1.5 1 0; }

.prop__head,
.prop__row {
    display: grid;
    grid-template-columns: 44px repeat(6, 1fr);
    gap: 3px;
}

.prop__head {
    margin-bottom: 3px;
}

.prop__region {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    text-align: center;
}

.prop__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prop__row {
    flex: 1;
}

.prop__band {
    display: flex;
    align-items: center;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 11.5px;
}

.prop__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.prop__cell.is-good {
    background: oklch(56% 0.14 150 / 0.16);
    color: oklch(42% 0.12 150);
}

.prop__cell.is-fair {
    background: oklch(70% 0.14 80 / 0.2);
    color: oklch(48% 0.12 70);
}

.prop__cell.is-poor {
    background: oklch(58% 0.19 25 / 0.14);
    color: oklch(50% 0.17 25);
}

.prop__legend {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.prop__legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.prop__legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.prop__legend-dot.is-good { background: var(--good); }
.prop__legend-dot.is-fair { background: var(--fair); }
.prop__legend-dot.is-poor { background: var(--poor); }

.prop__legend-label {
    font-size: 9.5px;
    font-weight: 700;
    color: oklch(50% 0.02 250);
}

.fc__head,
.fc__row {
    display: grid;
    grid-template-columns: 76px repeat(4, 1fr);
    gap: 4px;
}

.fc__head { margin-bottom: 4px; }

.fc__col {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--text-muted);
    text-align: center;
}

.fc__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc__row { flex: 1; }

.fc__label {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: oklch(46% 0.02 250);
}

.fc__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--surface-2);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12.5px;
}

.dx__head,
.dx__row {
    display: grid;
    grid-template-columns: 82px 1fr 66px 74px;
    gap: 6px;
}

.dx__head {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
}

.dx__th {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text-dim);
}

.dx__th--right { text-align: right; }

.dx__body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dx__row {
    flex: 1;
    align-items: center;
    border-bottom: 1px solid oklch(96% 0.008 240);
}

.dx__call {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 12px;
    color: oklch(46% 0.15 300);
}

.dx__dxcc {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx__dist {
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.dx__modes {
    font-size: 10px;
    font-weight: 700;
    text-align: right;
    color: var(--text-muted);
}

/* ------------------------------------------------------------ column 4 -- */

.panel--cluster { flex: 3.1 1 0; }
.panel--opps { flex: 0.95 1 0; }
.panel--feed { flex: 1.05 1 0; }

.live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--good);
    animation: livePulse 1.7s ease-in-out infinite;
}

.live__label {
    font-size: 10px;
    font-weight: 700;
    color: oklch(50% 0.02 250);
}

.cluster__head,
.spot {
    display: grid;
    grid-template-columns: 62px 44px 108px 1fr 72px 54px;
    gap: 6px;
}

.cluster__head {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
}

.cluster__th {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-dim);
}

.cluster__th--right { text-align: right; }

.cluster__list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

.spot {
    align-items: center;
    padding: 5px 4px;
    border-radius: 7px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.spot:hover {
    background: var(--surface-2);
}

.spot.is-selected {
    border-left-color: var(--cat-color);
    background: var(--surface-2);
}

.spot__freq {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 12.5px;
}

.spot__mode {
    font-size: 10.5px;
    font-weight: 800;
    color: oklch(48% 0.02 250);
}

.spot__call {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spot__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.spot__sign {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12.5px;
}

.spot__ref {
    font-size: 11px;
    font-weight: 600;
    color: oklch(42% 0.02 250);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spot__dist {
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.spot__time {
    font-size: 10.5px;
    font-weight: 600;
    color: oklch(54% 0.02 250);
    text-align: right;
}

.cluster__modes {
    display: flex;
    gap: 12px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid oklch(93% 0.012 240);
}

.modecheck {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modecheck__box {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border: 1.5px solid oklch(80% 0.014 240);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modecheck.is-on .modecheck__box {
    border-color: oklch(52% 0.15 245);
    background: oklch(52% 0.15 245);
}

.modecheck__tick {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: transparent;
}

.modecheck.is-on .modecheck__tick {
    background: var(--surface);
}

.modecheck__label {
    font-size: 10.5px;
    font-weight: 700;
    color: oklch(42% 0.02 250);
}

.stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.opp {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
}

.opp__bar {
    width: 6px;
    height: 22px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.opp__ref {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 12.5px;
    width: 88px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opp__badge {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--surface);
    padding: 2px 7px;
    border-radius: 5px;
    flex: 0 0 auto;
}

.opp__reason {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: oklch(44% 0.02 250);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opp__spots {
    font-size: 10.5px;
    font-weight: 700;
    color: oklch(54% 0.02 250);
    flex: 0 0 auto;
}

.feed__item {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
}

.feed__icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.feed__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.feed__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
}

.feed__title {
    font-size: 11.5px;
    font-weight: 700;
    flex: 0 0 auto;
}

.feed__detail {
    font-size: 10.5px;
    font-weight: 600;
    color: oklch(54% 0.02 250);
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed__time {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    flex: 0 0 auto;
}

/* -------------------------------------------------- categories & tones -- */

[data-cat='POTA'] { --cat-color: var(--cat-pota); --cat-tint: oklch(56% 0.14 150 / 0.14); }
[data-cat='SOTA'] { --cat-color: var(--cat-sota); --cat-tint: oklch(63% 0.16 62 / 0.16); }
[data-cat='WWFF'] { --cat-color: var(--cat-wwff); --cat-tint: oklch(50% 0.11 175 / 0.14); }
[data-cat='IOTA'] { --cat-color: var(--cat-iota); --cat-tint: oklch(55% 0.15 250 / 0.14); }
[data-cat='DX'] { --cat-color: var(--cat-dx); --cat-tint: oklch(56% 0.19 25 / 0.14); }
[data-cat='CONTEST'] { --cat-color: var(--cat-contest); --cat-tint: oklch(52% 0.16 300 / 0.14); }
[data-cat='TOUT'] { --cat-color: var(--accent); --cat-tint: oklch(48% 0.16 250 / 0.14); }
[data-cat='accent'] { --cat-color: oklch(52% 0.15 245); --cat-tint: oklch(52% 0.15 245 / 0.14); }
[data-cat='warn'] { --cat-color: oklch(58% 0.15 65); --cat-tint: oklch(58% 0.15 65 / 0.16); }

.cat-bg { background: var(--cat-color); }
.cat-tint { background: var(--cat-tint); }

/* -------------------------------------------------------- alert popup -- */

.alert-popup {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: 440px;
    background: var(--surface);
    border-radius: 13px;
    box-shadow: var(--shadow-popup);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    animation: alertIn 0.4s ease-out;
    border-left: 4px solid var(--poor);
}

.alert-popup[hidden] { display: none; }

.alert-popup__badge {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: oklch(58% 0.19 25 / 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 17px;
    color: oklch(56% 0.19 25);
}

.alert-popup__body { flex: 1; min-width: 0; }

.alert-popup__kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: oklch(56% 0.19 25);
}

.alert-popup__title {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-popup__detail {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-popup__side { text-align: right; flex: 0 0 auto; }

.alert-popup__dist {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 15px;
}

.alert-popup__az {
    font-size: 10.5px;
    font-weight: 700;
    color: oklch(54% 0.02 250);
}

/* ------------------------------------------------------ offline banner -- */

.offline {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 9px;
    background: oklch(58% 0.19 25 / 0.12);
    border: 1px solid oklch(58% 0.19 25 / 0.3);
    box-shadow: var(--shadow-overlay);
    font-size: 11px;
    font-weight: 700;
    color: oklch(45% 0.17 25);
}

.offline[hidden] { display: none; }

.offline__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--poor);
    animation: livePulse 1.7s ease-in-out infinite;
}