@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: 12px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-lg: 14px;
    --sidebar-width: 248px;
    --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;
    --map-mask-layer-color: rgba(0, 0, 0, 0.78);
    --traffic-color-own-beacon-tx: #4f8dff;
    --traffic-color-own-beacon-rx: #7aa9ff;
    --traffic-color-own-wx-tx: #46a85f;
    --traffic-color-own-wx-rx: #75c98a;
    --traffic-color-own-message-tx: #e8913a;
    --traffic-color-own-message-rx: #f0b36e;
    --traffic-color-repeated-tx: #d24b4b;
    --traffic-color-proxy-tx: #a65fc1;
}

: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;
}

: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);
    --map-mask-layer-color: color-mix(in srgb, #fff 82%, var(--panel));
    --map-mask-default-opacity: 0.16;
}

: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);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12.75px;
    line-height: 1.42;
    background:
        radial-gradient(circle at top left, rgba(109, 189, 128, 0.08), 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;
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
}

.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 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);
}

.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(--accent-soft);
    color: var(--text);
    border-color: rgba(109, 189, 128, 0.18);
}

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

.nav-link-struck span {
    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);
    padding: var(--space-3);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.sidebar-user-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
    flex-wrap: 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-user-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

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

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

.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 {
    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);
}

.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;
}

.role-badge,
.notice {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.24rem 0.58rem;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid 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);
}

.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-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-3);
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr);
    gap: var(--space-3);
    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-3);
}

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

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.72rem 0.82rem;
    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: 1.08rem;
    line-height: 1.15;
}

.dashboard-hero-copy p {
    margin: 0;
    color: var(--text);
    max-width: 54ch;
}

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

.dashboard-hero-summary {
    display: grid;
    gap: 0.3rem;
    min-width: 11rem;
}

.dashboard-hero-summary-item {
    display: grid;
    gap: 0.12rem;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.08);
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0 0.82rem 0.82rem;
}

.dashboard-kpi-card {
    min-height: 3.55rem;
    align-content: start;
}

.dashboard-action-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 0 1rem 1rem;
}

.dashboard-checks {
    display: grid;
    gap: 0.42rem;
}

.dashboard-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.5rem 0.62rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-alt);
}

.dashboard-check-body {
    min-width: 0;
}

.dashboard-check-no-summary-badge .dashboard-check-body {
    width: 100%;
}

.dashboard-check p {
    margin: 0.12rem 0 0;
    color: var(--muted);
}

.dashboard-check-list {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.12rem;
}

.dashboard-check-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    color: var(--muted);
}

.dashboard-check-list li strong {
    color: var(--text);
}

.dashboard-entry-badge {
    min-width: 5.1rem;
    padding: 0.18rem 0.44rem;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.dashboard-check-warn {
    border-color: rgba(201, 122, 122, 0.28);
}

.dashboard-check-error {
    border-color: rgba(201, 122, 122, 0.5);
    background: rgba(201, 122, 122, 0.09);
}

.dashboard-next-steps {
    display: grid;
    gap: 0.42rem;
}

.dashboard-next-step {
    padding: 0.52rem 0.62rem;
    border: 1px solid rgba(201, 122, 122, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(201, 122, 122, 0.08);
}

.dashboard-next-step p {
    margin: 0.24rem 0 0;
    color: var(--muted);
}

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

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

.dashboard-activity-controls {
    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-zoom-hint {
    margin-left: 0.15rem;
}

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

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

.statistics-main-column,
.statistics-side-column {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
}

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

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

.statistics-devices-canvas {
    min-height: 220px;
    max-height: 280px;
}

.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);
}

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

.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: 152px;
}

.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: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.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: 1180px) {
    .dashboard-overview-grid,
    .dashboard-detail-grid,
    .statistics-layout {
        grid-template-columns: 1fr;
    }
}

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

.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: 24px 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;
}

.station-symbol-option-label {
    overflow: hidden;
    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-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
    box-shadow: var(--shadow-soft);
}

.station-settings-group-header {
    display: grid;
    gap: 0.2rem;
}

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

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

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(--panel-alt);
    color: var(--text);
    border: 1px solid 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-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(--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;
}

.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-endpoint-card h3 {
    margin: 0;
    font-size: 0.96rem;
}

.digi-step-palette {
    display: grid;
    gap: var(--space-3);
}

.digi-palette-button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    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 {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.digi-runtime-icon {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    width: 1rem;
    height: 1rem;
    opacity: 0.9;
}

.digi-runtime-icon-ready {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    border-radius: 999px;
    padding: 0.1rem;
}

.digi-runtime-icon-planned {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
    border-radius: 999px;
    padding: 0.1rem;
}

.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: wrap;
}

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

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

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

.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;
}

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

.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(5, minmax(0, 1fr));
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

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

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

.stations-summary-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.stations-refresh-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.32rem;
    line-height: 1.1;
    min-width: 5.25rem;
    padding: 0.44rem 0.52rem;
    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.75rem;
    min-height: auto;
    padding: 0.42rem 0.56rem;
}

.stations-summary-panel .metric-card {
    padding: 0.42rem 0.5rem;
}

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

.stations-filter-card {
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.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-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
}

.band-condition-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

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

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

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

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

.band-condition-confidence {
    display: grid;
    gap: 0.15rem;
    justify-items: end;
}

.band-condition-confidence strong {
    font-size: 1.2rem;
}

.band-condition-score-explainer {
    display: grid;
    gap: 0.18rem;
    max-width: 30rem;
}

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

.band-condition-confidence-score {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.band-condition-confidence-score strong {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
}

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

.band-condition-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: 1rem 1.05rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.band-condition-hero-good {
    background: linear-gradient(135deg, rgba(107, 170, 121, 0.18), rgba(107, 170, 121, 0.06));
    border-color: rgba(107, 170, 121, 0.32);
}

.band-condition-hero-neutral {
    background: linear-gradient(135deg, rgba(114, 143, 173, 0.18), rgba(114, 143, 173, 0.06));
    border-color: rgba(114, 143, 173, 0.3);
}

.band-condition-hero-busy,
.band-condition-hero-caution {
    background: linear-gradient(135deg, rgba(205, 178, 110, 0.18), rgba(205, 178, 110, 0.06));
    border-color: rgba(205, 178, 110, 0.32);
}

.band-condition-hero-bad {
    background: linear-gradient(135deg, rgba(201, 122, 122, 0.18), rgba(201, 122, 122, 0.06));
    border-color: rgba(201, 122, 122, 0.32);
}

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

.band-condition-eyebrow {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    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-hero-copy strong {
    font-size: 1.42rem;
    line-height: 1.05;
}

.band-condition-hero-copy p {
    margin: 0;
    color: var(--text);
    max-width: 54ch;
}

.band-condition-hero-score {
    display: grid;
    align-content: start;
    justify-items: end;
    gap: 0.16rem;
}

.band-condition-hero-score strong {
    font-size: 2rem;
    line-height: 1;
}

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

.band-condition-pill {
    display: grid;
    gap: 0.18rem;
    padding: 0.82rem 0.88rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.band-condition-pill-label,
.band-condition-pill-value {
    color: var(--muted);
}

.band-condition-pill strong {
    font-size: 1.08rem;
    line-height: 1.1;
}

.band-condition-pill-good {
    background: linear-gradient(180deg, rgba(107, 170, 121, 0.16), rgba(107, 170, 121, 0.05));
    border-color: rgba(107, 170, 121, 0.28);
}

.band-condition-pill-neutral {
    background: linear-gradient(180deg, rgba(114, 143, 173, 0.16), rgba(114, 143, 173, 0.05));
    border-color: rgba(114, 143, 173, 0.26);
}

.band-condition-pill-caution {
    background: linear-gradient(180deg, rgba(205, 178, 110, 0.16), rgba(205, 178, 110, 0.05));
    border-color: rgba(205, 178, 110, 0.28);
}

.band-condition-pill-bad {
    background: linear-gradient(180deg, rgba(201, 122, 122, 0.16), rgba(201, 122, 122, 0.05));
    border-color: rgba(201, 122, 122, 0.28);
}

.band-condition-pill-muted {
    background: linear-gradient(180deg, var(--panel-alt), var(--panel-soft));
}

.band-condition-why {
    display: grid;
    gap: var(--space-2);
    padding: 0.82rem 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);
}

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

.band-condition-why-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.26rem;
}

.band-condition-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.band-condition-stats div {
    padding: 0.62rem 0.72rem;
    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);
}

.band-condition-stats dt {
    color: var(--muted);
    margin: 0 0 0.24rem;
}

.band-condition-stats dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.band-condition-details summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
}

.band-condition-details[open] {
    display: grid;
    gap: var(--space-3);
}

.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;
    margin-bottom: 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-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-message {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-line;
}

.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;
}

.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-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-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-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.inline-form {
    margin: 0;
}

.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-summary-stream {
    max-height: none;
    margin-bottom: var(--space-4);
}

.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 {
    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;
}

.traffic-log-row:last-child {
    border-bottom: 0;
}

.traffic-log-row-own-beacon-tx {
    background: rgba(79, 141, 255, 0.2);
}

.traffic-log-row-own-beacon-tx .traffic-log-time,
.traffic-log-row-own-beacon-tx .traffic-log-source,
.traffic-log-row-own-beacon-tx .traffic-log-line {
    color: var(--traffic-color-own-beacon-tx);
}

.traffic-log-row-own-beacon-rx {
    background: rgba(79, 141, 255, 0.08);
}

.traffic-log-row-own-beacon-rx .traffic-log-time,
.traffic-log-row-own-beacon-rx .traffic-log-source,
.traffic-log-row-own-beacon-rx .traffic-log-line {
    color: var(--traffic-color-own-beacon-rx);
}

.traffic-log-row-own-wx-tx {
    background: rgba(70, 168, 95, 0.2);
}

.traffic-log-row-own-wx-tx .traffic-log-time,
.traffic-log-row-own-wx-tx .traffic-log-source,
.traffic-log-row-own-wx-tx .traffic-log-line {
    color: var(--traffic-color-own-wx-tx);
}

.traffic-log-row-own-wx-rx {
    background: rgba(70, 168, 95, 0.08);
}

.traffic-log-row-own-wx-rx .traffic-log-time,
.traffic-log-row-own-wx-rx .traffic-log-source,
.traffic-log-row-own-wx-rx .traffic-log-line {
    color: var(--traffic-color-own-wx-rx);
}

.traffic-log-row-own-message-tx {
    background: rgba(230, 145, 58, 0.2);
}

.traffic-log-row-own-message-tx .traffic-log-time,
.traffic-log-row-own-message-tx .traffic-log-source,
.traffic-log-row-own-message-tx .traffic-log-line {
    color: var(--traffic-color-own-message-tx);
}

.traffic-log-row-own-message-rx {
    background: rgba(230, 145, 58, 0.09);
}

.traffic-log-row-own-message-rx .traffic-log-time,
.traffic-log-row-own-message-rx .traffic-log-source,
.traffic-log-row-own-message-rx .traffic-log-line {
    color: var(--traffic-color-own-message-rx);
}

.traffic-log-row-repeated-tx {
    background: rgba(210, 75, 75, 0.16);
}

.traffic-log-row-repeated-tx .traffic-log-time,
.traffic-log-row-repeated-tx .traffic-log-source,
.traffic-log-row-repeated-tx .traffic-log-line {
    color: var(--traffic-color-repeated-tx);
}

.traffic-log-row-proxy-tx {
    background: rgba(166, 95, 193, 0.2);
}

.traffic-log-row-proxy-tx .traffic-log-time,
.traffic-log-row-proxy-tx .traffic-log-source,
.traffic-log-row-proxy-tx .traffic-log-line {
    color: var(--traffic-color-proxy-tx);
}

.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-log-line {
    white-space: pre-wrap;
    word-break: break-word;
}

.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%;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: var(--radius-sm);
}

.table-wrap .data-table {
    min-width: 100%;
}

.section-symbol-preview {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

.prepared-entity-table {
    table-layout: fixed;
}

.prepared-entity-col-icon {
    width: 3.5rem;
    text-align: center;
}

.prepared-entity-col-active {
    width: 5.5rem;
}

.prepared-entity-col-interval {
    width: 4.5rem;
    white-space: nowrap;
}

.prepared-entity-col-name {
    width: 8.5rem;
}

.prepared-entity-col-raw {
    width: auto;
}

.prepared-entity-col-raw code {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

.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-panel {
    padding: 0;
    overflow: hidden;
    min-height: 0;
}

.messages-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    height: calc(100vh - 2 * var(--space-5));
    min-height: calc(100vh - 2 * var(--space-5));
    max-height: calc(100vh - 2 * var(--space-5));
}

.messages-sidebar,
.messages-thread {
    min-width: 0;
    min-height: 0;
}

.messages-sidebar {
    display: grid;
    grid-template-rows: 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);
    border-bottom: 1px solid var(--border);
}

.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.45rem;
    min-height: 0;
    overflow: auto;
    padding: var(--space-4);
}

.messages-conversation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-2);
    padding: 0.32rem;
    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;
    padding: 0.55rem 0.62rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    text-align: left;
    box-shadow: none;
    display: block;
}

.messages-conversation-main {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.messages-conversation-title-row,
.messages-conversation-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    flex-wrap: wrap;
}

.messages-conversation-title-row strong {
    font-size: 0.92rem;
}

.messages-conversation-delete {
    align-self: center;
    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-heard-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--muted);
    font-size: 0.72rem;
}

.messages-heard-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(109, 189, 128, 0.12);
}

.messages-heard-dot-fresh {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(109, 189, 128, 0.12);
}

.messages-heard-dot-warn {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(217, 181, 101, 0.14);
}

.messages-heard-dot-stale {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(201, 122, 122, 0.14);
}

.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-history {
    min-height: 0;
    overflow: auto;
    display: grid;
    align-content: start;
    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-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;
    }

    .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;
    }
}

@media (max-width: 720px) {
    .grid.two,
    .dashboard-overview-grid,
    .dashboard-detail-grid,
    .band-condition-layout,
    .danger-zone-actions,
    .form-grid,
    .station-detail-hero,
    .digi-flow-endpoints,
    .digi-flow-builder {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-grid {
        grid-template-columns: 1fr 1fr;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .dashboard-activity-grid,
    .dashboard-activity-totals {
        grid-template-columns: 1fr;
    }

    .page-header,
    .panel-header,
    .stations-summary-header,
    .traffic-status-row,
    .traffic-toolbar,
    .digi-step-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stations-summary-toolbar {
        flex-direction: column;
        width: 100%;
    }

    .dashboard-action-row {
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .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: 1fr;
    }

    .band-condition-stats {
        grid-template-columns: 1fr;
    }

    .band-condition-hero,
    .band-condition-pill-grid {
        grid-template-columns: 1fr;
    }

    .band-condition-hero-score {
        justify-items: start;
    }

    .sidebar-user-meta,
    .sidebar-user-actions {
        flex-wrap: wrap;
    }

    .sidebar-user-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .field-inline-actions {
        grid-template-columns: 1fr;
    }
}

.copyright {
    text-align: center;
    opacity: 0.6;
    margin-top: 2rem;
    font-size: 0.875rem;
}