@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk-wght.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-ui: "Space Grotesk", "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", "SF Mono", "Consolas", "Liberation Mono", monospace;
    --radius: 8px;
    --radius-md: 8px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-lg: 8px;
    --sidebar-width: 248px;
    --sidebar-collapsed-width: 4rem;
    --sidebar-current-width: var(--sidebar-width);
    --shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --shadow-lg: 0 16px 34px rgba(0, 0, 0, 0.24);
    --control-height: 2.42rem;
    --icon-control-size: 1.88rem;
    --transition-fast: 0.16s ease;
    --space-1: 0.3rem;
    --space-2: 0.47rem;
    --space-3: 0.66rem;
    --space-4: 0.89rem;
    --space-5: 1.13rem;
    --space-6: 1.45rem;
    --page-glow: rgba(109, 189, 128, 0.08);
    --sidebar-pattern-image: none;
    --map-mask-layer-color: rgba(0, 0, 0, 0.78);
    --traffic-color-own-beacon-tx: #76a7ff;
    --traffic-color-own-beacon-rx: #7aa9ff;
    --traffic-color-own-wx-tx: #70c784;
    --traffic-color-own-wx-rx: #75c98a;
    --traffic-color-own-message-tx: #e8913a;
    --traffic-color-own-message-rx: #f0b36e;
    --traffic-color-repeated-tx: #ff8a8a;
    --traffic-color-proxy-tx: #dc9bf0;
    --traffic-color-aprsis-rx: #53b9c8;
    --traffic-color-aprsis-to-rf-tx: #ffd84a;
    --logo-bg: transparent;
    --logo-bg-inner: #000e31;
    --logo-border: #08182e;
    --logo-text: #ffffff;
    --logo-accent: #5990e3;
    --logo-symbol: #ffffff;
    --logo-symbol-inner: #ffffff;
    --logo-gradient-from: #1b4d94;
    --logo-gradient-to: #08182e;
}

:root[data-theme="dark"] {
    --bg: #0f1311;
    --bg-layer: #141a17;
    --sidebar: rgba(16, 21, 18, 0.92);
    --panel: rgba(24, 31, 27, 0.96);
    --panel-alt: #1c2420;
    --panel-soft: #202923;
    --panel-emphasis: #253029;
    --border: #2f3d36;
    --text: #cdd6cf;
    --muted: #8d998f;
    --text-muted: #8d998f;
    --surface: #202923;
    --accent: #6dbd80;
    --accent-strong: #4e9f63;
    --accent-soft: rgba(109, 189, 128, 0.12);
    --focus-ring: rgba(109, 189, 128, 0.18);
    --hover-layer: rgba(109, 189, 128, 0.08);
    --border-hover: rgba(109, 189, 128, 0.32);
    --danger: #c97a7a;
    --success: #8bcf9b;
    --warning: #d9b565;
    --alert-icon-filter: invert(73%) sepia(30%) saturate(669%) hue-rotate(355deg) brightness(99%) contrast(89%);
    --code: rgba(255, 255, 255, 0.05);
    --icon-filter: invert(85%) sepia(7%) saturate(133%) hue-rotate(79deg) brightness(92%) contrast(87%);
    --message-bubble-tx-bg-top: color-mix(in srgb, var(--accent) 28%, transparent);
    --message-bubble-tx-bg-bottom: color-mix(in srgb, var(--accent) 16%, transparent);
    --message-bubble-tx-border: color-mix(in srgb, var(--accent) 46%, transparent);
    --map-mask-layer-color: color-mix(in srgb, #000 78%, var(--bg-layer));
    --map-mask-default-opacity: 0.2;
    --alert-detail-map-area-yellow: #ffe066;
    --alert-detail-map-area-orange: #ffad5c;
    --alert-detail-map-area-red: #ff737a;
    --alert-detail-map-area-gray: #f1f4f6;
    --alert-detail-map-area-halo: rgba(3, 8, 5, 0.9);
    --alert-detail-map-area-fill-opacity: 0.26;
    --logo-bg: transparent;
    --logo-bg-inner: color-mix(in srgb, var(--panel-emphasis) 76%, #08182e 24%);
    --logo-border: var(--logo-symbol);
    --logo-text: color-mix(in srgb, #ffffff 80%, var(--text) 20%);
    --logo-accent: color-mix(in srgb, #5990e3 38%, var(--accent) 62%);
    --logo-symbol: color-mix(in srgb, #ffffff 90%, var(--panel) 10%);
    --logo-symbol-inner: color-mix(in srgb, #ffffff 94%, var(--panel-soft) 6%);
    --logo-gradient-from: color-mix(in srgb, #1b4d94 30%, var(--accent) 70%);
    --logo-gradient-to: color-mix(in srgb, #08182e 70%, var(--bg-layer) 30%);
}

:root[data-theme="light"] {
    --bg: #d9e0d7;
    --bg-layer: #eef2ed;
    --sidebar: rgba(228, 235, 229, 0.94);
    --panel: rgba(241, 245, 241, 0.98);
    --panel-alt: #e2e9e1;
    --panel-soft: #d8e0d8;
    --panel-emphasis: #d5ddd4;
    --border: #b9c5bb;
    --text: #27312a;
    --muted: #5f6c61;
    --text-muted: #5f6c61;
    --surface: #e2e9e1;
    --accent: #2f7a45;
    --accent-strong: #215e34;
    --accent-soft: rgba(47, 122, 69, 0.1);
    --focus-ring: rgba(47, 122, 69, 0.16);
    --hover-layer: rgba(47, 122, 69, 0.06);
    --border-hover: rgba(47, 122, 69, 0.28);
    --danger: #a95d5d;
    --success: #3b7a4d;
    --warning: #8f6b1d;
    --alert-icon-filter: invert(39%) sepia(54%) saturate(656%) hue-rotate(8deg) brightness(97%) contrast(90%);
    --code: rgba(16, 26, 19, 0.07);
    --shadow: 0 10px 24px rgba(50, 68, 54, 0.08);
    --icon-filter: invert(18%) sepia(11%) saturate(555%) hue-rotate(83deg) brightness(94%) contrast(84%);
    --message-bubble-tx-bg-top: color-mix(in srgb, var(--accent) 19%, transparent);
    --message-bubble-tx-bg-bottom: color-mix(in srgb, var(--accent) 8%, transparent);
    --message-bubble-tx-border: color-mix(in srgb, var(--accent) 33%, transparent);
    --traffic-color-own-beacon-tx: #174a99;
    --traffic-color-own-beacon-rx: #345d97;
    --traffic-color-own-wx-tx: #155726;
    --traffic-color-own-wx-rx: #2d653c;
    --traffic-color-own-message-tx: #7f4206;
    --traffic-color-own-message-rx: #7d4806;
    --traffic-color-repeated-tx: #8e2525;
    --traffic-color-proxy-tx: #67317f;
    --traffic-color-aprsis-rx: #1c606c;
    --traffic-color-aprsis-to-rf-tx: #725400;
    --map-mask-layer-color: color-mix(in srgb, #fff 82%, var(--panel));
    --map-mask-default-opacity: 0.16;
    --alert-detail-map-area-yellow: #876500;
    --alert-detail-map-area-orange: #b65300;
    --alert-detail-map-area-red: #aa3038;
    --alert-detail-map-area-gray: #414c55;
    --alert-detail-map-area-halo: rgba(255, 255, 255, 0.94);
    --alert-detail-map-area-fill-opacity: 0.16;
    --logo-bg: transparent;
    --logo-bg-inner: color-mix(in srgb, var(--panel-emphasis) 68%, #08182e 32%);
    --logo-border: var(--logo-gradient-to);
    --logo-text: color-mix(in srgb, #ffffff 88%, var(--text) 12%);
    --logo-accent: color-mix(in srgb, #5990e3 42%, var(--accent) 58%);
    --logo-symbol: color-mix(in srgb, #ffffff 94%, var(--panel) 6%);
    --logo-symbol-inner: #ffffff;
    --logo-gradient-from: color-mix(in srgb, #1b4d94 24%, var(--accent) 76%);
    --logo-gradient-to: color-mix(in srgb, #08182e 56%, var(--panel-emphasis) 44%);
}

:root[data-sidebar-state="collapsed"] {
    --sidebar-current-width: var(--sidebar-collapsed-width);
}

:root[data-theme="dark"][data-palette="red-tactic"] {
    --bg: #180c0c;
    --bg-layer: #251212;
    --sidebar: rgba(26, 14, 14, 0.92);
    --panel: rgba(38, 21, 21, 0.96);
    --panel-alt: #4b2424;
    --panel-soft: #5e2e2e;
    --panel-emphasis: #723a3a;
    --border: #864747;
    --text: #f0dddd;
    --muted: #c3a0a0;
    --text-muted: #c3a0a0;
    --surface: #5e2e2e;
    --accent: #ff3b30;
    --accent-strong: #d52a21;
    --accent-soft: rgba(255, 59, 48, 0.18);
    --focus-ring: rgba(255, 59, 48, 0.25);
    --hover-layer: rgba(255, 59, 48, 0.11);
    --border-hover: rgba(255, 59, 48, 0.38);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="red-tactic"] {
    --bg: #f3e3e3;
    --bg-layer: #faeeee;
    --sidebar: rgba(241, 227, 227, 0.95);
    --panel: rgba(252, 243, 243, 0.98);
    --panel-alt: #edd8d8;
    --panel-soft: #e5cccc;
    --panel-emphasis: #ddc0c0;
    --border: #caa3a3;
    --text: #4a2626;
    --muted: #845b5b;
    --text-muted: #845b5b;
    --surface: #e9d2d2;
    --accent: #c62828;
    --accent-strong: #a31f1f;
    --accent-soft: rgba(198, 40, 40, 0.13);
    --focus-ring: rgba(198, 40, 40, 0.19);
    --hover-layer: rgba(198, 40, 40, 0.07);
    --border-hover: rgba(198, 40, 40, 0.29);
    --code: rgba(63, 19, 19, 0.08);
}

:root[data-theme="dark"][data-palette="forest-pine"] {
    --bg: #0c1512;
    --bg-layer: #111c18;
    --sidebar: rgba(15, 25, 21, 0.92);
    --panel: rgba(23, 34, 29, 0.96);
    --panel-alt: #1b2a24;
    --panel-soft: #22342d;
    --panel-emphasis: #284038;
    --border: #324a41;
    --text: #d1ddd6;
    --muted: #92a398;
    --text-muted: #92a398;
    --surface: #22342d;
    --accent: #52b788;
    --accent-strong: #40916c;
    --accent-soft: rgba(82, 183, 136, 0.14);
    --focus-ring: rgba(82, 183, 136, 0.2);
    --hover-layer: rgba(82, 183, 136, 0.09);
    --border-hover: rgba(82, 183, 136, 0.32);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="forest-pine"] {
    --bg: #e2e8e1;
    --bg-layer: #edf3ec;
    --sidebar: rgba(226, 235, 229, 0.95);
    --panel: rgba(241, 247, 242, 0.98);
    --panel-alt: #e1e9e3;
    --panel-soft: #d6e1da;
    --panel-emphasis: #cfdacf;
    --border: #aec0b5;
    --text: #23352d;
    --muted: #5a6e62;
    --text-muted: #5a6e62;
    --surface: #dfe8e1;
    --accent: #2d6a4f;
    --accent-strong: #1f4c39;
    --accent-soft: rgba(45, 106, 79, 0.1);
    --focus-ring: rgba(45, 106, 79, 0.16);
    --hover-layer: rgba(45, 106, 79, 0.06);
    --border-hover: rgba(45, 106, 79, 0.28);
    --code: rgba(11, 32, 23, 0.07);
}

:root[data-theme="dark"][data-palette="nordic-blue"] {
    --bg: #0f1722;
    --bg-layer: #141f2d;
    --sidebar: rgba(16, 25, 37, 0.92);
    --panel: rgba(24, 35, 49, 0.96);
    --panel-alt: #1f3145;
    --panel-soft: #263b52;
    --panel-emphasis: #2b4562;
    --border: #35506d;
    --text: #d8e3ef;
    --muted: #97acbf;
    --text-muted: #97acbf;
    --surface: #263b52;
    --accent: #63a4ff;
    --accent-strong: #3f82dd;
    --accent-soft: rgba(99, 164, 255, 0.14);
    --focus-ring: rgba(99, 164, 255, 0.22);
    --hover-layer: rgba(99, 164, 255, 0.09);
    --border-hover: rgba(99, 164, 255, 0.36);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="nordic-blue"] {
    --bg: #e7edf4;
    --bg-layer: #f2f6fb;
    --sidebar: rgba(230, 238, 248, 0.95);
    --panel: rgba(246, 250, 255, 0.98);
    --panel-alt: #e4edf7;
    --panel-soft: #d9e6f3;
    --panel-emphasis: #cfdeee;
    --border: #b1c4d8;
    --text: #1f2f40;
    --muted: #5c7188;
    --text-muted: #5c7188;
    --surface: #dde8f4;
    --accent: #2b6cb0;
    --accent-strong: #1f5085;
    --accent-soft: rgba(43, 108, 176, 0.11);
    --focus-ring: rgba(43, 108, 176, 0.18);
    --hover-layer: rgba(43, 108, 176, 0.06);
    --border-hover: rgba(43, 108, 176, 0.28);
    --code: rgba(16, 34, 56, 0.08);
}

:root[data-theme="dark"][data-palette="slate-cyan"] {
    --bg: #0d1718;
    --bg-layer: #122124;
    --sidebar: rgba(15, 27, 29, 0.92);
    --panel: rgba(22, 35, 37, 0.96);
    --panel-alt: #1c3033;
    --panel-soft: #234043;
    --panel-emphasis: #295054;
    --border: #356065;
    --text: #d4e5e6;
    --muted: #90aaac;
    --text-muted: #90aaac;
    --surface: #234043;
    --accent: #2dd4bf;
    --accent-strong: #18a999;
    --accent-soft: rgba(45, 212, 191, 0.14);
    --focus-ring: rgba(45, 212, 191, 0.22);
    --hover-layer: rgba(45, 212, 191, 0.09);
    --border-hover: rgba(45, 212, 191, 0.34);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="slate-cyan"] {
    --bg: #e4ecec;
    --bg-layer: #eef4f4;
    --sidebar: rgba(226, 235, 235, 0.95);
    --panel: rgba(243, 249, 249, 0.98);
    --panel-alt: #dde8e8;
    --panel-soft: #d2dfdf;
    --panel-emphasis: #cad8d8;
    --border: #abc0c0;
    --text: #1e3436;
    --muted: #567073;
    --text-muted: #567073;
    --surface: #d7e2e2;
    --accent: #0f766e;
    --accent-strong: #0a5852;
    --accent-soft: rgba(15, 118, 110, 0.1);
    --focus-ring: rgba(15, 118, 110, 0.16);
    --hover-layer: rgba(15, 118, 110, 0.06);
    --border-hover: rgba(15, 118, 110, 0.28);
    --code: rgba(14, 38, 40, 0.08);
}

:root[data-theme="dark"][data-palette="amber-graphite"] {
    --bg: #17130e;
    --bg-layer: #211a13;
    --sidebar: rgba(26, 20, 15, 0.92);
    --panel: rgba(36, 29, 22, 0.96);
    --panel-alt: #453124;
    --panel-soft: #544035;
    --panel-emphasis: #665046;
    --border: #796053;
    --text: #e7dccf;
    --muted: #b6a28e;
    --text-muted: #b6a28e;
    --surface: #544035;
    --accent: #f59e0b;
    --accent-strong: #c77d09;
    --accent-soft: rgba(245, 158, 11, 0.15);
    --focus-ring: rgba(245, 158, 11, 0.2);
    --hover-layer: rgba(245, 158, 11, 0.09);
    --border-hover: rgba(245, 158, 11, 0.35);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="amber-graphite"] {
    --bg: #efe9df;
    --bg-layer: #f6f1e9;
    --sidebar: rgba(239, 232, 220, 0.95);
    --panel: rgba(248, 244, 237, 0.98);
    --panel-alt: #e8ded2;
    --panel-soft: #ddd1c2;
    --panel-emphasis: #d4c5b4;
    --border: #c2ab95;
    --text: #3e3023;
    --muted: #7b6552;
    --text-muted: #7b6552;
    --surface: #e2d5c7;
    --accent: #a16207;
    --accent-strong: #7b4a05;
    --accent-soft: rgba(161, 98, 7, 0.12);
    --focus-ring: rgba(161, 98, 7, 0.18);
    --hover-layer: rgba(161, 98, 7, 0.06);
    --border-hover: rgba(161, 98, 7, 0.28);
    --code: rgba(55, 34, 15, 0.08);
}

:root[data-theme="dark"][data-palette="crimson-ops"] {
    --bg: #1a1114;
    --bg-layer: #24171c;
    --sidebar: rgba(28, 18, 22, 0.92);
    --panel: rgba(39, 25, 31, 0.96);
    --panel-alt: #4c2b35;
    --panel-soft: #5c3842;
    --panel-emphasis: #6e4450;
    --border: #805361;
    --text: #ecd8de;
    --muted: #bfa0aa;
    --text-muted: #bfa0aa;
    --surface: #5c3842;
    --accent: #ef476f;
    --accent-strong: #c73659;
    --accent-soft: rgba(239, 71, 111, 0.16);
    --focus-ring: rgba(239, 71, 111, 0.24);
    --hover-layer: rgba(239, 71, 111, 0.1);
    --border-hover: rgba(239, 71, 111, 0.36);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="crimson-ops"] {
    --bg: #f2e6e8;
    --bg-layer: #f8f0f2;
    --sidebar: rgba(240, 228, 232, 0.95);
    --panel: rgba(250, 244, 246, 0.98);
    --panel-alt: #eadde1;
    --panel-soft: #e0d0d6;
    --panel-emphasis: #d7c4cb;
    --border: #c4a6b0;
    --text: #432831;
    --muted: #7f5a66;
    --text-muted: #7f5a66;
    --surface: #e4d4da;
    --accent: #b4233c;
    --accent-strong: #8f1b2f;
    --accent-soft: rgba(180, 35, 60, 0.11);
    --focus-ring: rgba(180, 35, 60, 0.18);
    --hover-layer: rgba(180, 35, 60, 0.06);
    --border-hover: rgba(180, 35, 60, 0.28);
    --code: rgba(56, 18, 27, 0.08);
}

:root[data-theme="dark"][data-palette="violet-signal"] {
    --bg: #151221;
    --bg-layer: #1d1930;
    --sidebar: rgba(21, 18, 34, 0.92);
    --panel: rgba(31, 27, 47, 0.96);
    --panel-alt: #3a2f58;
    --panel-soft: #463868;
    --panel-emphasis: #54457a;
    --border: #665991;
    --text: #e3ddf0;
    --muted: #ada3c4;
    --text-muted: #ada3c4;
    --surface: #463868;
    --accent: #a78bfa;
    --accent-strong: #8669df;
    --accent-soft: rgba(167, 139, 250, 0.16);
    --focus-ring: rgba(167, 139, 250, 0.24);
    --hover-layer: rgba(167, 139, 250, 0.1);
    --border-hover: rgba(167, 139, 250, 0.35);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="violet-signal"] {
    --bg: #ece8f3;
    --bg-layer: #f4f1f9;
    --sidebar: rgba(233, 228, 243, 0.95);
    --panel: rgba(246, 244, 252, 0.98);
    --panel-alt: #e4def0;
    --panel-soft: #d8d0e8;
    --panel-emphasis: #cfc4e1;
    --border: #b7a9d0;
    --text: #342a4a;
    --muted: #6d6089;
    --text-muted: #6d6089;
    --surface: #ddd4ea;
    --accent: #6d28d9;
    --accent-strong: #531ea8;
    --accent-soft: rgba(109, 40, 217, 0.12);
    --focus-ring: rgba(109, 40, 217, 0.18);
    --hover-layer: rgba(109, 40, 217, 0.06);
    --border-hover: rgba(109, 40, 217, 0.28);
    --code: rgba(36, 20, 67, 0.08);
}

:root[data-theme="dark"][data-palette="monochrome-neutral"] {
    --bg: #101214;
    --bg-layer: #171a1d;
    --sidebar: rgba(16, 18, 20, 0.93);
    --panel: rgba(24, 28, 32, 0.96);
    --panel-alt: #2a2f35;
    --panel-soft: #343b42;
    --panel-emphasis: #414a53;
    --border: #55616b;
    --text: #dde2e7;
    --muted: #a2adb8;
    --text-muted: #a2adb8;
    --surface: #343b42;
    --accent: #9ca3af;
    --accent-strong: #7f8794;
    --accent-soft: rgba(156, 163, 175, 0.15);
    --focus-ring: rgba(156, 163, 175, 0.22);
    --hover-layer: rgba(156, 163, 175, 0.09);
    --border-hover: rgba(156, 163, 175, 0.34);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="monochrome-neutral"] {
    --bg: #e9eaeb;
    --bg-layer: #f3f4f5;
    --sidebar: rgba(231, 233, 235, 0.95);
    --panel: rgba(246, 247, 248, 0.98);
    --panel-alt: #e0e3e6;
    --panel-soft: #d5d9dd;
    --panel-emphasis: #ccd2d7;
    --border: #b1bac3;
    --text: #2c3238;
    --muted: #636d77;
    --text-muted: #636d77;
    --surface: #d9dde1;
    --accent: #4b5563;
    --accent-strong: #39414d;
    --accent-soft: rgba(75, 85, 99, 0.11);
    --focus-ring: rgba(75, 85, 99, 0.16);
    --hover-layer: rgba(75, 85, 99, 0.06);
    --border-hover: rgba(75, 85, 99, 0.28);
    --code: rgba(18, 24, 31, 0.08);
}

:root[data-theme="dark"][data-palette="copper-radar"] {
    --bg: #1a130f;
    --bg-layer: #241b14;
    --sidebar: rgba(26, 19, 15, 0.92);
    --panel: rgba(38, 28, 21, 0.96);
    --panel-alt: #4a3327;
    --panel-soft: #5a4034;
    --panel-emphasis: #6c4d3f;
    --border: #7d5c4d;
    --text: #ebddd4;
    --muted: #bba598;
    --text-muted: #bba598;
    --surface: #5a4034;
    --accent: #fb923c;
    --accent-strong: #d17124;
    --accent-soft: rgba(251, 146, 60, 0.16);
    --focus-ring: rgba(251, 146, 60, 0.22);
    --hover-layer: rgba(251, 146, 60, 0.1);
    --border-hover: rgba(251, 146, 60, 0.34);
    --code: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"][data-palette="copper-radar"] {
    --bg: #f0e6df;
    --bg-layer: #f8f1ec;
    --sidebar: rgba(239, 230, 223, 0.95);
    --panel: rgba(250, 245, 240, 0.98);
    --panel-alt: #eadccf;
    --panel-soft: #dfcfbf;
    --panel-emphasis: #d7c3b1;
    --border: #c6ac95;
    --text: #452f24;
    --muted: #7f6452;
    --text-muted: #7f6452;
    --surface: #e3d3c4;
    --accent: #b45309;
    --accent-strong: #8e4107;
    --accent-soft: rgba(180, 83, 9, 0.12);
    --focus-ring: rgba(180, 83, 9, 0.18);
    --hover-layer: rgba(180, 83, 9, 0.06);
    --border-hover: rgba(180, 83, 9, 0.28);
    --code: rgba(58, 29, 13, 0.08);
}

:root[data-theme="dark"][data-palette="orange-workshop"] {
    --bg: #0d1012;
    --bg-layer: #12171a;
    --sidebar: rgba(13, 13, 13, 0.97);
    --panel: rgba(27, 32, 36, 0.98);
    --panel-alt: #23292e;
    --panel-soft: #2c343a;
    --panel-emphasis: #364049;
    --border: #47545e;
    --text: #f1f4f6;
    --muted: #9faab2;
    --text-muted: #9faab2;
    --surface: #2c343a;
    --accent: #fa6831;
    --accent-strong: #e05d2d;
    --accent-soft: rgba(250, 104, 49, 0.16);
    --focus-ring: rgba(250, 104, 49, 0.24);
    --hover-layer: rgba(250, 104, 49, 0.1);
    --border-hover: rgba(250, 104, 49, 0.38);
    --code: rgba(255, 255, 255, 0.06);
    --page-glow: rgba(250, 104, 49, 0.03);
    --sidebar-pattern-image: url("../media/orange-workshop-honeycomb.svg");
    --logo-bg-inner: #202020;
    --logo-border: #fa6831;
    --logo-text: #f7f7f7;
    --logo-accent: #fa6831;
    --logo-symbol: #f7f7f7;
    --logo-symbol-inner: #ffffff;
    --logo-gradient-from: #fa6831;
    --logo-gradient-to: #b9471f;
}

:root[data-theme="light"][data-palette="orange-workshop"] {
    --bg: #d3d9dd;
    --bg-layer: #e8edf0;
    --sidebar: rgba(230, 233, 235, 0.97);
    --panel: rgba(248, 250, 251, 0.99);
    --panel-alt: #e9eef1;
    --panel-soft: #dce3e7;
    --panel-emphasis: #cfd8de;
    --border: #acb8c0;
    --text: #20272c;
    --muted: #5e6a72;
    --text-muted: #5e6a72;
    --surface: #dce3e7;
    --accent: #b9471f;
    --accent-strong: #923517;
    --accent-soft: rgba(250, 104, 49, 0.13);
    --focus-ring: rgba(250, 104, 49, 0.22);
    --hover-layer: rgba(250, 104, 49, 0.08);
    --border-hover: rgba(224, 93, 45, 0.34);
    --code: rgba(42, 42, 42, 0.07);
    --page-glow: rgba(250, 104, 49, 0.025);
    --sidebar-pattern-image: url("../media/orange-workshop-honeycomb.svg");
    --logo-bg-inner: #262626;
    --logo-border: #fa6831;
    --logo-text: #f7f7f7;
    --logo-accent: #fa6831;
    --logo-symbol: #f7f7f7;
    --logo-symbol-inner: #ffffff;
    --logo-gradient-from: #fa6831;
    --logo-gradient-to: #b9471f;
}

/* Extended palettes keep surfaces neutral and distribute character colors by
   role: primary for actions/links, secondary for selected navigation and
   secondary controls, and accent-2 for small decorative details. */
:root:is(
    [data-palette="pastel-mint"],
    [data-palette="pastel-sky"],
    [data-palette="pastel-lemon"],
    [data-palette="powder-blue"],
    [data-palette="coral-bay"],
    [data-palette="petrol-night"],
    [data-palette="electric-magenta"],
    [data-palette="olive-field"],
    [data-palette="desert-sand"],
    [data-palette="retro-terminal"],
    [data-palette="synthwave"],
    [data-palette="midnight-navy"],
    [data-palette="burgundy-wine"]
) {
    --bg: var(--palette-bg);
    --bg-layer: var(--palette-bg-layer);
    --sidebar: color-mix(in srgb, var(--palette-panel) 97%, transparent);
    --panel: color-mix(in srgb, var(--palette-panel) 98%, transparent);
    --panel-alt: var(--palette-surface);
    --panel-soft: color-mix(in srgb, var(--palette-surface) 74%, var(--palette-panel));
    --panel-emphasis: color-mix(in srgb, var(--palette-surface) 88%, var(--palette-border) 12%);
    --border: var(--palette-border);
    --text: var(--palette-text);
    --muted: var(--palette-muted);
    --text-muted: var(--palette-muted);
    --surface: var(--palette-surface);
    --accent: var(--palette-accent);
    --accent-strong: var(--palette-accent-strong);
    --secondary: var(--palette-secondary);
    --secondary-strong: var(--palette-secondary-strong);
    --accent-2: var(--palette-accent-2);
    --accent-soft: color-mix(in srgb, var(--palette-accent) 14%, transparent);
    --focus-ring: color-mix(in srgb, var(--palette-accent) 23%, transparent);
    --hover-layer: color-mix(in srgb, var(--palette-secondary) 6%, transparent);
    --border-hover: color-mix(in srgb, var(--palette-accent) 36%, transparent);
    --code: color-mix(in srgb, var(--palette-text) 6%, var(--palette-panel));
    --page-glow: color-mix(in srgb, var(--palette-secondary) 2%, transparent);
    --nav-selection-bg: color-mix(in srgb, var(--palette-secondary) 14%, var(--palette-panel));
    --nav-selection-border: color-mix(in srgb, var(--palette-secondary) 44%, transparent);
    --secondary-control-bg: color-mix(in srgb, var(--palette-secondary) 4%, var(--palette-surface));
    --secondary-control-border: color-mix(in srgb, var(--palette-secondary) 26%, var(--palette-border));
    --secondary-control-hover-bg: color-mix(in srgb, var(--palette-secondary) 9%, var(--palette-surface));
    --notice-bg: color-mix(in srgb, var(--palette-accent-2) 11%, transparent);
    --notice-color: color-mix(in srgb, var(--palette-accent-2) 70%, var(--palette-text));
    --notice-border: color-mix(in srgb, var(--palette-accent-2) 34%, transparent);
    --panel-heading-border: 0.18rem solid var(--palette-accent-2);
    --panel-heading-padding: 0.46rem;
}

:root[data-theme="dark"][data-palette="pastel-mint"] {
    --palette-bg: #111518; --palette-bg-layer: #171c20; --palette-panel: #1e2529;
    --palette-surface: #293136; --palette-border: #414b50; --palette-text: #e7ecea;
    --palette-muted: #a3aeaa; --palette-accent: #83dfbd; --palette-accent-strong: #5fcaa3;
    --palette-secondary: #d995ad; --palette-secondary-strong: #bd6e89; --palette-accent-2: #f0ae78;
}
:root[data-theme="light"][data-palette="pastel-mint"] {
    --palette-bg: #e9ecea; --palette-bg-layer: #f3f5f2; --palette-panel: #fbfbf8;
    --palette-surface: #e0e5e1; --palette-border: #b7c0bb; --palette-text: #29312e;
    --palette-muted: #626d68; --palette-accent: #287b62; --palette-accent-strong: #1d5c49;
    --palette-secondary: #a84768; --palette-secondary-strong: #83334e; --palette-accent-2: #b65c31;
}

:root[data-theme="dark"][data-palette="pastel-sky"] {
    --palette-bg: #10151b; --palette-bg-layer: #161d25; --palette-panel: #1d2630;
    --palette-surface: #29343f; --palette-border: #404c57; --palette-text: #e6edf2;
    --palette-muted: #a0adb6; --palette-accent: #8fd4f2; --palette-accent-strong: #62b4db;
    --palette-secondary: #f08e7f; --palette-secondary-strong: #d06458; --palette-accent-2: #e6c85e;
}
:root[data-theme="light"][data-palette="pastel-sky"] {
    --palette-bg: #e8ecef; --palette-bg-layer: #f2f5f7; --palette-panel: #fbfcfd;
    --palette-surface: #dde3e7; --palette-border: #b4c0c8; --palette-text: #29343b;
    --palette-muted: #626f77; --palette-accent: #236f98; --palette-accent-strong: #1a526f;
    --palette-secondary: #a83f34; --palette-secondary-strong: #803029; --palette-accent-2: #806b0c;
}

:root[data-theme="dark"][data-palette="pastel-lemon"] {
    --palette-bg: #151514; --palette-bg-layer: #1c1d1c; --palette-panel: #252625;
    --palette-surface: #333534; --palette-border: #4d504d; --palette-text: #efede4;
    --palette-muted: #afaca1; --palette-accent: #e7cf68; --palette-accent-strong: #c7ae3f;
    --palette-secondary: #779ee8; --palette-secondary-strong: #567bd0; --palette-accent-2: #67c2b0;
}
:root[data-theme="light"][data-palette="pastel-lemon"] {
    --palette-bg: #ecebe6; --palette-bg-layer: #f5f4ef; --palette-panel: #fdfcf8;
    --palette-surface: #e3e2dc; --palette-border: #c0beb4; --palette-text: #35342e;
    --palette-muted: #6c6a62; --palette-accent: #75620a; --palette-accent-strong: #574805;
    --palette-secondary: #345aa5; --palette-secondary-strong: #28457f; --palette-accent-2: #287568;
}

:root[data-theme="dark"][data-palette="powder-blue"] {
    --palette-bg: #121519; --palette-bg-layer: #191e23; --palette-panel: #22282e;
    --palette-surface: #303840; --palette-border: #48535d; --palette-text: #e8ebee;
    --palette-muted: #a4abb2; --palette-accent: #a4c5e7; --palette-accent-strong: #7ca3cf;
    --palette-secondary: #e08a59; --palette-secondary-strong: #c16637; --palette-accent-2: #cf6b70;
}
:root[data-theme="light"][data-palette="powder-blue"] {
    --palette-bg: #e8eaec; --palette-bg-layer: #f2f4f5; --palette-panel: #fbfcfc;
    --palette-surface: #dde1e4; --palette-border: #b7bec4; --palette-text: #30363b;
    --palette-muted: #666e75; --palette-accent: #3f6997; --palette-accent-strong: #2e5073;
    --palette-secondary: #a5461f; --palette-secondary-strong: #7f3417; --palette-accent-2: #9b3038;
}

:root[data-theme="dark"][data-palette="coral-bay"] {
    --palette-bg: #0e141b; --palette-bg-layer: #141c25; --palette-panel: #1b2631;
    --palette-surface: #273541; --palette-border: #3e4e5b; --palette-text: #ecedf0;
    --palette-muted: #a5abb0; --palette-accent: #ff8273; --palette-accent-strong: #e26255;
    --palette-secondary: #58c5c0; --palette-secondary-strong: #35a29e; --palette-accent-2: #e5c284;
}
:root[data-theme="light"][data-palette="coral-bay"] {
    --palette-bg: #e8ebed; --palette-bg-layer: #f2f5f6; --palette-panel: #fbfcfc;
    --palette-surface: #dce2e5; --palette-border: #b4bec4; --palette-text: #2c363d;
    --palette-muted: #637079; --palette-accent: #b2382f; --palette-accent-strong: #882921;
    --palette-secondary: #14756f; --palette-secondary-strong: #0e5854; --palette-accent-2: #88651a;
}

:root[data-theme="dark"][data-palette="petrol-night"] {
    --palette-bg: #101416; --palette-bg-layer: #171c1e; --palette-panel: #1f2629;
    --palette-surface: #2b3539; --palette-border: #424d51; --palette-text: #e3e9e9;
    --palette-muted: #9fa9aa; --palette-accent: #59c2b5; --palette-accent-strong: #36a296;
    --palette-secondary: #dfa84e; --palette-secondary-strong: #be8530; --palette-accent-2: #8fcde8;
}
:root[data-theme="light"][data-palette="petrol-night"] {
    --palette-bg: #e7e9e8; --palette-bg-layer: #f1f3f2; --palette-panel: #fafbfa;
    --palette-surface: #dce0de; --palette-border: #b6bdb9; --palette-text: #2d3533;
    --palette-muted: #646e6b; --palette-accent: #176963; --palette-accent-strong: #104e4a;
    --palette-secondary: #89600d; --palette-secondary-strong: #674707; --palette-accent-2: #286985;
}

:root[data-theme="dark"][data-palette="electric-magenta"] {
    --palette-bg: #0e1217; --palette-bg-layer: #15191f; --palette-panel: #1d232a;
    --palette-surface: #29323a; --palette-border: #414b54; --palette-text: #f0e8ed;
    --palette-muted: #aca2a8; --palette-accent: #f064c6; --palette-accent-strong: #db49b3;
    --palette-secondary: #42c9dc; --palette-secondary-strong: #1fa7bb; --palette-accent-2: #e8c650;
}
:root[data-theme="light"][data-palette="electric-magenta"] {
    --palette-bg: #e8eaeb; --palette-bg-layer: #f2f4f5; --palette-panel: #fbfcfc;
    --palette-surface: #dde1e3; --palette-border: #b7bec2; --palette-text: #30363a;
    --palette-muted: #666e73; --palette-accent: #a8237d; --palette-accent-strong: #7f185e;
    --palette-secondary: #087286; --palette-secondary-strong: #055666; --palette-accent-2: #7d6808;
}

:root[data-theme="dark"][data-palette="olive-field"] {
    --palette-bg: #131411; --palette-bg-layer: #1a1c18; --palette-panel: #232621;
    --palette-surface: #31352f; --palette-border: #494f47; --palette-text: #ecebe3;
    --palette-muted: #aaa99d; --palette-accent: #bdc86a; --palette-accent-strong: #9da747;
    --palette-secondary: #e3844b; --palette-secondary-strong: #c16330; --palette-accent-2: #75a9d0;
}
:root[data-theme="light"][data-palette="olive-field"] {
    --palette-bg: #e9e8e3; --palette-bg-layer: #f3f2ed; --palette-panel: #fbfaf5;
    --palette-surface: #dfded6; --palette-border: #bbb9ae; --palette-text: #34342e;
    --palette-muted: #6b6b62; --palette-accent: #687314; --palette-accent-strong: #4e560d;
    --palette-secondary: #a8451c; --palette-secondary-strong: #7d3215; --palette-accent-2: #376b93;
}

:root[data-theme="dark"][data-palette="desert-sand"] {
    --palette-bg: #171311; --palette-bg-layer: #201a17; --palette-panel: #29231f;
    --palette-surface: #39312b; --palette-border: #544a42; --palette-text: #efe7dc;
    --palette-muted: #b1a69b; --palette-accent: #54c2b2; --palette-accent-strong: #32a192;
    --palette-secondary: #e27b46; --palette-secondary-strong: #c05a2b; --palette-accent-2: #dfb96d;
}
:root[data-theme="light"][data-palette="desert-sand"] {
    --palette-bg: #eae5dc; --palette-bg-layer: #f4f0e8; --palette-panel: #fcfaf5;
    --palette-surface: #dfd8cd; --palette-border: #beb3a3; --palette-text: #39342d;
    --palette-muted: #716a60; --palette-accent: #14756b; --palette-accent-strong: #0e5850;
    --palette-secondary: #a5421d; --palette-secondary-strong: #7d3015; --palette-accent-2: #85620f;
}

:root[data-theme="dark"][data-palette="retro-terminal"] {
    --palette-bg: #090b09; --palette-bg-layer: #0e110f; --palette-panel: #151816;
    --palette-surface: #202421; --palette-border: #353b36; --palette-text: #e6e2cf;
    --palette-muted: #aaa690; --palette-accent: #67e578; --palette-accent-strong: #43c557;
    --palette-secondary: #e1aa49; --palette-secondary-strong: #bf842d; --palette-accent-2: #e9d7a8;
}
:root[data-theme="light"][data-palette="retro-terminal"] {
    --palette-bg: #e9e6dc; --palette-bg-layer: #f2efe5; --palette-panel: #faf8ef;
    --palette-surface: #dedbd1; --palette-border: #b9b5a7; --palette-text: #33352f;
    --palette-muted: #686b61; --palette-accent: #176a29; --palette-accent-strong: #0e4e1c;
    --palette-secondary: #865c0d; --palette-secondary-strong: #654407; --palette-accent-2: #6d541d;
}

:root[data-theme="dark"][data-palette="synthwave"] {
    --palette-bg: #080d19; --palette-bg-layer: #0d1322; --palette-panel: #151b2c;
    --palette-surface: #22283c; --palette-border: #373f58; --palette-text: #eee8f5;
    --palette-muted: #aaa2b6; --palette-accent: #ff5fd2; --palette-accent-strong: #e346bd;
    --palette-secondary: #42d9ec; --palette-secondary-strong: #1db5cb; --palette-accent-2: #9c73ff;
}
:root[data-theme="light"][data-palette="synthwave"] {
    --palette-bg: #e8e9ee; --palette-bg-layer: #f2f3f7; --palette-panel: #fbfbfe;
    --palette-surface: #dddee7; --palette-border: #b7b9c6; --palette-text: #30313c;
    --palette-muted: #676976; --palette-accent: #a51b7f; --palette-accent-strong: #7c125f;
    --palette-secondary: #08768a; --palette-secondary-strong: #055968; --palette-accent-2: #5f3dab;
}

:root[data-theme="dark"][data-palette="midnight-navy"] {
    --palette-bg: #070d16; --palette-bg-layer: #0b1420; --palette-panel: #111d2a;
    --palette-surface: #1b2a37; --palette-border: #2e4050; --palette-text: #e0e8ee;
    --palette-muted: #96a6b2; --palette-accent: #56bde8; --palette-accent-strong: #369bc8;
    --palette-secondary: #ee8a4d; --palette-secondary-strong: #cf672f; --palette-accent-2: #9a83e5;
}
:root[data-theme="light"][data-palette="midnight-navy"] {
    --palette-bg: #e5e9ec; --palette-bg-layer: #eff3f5; --palette-panel: #fafcfd;
    --palette-surface: #d9e0e5; --palette-border: #b0bdc5; --palette-text: #293640;
    --palette-muted: #60717c; --palette-accent: #245f96; --palette-accent-strong: #194772;
    --palette-secondary: #a5471c; --palette-secondary-strong: #7d3415; --palette-accent-2: #614791;
}

:root[data-theme="dark"][data-palette="burgundy-wine"] {
    --palette-bg: #131214; --palette-bg-layer: #1b191c; --palette-panel: #242226;
    --palette-surface: #332f35; --palette-border: #4d4750; --palette-text: #eee7e9;
    --palette-muted: #aba2a6; --palette-accent: #dc7196; --palette-accent-strong: #cb5d84;
    --palette-secondary: #55b8ad; --palette-secondary-strong: #36978d; --palette-accent-2: #d1a84f;
}
:root[data-theme="light"][data-palette="burgundy-wine"] {
    --palette-bg: #eae8e8; --palette-bg-layer: #f4f2f2; --palette-panel: #fcfbfa;
    --palette-surface: #e0dddd; --palette-border: #bdb7b8; --palette-text: #363132;
    --palette-muted: #6d6568; --palette-accent: #922d51; --palette-accent-strong: #6e203c;
    --palette-secondary: #176f67; --palette-secondary-strong: #10534d; --palette-accent-2: #7f620e;
}

/* Extended palettes share a restrained neutral canvas. These three families
   differ only by a slight temperature bias; palette identity stays in the
   action, selection, focus and decorative role colors above. */
:root[data-theme="dark"]:is(
    [data-palette="pastel-mint"]
) {
    --palette-bg: #0f1113; --palette-bg-layer: #15181b; --palette-panel: #1d2124;
    --palette-surface: #272c30; --palette-border: #40484e; --palette-text: #edf0f2;
    --palette-muted: #a1a9ae;
}

:root[data-theme="light"]:is(
    [data-palette="pastel-mint"]
) {
    --palette-bg: #e6e8e9; --palette-bg-layer: #f1f2f3; --palette-panel: #fbfbfa;
    --palette-surface: #e2e5e6; --palette-border: #b8bfc3; --palette-text: #2d3337;
    --palette-muted: #656d72;
}

:root[data-theme="dark"]:is(
    [data-palette="pastel-sky"],
    [data-palette="powder-blue"],
    [data-palette="petrol-night"],
    [data-palette="electric-magenta"],
    [data-palette="synthwave"],
    [data-palette="midnight-navy"]
) {
    --palette-bg: #0d1114; --palette-bg-layer: #13181c; --palette-panel: #1b2125;
    --palette-surface: #252c31; --palette-border: #3e484f; --palette-text: #edf1f3;
    --palette-muted: #9fa9af;
}

:root[data-theme="light"]:is(
    [data-palette="pastel-sky"],
    [data-palette="powder-blue"],
    [data-palette="petrol-night"],
    [data-palette="electric-magenta"],
    [data-palette="synthwave"],
    [data-palette="midnight-navy"]
) {
    --palette-bg: #e4e8ea; --palette-bg-layer: #eff2f4; --palette-panel: #fafbfc;
    --palette-surface: #e0e5e8; --palette-border: #b5bfc5; --palette-text: #293238;
    --palette-muted: #616d74;
}

:root[data-theme="dark"]:is(
    [data-palette="pastel-lemon"],
    [data-palette="coral-bay"],
    [data-palette="olive-field"],
    [data-palette="desert-sand"],
    [data-palette="retro-terminal"],
    [data-palette="burgundy-wine"]
) {
    --palette-bg: #111110; --palette-bg-layer: #181716; --palette-panel: #211f1e;
    --palette-surface: #2b2927; --palette-border: #46423f; --palette-text: #f0ede9;
    --palette-muted: #aaa49d;
}

:root[data-theme="light"]:is(
    [data-palette="pastel-lemon"],
    [data-palette="coral-bay"],
    [data-palette="olive-field"],
    [data-palette="desert-sand"],
    [data-palette="retro-terminal"],
    [data-palette="burgundy-wine"]
) {
    --palette-bg: #e9e7e3; --palette-bg-layer: #f3f1ed; --palette-panel: #fcfbf8;
    --palette-surface: #e5e2dc; --palette-border: #beb8af; --palette-text: #35322e;
    --palette-muted: #6d6860;
}

* {
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html,
body {
    min-height: 100%;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12.75px;
    line-height: 1.42;
    background:
        radial-gradient(circle at top left, var(--page-glow), transparent 24%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-layer) 100%);
    color: var(--text);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top, var(--accent-soft), transparent 28%),
        radial-gradient(circle at bottom right, var(--hover-layer), transparent 22%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-layer) 100%);
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow-x: hidden;
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
    transition: width var(--transition-fast), padding var(--transition-fast);
}

:root[data-palette="orange-workshop"] .sidebar::before {
    content: "";
    position: absolute;
    inset: 11.5rem 0 auto;
    width: 100%;
    height: min(46rem, calc(100vh - 11.5rem));
    background:
        radial-gradient(circle at left 42%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
        var(--sidebar-pattern-image) left top / var(--sidebar-width) auto no-repeat;
    pointer-events: none;
}

@media (min-width: 981px) {
    .sidebar {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

.brand,
.topbar-user,
.checkbox-row,
.login-topbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.brand {
    padding: 0.1rem 0.1rem var(--space-2);
}

.brand.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.brand strong {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--panel-soft), var(--panel-alt));
    border: 1px solid var(--border);
}

.brand-mark img,
.nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.86;
    filter: var(--icon-filter);
}

.sidebar-logo {
    width: 100%;
    max-width: 100%;
}

.sidebar-logo-full {
    display: block;
    width: 100%;
}

.sidebar-logo-icon {
    display: none;
    width: 2.8rem;
    height: 2.8rem;
    object-fit: contain;
}

.sidebar-logo svg,
.aprsbox-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 58px;
}

.sidebar-collapse-slot {
    position: fixed;
    left: var(--sidebar-current-width);
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    pointer-events: none;
}

.sidebar-collapse-slot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 2.4rem;
    background: linear-gradient(90deg, var(--sidebar) 0 50%, var(--bg-layer) 50% 100%);
    pointer-events: none;
    z-index: 0;
}

.sidebar-action-button.sidebar-collapse-button {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.sidebar-action-button.sidebar-collapse-button img {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 1;
    filter: var(--icon-filter);
}

.sidebar-action-button.sidebar-collapse-button:hover {
    background: transparent;
    border-color: transparent;
    transform: scale(1.12);
}

.sidebar-action-button.sidebar-collapse-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.sidebar-action-button.sidebar-collapse-button:active {
    transform: scale(1);
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.sidebar-utc-clock {
    display: grid;
    gap: 0.08rem;
    padding: 0.42rem 0.52rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
    justify-items: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sidebar-utc-clock:hover {
    border-color: var(--border-hover);
}

.sidebar-utc-clock:focus-visible {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.sidebar-utc-clock-value {
    display: grid;
    gap: 0.02rem;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-family: "Space Grotesk", "JetBrains Mono", monospace;
    justify-items: center;
    width: 100%;
}

.sidebar-utc-clock-time {
    font-size: 1.46rem;
    font-weight: 700;
    white-space: nowrap;
}

.sidebar-utc-clock-date-row {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.sidebar-utc-clock-date {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

.sidebar-utc-clock-label-inline {
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.nav-separator {
    height: 1px;
    margin: var(--space-2) 0.3rem;
    background: var(--border);
    opacity: 0.7;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.45rem 0.59rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    border: 1px solid transparent;
}

.nav-link:hover,
.nav-link.active {
    background: var(--nav-selection-bg, var(--accent-soft));
    color: var(--text);
    border-color: var(--nav-selection-border, color-mix(in srgb, var(--accent) 30%, transparent));
}

.nav-link:hover {
    transform: translateX(1px);
}

.nav-link-disabled {
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
    filter: grayscale(0.35);
}

.nav-link-disabled:hover,
.nav-link-disabled.active {
    background: transparent;
    color: var(--muted);
    border-color: transparent;
    transform: none;
}

.nav-label {
    min-width: 0;
}

.nav-count-badge {
    min-width: 1.35rem;
    margin-inline-start: auto;
    padding: 0.08rem 0.36rem;
    border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: var(--warning);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.nav-link-struck .nav-label {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.nav-link-unread {
    color: var(--warning);
}

.nav-link-unread .nav-icon {
    filter: var(--alert-icon-filter);
    opacity: 1;
}

.nav-link-unread:hover,
.nav-link-unread.active {
    color: var(--warning);
}

.sidebar-footer {
    margin-top: auto;
    padding: var(--space-2) 0.2rem 0;
    font-size: 0.76rem;
    display: grid;
    gap: var(--space-1);
    text-align: center;
    justify-items: center;
    opacity: 0.2;
}

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: 0;
    margin-block: calc(-1 * var(--space-2));
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sidebar-user-identity {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.sidebar-username {
    min-width: 0;
    max-width: 3.5rem;
    overflow: hidden;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-role-icon {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--panel-emphasis);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.sidebar-role-icon img {
    width: 0.92rem;
    height: 0.92rem;
    filter: var(--icon-filter);
}

.sidebar-logout-form {
    display: flex;
    margin: 0;
}

.sidebar-action-button {
    width: var(--icon-control-size);
    min-width: var(--icon-control-size);
    height: var(--icon-control-size);
    min-height: var(--icon-control-size);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-emphasis);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.sidebar-action-button img,
.table-icon-button img {
    width: 0.92rem;
    height: 0.92rem;
    filter: var(--icon-filter);
}

.sidebar-action-button:hover:not(:disabled) {
    background: var(--panel-alt);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.sidebar-action-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.sidebar-action-button:active {
    transform: translateY(0);
}

.sidebar-action-button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
    background: color-mix(in srgb, var(--panel-emphasis) 52%, transparent);
    border-color: var(--border);
    box-shadow: none;
    transform: none;
}

.sidebar-action-button:disabled img {
    opacity: 0.55;
    filter: grayscale(1) var(--icon-filter);
}

.sidebar-beacon-modal[hidden] {
    display: none !important;
}

.sidebar-beacon-modal {
    position: fixed;
    inset: 0;
    z-index: 1450;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.sidebar-beacon-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
}

.sidebar-beacon-dialog {
    position: relative;
    width: min(28rem, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.sidebar-beacon-dialog h2,
.sidebar-beacon-dialog p {
    margin: 0;
}

.sidebar-beacon-dialog h2 {
    font-size: 1rem;
}

.sidebar-beacon-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sidebar-beacon-status {
    margin: 0;
}

.sidebar-beacon-status.tone-success {
    color: var(--success);
}

.sidebar-beacon-status.tone-error {
    color: var(--danger);
}

@media (min-width: 981px) {
    :root[data-sidebar-state="collapsed"] .sidebar {
        width: var(--sidebar-collapsed-width);
        padding: var(--space-2);
        gap: var(--space-2);
    }

    :root[data-sidebar-state="collapsed"] .brand.sidebar-logo {
        padding-bottom: 0;
    }

    :root[data-sidebar-state="collapsed"] .sidebar-logo-full {
        display: none;
    }

    :root[data-sidebar-state="collapsed"] .sidebar-logo-icon {
        display: block;
        margin-inline: auto;
        width: 2.2rem;
        height: 2.2rem;
    }

    :root[data-sidebar-state="collapsed"] .sidebar-collapse-slot {
        width: 0;
    }

    :root[data-sidebar-state="collapsed"] .sidebar-user-panel {
        display: none;
    }

    :root[data-sidebar-state="collapsed"] .sidebar-utc-clock {
        display: none;
    }

    :root[data-sidebar-state="collapsed"] .nav-link {
        justify-content: center;
        gap: 0;
        padding: 0.42rem;
    }

    :root[data-sidebar-state="collapsed"] .nav-link:hover {
        transform: none;
    }

    :root[data-sidebar-state="collapsed"] .nav-label {
        display: none;
    }

    :root[data-sidebar-state="collapsed"] .nav-count-badge {
        display: none;
    }

    :root[data-sidebar-state="collapsed"] .nav-separator {
        width: 1.45rem;
        margin-inline: auto;
    }

    :root[data-sidebar-state="collapsed"] .sidebar-footer {
        display: none;
    }
}

.page-header-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.page-header-copy .muted {
    font-size: 0.84rem;
}

.page-header-copy h1,
.panel h2,
.login-card h1 {
    margin: 0;
}

.page-header-copy h1,
.login-card h1 {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.panel h2 {
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-left: var(--panel-heading-border, 0 solid transparent);
    padding-left: var(--panel-heading-padding, 0);
}

.role-badge,
.notice {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.24rem 0.58rem;
    background: var(--notice-bg, var(--accent-soft));
    color: var(--notice-color, var(--accent));
    border: 1px solid var(--notice-border, rgba(109, 189, 128, 0.24));
    font-size: 0.76rem;
}

.theme-toggle,
.button,
.button-secondary {
    font: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle {
    background: var(--panel-alt);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.48rem 0.86rem;
    box-shadow: var(--shadow-soft);
}

.content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.panel,
.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel {
    padding: var(--space-4);
    box-shadow: var(--shadow), var(--shadow-soft);
}

:root[data-palette="orange-workshop"] .panel,
:root[data-palette="orange-workshop"] .dashboard-activity-card {
    border-color: color-mix(in srgb, #fa6831 38%, transparent);
    box-shadow:
        var(--shadow),
        var(--shadow-soft),
        0 0 0 1px color-mix(in srgb, #fa6831 5%, transparent);
}

:root[data-palette="orange-workshop"] :is(
    .page-map .map-toolbar,
    .page-map .map-stage,
    .map-latest-overlay,
    .map-scroller-overlay,
    .traffic-toolbar,
    .traffic-stream,
    .traffic-legend-dialog,
    .station-settings-group,
    .location-picker-dialog,
    .phg-generator-dialog,
    .settings-progress-modal
) {
    border-color: color-mix(in srgb, #fa6831 38%, transparent);
}

:root[data-palette="orange-workshop"] .panel h2::before {
    content: "";
    display: inline-block;
    width: 0.2rem;
    height: 0.82rem;
    margin-right: 0.48rem;
    border-radius: 999px;
    background: #fa6831;
    box-shadow: 0 0 0.65rem rgba(250, 104, 49, 0.2);
    vertical-align: -0.06rem;
}

:root[data-palette="orange-workshop"] .sidebar {
    border-right-color: color-mix(in srgb, #fa6831 34%, transparent);
}

:root[data-theme="dark"][data-palette="orange-workshop"] .sidebar {
    --panel-alt: #282828;
    --panel-soft: #323232;
    --panel-emphasis: #3c3c3c;
    --border: #4b4b4b;
    --text: #f3f3f3;
    --muted: #a7a7a7;
    --text-muted: #a7a7a7;
    --surface: #323232;
}

:root[data-palette="orange-workshop"] .nav-link:hover {
    background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
    border-color: color-mix(in srgb, #fa6831 22%, transparent);
}

:root[data-palette="orange-workshop"] .nav-link.active {
    background: var(--panel-alt);
    border-color: color-mix(in srgb, #fa6831 48%, transparent);
    box-shadow: inset 3px 0 0 #fa6831;
}

:root[data-palette="orange-workshop"] .nav-link.active .nav-icon {
    filter: brightness(0) saturate(100%) invert(51%) sepia(97%) saturate(2869%) hue-rotate(343deg) brightness(103%) contrast(97%);
    opacity: 1;
}

:root[data-palette="orange-workshop"] .sidebar-utc-clock {
    border-color: color-mix(in srgb, #fa6831 24%, var(--border));
}

:root[data-palette="orange-workshop"] .modem-type-panel {
    border-color: color-mix(in srgb, #fa6831 24%, var(--border));
    background: var(--panel-alt);
}

.login-card {
    width: min(100%, 380px);
    padding: var(--space-5);
    box-shadow: var(--shadow), var(--shadow-soft);
}

.login-topbar {
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.login-brand {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.login-station-identity {
    font-size: 0.78rem;
    line-height: 1.2;
    color: #ff7a18;
    letter-spacing: 0.02em;
}

.login-meta {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.login-meta span {
    opacity: 0.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header,
.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.panel-header + .panel-body,
.page-header + .panel-body {
    margin-top: var(--space-4);
}

.page-header-copy,
.panel-header-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.panel-header-copy h2 + .section-lead,
.page-header-copy h1 + .section-lead {
    margin-top: 0.1rem;
}

.panel-subsection {
    display: grid;
    gap: var(--space-3);
}

.panel-subsection + .panel-subsection {
    margin-top: var(--space-4);
}

.panel-subsection-header {
    display: grid;
    gap: var(--space-1);
}

.panel-subsection-header h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.panel-body,
.stack-md {
    display: grid;
    gap: var(--space-4);
}

.stack-sm {
    display: grid;
    gap: var(--space-3);
}

.grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
    gap: var(--space-3);
}

.metric-card {
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    display: grid;
    gap: 0.18rem;
    box-shadow: var(--shadow-soft);
}

.dashboard-layout {
    display: grid;
    gap: var(--space-2);
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr);
    gap: var(--space-2);
    align-items: stretch;
}

.dashboard-overview-grid > .panel {
    height: 100%;
}

.dashboard-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr);
    gap: var(--space-2);
}

.dashboard-layout .panel {
    padding: var(--space-3);
}

.dashboard-layout .panel-body {
    gap: var(--space-2);
}

.dashboard-detail-grid-compact {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
}

.dashboard-readiness-card {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.dashboard-interfaces-card {
    grid-column: 2;
    grid-row: 1;
}

.dashboard-last-rf-card {
    grid-column: 2;
    grid-row: 2;
}

.dashboard-events-card {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.dashboard-hero-panel .panel-body {
    padding: 0;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.48rem;
    align-items: center;
    padding: 0.56rem 0.66rem;
    border-radius: var(--radius-md);
}

.dashboard-hero-good {
    background: linear-gradient(135deg, rgba(86, 158, 104, 0.22), rgba(86, 158, 104, 0.08));
}

.dashboard-hero-neutral {
    background: linear-gradient(135deg, rgba(214, 181, 106, 0.22), rgba(214, 181, 106, 0.08));
}

.dashboard-hero-caution {
    background: linear-gradient(135deg, rgba(201, 122, 122, 0.2), rgba(201, 122, 122, 0.08));
}

.dashboard-hero-copy {
    display: grid;
    gap: 0.32rem;
}

.dashboard-hero-copy h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
}

.dashboard-hero-copy p {
    margin: 0;
    color: var(--text);
    max-width: 54ch;
    font-size: 0.82rem;
    line-height: 1.3;
}

.dashboard-hero-status {
    width: fit-content;
}

.dashboard-hero-runtime-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.16rem;
    min-width: 12.4rem;
}

.dashboard-hero-runtime-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.78rem;
}

.dashboard-hero-runtime-row dt {
    margin: 0;
    color: var(--muted);
}

.dashboard-hero-runtime-row dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text);
    font-weight: 600;
}

.dashboard-inline-metrics {
    list-style: none;
    margin: 0;
    padding: 0 0.66rem 0.66rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    gap: 0.34rem 0.58rem;
}

.dashboard-inline-metric {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
}

.dashboard-inline-metric-label {
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.15;
}

.dashboard-inline-metric-value {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 600;
}

.dashboard-status-ok {
    color: var(--success);
}

.dashboard-status-error {
    color: var(--danger);
}

.dashboard-status-warn {
    color: var(--warning);
}

.dashboard-indicator {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 0.48rem;
    background: var(--muted);
}

.dashboard-indicator-ok {
    background: var(--success);
}

.dashboard-indicator-error {
    background: var(--danger);
}

.dashboard-indicator-warn {
    background: var(--warning);
}

.dashboard-indicator-neutral {
    background: color-mix(in srgb, var(--muted) 72%, transparent);
}

.dashboard-readiness-groups {
    display: grid;
    gap: 0.5rem;
}

.dashboard-readiness-group {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.dashboard-readiness-group-primary + .dashboard-readiness-group-secondary {
    border-top: 1px solid var(--border);
    padding-top: 0.46rem;
}

.dashboard-readiness-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.dashboard-readiness-group-header h3 {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.2;
}

.dashboard-readiness-group-secondary h3 {
    color: var(--muted);
    font-size: 0.8rem;
}

.dashboard-readiness-state {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

.dashboard-kv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.dashboard-kv-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    padding: 0.06rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}

.dashboard-kv-list li:last-child {
    border-bottom: 0;
}

.dashboard-kv-key {
    color: var(--muted);
    font-size: 0.78rem;
    min-width: 0;
}

.dashboard-kv-value {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    text-align: right;
    min-width: 0;
}

.dashboard-row-muted .dashboard-kv-key,
.dashboard-row-muted .dashboard-kv-value {
    color: var(--muted);
}

.dashboard-check-note {
    margin-top: 0.16rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dashboard-rf-kv-list .dashboard-kv-value {
    font-weight: 500;
}

.dashboard-event-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
}

.dashboard-event-feed li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: baseline;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
    padding: 0.16rem 0;
}

.dashboard-event-feed li:last-child {
    border-bottom: 0;
}

.dashboard-event-time {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

.dashboard-event-message {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.dashboard-subtle-link {
    color: var(--muted);
    font-size: 0.74rem;
    text-decoration: none;
}

.dashboard-subtle-link:hover,
.dashboard-subtle-link:focus-visible {
    color: var(--text);
    text-decoration: underline;
}

.statistics-toolbar-panel .panel-body {
    gap: var(--space-2);
}

.dashboard-activity-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-activity-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-activity-range-label {
    display: inline;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.dashboard-activity-controls select {
    width: auto;
    min-width: 6.2rem;
}

.dashboard-activity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.statistics-page {
    display: grid;
    gap: var(--space-3);
}

.statistics-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.statistics-secondary-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.statistics-devices-card {
    align-content: start;
}

.statistics-users-card {
    align-content: start;
}

.statistics-direct-heard-header {
    flex-wrap: nowrap;
    align-items: baseline;
}

.statistics-card-note {
    margin: 0;
    white-space: nowrap;
}

.statistics-devices-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
}

.statistics-devices-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.28rem;
    font-size: 0.82rem;
}

.statistics-list-index {
    width: 1.8rem;
    flex: 0 0 1.8rem;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.statistics-devices-list-label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.statistics-devices-color-marker {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
    flex: 0 0 auto;
}

.statistics-devices-list-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.statistics-devices-list-value {
    white-space: nowrap;
    color: var(--muted);
}

.statistics-users-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
}

.statistics-users-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.28rem;
    font-size: 0.82rem;
}

.statistics-users-list-label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.statistics-users-list-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.statistics-users-list-value {
    white-space: nowrap;
    color: var(--muted);
}

.statistics-users-list-item-placeholder {
    opacity: 0.34;
}

.statistics-users-list-item-placeholder .statistics-devices-color-marker {
    opacity: 0;
}

.dashboard-activity-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
    padding: 0.44rem 0.52rem;
    display: grid;
    gap: 0.28rem;
}

.dashboard-activity-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dashboard-activity-card-header h3 {
    margin: 0;
    font-size: 0.92rem;
}

.dashboard-activity-canvas {
    position: relative;
    min-height: 112px;
}

.dashboard-activity-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    cursor: crosshair;
}

.dashboard-activity-canvas canvas.dashboard-activity-zooming {
    cursor: grabbing;
}

.dashboard-activity-zoom-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    display: none;
    pointer-events: none;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
}

.dashboard-activity-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.dashboard-activity-totals strong {
    color: var(--text);
    font-weight: 600;
}

.metric-value {
    display: block;
    font-size: 1.18rem;
    font-weight: 600;
}

.metric-label,
.muted,
.section-lead,
.simple-list,
.details-grid dt {
    color: var(--muted);
}

.section-lead {
    margin: 0;
    max-width: 72ch;
    overflow-wrap: anywhere;
}

.dashboard-band-panel .panel-body {
    gap: var(--space-2);
    height: 100%;
    align-content: start;
}

@media (max-width: 1480px) {
    .dashboard-readiness-card,
    .dashboard-interfaces-card,
    .dashboard-last-rf-card,
    .dashboard-events-card {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 1180px) {
    .dashboard-overview-grid,
    .dashboard-detail-grid,
    .statistics-priority-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-readiness-card,
    .dashboard-interfaces-card,
    .dashboard-last-rf-card,
    .dashboard-events-card {
        grid-column: auto;
        grid-row: auto;
    }
}

.dashboard-v2 {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-3);
    width: 100%;
}

.dashboard-v2 .panel {
    padding: var(--space-3);
}

.dashboard-v2 .panel-body {
    gap: var(--space-3);
}

.dashboard-v2-top-grid,
.dashboard-v2-middle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr);
    gap: var(--space-3);
    align-items: stretch;
}

.dashboard-v2-top-grid.has-band-indicators {
    grid-template-columns: minmax(0, 1.65fr) auto minmax(340px, 1fr);
}

.dashboard-v2-top-grid > .panel,
.dashboard-v2-middle-grid > .panel {
    min-width: 0;
    height: 100%;
}

@media (min-width: 1181px) and (min-height: 700px) {
    .dashboard-v2 {
        height: calc(100dvh - 1.78rem);
    }

    .dashboard-v2-middle-grid,
    .dashboard-v2-middle-grid > .panel,
    .dashboard-v2-middle-grid > .panel > .panel-body {
        min-height: 0;
    }

    .dashboard-v2-activity-panel .panel-body {
        grid-template-rows: auto auto minmax(8rem, 1fr) auto auto auto;
        height: 100%;
    }

    .dashboard-v2 .dashboard-v2-activity-panel .dashboard-activity-canvas {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .dashboard-v2-readiness-panel-prominent .panel-body {
        max-height: 100%;
        overflow: auto;
    }
}

.dashboard-v2-station-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--panel) 96%, var(--accent) 4%),
            color-mix(in srgb, var(--panel) 84%, var(--accent) 16%)
        );
}

.dashboard-v2-station-panel::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.68;
    background:
        radial-gradient(
            circle at 74% 43%,
            color-mix(in srgb, var(--accent) 24%, transparent) 0 2px,
            transparent 3px 100%
        ),
        repeating-radial-gradient(
            circle at 74% 43%,
            transparent 0 21px,
            color-mix(in srgb, var(--accent) 17%, transparent) 22px 23px,
            transparent 24px 42px
        );
    mask-image: linear-gradient(90deg, transparent 23%, #000 61%);
}

.dashboard-v2-station-panel .panel-body {
    position: relative;
}

.dashboard-v2-band-indicators {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
}

.dashboard-v2-band-indicator {
    --dashboard-band-color: var(--muted);
    width: 6.7rem;
    min-width: 6.7rem;
    padding: 0.72rem 0.62rem;
    display: grid;
    grid-template-rows: auto auto minmax(7rem, 1fr) minmax(2.1rem, auto);
    justify-items: center;
    align-items: start;
    gap: 0.3rem;
    color: var(--text);
    text-align: center;
    text-decoration: none;
    border-color: color-mix(in srgb, var(--dashboard-band-color) 42%, var(--border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dashboard-band-color) 13%, var(--panel)) 0%,
        var(--panel) 48%
    );
    transition: border-color 140ms ease, transform 140ms ease;
}

.dashboard-v2-band-indicator:hover {
    border-color: color-mix(in srgb, var(--dashboard-band-color) 72%, var(--border));
    transform: translateY(-1px);
}

.dashboard-v2-band-indicator-excellent {
    --dashboard-band-color: #2ce06a;
}

.dashboard-v2-band-indicator-good {
    --dashboard-band-color: #59bd77;
}

.dashboard-v2-band-indicator-noticeable {
    --dashboard-band-color: #74ad87;
}

.dashboard-v2-band-indicator-neutral {
    --dashboard-band-color: #7290ad;
}

.dashboard-v2-band-indicator-caution,
.dashboard-v2-band-indicator-learning {
    --dashboard-band-color: #d59a62;
}

.dashboard-v2-band-indicator-bad {
    --dashboard-band-color: #c97a7a;
}

.dashboard-v2-band-name {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-v2-band-value {
    color: var(--dashboard-band-color);
    font-size: 1.25rem;
    line-height: 1;
}

.dashboard-v2-band-scale {
    width: 100%;
    align-self: stretch;
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 0.18rem;
}

.dashboard-v2-band-step {
    position: relative;
    min-height: 0.84rem;
    border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--muted) 9%, transparent);
}

.dashboard-v2-band-step small {
    position: absolute;
    inset: 50% auto auto 50%;
    color: color-mix(in srgb, var(--muted) 65%, transparent);
    font-size: 0.5rem;
    font-weight: 750;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.dashboard-v2-band-step.is-active {
    border-color: color-mix(in srgb, var(--dashboard-band-color) 78%, white 8%);
    background: color-mix(in srgb, var(--dashboard-band-color) 64%, transparent);
    box-shadow: 0 0 0.72rem color-mix(in srgb, var(--dashboard-band-color) 28%, transparent);
}

.dashboard-v2-band-step.is-active small {
    color: var(--text);
}

.dashboard-v2-band-label {
    align-self: center;
    display: -webkit-box;
    overflow: hidden;
    color: color-mix(in srgb, var(--dashboard-band-color) 76%, var(--text));
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-v2-station-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr);
    align-items: center;
    min-height: 7.6rem;
}

.dashboard-v2-station-copy {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: 0.22rem;
    min-width: 0;
}

.dashboard-v2-eyebrow {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dashboard-v2-health {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.dashboard-v2-health-ok {
    color: var(--success);
}

.dashboard-v2-health-warn {
    color: var(--warning);
}

.dashboard-v2-health-error {
    color: var(--danger);
}

.dashboard-v2-health-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0.9rem currentColor;
}

.dashboard-v2-station-identity {
    display: grid;
    gap: 0.08rem;
    margin-top: 0.38rem;
    padding-top: 0.38rem;
    min-width: min(15rem, 100%);
    border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.dashboard-v2-station-identity span {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-v2-station-identity strong {
    font-size: 1.08rem;
    letter-spacing: 0.02em;
}

.dashboard-v2-radio-visual {
    position: relative;
    align-self: stretch;
    min-height: 6.8rem;
    pointer-events: none;
}

.dashboard-v2-radio-visual img {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0.2rem;
    width: clamp(4.2rem, 7vw, 5.8rem);
    height: clamp(4.2rem, 7vw, 5.8rem);
    opacity: 0.72;
    filter: var(--icon-filter);
    transform: translateX(-50%);
}

.dashboard-v2-radio-pulse {
    position: absolute;
    left: 50%;
    bottom: 2.4rem;
    border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
    border-radius: 50%;
    transform: translate(-50%, 50%);
}

.dashboard-v2-radio-pulse-one {
    width: 4.8rem;
    height: 4.8rem;
}

.dashboard-v2-radio-pulse-two {
    width: 8rem;
    height: 8rem;
    opacity: 0.72;
}

.dashboard-v2-radio-pulse-three {
    width: 11.2rem;
    height: 11.2rem;
    opacity: 0.4;
}

.dashboard-v2-link-statuses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
}

.dashboard-v2-link-status {
    --dashboard-link-color: var(--muted);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.52rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-link-color) 28%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--dashboard-link-color) 7%, var(--panel-alt));
    min-width: 0;
}

.dashboard-v2-link-status-ok {
    --dashboard-link-color: var(--success);
}

.dashboard-v2-link-status-warn {
    --dashboard-link-color: var(--warning);
}

.dashboard-v2-link-status-error {
    --dashboard-link-color: var(--danger);
}

.dashboard-v2-link-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-link-color) 16%, transparent);
}

.dashboard-v2-link-icon img {
    width: 1.12rem;
    height: 1.12rem;
    filter: var(--icon-filter);
}

.dashboard-v2-link-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.dashboard-v2-link-label {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.dashboard-v2-link-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.dashboard-v2-state-ok {
    color: var(--success);
}

.dashboard-v2-state-warn {
    color: var(--warning);
}

.dashboard-v2-state-partial {
    color: #b98218;
}

.dashboard-v2-state-error {
    color: var(--danger);
}

.dashboard-v2-state-neutral {
    color: var(--muted);
}

.dashboard-v2-status-icon {
    display: inline-block;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.dashboard-v2-status-icon-ok {
    -webkit-mask-image: url("../icons/checkbox-marked-circle-outline.svg");
    mask-image: url("../icons/checkbox-marked-circle-outline.svg");
}

.dashboard-v2-status-icon-warn,
.dashboard-v2-status-icon-partial {
    -webkit-mask-image: url("../icons/alert.svg");
    mask-image: url("../icons/alert.svg");
}

.dashboard-v2-status-icon-error {
    -webkit-mask-image: url("../icons/alert-octagon-outline.svg");
    mask-image: url("../icons/alert-octagon-outline.svg");
}

.dashboard-v2-status-icon-neutral {
    -webkit-mask-image: url("../icons/minus-circle-multiple-outline.svg");
    mask-image: url("../icons/minus-circle-multiple-outline.svg");
}

.dashboard-v2-network-panel .panel-body {
    align-content: start;
}

.dashboard-v2-network-grid {
    margin: 0;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 7%, var(--panel-alt));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem 0.9rem;
}

.dashboard-v2-network-grid > div {
    min-width: 0;
}

.dashboard-v2-network-grid dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.dashboard-v2-network-grid dd {
    margin: 0.1rem 0 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    font-weight: 650;
}

.dashboard-v2-network-grid dd small {
    margin-left: 0.32rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.dashboard-v2-network-grid a {
    color: var(--accent);
}

.dashboard-v2-network-url {
    grid-column: 1 / -1;
}

.dashboard-v2-band-summary {
    padding: 0.72rem 0.78rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: grid;
    gap: 0.4rem;
}

.dashboard-v2-band-current {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.dashboard-v2-band-index {
    font-size: 1.72rem;
    line-height: 1;
}

.dashboard-v2-band-label {
    font-size: 0.94rem;
}

.dashboard-v2-band-summary p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

.dashboard-v2-band-summary-good,
.dashboard-v2-band-summary-excellent {
    background: color-mix(in srgb, var(--success) 12%, var(--panel-alt));
}

.dashboard-v2-band-summary-neutral,
.dashboard-v2-band-summary-noticeable {
    background: color-mix(in srgb, var(--accent) 10%, var(--panel-alt));
}

.dashboard-v2-band-summary-caution,
.dashboard-v2-band-summary-busy,
.dashboard-v2-band-summary-learning {
    background: color-mix(in srgb, var(--warning) 10%, var(--panel-alt));
}

.dashboard-v2-band-summary-bad {
    background: color-mix(in srgb, var(--danger) 10%, var(--panel-alt));
}

.dashboard-v2-band-meter {
    list-style: none;
    margin: 0.22rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.32rem;
}

.dashboard-v2-band-meter li {
    --dashboard-band-level: var(--muted);
    position: relative;
    display: grid;
    gap: 0.3rem;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 700;
    text-align: center;
}

.dashboard-v2-band-meter li:nth-child(1) {
    --dashboard-band-level: #c97a7a;
}

.dashboard-v2-band-meter li:nth-child(2) {
    --dashboard-band-level: #d59a62;
}

.dashboard-v2-band-meter li:nth-child(3) {
    --dashboard-band-level: #7290ad;
}

.dashboard-v2-band-meter li:nth-child(4) {
    --dashboard-band-level: #74ad87;
}

.dashboard-v2-band-meter li:nth-child(5) {
    --dashboard-band-level: #59bd77;
}

.dashboard-v2-band-meter li:nth-child(6) {
    --dashboard-band-level: #2ce06a;
}

.dashboard-v2-band-meter-bar {
    display: block;
    height: 0.56rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-band-level) 46%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-band-level) 17%, transparent);
    opacity: 0.5;
}

.dashboard-v2-band-meter .is-reached .dashboard-v2-band-meter-bar {
    background: color-mix(in srgb, var(--dashboard-band-level) 60%, var(--panel-alt));
    opacity: 0.72;
}

.dashboard-v2-band-meter .is-current {
    color: var(--text);
}

.dashboard-v2-band-meter .is-current .dashboard-v2-band-meter-bar {
    height: 0.78rem;
    margin-top: -0.11rem;
    border: 2px solid color-mix(in srgb, var(--text) 84%, var(--dashboard-band-level));
    background: var(--dashboard-band-level);
    box-shadow:
        0 0 0 0.18rem color-mix(in srgb, var(--dashboard-band-level) 24%, transparent),
        0 0 1rem color-mix(in srgb, var(--dashboard-band-level) 66%, transparent);
    opacity: 1;
}

.dashboard-v2-band-meter-level {
    justify-self: center;
    min-width: 2rem;
    padding: 0.08rem 0.25rem;
    border-radius: 999px;
}

.dashboard-v2-band-meter .is-current .dashboard-v2-band-meter-level {
    color: var(--text);
    background: color-mix(in srgb, var(--dashboard-band-level) 28%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-band-level) 50%, transparent);
}

.dashboard-v2-band-meter-empty .dashboard-v2-band-meter-bar {
    opacity: 0.24;
}

.dashboard-v2-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
}

.dashboard-v2-kpi-tile {
    --dashboard-kpi-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--dashboard-kpi-color) 9%, var(--panel-alt)),
            var(--panel-alt) 62%
        );
    box-shadow: var(--shadow-soft);
    padding: 0.62rem 0.68rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.58rem;
    min-height: 4.7rem;
    min-width: 0;
}

.dashboard-v2-kpi-tile-blue {
    --dashboard-kpi-color: #5794e8;
}

.dashboard-v2-kpi-tile-cyan {
    --dashboard-kpi-color: #4bb8d4;
}

.dashboard-v2-kpi-tile-violet {
    --dashboard-kpi-color: #9278d8;
}

.dashboard-v2-kpi-tile-green {
    --dashboard-kpi-color: var(--success);
}

.dashboard-v2-kpi-tile-amber {
    --dashboard-kpi-color: var(--warning);
}

.dashboard-v2-kpi-tile-red {
    --dashboard-kpi-color: var(--danger);
}

.dashboard-v2-kpi-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-kpi-color) 36%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-kpi-color) 17%, transparent);
    box-shadow: 0 0 1rem color-mix(in srgb, var(--dashboard-kpi-color) 11%, transparent);
}

.dashboard-v2-kpi-icon img,
.dashboard-v2-section-icon img {
    width: 1.2rem;
    height: 1.2rem;
    filter: var(--icon-filter);
}

.dashboard-v2-kpi-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.dashboard-v2-kpi-label {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.2;
}

.dashboard-v2-kpi-value {
    font-size: 1.15rem;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.dashboard-v2-kpi-meta {
    color: color-mix(in srgb, var(--dashboard-kpi-color) 72%, var(--muted));
    font-size: 0.6rem;
    font-weight: 650;
    line-height: 1.2;
}

.dashboard-v2-kpi-value-time {
    font-size: 0.78rem;
    line-height: 1.24;
}

.dashboard-v2-performance-score {
    font-size: 1.3rem;
}

.dashboard-v2-activity-panel .panel-body {
    align-content: start;
}

.dashboard-v2-section-title {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
}

.dashboard-v2-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.dashboard-v2-section-icon-success {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    background: color-mix(in srgb, var(--success) 13%, transparent);
}

.dashboard-v2-section-icon-ok {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    background: color-mix(in srgb, var(--success) 13%, transparent);
}

.dashboard-v2-section-icon-warn {
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
}

.dashboard-v2-chart-header {
    display: flex;
    align-items: baseline;
    gap: 0.46rem;
    flex-wrap: wrap;
}

.dashboard-v2-chart-header h3 {
    margin: 0;
    font-size: 0.89rem;
}

.dashboard-v2 .dashboard-activity-canvas {
    min-height: 255px;
}

.dashboard-v2-activity-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.dashboard-v2-activity-totals span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.38rem 0.45rem;
    border-left: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    background: color-mix(in srgb, var(--panel-alt) 78%, transparent);
}

.dashboard-v2-activity-totals small {
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.2;
}

.dashboard-v2-activity-totals strong {
    font-size: 0.9rem;
}

.dashboard-v2-statistics-link {
    justify-self: end;
    margin-top: 0.1rem;
}

.dashboard-v2-event-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.dashboard-v2-event-feed li {
    display: grid;
    grid-template-columns: 0.85rem auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.48rem;
    padding: 0.32rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.dashboard-v2-event-feed li:last-child {
    border-bottom: 0;
}

.dashboard-v2-event-time {
    color: var(--muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.dashboard-v2-event-message {
    font-size: 0.79rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    min-width: 0;
}

.dashboard-v2-event-marker {
    --dashboard-event-color: var(--success);
    position: relative;
    display: block;
    width: 0.66rem;
    height: 0.66rem;
    margin-top: 0.12rem;
    border: 2px solid color-mix(in srgb, var(--dashboard-event-color) 72%, var(--panel));
    border-radius: 999px;
    background: var(--dashboard-event-color);
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--dashboard-event-color) 36%, transparent);
}

.dashboard-v2-event-item-warn .dashboard-v2-event-marker {
    --dashboard-event-color: var(--warning);
}

.dashboard-v2-event-item-error .dashboard-v2-event-marker {
    --dashboard-event-color: var(--danger);
}

.dashboard-v2-event-item:not(:last-child) .dashboard-v2-event-marker::after {
    position: absolute;
    top: 0.68rem;
    left: 50%;
    width: 1px;
    height: calc(100% + 1.15rem);
    background: color-mix(in srgb, var(--dashboard-event-color) 38%, var(--border));
    content: "";
    transform: translateX(-50%);
}

.dashboard-v2-event-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    padding: 0.08rem 0.35rem;
    font-size: 0.68rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.dashboard-v2-event-level-ok {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.dashboard-v2-event-level-warn {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.dashboard-v2-event-level-error {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.dashboard-v2-readiness-list,
.dashboard-v2-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.12rem;
}

.dashboard-v2-readiness-panel-prominent .panel-body {
    align-content: start;
}

.dashboard-v2-readiness-overview {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
}

.dashboard-v2-readiness-overview li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.38rem 0.44rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
}

.dashboard-v2-readiness-overview .dashboard-v2-check-value {
    justify-self: start;
    text-align: left;
}

.dashboard-v2-readiness-matrix {
    display: grid;
    min-width: 0;
    overflow-x: auto;
}

.dashboard-v2-readiness-matrix-head,
.dashboard-v2-readiness-matrix-row {
    display: grid;
    grid-template-columns: minmax(5rem, 1.5fr) repeat(3, minmax(3rem, 0.65fr));
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.dashboard-v2-readiness-matrix-head {
    padding: 0 0.4rem 0.28rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 650;
}

.dashboard-v2-readiness-matrix-head span:not(:first-child) {
    text-align: center;
}

.dashboard-v2-readiness-matrix-row {
    padding: 0.4rem;
    border-top: 1px dashed color-mix(in srgb, var(--border) 84%, transparent);
    font-size: 0.72rem;
}

.dashboard-v2-readiness-matrix-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-v2-readiness-matrix-row.is-disabled {
    opacity: 0.62;
}

.dashboard-v2-route-state {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    justify-self: center;
}

.dashboard-v2-route-state .dashboard-v2-status-icon {
    flex-basis: 0.88rem;
    width: 0.88rem;
    height: 0.88rem;
}

.dashboard-v2-readiness-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.dashboard-v2-readiness-list li,
.dashboard-v2-compact-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.12rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}

.dashboard-v2-readiness-list li {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.2rem;
    padding: 0.4rem 0.46rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
}

.dashboard-v2-readiness-list .dashboard-v2-check-value {
    justify-self: start;
    text-align: left;
}

.dashboard-v2-readiness-list li:last-child,
.dashboard-v2-compact-list li:last-child {
    border-bottom: 0;
}

.dashboard-v2-readiness-list li:last-child {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.dashboard-v2-check-label {
    color: var(--muted);
    font-size: 0.78rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-v2-check-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    justify-self: end;
    text-align: right;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
}

.dashboard-v2-summary-block {
    display: grid;
    gap: 0.26rem;
}

.dashboard-v2-summary-block + .dashboard-v2-summary-block {
    border-top: 1px solid var(--border);
    padding-top: 0.54rem;
}

.dashboard-v2-summary-block h3 {
    margin: 0;
    font-size: 0.84rem;
}

.dashboard-v2-inline-note {
    margin-left: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 400;
}

@media (max-width: 1180px) {
    .dashboard-v2-top-grid,
    .dashboard-v2-middle-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-v2-top-grid.has-band-indicators {
        grid-template-columns: 1fr;
    }

    .dashboard-v2-readiness-panel-prominent {
        order: -1;
    }

    .dashboard-v2-band-indicators {
        justify-content: center;
    }

    .dashboard-v2-band-indicator {
        min-height: 13rem;
    }
}

@media (max-width: 860px) {
    .dashboard-v2-station-stage {
        grid-template-columns: minmax(0, 1fr) minmax(115px, 0.4fr);
    }

    .dashboard-v2-activity-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-v2-readiness-list {
        grid-template-columns: 1fr;
    }

    .dashboard-v2-readiness-overview {
        grid-template-columns: 1fr;
    }

}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.palette-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.palette-picker > legend {
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--text);
}

.palette-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr));
    gap: 0.38rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.42rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel-alt) 72%, transparent);
    scrollbar-width: thin;
}

.palette-picker-grid::-webkit-scrollbar {
    width: 0.42rem;
}

.palette-picker-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border);
}

.palette-picker-option {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.44rem;
    min-width: 0;
    min-height: 2.15rem;
    padding: 0.28rem 0.38rem;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.palette-picker-option:hover {
    border-color: var(--border-hover);
    background: var(--hover-layer);
}

.palette-picker-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.palette-picker-swatch {
    --palette-preview-secondary: var(--palette-preview-accent);
    --palette-preview-accent-2: var(--palette-preview-strong);
    width: 2rem;
    height: 1.45rem;
    border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
    border-radius: 0.3rem;
    background: linear-gradient(
        135deg,
        var(--palette-preview-surface) 0 43%,
        var(--palette-preview-accent) 43% 65%,
        var(--palette-preview-secondary) 65% 83%,
        var(--palette-preview-accent-2) 83% 100%
    );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.palette-picker-option > input:checked + .palette-picker-swatch {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus-ring), 0 1px 3px rgba(0, 0, 0, 0.18);
}

.palette-picker-option > input:focus-visible + .palette-picker-swatch {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.palette-picker-option > input:checked ~ .palette-picker-name {
    color: var(--text);
    font-weight: 700;
}

.palette-picker-name {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-picker-swatch[data-palette-preview="green-core"] { --palette-preview-surface: #202923; --palette-preview-accent: #6dbd80; --palette-preview-strong: #2f7a45; }
.palette-picker-swatch[data-palette-preview="red-tactic"] { --palette-preview-surface: #4b2424; --palette-preview-accent: #ff3b30; --palette-preview-strong: #a31f1f; }
.palette-picker-swatch[data-palette-preview="forest-pine"] { --palette-preview-surface: #22342d; --palette-preview-accent: #52b788; --palette-preview-strong: #1f4c39; }
.palette-picker-swatch[data-palette-preview="nordic-blue"] { --palette-preview-surface: #263b52; --palette-preview-accent: #63a4ff; --palette-preview-strong: #1f5085; }
.palette-picker-swatch[data-palette-preview="slate-cyan"] { --palette-preview-surface: #234043; --palette-preview-accent: #2dd4bf; --palette-preview-strong: #0a5852; }
.palette-picker-swatch[data-palette-preview="amber-graphite"] { --palette-preview-surface: #544035; --palette-preview-accent: #f59e0b; --palette-preview-strong: #7b4a05; }
.palette-picker-swatch[data-palette-preview="crimson-ops"] { --palette-preview-surface: #5c3842; --palette-preview-accent: #ef476f; --palette-preview-strong: #8f1b2f; }
.palette-picker-swatch[data-palette-preview="violet-signal"] { --palette-preview-surface: #463868; --palette-preview-accent: #a78bfa; --palette-preview-strong: #531ea8; }
.palette-picker-swatch[data-palette-preview="monochrome-neutral"] { --palette-preview-surface: #343b42; --palette-preview-accent: #9ca3af; --palette-preview-strong: #39414d; }
.palette-picker-swatch[data-palette-preview="copper-radar"] { --palette-preview-surface: #5a4034; --palette-preview-accent: #fb923c; --palette-preview-strong: #8e4107; }
.palette-picker-swatch[data-palette-preview="orange-workshop"] { --palette-preview-surface: #2c343a; --palette-preview-accent: #fa6831; --palette-preview-strong: #923517; }
.palette-picker-swatch[data-palette-preview="pastel-mint"] { --palette-preview-surface: #293136; --palette-preview-accent: #83dfbd; --palette-preview-secondary: #d995ad; --palette-preview-accent-2: #f0ae78; }
.palette-picker-swatch[data-palette-preview="pastel-sky"] { --palette-preview-surface: #29343f; --palette-preview-accent: #8fd4f2; --palette-preview-secondary: #f08e7f; --palette-preview-accent-2: #e6c85e; }
.palette-picker-swatch[data-palette-preview="pastel-lemon"] { --palette-preview-surface: #333534; --palette-preview-accent: #e7cf68; --palette-preview-secondary: #779ee8; --palette-preview-accent-2: #67c2b0; }
.palette-picker-swatch[data-palette-preview="powder-blue"] { --palette-preview-surface: #303840; --palette-preview-accent: #a4c5e7; --palette-preview-secondary: #e08a59; --palette-preview-accent-2: #cf6b70; }
.palette-picker-swatch[data-palette-preview="coral-bay"] { --palette-preview-surface: #273541; --palette-preview-accent: #ff8273; --palette-preview-secondary: #58c5c0; --palette-preview-accent-2: #e5c284; }
.palette-picker-swatch[data-palette-preview="petrol-night"] { --palette-preview-surface: #2b3539; --palette-preview-accent: #59c2b5; --palette-preview-secondary: #dfa84e; --palette-preview-accent-2: #8fcde8; }
.palette-picker-swatch[data-palette-preview="electric-magenta"] { --palette-preview-surface: #29323a; --palette-preview-accent: #f064c6; --palette-preview-secondary: #42c9dc; --palette-preview-accent-2: #e8c650; }
.palette-picker-swatch[data-palette-preview="olive-field"] { --palette-preview-surface: #31352f; --palette-preview-accent: #bdc86a; --palette-preview-secondary: #e3844b; --palette-preview-accent-2: #75a9d0; }
.palette-picker-swatch[data-palette-preview="desert-sand"] { --palette-preview-surface: #39312b; --palette-preview-accent: #54c2b2; --palette-preview-secondary: #e27b46; --palette-preview-accent-2: #dfb96d; }
.palette-picker-swatch[data-palette-preview="retro-terminal"] { --palette-preview-surface: #202421; --palette-preview-accent: #67e578; --palette-preview-secondary: #e1aa49; --palette-preview-accent-2: #e9d7a8; }
.palette-picker-swatch[data-palette-preview="synthwave"] { --palette-preview-surface: #22283c; --palette-preview-accent: #ff5fd2; --palette-preview-secondary: #42d9ec; --palette-preview-accent-2: #9c73ff; }
.palette-picker-swatch[data-palette-preview="midnight-navy"] { --palette-preview-surface: #1b2a37; --palette-preview-accent: #56bde8; --palette-preview-secondary: #ee8a4d; --palette-preview-accent-2: #9a83e5; }
.palette-picker-swatch[data-palette-preview="burgundy-wine"] { --palette-preview-surface: #332f35; --palette-preview-accent: #dc7196; --palette-preview-secondary: #55b8ad; --palette-preview-accent-2: #d1a84f; }

.form-grid > [hidden] {
    display: none !important;
}

.modem-type-slot {
    min-width: 0;
}

.modem-type-panel {
    min-width: 0;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.modem-type-panel > legend {
    padding: 0 var(--space-2);
    color: var(--text);
    font-weight: 700;
}

.modem-type-panel > .form-grid,
.modem-capability-block {
    margin-top: var(--space-2);
}

.modem-capability-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
}

.modem-capability-block > .checkbox-row {
    align-self: start;
}

.modem-expose-details {
    grid-column: 1 / -1;
}

.modem-expose-details[hidden] {
    display: none !important;
}

.modem-aprsis-panel .notice,
.modem-type-panel > .notice {
    margin-top: var(--space-3);
}

.aprsis-interface-status {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.aprsis-interface-status[hidden] {
    display: none !important;
}

.aprsis-interface-status .igate-status-summary {
    padding: 0;
    border: 0;
}

.form-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.password-field-group {
    display: grid;
    gap: var(--space-2);
}

.password-field-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.password-field-actions .button {
    min-height: var(--control-height);
}

.station-symbol-field {
    gap: 0.45rem;
}

.station-symbol-picker {
    display: block;
    align-items: stretch;
}

.station-symbol-dropdown {
    position: relative;
}

.station-symbol-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height);
    padding: 0.58rem 0.72rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

.station-symbol-trigger-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.station-symbol-trigger-copy img {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

.station-symbol-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-symbol-trigger-caret {
    color: var(--muted);
    flex: 0 0 auto;
}

.station-symbol-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
}

.station-symbol-dropdown.open .station-symbol-menu {
    display: grid;
    gap: 0.2rem;
}

.station-symbol-option {
    display: grid;
    grid-template-columns: 32px 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: auto;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    text-align: left;
    box-shadow: none;
}

.station-symbol-option:hover,
.station-symbol-option.active {
    background: var(--panel-alt);
}

.station-symbol-option-image {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

:root[data-aprs-symbol-set="modern"] .station-symbol-option-image {
    width: 32px;
    height: 32px;
}

.station-symbol-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-weight: 700;
}

.station-symbol-option-description {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-grid .full,
.form-grid button,
.form-stack button,
.alert,
.data-table,
.checkbox-row {
    grid-column: 1 / -1;
}

.field-inline-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.field-inline-actions .button-inline-control {
    grid-column: auto;
    min-height: var(--control-height);
    white-space: nowrap;
}

.station-settings-group {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    gap: var(--space-4);
}

.station-page-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.station-settings-group-header {
    display: grid;
    gap: var(--space-1);
}

.station-settings-group-header h2 {
    margin: 0;
}

.station-page-panel .form-grid {
    gap: var(--space-4);
}

.station-settings-subgrid {
    gap: var(--space-4);
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

input,
textarea,
select,
button {
    font: inherit;
}

input,
textarea,
select {
    width: 100%;
    min-height: var(--control-height);
    padding: 0.58rem 0.72rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--text);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
    box-shadow: var(--shadow-soft);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--border-hover);
    background: var(--panel-emphasis);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(109, 189, 128, 0.45);
    box-shadow: 0 0 0 3px var(--focus-ring);
    background: var(--panel-emphasis);
}

input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

textarea {
    min-height: 96px;
    resize: vertical;
}

.button {
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    color: #0f1712;
    border: 0;
    padding: 0.5rem 0.83rem;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .button:not(.button-secondary) {
    color: #f7faf8;
}

.button-secondary {
    background: var(--secondary-control-bg, var(--panel-alt));
    color: var(--text);
    border: 1px solid var(--secondary-control-border, var(--border));
    padding: 0.48rem 0.77rem;
    box-shadow: var(--shadow-soft);
}

.button-icon {
    width: var(--icon-control-size);
    min-width: var(--icon-control-size);
    height: var(--icon-control-size);
    min-height: var(--icon-control-size);
    padding: 0;
}

.button-icon img {
    width: 0.9rem;
    height: 0.9rem;
    filter: var(--icon-filter);
}

.button-label-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.button-label-icon img {
    width: 1rem;
    height: 1rem;
    filter: var(--icon-filter);
}

.button-danger {
    border-color: rgba(201, 122, 122, 0.35);
    color: var(--danger);
}

.button:hover,
.button-secondary:hover,
.theme-toggle:hover {
    transform: translateY(-1px);
}

.button:hover {
    filter: brightness(1.03);
}

.button-secondary:hover,
.theme-toggle:hover {
    background: var(--secondary-control-hover-bg, var(--panel-emphasis));
    border-color: var(--border-hover);
}

.button:focus-visible,
.button-secondary:focus-visible,
.theme-toggle:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nav-link:focus-visible,
.station-ssid-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.button:active,
.button-secondary:active,
.theme-toggle:active {
    transform: translateY(0);
}

.button:disabled,
.button-secondary:disabled,
.theme-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
    filter: none;
}

.settings-action-control-busy {
    pointer-events: none;
}

.button.settings-action-button-busy,
.button-secondary.settings-action-button-busy {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.settings-action-button-busy::before {
    content: "";
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: settings-spin 0.8s linear infinite;
}

.button-secondary.button-danger:hover {
    border-color: rgba(201, 122, 122, 0.46);
    background: rgba(201, 122, 122, 0.08);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.4rem;
    padding: 0.24rem 0.52rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-running {
    background: rgba(107, 170, 121, 0.14);
    color: var(--success);
}

.status-stopped {
    background: rgba(201, 122, 122, 0.14);
    color: var(--danger);
}

.status-unknown {
    background: rgba(205, 178, 110, 0.14);
    color: var(--warning);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    table-layout: fixed;
}

.data-table th,
.data-table td {
    padding: 0.52rem 0.58rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table th {
    font-weight: 600;
    color: var(--text);
    background: var(--panel-soft);
    white-space: nowrap;
}

.compact-table {
    font-size: 0.78rem;
}

.compact-table th,
.compact-table td {
    padding: 0.39rem 0.46rem;
}

.alarm-thresholds-title {
    display: block;
    margin-bottom: 0.38rem;
    font-weight: 600;
}

.alarm-thresholds-table {
    table-layout: auto;
}

.alarm-thresholds-table th:nth-child(2),
.alarm-thresholds-table td:nth-child(2),
.alarm-thresholds-table th:nth-child(3),
.alarm-thresholds-table td:nth-child(3),
.alarm-thresholds-table th:nth-child(4),
.alarm-thresholds-table td:nth-child(4) {
    width: 7rem;
}

.alarm-thresholds-table select {
    min-width: 5rem;
}

.alarm-threshold-event-type {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.data-table td code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}

.data-table td .muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.users-table {
    table-layout: auto;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) {
    width: 6.2rem;
    min-width: 6.2rem;
    max-width: 6.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
    width: 4.9rem;
    min-width: 4.9rem;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
    width: 8rem;
    min-width: 8rem;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
    width: 10.75rem;
    min-width: 10.75rem;
    white-space: nowrap;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
    width: 5.2rem;
    min-width: 5.2rem;
    text-align: right;
}

.users-table .status-pill {
    min-width: 6.2rem;
    font-size: 0.72rem;
    padding: 0.22rem 0.48rem;
}

.digi-flows-table {
    table-layout: fixed;
}

.digi-flows-table th,
.digi-flows-table td {
    vertical-align: middle;
}

.digi-flows-col-order {
    width: 3%;
    white-space: nowrap;
    text-align: center;
}

.digi-flows-col-name {
    width: 14%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.digi-flows-col-description {
    width: 24%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.digi-flows-col-source,
.digi-flows-col-target {
    width: 12%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.digi-flows-col-status {
    width: 8%;
    white-space: nowrap;
}

.digi-flows-col-actions {
    width: 14%;
    white-space: nowrap;
}

.digi-flows-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    flex-wrap: nowrap;
    max-width: none;
}

.digi-flows-col-status .tnc-badge {
    padding: 0.28rem 0.45rem;
    min-height: 1.72rem;
    gap: 0.26rem;
    font-size: 0.72rem;
}

.digi-flow-endpoints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.digi-flow-builder {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    gap: var(--space-3);
    align-items: start;
}

.digi-flow-palette,
.digi-flow-endpoint-card,
.digi-flow-steps-section {
    display: grid;
    gap: var(--space-3);
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    color: var(--text);
}

.digi-flow-palette {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.digi-flow-steps-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.digi-flow-endpoint-card h3 {
    margin: 0;
    font-size: 0.96rem;
}

.digi-step-palette {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--border)) transparent;
    -ms-overflow-style: auto;
}

.digi-step-palette::-webkit-scrollbar {
    width: 0.42rem;
    height: 0.42rem;
}

.digi-step-palette::-webkit-scrollbar-track {
    background: transparent;
}

.digi-step-palette::-webkit-scrollbar-thumb {
    border: 0.1rem solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 42%, var(--border));
    background-clip: padding-box;
}

.digi-step-palette::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 68%, var(--border));
    background-clip: padding-box;
}

.digi-flow-steps-actions {
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--space-3);
}

.digi-palette-button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
    align-items: start;
    width: 100%;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
    text-align: left;
    color: var(--text);
}

.digi-palette-button:hover,
.digi-palette-button:focus-visible {
    background: var(--panel-emphasis);
}

.digi-palette-copy {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.digi-palette-scope {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    max-width: 10rem;
    padding: 0.08rem 0.48rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.045em;
    text-align: center;
    text-transform: uppercase;
}

.digi-palette-button > .digi-step-badge {
    min-height: 1.55rem;
    padding: 0.08rem 0.5rem;
    font-size: 0.69rem;
}

.digi-step-badge-rule {
    color: color-mix(in srgb, var(--warning) 72%, var(--text));
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
    background: color-mix(in srgb, var(--warning) 15%, var(--panel-soft));
}

.digi-step-badge-filter {
    color: color-mix(in srgb, var(--accent) 72%, var(--text));
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
    background: color-mix(in srgb, var(--accent) 13%, var(--panel-soft));
}

.digi-palette-scope-aprsis-source {
    color: color-mix(in srgb, #55c7de 78%, var(--text));
    border-color: color-mix(in srgb, #55c7de 48%, var(--border));
    background: color-mix(in srgb, #55c7de 14%, var(--panel-soft));
}

.digi-palette-scope-aprsis-to-rf {
    color: color-mix(in srgb, #b99cff 76%, var(--text));
    border-color: color-mix(in srgb, #b99cff 48%, var(--border));
    background: color-mix(in srgb, #b99cff 14%, var(--panel-soft));
}

.digi-palette-scope-rf-to-rf {
    color: color-mix(in srgb, var(--warning) 78%, var(--text));
    border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
    background: color-mix(in srgb, var(--warning) 14%, var(--panel-soft));
}

.digi-palette-scope-aprsis-target {
    color: color-mix(in srgb, var(--success) 76%, var(--text));
    border-color: color-mix(in srgb, var(--success) 48%, var(--border));
    background: color-mix(in srgb, var(--success) 14%, var(--panel-soft));
}

.digi-palette-scope-rf-source {
    color: color-mix(in srgb, #ef9f62 78%, var(--text));
    border-color: color-mix(in srgb, #ef9f62 48%, var(--border));
    background: color-mix(in srgb, #ef9f62 14%, var(--panel-soft));
}

.digi-palette-scope-multi-flow {
    color: var(--muted);
    border-color: var(--border);
    background: var(--panel-soft);
}

.digi-steps-chain {
    display: grid;
    gap: 0.6rem;
}

.digi-step-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.digi-step-card-source {
    border-left: 4px solid var(--accent);
}

.digi-step-card-filter {
    border-left: 4px solid var(--warning);
}

.digi-step-card-target {
    border-left: 4px solid var(--success);
}

.digi-step-card-header {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: nowrap;
}

.digi-step-meta,
.digi-step-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.digi-step-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.digi-step-meta {
    min-width: 0;
    flex: 1 1 0;
}

.digi-step-order,
.digi-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}

.digi-step-order {
    min-width: 1.9rem;
}

.digi-flow-steps-section h2 {
    margin: 0;
}

.digi-step-title-inline {
    font-weight: 700;
    min-width: 0;
    color: var(--text);
}

.digi-step-summary-inline {
    color: var(--muted);
    overflow-wrap: anywhere;
    min-width: 0;
    font-size: 0.84rem;
}

.digi-step-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--text);
}

.digi-step-inline-toggle input {
    width: auto;
    min-height: auto;
    margin: 0;
    box-shadow: none;
    accent-color: var(--accent);
    transform: scale(0.92);
}

.digi-step-toggle-button img {
    transition: transform var(--transition-fast);
}

.digi-step-toggle-button.is-open img {
    transform: rotate(180deg);
}

.digi-step-icon-button {
    border-color: var(--border);
    background: var(--panel-soft);
}

.digi-step-icon-button:hover:not(:disabled) {
    background: var(--panel-emphasis);
    border-color: var(--border-hover);
}

.digi-step-icon-button:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.digi-step-icon-button-danger {
    border-color: rgba(201, 122, 122, 0.35);
    background: rgba(201, 122, 122, 0.08);
}

.digi-step-icon-button-danger:hover:not(:disabled) {
    background: rgba(201, 122, 122, 0.16);
    border-color: rgba(201, 122, 122, 0.5);
}

.digi-step-editor-grid {
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.digi-icon-filter-controls {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-3);
}

.digi-icon-filter-table-field,
.digi-icon-filter-symbol-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.digi-icon-filter-symbol-field .station-symbol-picker {
    width: 100%;
}

.digi-icon-symbol-dropdown {
    width: 100%;
}

.digi-icon-filter-add-button {
    white-space: nowrap;
}

.digi-icon-filter-selected {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.digi-icon-filter-empty {
    padding: 0.7rem 0.85rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.digi-icon-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.2rem;
    padding: 0.28rem 0.32rem 0.28rem 0.62rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
    box-shadow: var(--shadow-soft);
}

.digi-icon-filter-chip-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.digi-icon-filter-chip-preview img {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

.digi-icon-filter-chip-label {
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.digi-icon-filter-chip-remove {
    width: 1.9rem;
    min-width: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
}

.digi-distance-zones {
    display: grid;
    gap: var(--space-3);
}

.digi-distance-zone-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-3);
}

.digi-distance-zone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.digi-distance-zone-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.digi-distance-zone-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.digi-distance-zone-grid label {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.digi-distance-add-zone {
    justify-self: start;
}

@media (max-width: 780px) {
    .digi-icon-filter-controls {
        grid-template-columns: 1fr;
    }

    .digi-icon-filter-add-button {
        width: 100%;
    }

    .digi-distance-zone-header {
        flex-direction: column;
        align-items: stretch;
    }

    .digi-distance-zone-actions {
        justify-content: space-between;
    }

    .digi-distance-zone-grid {
        grid-template-columns: 1fr;
    }

    .digi-distance-add-zone {
        width: 100%;
    }
}

.digi-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    color: var(--muted);
    font-size: 1.1rem;
}

.digi-step-connector-warning {
    gap: 0.55rem;
    min-height: 2.2rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(201, 122, 122, 0.28);
    border-radius: var(--radius-md);
    background: rgba(201, 122, 122, 0.08);
    color: var(--danger);
    font-size: 0.84rem;
}

.digi-step-warning-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 700;
    line-height: 1;
}

.digi-step-warning-text {
    overflow-wrap: anywhere;
}

.digi-execution-list {
    display: grid;
    gap: 0.9rem;
}

.digi-execution-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel-soft);
    padding: 1rem;
}

.digi-execution-card-header {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.digi-execution-card-topline,
.digi-execution-meta,
.digi-execution-step-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    align-items: center;
}

.digi-execution-card-topline {
    margin-bottom: 0.55rem;
}

.digi-execution-time {
    font-weight: 600;
}

.digi-execution-packet {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.45;
    word-break: break-word;
    font-family: "SFMono-Regular", "SF Mono", "Consolas", "Liberation Mono", monospace;
}

.digi-execution-packets {
    display: grid;
    gap: 0.45rem;
}

.digi-execution-packet-row {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
}

.digi-execution-packet-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.16rem;
    opacity: 0.78;
}

:root:not([data-theme="light"]) .digi-execution-packet-icon {
    filter: brightness(0) invert(1);
}

.digi-execution-meta {
    margin-top: 0.6rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.digi-execution-layout-note {
    margin-top: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft, #d9e7ef) 16%);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.digi-execution-steps {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.85rem;
}

.digi-execution-step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.8rem;
    align-items: start;
}

.digi-execution-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-weight: 700;
}

.digi-execution-step-body {
    min-width: 0;
    padding: 0.15rem 0 0;
}

.digi-execution-step-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem 0.46rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.digi-execution-step-success {
    background: rgba(107, 170, 121, 0.14);
    color: var(--success);
}

.digi-execution-step-danger {
    background: rgba(201, 122, 122, 0.14);
    color: var(--danger);
}

.digi-execution-step-muted {
    background: rgba(156, 161, 169, 0.12);
    color: var(--text-muted);
}

.digi-execution-step-message {
    margin-top: 0.28rem;
    color: var(--text-muted);
    word-break: break-word;
}

.logs-table {
    table-layout: fixed;
}

.logs-col-id {
    width: 4rem;
}

.logs-col-time {
    width: 11.5rem;
}

.logs-col-level {
    width: 5.2rem;
}

.logs-col-category {
    width: 9rem;
}

.logs-col-message {
    width: auto;
}

.logs-table td:nth-child(1),
.logs-table td:nth-child(2),
.logs-table td:nth-child(3) {
    white-space: nowrap;
}

.logs-table th:nth-child(4),
.logs-table td:nth-child(4) {
    white-space: nowrap;
}

.logs-table td:nth-child(5) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.digi-flow-debug-table {
    table-layout: auto;
}

.digi-flow-debug-table td:nth-child(1),
.digi-flow-debug-table td:nth-child(2),
.digi-flow-debug-table td:nth-child(3),
.digi-flow-debug-table td:nth-child(4),
.digi-flow-debug-table td:nth-child(5),
.digi-flow-debug-table td:nth-child(6),
.digi-flow-debug-table td:nth-child(7) {
    white-space: nowrap;
}

.digi-flow-debug-table td:nth-child(8) {
    word-break: break-word;
}

.log-row-warning td {
    color: #d24b4b;
}

.stations-table tbody tr:hover td {
    background: rgba(109, 189, 128, 0.08);
}

.stations-table {
    table-layout: auto;
}

.stations-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.28rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}

.stations-sort-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.stations-sort-indicator {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1;
}

.stations-sort-button.is-active .stations-sort-indicator {
    color: var(--accent);
}

.stations-table th:nth-child(1),
.stations-table td:nth-child(1) {
    width: 5.5rem;
    min-width: 5.5rem;
}

.stations-table th:nth-child(2),
.stations-table td:nth-child(2) {
    width: 4.5rem;
    min-width: 4.5rem;
}

.stations-table th:nth-child(3),
.stations-table td:nth-child(3) {
    width: 8.5rem;
    min-width: 8.5rem;
}

.stations-table th:nth-child(4),
.stations-table td:nth-child(4) {
    width: 4.5rem;
    min-width: 4.5rem;
    text-align: center;
}

.stations-table th:nth-child(5),
.stations-table td:nth-child(5),
.stations-table th:nth-child(6),
.stations-table td:nth-child(6) {
    width: 5rem;
    min-width: 5rem;
    white-space: nowrap;
}

.stations-table th:nth-child(7),
.stations-table td:nth-child(7) {
    width: 4rem;
    min-width: 4rem;
    white-space: nowrap;
}

.stations-table th:nth-child(8),
.stations-table td:nth-child(8) {
    width: 24rem;
    min-width: 24rem;
}

.stations-table th:nth-child(9),
.stations-table td:nth-child(9) {
    width: 18rem;
    min-width: 12rem;
}

.stations-comment-cell {
    white-space: normal;
}

.stations-comment-text {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.callsign-cell {
    white-space: nowrap;
}

.station-secondary-text {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.78rem;
}

.station-link {
    color: inherit;
    text-decoration: none;
}

.station-link:hover {
    text-decoration: underline;
}

.last-heard-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    white-space: nowrap;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover td {
    background: var(--accent-soft);
}

.tnc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    max-width: 100%;
    min-height: var(--control-height);
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tnc-badge img {
    width: 0.95rem;
    height: 0.95rem;
    opacity: 0.82;
    filter: var(--icon-filter);
}

.tnc-badge-enabled {
    background: rgba(107, 170, 121, 0.14);
    color: var(--success);
}

.tnc-badge-disabled {
    background: rgba(201, 122, 122, 0.14);
    color: var(--danger);
}

.tnc-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
}

.tnc-status-icon img {
    width: 1rem;
    height: 1rem;
}

.tnc-status-icon-enabled {
    color: var(--success);
    background: rgba(107, 170, 121, 0.14);
}

.tnc-status-icon-enabled img {
    filter: invert(65%) sepia(17%) saturate(607%) hue-rotate(78deg) brightness(95%) contrast(88%);
}

.tnc-status-icon-disabled {
    color: var(--muted);
    background: rgba(141, 153, 143, 0.12);
}

.tnc-status-icon-disabled img {
    filter: var(--icon-filter);
}

.tnc-status-icon-error {
    color: var(--danger);
    background: rgba(201, 122, 122, 0.14);
}

.tnc-status-icon-error img {
    filter: invert(53%) sepia(18%) saturate(914%) hue-rotate(314deg) brightness(93%) contrast(87%);
}

.tnc-status-icon-connecting {
    color: var(--warning);
    background: rgba(217, 181, 101, 0.14);
}

.tnc-status-icon-connecting img {
    filter: invert(72%) sepia(18%) saturate(893%) hue-rotate(357deg) brightness(96%) contrast(86%);
}

.aprs-symbol-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.aprs-symbol-icon-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
}

:root[data-aprs-symbol-set="modern"] .aprs-symbol-icon-stack {
    width: 2rem;
    height: 2rem;
}

.aprs-symbol-icon {
    width: 1.5rem;
    height: 1.5rem;
    image-rendering: pixelated;
    flex: 0 0 auto;
}

:root[data-aprs-symbol-set="modern"] .aprs-symbol-icon {
    width: 2rem;
    height: 2rem;
}

.aprs-symbol-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    min-width: 0.56rem;
    height: 0.56rem;
    padding: 0 0.05rem;
    border-radius: 0.16rem;
    background: rgba(12, 14, 16, 0.86);
    color: #f5f8fb;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 0.56rem;
    text-align: center;
    pointer-events: none;
}

:root[data-theme="light"] .aprs-symbol-overlay {
    background: rgba(246, 248, 251, 0.92);
    color: #1b2329;
    box-shadow: 0 0 0 1px rgba(30, 35, 40, 0.2);
}

.frame-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.weather-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.weather-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
}

.weather-chip img {
    width: 0.9rem;
    height: 0.9rem;
    opacity: 0.82;
    filter: var(--icon-filter);
}

.stations-summary {
    display: grid;
    grid-template-columns: repeat(6, 3.85rem);
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: 0;
}

.stations-summary-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.stations-summary-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex-wrap: nowrap;
}

.stations-refresh-control {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.1;
    min-height: 3rem;
    padding: 0.32rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    box-shadow: var(--shadow-soft);
    flex: 0 0 auto;
}

.stations-refresh-control select {
    min-width: 4.35rem;
    min-height: auto;
    padding: 0.38rem 0.48rem;
}

.stations-refresh-control > .muted {
    white-space: nowrap;
}

.stations-summary-panel .metric-card {
    padding: 0.36rem 0.48rem;
}

.stations-summary-panel .metric-value {
    font-size: 1rem;
}

.stations-filter-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    text-align: center;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.stations-filter-icon {
    width: 1.12rem;
    height: 1.12rem;
    flex: 0 0 auto;
    opacity: 0.82;
    filter: var(--icon-filter);
}

.stations-filter-card::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 0.42rem);
    left: 50%;
    z-index: 30;
    max-width: min(15rem, 80vw);
    padding: 0.34rem 0.5rem;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--bg-layer) 92%, #000 8%);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -0.18rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.stations-filter-card:first-child::after {
    left: 0;
    transform: translate(0, -0.18rem);
}

.stations-filter-card:last-child::after {
    right: 0;
    left: auto;
    transform: translate(0, -0.18rem);
}

.stations-filter-card:hover,
.stations-filter-card:focus-visible {
    z-index: 20;
}

.stations-filter-card:hover::after,
.stations-filter-card:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.stations-filter-card:first-child:hover::after,
.stations-filter-card:first-child:focus-visible::after,
.stations-filter-card:last-child:hover::after,
.stations-filter-card:last-child:focus-visible::after {
    transform: translate(0, 0);
}

.stations-filter-card:hover {
    border-color: var(--border-hover);
}

.stations-filter-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.stations-filter-card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-soft);
    background: linear-gradient(180deg, var(--accent-soft), var(--panel-soft));
}

.band-condition-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
    gap: var(--space-4);
    align-items: start;
}

.band-condition-layout-full {
    grid-column: 1 / -1;
}

.band-condition-interface-stack {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    align-content: start;
}

.band-condition-card {
    min-width: 0;
    container-type: inline-size;
}

.band-condition-card .panel-body {
    display: grid;
    gap: var(--space-4);
}

.band-condition-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.band-condition-card-heading h2 {
    margin: 0.2rem 0 0;
}

.band-condition-status {
    min-width: 0;
}

.band-condition-eyebrow {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.digi-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.digi-mode-badge-allow {
    color: #0f5132;
    background: rgba(47, 133, 90, 0.14);
    border-color: rgba(47, 133, 90, 0.3);
}

.digi-mode-badge-deny {
    color: #842029;
    background: rgba(187, 65, 82, 0.14);
    border-color: rgba(187, 65, 82, 0.3);
}

.digi-mode-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.digi-mode-select-allow {
    border-color: rgba(47, 133, 90, 0.42);
    background: linear-gradient(180deg, rgba(47, 133, 90, 0.08), var(--panel));
}

.digi-mode-select-deny {
    border-color: rgba(187, 65, 82, 0.42);
    background: linear-gradient(180deg, rgba(187, 65, 82, 0.08), var(--panel));
}

:root:not([data-theme="light"]) .digi-mode-badge-allow {
    color: #d6ffe8;
    background: rgba(47, 133, 90, 0.24);
    border-color: rgba(120, 220, 165, 0.35);
}

:root:not([data-theme="light"]) .digi-mode-badge-deny {
    color: #ffd7dc;
    background: rgba(187, 65, 82, 0.24);
    border-color: rgba(255, 160, 171, 0.35);
}

:root:not([data-theme="light"]) .digi-mode-select-allow {
    border-color: rgba(120, 220, 165, 0.35);
    background: linear-gradient(180deg, rgba(47, 133, 90, 0.18), var(--panel));
}

:root:not([data-theme="light"]) .digi-mode-select-deny {
    border-color: rgba(255, 160, 171, 0.35);
    background: linear-gradient(180deg, rgba(187, 65, 82, 0.18), var(--panel));
}

.band-condition-index {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(17rem, 0.8fr);
    align-items: center;
    gap: var(--space-4);
    padding: clamp(1rem, 3vw, 1.4rem);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    background: linear-gradient(135deg, var(--panel-alt), var(--panel-soft));
}

.band-condition-index-excellent {
    background: linear-gradient(135deg, rgba(44, 224, 106, 0.26), rgba(44, 224, 106, 0.05));
    border-color: rgba(44, 224, 106, 0.48);
}

.band-condition-index-good {
    background: linear-gradient(135deg, rgba(89, 189, 119, 0.22), rgba(89, 189, 119, 0.05));
    border-color: rgba(89, 189, 119, 0.38);
}

.band-condition-index-noticeable {
    background: linear-gradient(135deg, rgba(116, 173, 135, 0.18), rgba(116, 173, 135, 0.04));
    border-color: rgba(116, 173, 135, 0.32);
}

.band-condition-index-neutral {
    background: linear-gradient(135deg, rgba(114, 144, 173, 0.18), rgba(114, 144, 173, 0.04));
    border-color: rgba(114, 144, 173, 0.30);
}

.band-condition-index-caution,
.band-condition-index-learning {
    background: linear-gradient(135deg, rgba(213, 154, 98, 0.18), rgba(213, 154, 98, 0.04));
    border-color: rgba(213, 154, 98, 0.30);
}

.band-condition-index-bad {
    background: linear-gradient(135deg, rgba(201, 122, 122, 0.22), rgba(201, 122, 122, 0.05));
    border-color: rgba(201, 122, 122, 0.38);
}

.band-condition-index-value {
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    min-width: 6rem;
}

.band-condition-index-value span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.band-condition-index-value strong {
    font-size: clamp(2.8rem, 8vw, 4.5rem);
    line-height: 1;
}

.band-condition-index-copy {
    display: grid;
    gap: 0.35rem;
}

.band-condition-index-copy strong {
    font-size: clamp(1.15rem, 3vw, 1.45rem);
}

.band-condition-index-copy p {
    margin: 0;
    max-width: 52ch;
}

.band-condition-index-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    min-width: 0;
    padding-left: var(--space-4);
    border-left: 1px solid var(--border);
}

.band-condition-index-legend-item {
    --condition-color: var(--muted);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.28rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.2;
}

.band-condition-index-legend-item strong {
    color: var(--condition-color);
    font-size: 0.78rem;
}

.band-condition-index-legend-item.is-active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--condition-color) 44%, transparent);
    background: color-mix(in srgb, var(--condition-color) 14%, transparent);
}

.band-condition-index-legend-bad {
    --condition-color: #c97a7a;
}

.band-condition-index-legend-caution {
    --condition-color: #d59a62;
}

.band-condition-index-legend-neutral {
    --condition-color: #7290ad;
}

.band-condition-index-legend-noticeable {
    --condition-color: #74ad87;
}

.band-condition-index-legend-good {
    --condition-color: #59bd77;
}

.band-condition-index-legend-excellent {
    --condition-color: #2ce06a;
}

@container (max-width: 46rem) {
    .band-condition-index {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .band-condition-index-legend {
        grid-column: 1 / -1;
        padding-top: var(--space-3);
        padding-left: 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }
}

.band-condition-confidence-simple {
    display: grid;
    gap: 0.5rem;
}

.band-condition-confidence-simple > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.band-condition-confidence-simple > div span {
    color: var(--muted);
}

.band-condition-confidence-simple progress {
    width: 100%;
    height: 0.55rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--panel-alt);
}

.band-condition-confidence-simple progress::-webkit-progress-bar {
    background: var(--panel-alt);
}

.band-condition-confidence-simple progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--accent), var(--success));
}

.band-condition-confidence-simple progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--success));
}

.band-condition-chart-section {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.band-condition-chart-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.band-condition-chart-heading h3 {
    margin: 0 0 0.25rem;
}

.band-condition-chart-heading p {
    margin: 0;
}

.band-condition-chart-actions {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
}

.band-condition-history-range {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
}

.band-condition-history-range button {
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: calc(var(--radius-sm) - 0.15rem);
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.band-condition-history-range button:hover {
    color: var(--text);
    background: var(--hover-layer);
}

.band-condition-history-range button[aria-pressed="true"] {
    color: var(--text);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.band-condition-history-range button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.band-condition-chart-wrap {
    position: relative;
    min-height: 15rem;
}

.band-condition-chart-wrap canvas {
    width: 100%;
    min-height: 15rem;
    max-height: 15rem;
}

.band-condition-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    text-align: center;
}

.band-condition-chart-empty[hidden] {
    display: none;
}

.band-condition-model-data {
    display: grid;
    gap: var(--space-3);
}

.band-condition-model-card {
    min-width: 0;
}

.band-condition-model-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.band-condition-model-heading h3 {
    margin: 0 0 0.2rem;
}

.band-condition-model-heading p,
.band-condition-model-summary,
.band-condition-model-note {
    margin: 0;
}

.band-condition-model-summary {
    max-width: 72ch;
}

.band-condition-model-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
}

.band-condition-model-stats > div {
    display: grid;
    gap: 0.18rem;
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.band-condition-model-stats dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.band-condition-model-stats dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.band-condition-learning-progress {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.band-condition-learning-progress > div {
    display: grid;
    gap: 0.45rem;
}

.band-condition-learning-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.82rem;
}

.band-condition-learning-progress-label span {
    color: var(--muted);
}

.band-condition-learning-progress progress {
    width: 100%;
    height: 0.42rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--panel-soft);
}

.band-condition-learning-progress progress::-webkit-progress-bar {
    background: var(--panel-soft);
}

.band-condition-learning-progress progress::-webkit-progress-value {
    background: var(--accent);
}

.band-condition-learning-progress progress::-moz-progress-bar {
    background: var(--accent);
}

.band-condition-model-note {
    font-size: 0.78rem;
}

.band-condition-service-card {
    min-width: 0;
}

.band-condition-service-data {
    display: grid;
    gap: var(--space-3);
}

.band-condition-service-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.band-condition-service-groups > section {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}

.band-condition-service-groups h4 {
    margin: 0;
    font-size: 0.86rem;
}

.band-condition-service-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
}

.band-condition-service-stats > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.band-condition-service-stats dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.band-condition-service-stats dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.alert {
    padding: 0.65rem 0.78rem;
    border-radius: var(--radius-sm);
    background: rgba(201, 122, 122, 0.1);
    border: 1px solid rgba(201, 122, 122, 0.24);
    color: var(--danger);
    overflow-wrap: anywhere;
}

.alert.success {
    background: rgba(107, 170, 121, 0.1);
    border-color: rgba(107, 170, 121, 0.22);
    color: var(--success);
}

.danger-zone-panel {
    border-color: rgba(201, 122, 122, 0.34);
}

.settings-primary-grid {
    align-items: start;
}

.settings-compact-number-field input {
    width: 5.5rem;
}

.settings-primary-grid > #settings-panel-global,
.settings-primary-grid > .settings-primary-side {
    align-self: stretch;
}

.settings-primary-side {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-4);
    min-width: 0;
}

.settings-panel-help-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.igate-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    gap: var(--space-4);
    align-items: start;
}

.igate-config-form {
    min-width: 0;
}

.igate-status-summary {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-4);
    border-left: 1px solid var(--border);
}

.igate-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.igate-status-summary .tnc-badge {
    min-height: 2rem;
}

.igate-compact-list,
.igate-diagnostics-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.igate-compact-list > div,
.igate-diagnostics-list > div {
    display: grid;
    grid-template-columns: minmax(9rem, 0.72fr) minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.42rem 0;
    border-top: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
    align-items: baseline;
    min-width: 0;
}

.igate-compact-list dt,
.igate-diagnostics-list dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.igate-compact-list dd,
.igate-diagnostics-list dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.82rem;
}

.igate-compact-list code,
.igate-diagnostics-list code {
    white-space: normal;
}

.igate-diagnostics-details {
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
}

.igate-diagnostics-details summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
}

.igate-diagnostics-details[open] {
    display: grid;
    gap: var(--space-3);
}

.igate-diagnostics-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
}

.danger-zone-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.danger-zone-item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
}

.danger-zone-item h3 {
    margin: 0;
    font-size: 0.92rem;
}

.settings-update-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.settings-update-channel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.settings-update-channel-warning {
    display: flex;
    align-items: center;
    min-height: var(--control-height);
    white-space: nowrap;
}

.form-grid .settings-update-channel-row > .settings-update-channel-warning {
    grid-column: auto;
}

.settings-map-sources-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.map-sources-panel .panel-body {
    gap: var(--space-3);
}

.map-sources-panel .section-lead {
    max-width: 62ch;
}

.map-source-default-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.14rem 0.46rem;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(109, 189, 128, 0.24);
    font-size: 0.72rem;
}

.map-sources-table {
    table-layout: auto;
}

.map-sources-table th,
.map-sources-table td {
    min-width: 0;
    padding: 0.32rem 0.34rem;
}

.map-sources-table th:nth-child(1),
.map-sources-table td:nth-child(1) {
    width: 2.7rem;
    text-align: center;
    white-space: nowrap;
}

.map-sources-table th:nth-child(2),
.map-sources-table td:nth-child(2) {
    width: auto;
    white-space: nowrap;
}

.map-sources-table th:nth-child(3),
.map-sources-table td:nth-child(3),
.map-sources-table th:nth-child(4),
.map-sources-table td:nth-child(4),
.map-sources-table th:nth-child(5),
.map-sources-table td:nth-child(5) {
    white-space: nowrap;
}

.map-sources-actions-cell {
    width: 9rem;
    min-width: 9rem;
}

.map-sources-actions-cell .table-actions {
    flex-wrap: nowrap;
    gap: 0.16rem;
}

.map-sources-table .table-icon-button {
    width: 1.46rem;
    min-width: 1.46rem;
    height: 1.46rem;
    min-height: 1.46rem;
}

.map-sources-table .table-icon-button img {
    width: 0.76rem;
    height: 0.76rem;
}

.map-source-form textarea {
    min-height: 5.5rem;
}

.map-source-form {
    gap: var(--space-2);
}

.map-source-help-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
}

.map-source-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.map-source-help-link:hover {
    text-decoration: underline;
}

.map-source-help-link img {
    width: 0.92rem;
    height: 0.92rem;
    opacity: 0.88;
    filter: var(--icon-filter);
}

.update-log-preview {
    margin: 0;
    max-height: 20rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
    font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text);
}

.settings-progress-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.38);
    display: grid;
    place-items: center;
    padding: 1rem;
    cursor: pointer;
}

.settings-progress-backdrop[hidden] {
    display: none !important;
}

.settings-progress-modal {
    width: min(34rem, 100%);
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel), var(--panel-alt));
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: var(--space-2);
    cursor: default;
}

.settings-progress-header {
    display: flex;
    align-items: center;
    gap: 0.62rem;
}

.settings-progress-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(109, 189, 128, 0.35);
    border-top-color: var(--accent);
    animation: settings-spin 0.85s linear infinite;
    flex-shrink: 0;
}

.settings-progress-title {
    margin: 0;
    font-size: 0.96rem;
}

.settings-progress-details {
    display: grid;
    gap: 0.48rem;
    margin-top: 0.28rem;
}

.settings-progress-details[hidden] {
    display: none !important;
}

.settings-progress-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.settings-progress-stage {
    min-width: 0;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.4;
}

.settings-progress-percent {
    color: var(--accent);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.settings-progress-track {
    height: 0.58rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-alt) 82%, var(--border) 18%);
}

.settings-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent));
    transition: width 280ms ease;
}

.settings-progress-message {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-line;
}

.settings-confirm-input {
    width: 100%;
    margin-top: 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.035em;
}

.settings-confirm-input[hidden] {
    display: none !important;
}

.settings-progress-actions {
    margin-top: 0.9rem;
    display: flex;
    justify-content: flex-end;
}

.settings-progress-close {
    min-width: 4.5rem;
}

@keyframes settings-spin {
    to {
        transform: rotate(360deg);
    }
}

.simple-list {
    padding-left: 1rem;
    margin: 0;
}

.details-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1rem;
}

.https-file-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--icon-control-size);
}

.https-file-status .tnc-status-icon,
.https-file-delete-button {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
}

.https-file-status .tnc-status-icon img {
    width: 0.9rem;
    height: 0.9rem;
}

.https-file-delete-form {
    display: inline-flex;
    margin: 0;
}

.station-detail-header,
.station-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.station-detail-page {
    display: grid;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
}

.station-detail-page > * {
    min-width: 0;
}

.station-device-block {
    display: grid;
    gap: 0.85rem;
}

.station-device-summary {
    margin: 0;
}

.station-device-grid {
    margin: 0;
}

.station-device-capabilities {
    display: grid;
    gap: 0.45rem;
}

.station-device-capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.station-device-capability-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
}

.station-detail-message-link {
    width: 2.6rem;
    min-width: 2.6rem;
    height: 2.6rem;
    min-height: 2.6rem;
}

.station-detail-message-link img {
    width: 1.2rem;
    height: 1.2rem;
}

.station-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
    gap: var(--space-4);
    min-width: 0;
}

.station-detail-hero > * {
    min-width: 0;
}

.station-detail-fields {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
    gap: 0.5rem 0.85rem;
    margin: 0;
}

.station-detail-fields dt {
    color: var(--muted);
}

.station-detail-fields dd {
    margin: 0;
    word-break: break-word;
    min-width: 0;
}

.station-detail-comment-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.12em;
}

.station-detail-comment-link:hover,
.station-detail-comment-link:focus-visible {
    color: inherit;
}

.station-detail-decoded {
    margin-top: 0.9rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 0.35rem;
}

.station-detail-decoded[hidden] {
    display: none !important;
}

.station-detail-decoded-label {
    display: inline-block;
    margin-bottom: 0.1rem;
}

.station-packets-table {
    table-layout: auto;
}

.station-packets-table th:nth-child(1),
.station-packets-table td:nth-child(1) {
    width: 7rem;
    min-width: 7rem;
}

.station-packets-table th:nth-child(2),
.station-packets-table td:nth-child(2),
.station-packets-table th:nth-child(3),
.station-packets-table td:nth-child(3) {
    width: 5.5rem;
    min-width: 5.5rem;
    white-space: nowrap;
}

.station-packets-table th:nth-child(4),
.station-packets-table td:nth-child(4) {
    width: 8rem;
    min-width: 8rem;
    white-space: nowrap;
}

.station-packets-table th:nth-child(5),
.station-packets-table td:nth-child(5) {
    width: 12rem;
    min-width: 12rem;
    white-space: nowrap;
}

.station-packets-table th:nth-child(6),
.station-packets-table td:nth-child(6) {
    min-width: 32rem;
    white-space: nowrap;
}

.station-packets-table td:nth-child(6) code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.beacon-log-table {
    table-layout: auto;
}

.beacon-log-table th:nth-child(1),
.beacon-log-table td:nth-child(1) {
    width: 11rem;
    min-width: 11rem;
    white-space: nowrap;
}

.beacon-log-table th:nth-child(2),
.beacon-log-table td:nth-child(2) {
    width: 6rem;
    min-width: 6rem;
    white-space: nowrap;
}

.beacon-log-table th:nth-child(3),
.beacon-log-table td:nth-child(3) {
    width: 9rem;
    min-width: 9rem;
    white-space: nowrap;
}

.beacon-log-table th:nth-child(4),
.beacon-log-table td:nth-child(4) {
    width: 8rem;
    min-width: 8rem;
    white-space: nowrap;
}

.beacon-log-table th:nth-child(5),
.beacon-log-table td:nth-child(5) {
    width: 5rem;
    min-width: 5rem;
    white-space: nowrap;
}

.beacon-log-table th:nth-child(6),
.beacon-log-table td:nth-child(6) {
    min-width: 10rem;
}

.beacon-log-table th:nth-child(7),
.beacon-log-table td:nth-child(7) {
    min-width: 30rem;
    width: 100%;
    white-space: nowrap;
}

.beacon-log-table td:nth-child(7) code {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.station-detail-map-root,
.station-detail-map-canvas {
    width: 100%;
}

.station-detail-map-root {
    position: relative;
}

.station-detail-map-canvas {
    --map-mask-layer-opacity: 0;
    min-height: 22rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel-soft);
}

.station-detail-map-canvas .leaflet-pane.map-mask-pane {
    z-index: 300;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.station-detail-map-canvas .map-mask-layer {
    position: absolute;
    inset: 0;
    background: var(--map-mask-layer-color);
    opacity: var(--map-mask-layer-opacity);
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.station-detail-map-root[hidden],
.station-map-placeholder[hidden] {
    display: none !important;
}

.station-map-placeholder {
    min-height: 22rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: var(--panel-alt);
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1rem;
}

.station-message-form {
    margin-top: 0;
}

.station-ssid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.station-ssid-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.station-ssid-chip:hover {
    background: var(--panel-emphasis);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.station-ssid-chip.current {
    background: var(--accent-soft);
    border-color: rgba(109, 189, 128, 0.28);
}

.traffic-status-row,
.traffic-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.traffic-page-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.traffic-toolbar,
.toolbar-inline {
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    box-shadow: var(--shadow-soft);
}

.traffic-toolbar h2,
.toolbar-inline h2 {
    margin: 0;
}

.traffic-toolbar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.traffic-legend-open-button {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
}

.traffic-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.traffic-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.traffic-filter-button {
    display: inline-flex;
    align-items: center;
    min-width: 4.2rem;
    justify-content: center;
}

.traffic-filter-button.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-soft);
    background: linear-gradient(180deg, var(--accent-soft), var(--panel-soft));
}

.traffic-text-filter {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.traffic-text-filter span {
    white-space: nowrap;
}

.traffic-text-filter input {
    width: 18rem;
    max-width: 100%;
}

.inline-form {
    margin: 0;
}

.traffic-legend-modal[hidden] {
    display: none;
}

.traffic-legend-modal {
    position: fixed;
    inset: 0;
    z-index: 85;
}

.traffic-legend-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.traffic-legend-dialog {
    position: relative;
    width: min(42rem, calc(100vw - 2rem));
    max-height: 82vh;
    margin: 6vh auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.traffic-legend-header,
.traffic-legend-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.9rem;
}

.traffic-legend-header {
    border-bottom: 1px solid var(--border);
}

.traffic-legend-header h3 {
    margin: 0;
}

.traffic-legend-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.traffic-color-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.85rem;
    min-height: 0;
    padding: 1rem;
    overflow: auto;
    color: var(--muted);
    font-size: 0.78rem;
}

.traffic-color-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    white-space: nowrap;
}

.traffic-color-legend-swatch {
    width: 0.78rem;
    height: 0.78rem;
    flex: 0 0 0.78rem;
    border: 2px solid var(--traffic-legend-color, var(--border));
    border-radius: 3px;
    background: var(--traffic-legend-background, transparent);
}

.traffic-color-legend-swatch-own-beacon-tx {
    --traffic-legend-color: var(--traffic-color-own-beacon-tx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-own-beacon-tx) 20%, transparent);
}

.traffic-color-legend-swatch-own-beacon-rx {
    --traffic-legend-color: var(--traffic-color-own-beacon-rx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-own-beacon-rx) 9%, transparent);
}

.traffic-color-legend-swatch-own-wx-tx {
    --traffic-legend-color: var(--traffic-color-own-wx-tx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-own-wx-tx) 20%, transparent);
}

.traffic-color-legend-swatch-own-wx-rx {
    --traffic-legend-color: var(--traffic-color-own-wx-rx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-own-wx-rx) 9%, transparent);
}

.traffic-color-legend-swatch-own-message-tx {
    --traffic-legend-color: var(--traffic-color-own-message-tx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-own-message-tx) 20%, transparent);
}

.traffic-color-legend-swatch-own-message-rx {
    --traffic-legend-color: var(--traffic-color-own-message-rx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-own-message-rx) 9%, transparent);
}

.traffic-color-legend-swatch-repeated-tx {
    --traffic-legend-color: var(--traffic-color-repeated-tx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-repeated-tx) 17%, transparent);
}

.traffic-color-legend-swatch-proxy-tx {
    --traffic-legend-color: var(--traffic-color-proxy-tx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-proxy-tx) 20%, transparent);
}

.traffic-color-legend-swatch-aprsis-rx {
    --traffic-legend-color: var(--traffic-color-aprsis-rx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-aprsis-rx) 9%, transparent);
}

.traffic-color-legend-swatch-aprsis-to-rf-tx {
    --traffic-legend-color: var(--traffic-color-aprsis-to-rf-tx);
    --traffic-legend-background: color-mix(in srgb, var(--traffic-color-aprsis-to-rf-tx) 26%, transparent);
    border-width: 3px;
}

.traffic-color-legend-item-warning {
    color: var(--traffic-color-aprsis-to-rf-tx);
    font-weight: 700;
}

@media (max-width: 640px) {
    .traffic-legend-dialog {
        width: calc(100vw - 1rem);
        max-height: 90vh;
        margin-top: 2vh;
    }

    .traffic-color-legend {
        grid-template-columns: 1fr;
    }
}

.traffic-details {
    margin-top: 0;
}

.traffic-stream {
    display: grid;
    gap: 0;
    max-height: calc(60vh + 150px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
}

#traffic-stream {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--border)) transparent;
    -ms-overflow-style: auto;
}

#traffic-stream::-webkit-scrollbar {
    width: 0.42rem;
    height: 0.42rem;
}

#traffic-stream::-webkit-scrollbar-track {
    background: transparent;
}

#traffic-stream::-webkit-scrollbar-thumb {
    border: 0.1rem solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 42%, var(--border));
    background-clip: padding-box;
}

#traffic-stream::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 68%, var(--border));
    background-clip: padding-box;
}

.traffic-summary-stream {
    max-height: none;
    margin-bottom: 0;
}

.traffic-summary-stream .traffic-log-row {
    grid-template-columns: 5rem minmax(10rem, 14rem) minmax(0, 1fr);
}

.traffic-summary-stream .traffic-interface-row {
    grid-template-columns: 5.2rem 5rem minmax(10rem, 14rem) minmax(0, 1fr);
}

.traffic-summary-stream .traffic-log-source {
    white-space: normal;
}

.traffic-interface-toggle {
    justify-self: start;
}

.traffic-interface-toggle img {
    width: 0.88rem;
    height: 0.88rem;
    filter: var(--icon-filter);
}

.traffic-interface-toggle:hover {
    transform: translateY(-1px);
}

.traffic-interface-toggle[aria-pressed="false"] {
    background: transparent;
    border-color: var(--border);
    opacity: 0.72;
}

.traffic-interface-row-hidden {
    opacity: 0.75;
}

.traffic-log-row {
    --traffic-row-color: transparent;
    --traffic-row-background: transparent;
    display: grid;
    grid-template-columns: 11rem fit-content(14rem) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0.15rem;
    align-items: start;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    line-height: 1.3;
    background: var(--traffic-row-background);
    box-shadow: inset 3px 0 0 var(--traffic-row-color);
}

.traffic-log-row:last-child {
    border-bottom: 0;
}

.traffic-log-row-own-beacon-tx {
    --traffic-row-color: var(--traffic-color-own-beacon-tx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-own-beacon-tx) 20%, transparent);
}

.traffic-log-row-own-beacon-rx {
    --traffic-row-color: var(--traffic-color-own-beacon-rx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-own-beacon-rx) 9%, transparent);
}

.traffic-log-row-own-wx-tx {
    --traffic-row-color: var(--traffic-color-own-wx-tx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-own-wx-tx) 20%, transparent);
}

.traffic-log-row-own-wx-rx {
    --traffic-row-color: var(--traffic-color-own-wx-rx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-own-wx-rx) 9%, transparent);
}

.traffic-log-row-own-message-tx {
    --traffic-row-color: var(--traffic-color-own-message-tx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-own-message-tx) 20%, transparent);
}

.traffic-log-row-own-message-rx {
    --traffic-row-color: var(--traffic-color-own-message-rx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-own-message-rx) 9%, transparent);
}

.traffic-log-row-repeated-tx {
    --traffic-row-color: var(--traffic-color-repeated-tx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-repeated-tx) 17%, transparent);
}

.traffic-log-row-proxy-tx {
    --traffic-row-color: var(--traffic-color-proxy-tx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-proxy-tx) 20%, transparent);
}

.traffic-log-row-aprsis-rx {
    --traffic-row-color: var(--traffic-color-aprsis-rx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-aprsis-rx) 9%, transparent);
}

.traffic-log-row-aprsis-to-rf-tx {
    --traffic-row-color: var(--traffic-color-aprsis-to-rf-tx);
    --traffic-row-background: color-mix(in srgb, var(--traffic-color-aprsis-to-rf-tx) 26%, transparent);
    box-shadow: inset 5px 0 0 var(--traffic-row-color);
}

.traffic-log-row-emergency {
    --traffic-row-color: var(--danger);
    --traffic-row-background: color-mix(in srgb, var(--danger) 14%, transparent);
    box-shadow: inset 5px 0 0 var(--traffic-row-color);
}

:is(
    .traffic-log-row-own-beacon-tx,
    .traffic-log-row-own-beacon-rx,
    .traffic-log-row-own-wx-tx,
    .traffic-log-row-own-wx-rx,
    .traffic-log-row-own-message-tx,
    .traffic-log-row-own-message-rx,
    .traffic-log-row-repeated-tx,
    .traffic-log-row-proxy-tx,
    .traffic-log-row-aprsis-rx,
    .traffic-log-row-aprsis-to-rf-tx
) :is(.traffic-log-time, .traffic-log-source, .traffic-log-line) {
    color: var(--traffic-row-color);
}

.traffic-log-row-skipped .traffic-log-time,
.traffic-log-row-skipped .traffic-log-source,
.traffic-log-row-skipped .traffic-log-line {
    text-decoration: line-through;
    text-decoration-thickness: 1.3px;
    opacity: 0.88;
}

/* Legacy classes kept for compatibility with older snapshots/tests. */
.traffic-log-row-local {
    background: rgba(79, 141, 255, 0.2);
}

.traffic-log-row-local .traffic-log-time,
.traffic-log-row-local .traffic-log-source,
.traffic-log-row-local .traffic-log-line {
    color: var(--traffic-color-own-beacon-tx);
}

.traffic-log-row-weather {
    background: rgba(70, 168, 95, 0.2);
}

.traffic-log-row-weather .traffic-log-time,
.traffic-log-row-weather .traffic-log-source,
.traffic-log-row-weather .traffic-log-line {
    color: var(--traffic-color-own-wx-tx);
}

.traffic-log-row-repeated {
    background: rgba(210, 75, 75, 0.16);
}

.traffic-log-row-repeated .traffic-log-time,
.traffic-log-row-repeated .traffic-log-source,
.traffic-log-row-repeated .traffic-log-line {
    color: var(--traffic-color-repeated-tx);
}

.traffic-log-time,
.traffic-log-source {
    color: var(--muted);
    word-break: break-word;
}

.traffic-log-source {
    white-space: nowrap;
    padding-inline: 0.55rem;
}

.traffic-direction-warning-badge {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.35rem;
    padding: 0.05rem 0.32rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: color-mix(in srgb, var(--traffic-color-aprsis-to-rf-tx) 24%, var(--panel));
    color: var(--traffic-color-aprsis-to-rf-tx);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    vertical-align: 0.08em;
}

.traffic-log-line {
    white-space: pre-wrap;
    word-break: break-word;
}

.traffic-frame-links {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-inline-start: 0.65rem;
    white-space: nowrap;
}

.traffic-frame-links a {
    color: var(--accent);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
}

.traffic-frame-links a:hover {
    text-decoration: underline;
}

.traffic-frame-links .traffic-alert-link {
    color: var(--danger);
}

.alerts-page-panel .panel-header {
    align-items: center;
    margin-bottom: var(--space-4);
}

.alerts-table {
    min-width: 42rem;
    table-layout: fixed;
}

.alerts-table .alerts-col-select {
    width: 2.25rem;
}

.alerts-table .alerts-col-source {
    width: 8rem;
}

.alerts-table .alerts-col-category {
    width: 10rem;
}

.alerts-table .alerts-col-areas {
    width: 5.5rem;
}

.alerts-table .alerts-col-relevant-time {
    width: 12rem;
}

.alerts-table .alerts-col-actions {
    width: 19.75rem;
}

.alerts-table th,
.alerts-table td {
    white-space: nowrap;
}

.alerts-select-column,
.alerts-select-cell {
    text-align: center;
}

.alerts-table input[type="checkbox"] {
    appearance: auto;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.alerts-table .alerts-actions-cell {
    overflow: visible;
    text-overflow: clip;
}

.frame-type-badge-emergency,
.alert-category-badge-emergency {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
    background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.alert-list-category {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.alert-category-badge {
    gap: 0.32rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-category-event-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    filter: var(--icon-filter);
}

.alert-category-badge-level-1 {
    --alert-category-color: #ffd43b;
    color: var(--alert-category-color);
    border-color: color-mix(in srgb, var(--alert-category-color) 58%, var(--border));
    background: color-mix(in srgb, var(--alert-category-color) 15%, transparent);
}

.alert-category-badge-level-2 {
    --alert-category-color: #ff922b;
    color: var(--alert-category-color);
    border-color: color-mix(in srgb, var(--alert-category-color) 58%, var(--border));
    background: color-mix(in srgb, var(--alert-category-color) 15%, transparent);
}

.alert-category-badge-level-3 {
    --alert-category-color: var(--danger);
    color: var(--alert-category-color);
    border-color: color-mix(in srgb, var(--alert-category-color) 58%, var(--border));
    background: color-mix(in srgb, var(--alert-category-color) 15%, transparent);
}

.alert-category-badge-unknown {
    --alert-category-color: var(--muted);
    color: var(--alert-category-color);
    border-color: color-mix(in srgb, var(--alert-category-color) 48%, var(--border));
    background: color-mix(in srgb, var(--alert-category-color) 10%, transparent);
}

:root[data-theme="light"] .alert-category-badge-level-1 {
    --alert-category-color: #8a6500;
}

:root[data-theme="light"] .alert-category-badge-level-2 {
    --alert-category-color: #a84f00;
}

.alert-list-muted-indicator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    opacity: 0.72;
}

.alert-list-muted-indicator img {
    width: 0.9rem;
    height: 0.9rem;
    filter: var(--icon-filter);
}

.alert-list-time {
    font-variant-numeric: tabular-nums;
}

.alerts-table .table-actions {
    width: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.28rem;
}

.alerts-table .table-action-form,
.alerts-table .alert-mute-form {
    flex: 0 0 auto;
    margin: 0;
}

.alerts-table .alert-mute-form {
    flex-wrap: nowrap;
    gap: 0.24rem;
}

.alerts-table .alert-mute-form select {
    width: 9rem;
    min-width: 9rem;
    max-width: 9rem;
}

.alert-row-muted {
    opacity: 0.72;
}

.alert-state-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.48rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-soft);
    font-size: 0.72rem;
    white-space: nowrap;
}

.alert-state-badge-muted {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.alert-state-badge-incomplete {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.alert-state-badge-complete {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.alert-mute-form,
.alert-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.alert-emergency-panel {
    border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--danger) 8%, transparent),
        var(--shadow);
}

.alert-detail-map-placeholder {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-content: center;
    color: var(--muted);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--panel-alt) 88%, transparent), color-mix(in srgb, var(--panel-soft) 92%, transparent));
}

.alert-detail-map-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.22;
    background-image:
        linear-gradient(color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px);
    background-size: 2.75rem 2.75rem;
    transform: rotate(-7deg) scale(1.12);
}

.alert-detail-map-placeholder img {
    width: 3rem;
    height: 3rem;
    opacity: 0.48;
    filter: grayscale(1) var(--icon-filter);
}

.alert-detail-map-placeholder strong {
    font-size: 1rem;
}

.alert-detail-panel .panel-header {
    align-items: flex-start;
}

.alert-detail-header-tools {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-left: auto;
    flex-wrap: nowrap;
}

.alert-detail-help-button {
    position: static;
    flex: 0 0 auto;
}

.alert-detail-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.alert-detail-actions form {
    margin: 0;
}

.alert-detail-actions .alert-detail-mute-form,
.alert-detail-actions .alert-detail-action-form {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
}

.alert-detail-actions .alert-detail-mute-form select {
    width: 12rem;
    min-width: 12rem;
}

.alert-detail-actions .button {
    white-space: nowrap;
}

.alert-mute-form select {
    min-height: var(--icon-control-size);
    padding-block: 0.2rem;
    font-size: 0.74rem;
}

.alerts-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.alerts-pagination .form-actions {
    padding-top: 0;
}

.alerts-pagination-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.alerts-pagination-summary form {
    margin: 0;
}

.alert-details-grid,
.traffic-frame-details-grid {
    margin-top: var(--space-4);
}

.alert-detail-critical-value {
    color: var(--danger);
    font-weight: 700;
}

.alert-history-table {
    min-width: 62rem;
    table-layout: auto;
}

.alert-parts-table {
    min-width: 86rem;
    table-layout: auto;
}

.alert-parts-table .traffic-frame-raw {
    display: inline-block;
    min-width: 18rem;
}

.traffic-frame-raw {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .alerts-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .alerts-pagination-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .alert-detail-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .alert-detail-header-tools {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .alert-details-grid {
        grid-template-columns: 1fr;
    }
}

.small {
    font-size: 0.85rem;
}

code {
    background: var(--code);
    border-radius: 6px;
    padding: 0.1rem 0.3rem;
}

.changelog-markdown {
    display: grid;
    gap: 0.55rem;
    line-height: 1.5;
}

.changelog-markdown h1,
.changelog-markdown h2,
.changelog-markdown h3,
.changelog-markdown h4,
.changelog-markdown h5,
.changelog-markdown h6 {
    margin: 0.22rem 0 0.12rem;
}

.changelog-markdown p {
    margin: 0;
}

.changelog-markdown ul {
    margin: 0;
    padding-left: 1.18rem;
}

.changelog-markdown li {
    margin: 0.16rem 0;
}

.changelog-markdown pre {
    margin: 0;
    padding: 0.72rem 0.82rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel-alt);
    overflow-x: auto;
}

.changelog-markdown pre code {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: var(--radius-sm);
}

.table-wrap .data-table {
    min-width: 100%;
}

.section-symbol-preview {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

:root[data-aprs-symbol-set="modern"] .section-symbol-preview {
    width: 32px;
    height: 32px;
}

.prepared-entity-table {
    table-layout: fixed;
}

.prepared-entity-table thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prepared-entity-col-icon {
    width: 4rem;
    text-align: center;
}

.prepared-entity-col-active {
    width: 2.75rem;
}

.prepared-entity-table tbody .prepared-entity-col-icon,
.prepared-entity-table tbody .prepared-entity-col-active {
    padding-inline: 0.35rem;
    text-align: center;
    text-overflow: clip;
}

.prepared-entity-col-schedule {
    width: 12rem;
}

.prepared-entity-col-interval {
    width: 4.5rem;
    white-space: nowrap;
}

.prepared-entity-col-name {
    width: 8.5rem;
}

.prepared-entity-col-object-name {
    min-width: 11rem;
    width: 22%;
}

.prepared-entity-col-object-status,
.prepared-entity-col-actions {
    width: 4.5rem;
    text-align: center;
}

.prepared-entity-col-object-what {
    min-width: 12rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}

.object-group-row td {
    padding: 0.28rem 0.34rem;
    background: color-mix(in srgb, var(--panel-alt) 82%, var(--panel));
    overflow: visible;
    text-overflow: clip;
}

.object-group-icon {
    width: 1.25rem;
    height: 1.25rem;
    filter: var(--icon-filter);
}

.object-group-toggle {
    width: 100%;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    gap: 0.52rem;
    padding: 0.34rem 0.46rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.object-group-toggle:hover {
    border-color: var(--border-hover);
    background: var(--accent-soft);
}

.object-group-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.object-group-chevron {
    width: 0.92rem;
    height: 0.92rem;
    flex: 0 0 auto;
    filter: var(--icon-filter);
    transition: transform var(--transition-fast);
}

.object-group-toggle[aria-expanded="true"] .object-group-chevron {
    transform: rotate(90deg);
}

.object-group-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.object-group-count {
    min-width: 1.7rem;
    margin-left: auto;
    padding: 0.12rem 0.48rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.object-group-child-row[hidden] {
    display: none;
}

.object-group-child-row td {
    background: color-mix(in srgb, var(--panel-alt) 40%, transparent);
}

.object-group-child-name {
    padding-left: 1.65rem !important;
}

.object-group-child-name::before {
    content: "";
    display: inline-block;
    width: 0.78rem;
    height: 0.58rem;
    margin-right: 0.48rem;
    border-left: 1px solid var(--border-hover);
    border-bottom: 1px solid var(--border-hover);
    vertical-align: 0.22rem;
}

.object-technical-details code {
    display: block;
    margin-top: 0.5rem;
    overflow-wrap: anywhere;
}

.prepared-entity-col-raw {
    width: auto;
}

.prepared-entity-col-raw code {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activation-summary-panel,
.activation-warning-list {
    display: grid;
    gap: 0.35rem;
}

.activation-group-inactive {
    opacity: 0.48;
}

.activation-grid-spacer {
    min-height: 1px;
}

.activation-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.activation-summary-panel {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.field-validation-warning {
    color: var(--warning, #b7791f);
}

.modems-summary-table {
    table-layout: auto;
}

.modems-summary-table th,
.modems-summary-table td {
    white-space: nowrap;
}

.modems-summary-icon-cell {
    text-align: center;
}

.modems-summary-icon-cell .tnc-status-icon {
    margin-inline: auto;
}

.modems-summary-table th:nth-child(1),
.modems-summary-table td:nth-child(1) {
    width: 48%;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modems-summary-table th:last-child,
.modems-summary-table td:last-child {
    width: 3.5rem;
    text-align: center;
}

.wx-mapping-groups,
.wx-diagnostics-grid {
    display: grid;
    gap: var(--space-4);
}

.wx-mapping-group h3,
.wx-preview-box h3 {
    margin: 0 0 var(--space-2);
}

.wx-mapping-table {
    table-layout: auto;
}

.wx-mapping-table-edit {
    table-layout: fixed;
}

.wx-mapping-table-edit th:nth-child(1),
.wx-mapping-table-edit td:nth-child(1) {
    width: 23%;
}

.wx-mapping-table-edit th:nth-child(2),
.wx-mapping-table-edit td:nth-child(2) {
    width: 13%;
}

.wx-mapping-table-edit th:nth-child(3),
.wx-mapping-table-edit td:nth-child(3) {
    width: 14%;
}

.wx-mapping-table-edit th:nth-child(4),
.wx-mapping-table-edit td:nth-child(4) {
    width: 12%;
}

.wx-mapping-table-edit th:nth-child(5),
.wx-mapping-table-edit td:nth-child(5) {
    width: 12%;
}

.wx-mapping-table-edit th:nth-child(6),
.wx-mapping-table-edit td:nth-child(6) {
    width: 9%;
}

.wx-mapping-table-edit th:nth-child(7),
.wx-mapping-table-edit td:nth-child(7) {
    width: 14%;
}

.wx-mapping-table-edit th:nth-child(8),
.wx-mapping-table-edit td:nth-child(8) {
    width: 3.5rem;
    text-align: center;
}

.wx-mapping-table td code,
.wx-discovery-table td code,
.wx-source-table td code {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wx-selector-stack {
    display: grid;
    gap: 0.35rem;
    min-width: 10rem;
}

.wx-cache-cell {
    display: grid;
    gap: 0.2rem;
}

.wx-inline-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

.wx-inline-actions .table-action-form {
    display: inline-flex;
}

.wx-source-form {
    margin-top: var(--space-4);
}

.wx-preview-box {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    box-shadow: var(--shadow-soft);
}

.wx-preview-box pre {
    margin: 0;
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
    border: 1px solid var(--border);
    overflow: auto;
    font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.message-entry-col-type {
    width: 8.5rem;
}

.message-entry-col-target {
    width: 8rem;
}

.message-entry-col-target code {
    white-space: pre;
}

.field-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.field-validation-error {
    color: var(--danger);
}

.location-picker-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.location-picker-button img {
    width: 18px;
    height: 18px;
}

:root:not([data-theme="light"]) .location-picker-button img {
    filter: brightness(0) invert(1);
}

.location-picker-modal[hidden] {
    display: none;
}

.location-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
}

.location-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
}

.location-picker-dialog {
    position: relative;
    width: min(42rem, calc(100vw - 2rem));
    margin: 4vh auto 0;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
}

.location-picker-header,
.location-picker-footer,
.location-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.location-picker-header {
    margin-bottom: 0.8rem;
}

.location-picker-header h3 {
    margin: 0;
}

.location-picker-map-wrap {
    position: relative;
    height: 22rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--panel-soft);
}

.location-picker-map {
    position: absolute;
    inset: 0;
}

.location-picker-crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 500;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    backdrop-filter: blur(1px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.location-picker-crosshair::before,
.location-picker-crosshair::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
}

.location-picker-crosshair::before {
    width: 1.5px;
    height: 30px;
}

.location-picker-crosshair::after {
    width: 30px;
    height: 1.5px;
}

:root[data-theme="light"] .location-picker-crosshair,
:root[data-theme="light"] .location-picker-crosshair::before,
:root[data-theme="light"] .location-picker-crosshair::after {
    background: rgba(17, 23, 20, 0.85);
    border-color: rgba(17, 23, 20, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.location-picker-footer {
    margin-top: 0.8rem;
}

body.modal-open {
    overflow: hidden;
}

.empty-state {
    padding: var(--space-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
}

.toolbar-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    grid-column: 1 / -1;
    padding-top: var(--space-1);
}

.table-action-form {
    display: flex;
    margin: 0;
}

.table-action-form .button {
    width: 100%;
}

.tx-log-row-skipped td {
    text-decoration: line-through;
    text-decoration-thickness: 1.3px;
    opacity: 0.82;
}

.users-action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    flex-wrap: nowrap;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    flex-wrap: nowrap;
    width: 100%;
}

.table-actions-start {
    justify-content: flex-start;
}

.table-icon-button {
    width: var(--icon-control-size);
    min-width: var(--icon-control-size);
    height: var(--icon-control-size);
    min-height: var(--icon-control-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    border: 1px solid var(--border);
    background: var(--panel-soft);
}

.table-icon-button:hover:not(:disabled) {
    background: var(--panel-emphasis);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.table-icon-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.table-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.table-icon-button-danger {
    border-color: rgba(201, 122, 122, 0.35);
    background: rgba(201, 122, 122, 0.08);
}

.table-icon-button-danger:hover:not(:disabled) {
    background: rgba(201, 122, 122, 0.16);
    border-color: rgba(201, 122, 122, 0.5);
}

.users-management-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.9fr);
    align-items: start;
}

.users-list-panel,
.users-editor-panel {
    min-width: 0;
}

.users-toggle-button {
    min-height: 1.9rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.74rem;
    white-space: nowrap;
}

.checkbox-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: auto;
    padding: 0.3rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.checkbox-row input {
    width: auto;
    min-height: auto;
    margin: 0;
    box-shadow: none;
    accent-color: var(--accent);
    transform: scale(0.92);
}

.checkbox-row span {
    color: var(--text);
    font-size: 0.84rem;
}

.messages-page-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.messages-page-panel {
    padding: 0;
    overflow: hidden;
    min-height: 0;
}

.messages-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    height: clamp(34rem, 68vh, 52rem);
    min-height: 34rem;
    max-height: 52rem;
}

.messages-sidebar,
.messages-thread {
    min-width: 0;
    min-height: 0;
}

.messages-sidebar {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    border-right: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
}

.messages-sidebar-top {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.messages-sidebar-title-row,
.messages-sidebar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.messages-inbox-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.12rem 0.48rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.messages-conversation-list-header {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem 1.85rem 1.85rem;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.55rem;
    padding: 0.32rem calc(var(--space-3) + 0.24rem);
    border-top: 1px solid var(--border);
    border-right: 1px solid transparent;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid transparent;
    background: color-mix(in srgb, var(--panel-alt) 72%, var(--panel-soft));
}

.messages-conversation-header-cell {
    display: grid;
    place-items: center;
    min-width: 0;
}

.messages-conversation-list-header .table-icon-button,
.messages-conversation-delete {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.messages-conversation-list-header .table-icon-button:hover:not(:disabled),
.messages-conversation-delete:hover:not(:disabled) {
    border-color: rgba(201, 122, 122, 0.35);
    background: rgba(201, 122, 122, 0.12);
}

.messages-confirm-modal[hidden] {
    display: none !important;
}

.messages-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1460;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.messages-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
}

.messages-confirm-dialog {
    position: relative;
    display: grid;
    gap: var(--space-3);
    width: min(31rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
}

.messages-confirm-dialog h2,
.messages-confirm-dialog p {
    margin: 0;
}

.messages-confirm-summary {
    padding: var(--space-3);
    border: 1px solid rgba(201, 122, 122, 0.24);
    border-radius: var(--radius-sm);
    background: rgba(201, 122, 122, 0.08);
    color: var(--text);
    font-weight: 700;
}

.messages-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.messages-new-conversation,
.messages-new-conversation-field {
    display: grid;
    gap: var(--space-2);
}

.messages-new-conversation-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
}

.messages-new-conversation-button {
    min-width: var(--control-height);
    padding-inline: 0.7rem;
}

.messages-new-conversation-button img {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter);
}

.messages-conversation-list {
    display: grid;
    align-content: start;
    gap: 0.18rem;
    min-height: 0;
    overflow: auto;
    padding: var(--space-2) var(--space-3);
}

.messages-conversation-list,
.messages-thread-history {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--border)) transparent;
    -ms-overflow-style: auto;
}

.messages-conversation-list::-webkit-scrollbar,
.messages-thread-history::-webkit-scrollbar {
    width: 0.42rem;
    height: 0.42rem;
}

.messages-conversation-list::-webkit-scrollbar-track,
.messages-thread-history::-webkit-scrollbar-track {
    background: transparent;
}

.messages-conversation-list::-webkit-scrollbar-thumb,
.messages-thread-history::-webkit-scrollbar-thumb {
    border: 0.1rem solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 42%, var(--border));
    background-clip: padding-box;
}

.messages-conversation-list::-webkit-scrollbar-thumb:hover,
.messages-thread-history::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 68%, var(--border));
    background-clip: padding-box;
}

.messages-settings-panel {
    padding: var(--space-3) var(--space-4);
}

.messages-settings-panel .panel-body {
    gap: var(--space-3);
}

.messages-settings-header {
    margin: 0;
}

.messages-settings {
    grid-template-columns: minmax(10rem, 0.55fr) minmax(30rem, 1.7fr) minmax(19rem, auto) auto;
    align-items: end;
    gap: var(--space-3);
}

.messages-settings > label {
    min-width: 0;
}

.messages-settings-group-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    min-width: 0;
}

.messages-settings-group-fields label {
    min-width: 0;
}

.messages-settings .checkbox-row {
    grid-column: auto;
    min-height: var(--control-height);
    padding: 0 0.15rem;
    white-space: nowrap;
}

.messages-settings .form-actions {
    grid-column: auto;
    align-self: end;
    padding: 0;
    flex-wrap: nowrap;
}

.messages-settings-actions .button {
    white-space: nowrap;
}

.messages-settings-error {
    grid-column: 1 / -1;
    margin-top: calc(-1 * var(--space-1));
}

.messages-settings input[aria-invalid="true"] {
    border-color: var(--danger);
}

@media (min-width: 981px) {
    .messages-page-layout {
        height: calc(100vh - var(--space-4) - var(--space-4));
        height: calc(100dvh - var(--space-4) - var(--space-4));
        min-height: 46rem;
    }

    .messages-page-panel {
        display: flex;
        flex: 1 1 auto;
        min-height: 34rem;
    }

    .messages-page-layout .messages-shell {
        flex: 1 1 auto;
        height: auto;
        max-height: none;
    }

    .messages-settings-panel {
        flex: 0 0 auto;
    }
}

@media (max-width: 1200px) {
    .messages-settings {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .messages-settings .checkbox-row,
    .messages-settings .form-actions {
        grid-column: auto;
    }

    .messages-settings .form-actions {
        justify-content: flex-end;
    }
}

.messages-conversation-row {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem 1.85rem 1.85rem;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0.12rem 0.24rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.messages-conversation-row:hover {
    background: var(--hover-layer);
    border-color: rgba(109, 189, 128, 0.14);
}

.messages-conversation-row.active {
    background: var(--accent-soft);
    border-color: rgba(109, 189, 128, 0.28);
}

.messages-conversation-button {
    min-height: auto;
    min-width: 0;
    padding: 0.28rem 0.38rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    text-align: left;
    box-shadow: none;
    display: block;
    overflow: hidden;
}

.messages-conversation-button strong {
    display: block;
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-conversation-select,
.messages-select-all {
    display: grid;
    place-items: center;
    margin: 0;
    cursor: pointer;
}

.messages-conversation-select input,
.messages-select-all input {
    width: 1.18rem;
    height: 1.18rem;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--muted);
    cursor: pointer;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    -webkit-mask-image: url("../icons/checkbox-blank-outline.svg");
    mask-image: url("../icons/checkbox-blank-outline.svg");
}

.messages-select-all {
    width: 1.25rem;
    height: 1.85rem;
}

.messages-conversation-select input:checked,
.messages-select-all input:checked {
    background: var(--accent);
    -webkit-mask-image: url("../icons/checkbox-marked-outline.svg");
    mask-image: url("../icons/checkbox-marked-outline.svg");
}

.messages-select-all input:indeterminate {
    background: var(--accent);
    -webkit-mask-image: url("../icons/checkbox-intermediate.svg");
    mask-image: url("../icons/checkbox-intermediate.svg");
}

.messages-conversation-select input:focus-visible,
.messages-select-all input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.messages-conversation-select input:disabled,
.messages-select-all input:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.messages-conversation-heard,
.messages-conversation-read-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.messages-status-icon,
.messages-read-icon {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    background: var(--muted);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.messages-status-icon-heard {
    -webkit-mask-image: url("../icons/antenna.svg");
    mask-image: url("../icons/antenna.svg");
}

.messages-status-icon-group {
    -webkit-mask-image: url("../icons/account-group-outline.svg");
    mask-image: url("../icons/account-group-outline.svg");
}

.messages-status-icon-off {
    opacity: 0.68;
    -webkit-mask-image: url("../icons/access-point-off.svg");
    mask-image: url("../icons/access-point-off.svg");
}

.messages-read-icon-read {
    -webkit-mask-image: url("../icons/email-open-outline.svg");
    mask-image: url("../icons/email-open-outline.svg");
}

.messages-read-icon-unread {
    background: var(--warning);
    -webkit-mask-image: url("../icons/email-alert-outline.svg");
    mask-image: url("../icons/email-alert-outline.svg");
}

.messages-conversation-delete {
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    min-height: 1.85rem;
}

.message-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    white-space: nowrap;
}

.message-state-badge img {
    width: 0.82rem;
    height: 0.82rem;
    filter: var(--icon-filter);
}

.message-state-badge-unread {
    background: rgba(205, 178, 110, 0.14);
    color: var(--warning);
    border-color: rgba(205, 178, 110, 0.3);
}

.message-state-badge-read {
    background: var(--panel);
    color: var(--muted);
}

.messages-status-fresh {
    background: var(--accent);
}

.messages-status-warn {
    background: var(--warning);
}

.messages-status-stale {
    background: var(--danger);
}

.messages-thread {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 16%), var(--panel);
}

.messages-thread-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.messages-thread-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.messages-thread-history {
    min-height: 0;
    overflow: auto;
    display: grid;
    align-content: safe end;
    gap: 0.55rem;
    padding: var(--space-5);
    background:
        radial-gradient(circle at top right, rgba(109, 189, 128, 0.04), transparent 20%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 18%);
}

.messages-thread-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    min-height: 100%;
    padding: var(--space-5);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
    text-align: center;
}

.messages-day-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem 0 0.35rem;
}

.messages-day-separator span {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--muted);
    font-size: 0.72rem;
}

.message-bubble-row {
    display: flex;
}

.message-bubble-row-rx {
    justify-content: flex-start;
}

.message-bubble-row-tx {
    justify-content: flex-end;
}

.message-bubble {
    max-width: min(72%, 42rem);
    padding: 0.72rem 0.82rem 0.58rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.message-bubble-rx {
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    border-top-left-radius: 0.3rem;
}

.message-bubble-tx {
    background: linear-gradient(180deg, var(--message-bubble-tx-bg-top), var(--message-bubble-tx-bg-bottom));
    border-color: var(--message-bubble-tx-border);
    border-top-right-radius: 0.3rem;
}

.message-bubble p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-bubble p a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.message-bubble-sender {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.message-bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.7rem;
    text-align: right;
    justify-content: flex-end;
    width: 100%;
}

.message-delivery-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    white-space: nowrap;
}

button.message-delivery-badge {
    cursor: pointer;
}

.message-delivery-badge-acked {
    color: var(--success);
    border-color: rgba(107, 170, 121, 0.28);
    background: rgba(107, 170, 121, 0.12);
}

.message-delivery-badge-rejected {
    color: #c96e6e;
    border-color: rgba(201, 110, 110, 0.32);
    background: rgba(201, 110, 110, 0.14);
}

.message-delivery-badge-pending {
    color: var(--warning);
    border-color: rgba(205, 178, 110, 0.28);
    background: rgba(205, 178, 110, 0.12);
}

.messages-composer {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
}

.messages-composer-field {
    display: grid;
    gap: 0.34rem;
}

.messages-composer-field textarea {
    min-height: 4.6rem;
    max-height: 9rem;
    resize: vertical;
}

.messages-composer-footer {
    display: grid;
    gap: var(--space-2);
}

.messages-composer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
}

.messages-composer-path-field {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
}

.messages-composer-path-field input {
    min-height: var(--control-height);
}

.messages-composer-meta {
    display: grid;
    gap: 0.18rem;
}

@media (max-width: 980px) {
    .messages-shell {
        height: auto;
        max-height: none;
        min-height: auto;
    }

    .users-management-grid {
        grid-template-columns: 1fr;
    }

    .settings-primary-grid {
        grid-template-columns: 1fr;
    }

    .igate-settings-layout,
    .igate-diagnostics-list {
        grid-template-columns: 1fr;
    }

    .igate-status-summary {
        padding-left: 0;
        padding-top: var(--space-4);
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .settings-map-sources-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        min-height: auto;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .content {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .sidebar-collapse-button {
        display: none;
    }

    .sidebar-collapse-slot {
        display: none;
    }
}

@media (max-width: 720px) {
    .grid.two,
    .dashboard-overview-grid,
    .dashboard-detail-grid,
    .band-condition-layout,
    .danger-zone-actions,
    .igate-compact-list > div,
    .igate-diagnostics-list > div,
    .form-grid,
    .modem-capability-block,
    .station-detail-hero,
    .digi-flow-endpoints,
    .digi-flow-builder {
        grid-template-columns: 1fr;
    }

    .settings-update-channel-row {
        grid-template-columns: 1fr;
    }

    .settings-update-channel-warning {
        white-space: normal;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
    }

    .digi-flow-palette {
        height: auto !important;
    }

    .digi-step-palette {
        max-height: min(32rem, 60vh);
    }

    .activation-grid-spacer {
        display: none;
    }

    .dashboard-inline-metrics {
        grid-template-columns: 1fr 1fr;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .dashboard-hero-runtime-list {
        min-width: 0;
    }

    .dashboard-activity-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-activity-totals {
        gap: 0.35rem 0.7rem;
    }

    .page-header,
    .panel-header,
    .stations-summary-header,
    .traffic-status-row,
    .traffic-toolbar,
    .digi-step-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-header:has(> .settings-panel-help-button) {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .stations-summary-toolbar {
        flex-direction: column;
        width: 100%;
    }

    .stations-refresh-control {
        width: 100%;
    }

    .login-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .traffic-log-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .station-detail-fields {
        grid-template-columns: 1fr;
    }

    .messages-shell {
        grid-template-columns: 1fr;
    }

    .messages-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .messages-conversation-list {
        max-height: 22rem;
    }

    .messages-composer-actions {
        grid-template-columns: 1fr;
    }

    .message-bubble {
        max-width: 92%;
    }

    .stations-summary {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
    }

    .band-condition-index {
        grid-template-columns: 1fr;
    }

    .band-condition-index-value {
        justify-items: start;
    }

    .band-condition-index-legend {
        padding-top: var(--space-3);
        padding-left: 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .band-condition-chart-heading {
        display: grid;
    }

    .band-condition-chart-actions {
        justify-items: start;
    }

    .band-condition-history-range {
        justify-content: flex-start;
    }

    .band-condition-model-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .band-condition-learning-progress {
        grid-template-columns: 1fr;
    }

    .band-condition-service-groups,
    .band-condition-service-stats {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {
    .field-inline-actions {
        grid-template-columns: 1fr;
    }
}

.own-alert-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
}

.own-alert-top-grid > .panel {
    min-width: 0;
    height: 100%;
}

.own-alert-compose-panel .panel-body,
.own-alerts-panel .panel-body {
    gap: var(--space-3);
}

.own-alert-panel-header {
    margin-bottom: 0;
}

.own-alert-panel-header p {
    margin: 0.2rem 0 0;
}

.own-alert-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.own-alert-compose-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-2);
}

.own-alert-area-field {
    grid-row: auto;
}

.own-alert-area-field input,
.own-alert-area-field select {
    min-height: 2rem;
}

.own-alert-comment-field {
    grid-column: 1 / -1;
}

.own-alert-comment-field textarea {
    min-height: 2.1rem;
    resize: vertical;
}

.own-alert-compose-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    align-self: end;
}

.own-alert-compose-form select,
.own-alert-compose-form textarea {
    min-height: 2.1rem;
}

.own-alert-empty-state {
    padding-block: var(--space-3);
}

.own-alerts-table {
    min-width: 60rem;
    table-layout: auto;
}

.own-alerts-table th,
.own-alerts-table td {
    white-space: nowrap;
}

.own-alerts-table th:last-child,
.own-alerts-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--panel);
    box-shadow: -0.35rem 0 0.5rem rgba(0, 0, 0, 0.12);
}

.own-alerts-table th:last-child {
    background: var(--panel-soft);
}

.own-alerts-table td:nth-child(4),
.own-alerts-table td:nth-child(9) {
    white-space: normal;
}

.own-alert-area-code,
.own-alert-error {
    display: block;
    margin-top: 0.15rem;
}

.status-active {
    background: rgba(107, 170, 121, 0.14);
    color: var(--success);
}

.status-error {
    background: rgba(201, 122, 122, 0.14);
    color: var(--danger);
}

.own-alert-modal[hidden] {
    display: none !important;
}

.own-alert-modal {
    position: fixed;
    inset: 0;
    z-index: 1460;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.own-alert-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
}

.own-alert-modal-dialog {
    position: relative;
    width: min(44rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.own-alert-modal-dialog-small {
    width: min(31rem, calc(100vw - 2rem));
}

.own-alert-modal-dialog h2,
.own-alert-modal-dialog p {
    margin: 0;
}

.own-alert-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.own-alert-confirm-grid > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-2);
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border);
}

.own-alert-confirm-grid > div:nth-child(odd) {
    border-right: 1px solid var(--border);
}

.own-alert-confirm-grid dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.own-alert-confirm-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.own-alert-technical-preview pre {
    max-height: 13rem;
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.own-alert-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .own-alert-compose-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .own-alert-compose-form,
    .own-alert-confirm-grid {
        grid-template-columns: 1fr;
    }

    .own-alert-confirm-grid > div:nth-child(odd) {
        border-right: 0;
    }
}

.copyright {
    text-align: center;
    opacity: 0.6;
    margin-top: 2rem;
    font-size: 0.875rem;
}

/* Share activity time/zoom controls while keeping RF diagnostics compact. */
.dashboard-v2 .dashboard-v2-activity-panel .dashboard-rf-load-canvas {
    height: 180px;
    min-height: 180px;
}

/* Two charts need natural page height at the dashboard's desktop breakpoint. */
.dashboard-v2:has(.dashboard-rf-load-block) {
    height: auto;
}
.dashboard-v2:has(.dashboard-rf-load-block) .dashboard-v2-activity-panel > .panel-body {
    grid-template-rows: auto auto 255px auto auto auto;
    height: auto;
}