.device-header__title-row h1 { margin-bottom: 0; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { margin-bottom: 5px; font-size: 25px; }
.section-heading p:last-child { margin: 0; color: var(--muted); }
.section-heading--compact { margin-bottom: 12px; }
.section-heading--compact h2 { font-size: 19px; }
.overview-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.overview-actions a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.overview-actions a:hover { background: var(--surface-raised); }
.overview-actions span { display: grid; gap: 2px; min-width: 0; }
.overview-actions small { color: var(--muted); overflow-wrap: anywhere; }
.overview-actions b { color: var(--primary); font-size: 18px; }
.content-grid { display: grid; gap: 16px; align-items: start; }
.content-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.health-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 13px 16px; border: 1px solid #675529; border-radius: var(--radius); background: #211c12; }
.health-bar.is-online { border-color: #285a40; background: #10251c; }
.health-bar__state { display: flex; align-items: center; gap: 11px; min-width: 0; }
.health-bar__state > div, .health-bar__updated { display: grid; gap: 1px; }
.health-bar__state small, .health-bar__updated span { color: var(--muted); font-size: 12px; }
.health-bar__dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 5px rgb(245 189 79 / 10%); }
.health-bar.is-online .health-bar__dot { background: var(--success); box-shadow: 0 0 0 5px rgb(79 209 129 / 10%); }
.health-bar__updated { text-align: right; white-space: nowrap; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 14px; align-items: stretch; }
.dashboard-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dashboard-stack .dashboard-card--system { grid-column: 1 / -1; }
.dashboard-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; }
.dashboard-card:hover { border-color: #405a76; }
.dashboard-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.dashboard-card__header .eyebrow { margin-bottom: 2px; color: #7fa3c2; font-size: 10px; }
.dashboard-card__header h2 { margin: 0; font-size: 18px; }
.dashboard-card__header > a { font-size: 12px; font-weight: 700; text-decoration: none; }
.dashboard-card > p { color: var(--muted); font-size: 13px; }
.dashboard-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); color: var(--primary); font-size: 13px; font-weight: 750; text-decoration: none; }
.dashboard-card--traffic { min-height: 590px; }
.dashboard-card--network { border-top: 3px solid var(--accent); }
.dashboard-card--wifi { border-top: 3px solid #6fa8ff; }
.dashboard-card--system { border-top: 3px solid var(--warning); }

.live-rates { display: flex; align-items: center; gap: 28px; margin-bottom: 10px; }
.live-rates > div { display: grid; grid-template-columns: auto auto; align-items: center; gap: 1px 7px; }
.live-rates strong { grid-column: 2; font-size: 20px; }
.live-rates span:not(.live-rates__mark) { color: var(--muted); font-size: 11px; }
.live-rates__mark { grid-row: 1 / 3; width: 4px; height: 28px; border-radius: 2px; background: var(--primary); }
.live-rates__mark--tx { background: var(--accent); }
.chart-controls { display: grid; gap: 7px; margin: 2px 0 10px; }
.chart-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-control > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.chart-control > div { display: inline-flex; gap: 3px; padding: 3px; border-radius: 6px; background: var(--surface-muted); }
.chart-state { display: flex; align-items: center; gap: 10px; min-height: 20px; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.chart-state span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-state b { margin-left: auto; color: var(--text); font-size: 11px; white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; min-height: 19px; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); }
.chart-legend strong { color: var(--text); }
.chart-layout { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 7px; margin-bottom: 12px; }
.chart-y-axis { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; height: 190px; padding: 0 0 21px; color: var(--muted); font-size: 10px; line-height: 1; }
.chart-plot { min-width: 0; }
.traffic-chart { position: relative; width: 100%; min-height: 170px; height: 170px; border: 1px solid rgb(42 59 82 / 55%); border-radius: 6px; background: #0b1420; overflow: hidden; }
.traffic-chart canvas { display: block; width: 100%; height: 100%; }
.traffic-chart__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.traffic-chart__empty[hidden] { display: none; }
.chart-x-axis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 5px; color: var(--muted); font-size: 10px; }
.chart-x-axis span:nth-child(2) { text-align: center; }
.chart-x-axis span:last-child { text-align: right; }
.chart-range { min-height: 26px; padding: 3px 8px; border-color: transparent; background: transparent; color: var(--muted); font-size: 11px; }
.chart-range:hover, .chart-range.is-active { background: #1b3346; color: #bceaf3; }
.dashboard-card--traffic.is-chart-loading .chart-layout, .dashboard-card--traffic.is-chart-loading .chart-legend { opacity: .5; }
.connection-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.connection-facts > div { display: grid; gap: 2px; min-width: 0; padding: 9px 10px; border-radius: 6px; background: var(--surface-muted); }
.connection-facts dt { font-size: 11px; }
.connection-facts dd { margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.resource-gauges { display: flex; justify-content: space-around; gap: 14px; margin: 3px 0 16px; }
.resource-gauge { --value: 0; --gauge: var(--primary); position: relative; display: grid; place-items: center; width: 104px; height: 104px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--gauge) calc(var(--value) * 1%), #29384b 0); }
.resource-gauge::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.resource-gauge > span { z-index: 1; display: grid; text-align: center; }
.resource-gauge strong { font-size: 18px; }
.resource-gauge small { color: var(--muted); font-size: 11px; }
.compact-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.compact-facts > span { display: grid; gap: 2px; padding: 11px 8px 0; }
.compact-facts > span + span { border-left: 1px solid var(--border); }
.compact-facts small { color: var(--muted); font-size: 11px; }
.compact-facts strong { font-size: 13px; overflow-wrap: anywhere; }
.dashboard-number { font-size: 28px; line-height: 1; font-weight: 750; color: var(--accent); }
.radio-count { padding: 3px 7px; border-radius: 999px; background: #182b47; color: #91bbff; font-size: 10px; font-weight: 750; text-transform: uppercase; }

.dashboard-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.dashboard-shortcuts > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); color: var(--text); text-decoration: none; }
.dashboard-shortcuts > a:hover { background: var(--surface-raised); }
.dashboard-shortcuts > a > span:nth-child(2) { display: grid; min-width: 0; }
.dashboard-shortcuts small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-shortcuts b { color: var(--primary); }
.daily-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.daily-actions__heading { display: grid; gap: 1px; margin-right: auto; min-width: 175px; }
.daily-actions form { margin: 0; }
.recent-events { margin-top: 14px; }
.recent-events__list { display: grid; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); overflow: hidden; }
.recent-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.recent-event:last-child { border-bottom: 0; }
.recent-event__marker { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.recent-event--warning .recent-event__marker { background: var(--warning); }
.recent-event--critical .recent-event__marker { background: var(--danger); }
.recent-event p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.recent-event time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.shortcut-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #315b6c; border-radius: 6px; background: #102b38; color: var(--primary); font-size: 10px; font-weight: 800; }
.shortcut-icon--shield { border-color: #2c6143; background: #10271c; color: var(--success); }
.shortcut-icon--vpn { border-color: #4a4f7e; background: #1a1d38; color: #9caaff; }
.shortcut-icon--agent { border-color: #71592b; background: #271e10; color: var(--warning); }

.overview-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch; margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); overflow: hidden; }
.overview-strip > div { display: grid; gap: 2px; min-width: 0; padding: 11px 13px; border-right: 1px solid var(--border); }
.overview-strip span { color: var(--muted); font-size: 10px; }
.overview-strip strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-strip > a { display: grid; place-items: center; padding: 11px 16px; text-decoration: none; font-size: 12px; font-weight: 700; }

.overview-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 126px; margin-bottom: 16px; padding: 24px 26px; border: 1px solid #285167; border-radius: var(--radius); background: linear-gradient(105deg, #122838 0%, #12202d 58%, #13241e 100%); }
.overview-hero__label { display: block; margin-bottom: 4px; color: #8db9cb; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.overview-hero strong { display: block; font-size: 25px; }
.overview-hero p { margin: 5px 0 0; color: var(--muted); }
.overview-hero__pulse { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--warning); font-weight: 750; }
.overview-hero__pulse span { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px rgb(245 189 79 / 12%); }
.overview-hero__pulse.is-online { color: var(--success); }
.overview-hero__pulse.is-online span { box-shadow: 0 0 0 6px rgb(79 209 129 / 12%); }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.summary-card { position: relative; display: grid; align-content: start; min-height: 220px; padding: 20px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.summary-card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--primary); opacity: .75; }
.summary-card--clients::after { background: var(--accent); }
.summary-card--wifi::after { background: #6fa8ff; }
.summary-card--system::after { background: var(--warning); }
.summary-card:hover { border-color: #48627d; background: var(--surface-raised); }
.summary-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.summary-card__icon { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.summary-card__count { color: var(--primary); font-size: 22px; font-weight: 800; }
.summary-card h2 { margin-bottom: 7px; font-size: 17px; }
.summary-card > strong { font-size: 19px; overflow-wrap: anywhere; }
.summary-card > p { margin: 6px 0 22px; color: var(--muted); font-size: 14px; }
.summary-card__link { align-self: end; margin-top: auto; color: var(--primary); font-size: 13px; font-weight: 750; }
.overview-strip { display: grid; grid-template-columns: 1.3fr .8fr .8fr auto; gap: 0; align-items: stretch; margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.overview-strip > div { display: grid; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--border); min-width: 0; }
.overview-strip span { color: var(--muted); font-size: 11px; }
.overview-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.overview-strip > a { display: flex; align-items: center; padding: 14px 16px; font-size: 13px; font-weight: 750; text-decoration: none; }

.router-list { display: grid; gap: 10px; }
.router-card { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.router-card__main { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(220px, 1.5fr) minmax(180px, 1fr) auto auto; align-items: center; gap: 18px; width: 100%; min-width: 0; padding: 17px 18px; color: var(--text); text-decoration: none; }
.router-card__main:hover { background: var(--surface-raised); }
.router-card__identity { display: grid; min-width: 0; }
.router-card__identity strong { font-size: 17px; }
.router-card__identity small, .router-card__firmware, .router-card__seen { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.router-card__seen strong { color: var(--text); font-weight: 650; }
.router-card__arrow { color: var(--primary); font-size: 20px; }
.router-card__actions { display: flex; align-items: center; gap: 6px; padding: 10px; border-left: 1px solid var(--border); }
.router-card__actions form { margin: 0; }
.router-card__reboot { color: var(--primary); font-size: 18px; }

.command-list { display: grid; gap: 8px; }
.command-item { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.command-item__main, .command-item__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.command-item__main { justify-content: space-between; }
.command-item__main code { color: #bceaf3; font-size: 13px; font-weight: 700; }
.command-item__meta { color: var(--muted); font-size: 12px; }
.command-item details summary, .debug-panel summary { color: var(--primary); cursor: pointer; font-weight: 700; }
.command-item pre { margin-top: 10px; padding: 10px; background: #090f17; border-radius: 5px; }
.command-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.command-pagination nav { display: flex; align-items: center; gap: 9px; }
[data-command-journal] { transition: opacity .16s ease; }
[data-command-journal].is-loading { opacity: .48; pointer-events: none; }
.dashboard-alerts { display: grid; gap: 8px; margin: 12px 0 0; }
.health-summary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
.health-summary__item { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-top: 2px solid var(--muted); border-radius: var(--radius); background: var(--surface-muted); }
.health-summary__item > span, .health-summary__item > small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-summary__item > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-summary__item.is-ok { border-top-color: var(--success); }
.health-summary__item.is-warning { border-top-color: var(--warning); }
.health-summary__item.is-critical { border-top-color: var(--danger); }
.radio-current { border-left: 3px solid var(--primary); background: var(--surface-strong); color: var(--muted); padding: 10px 12px; }
.wifi-configuration .compact-form--separated { margin-top: 18px; padding-top: 18px; }
.debug-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface-muted); }
.debug-panel .raw-telemetry { margin-top: 14px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid #66343b; border-radius: var(--radius); background: #211419; }
.danger-zone h3 { margin-bottom: 3px; }
.danger-zone p { margin: 0; color: var(--muted); }
.maintenance-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.maintenance-status > div { display: grid; gap: 3px; min-width: 0; padding: 14px 16px; border-right: 1px solid var(--border); }
.maintenance-status > div:last-child { border-right: 0; }
.maintenance-status__label { color: var(--muted); font-size: 12px; }
.maintenance-status strong { overflow-wrap: anywhere; }
.maintenance-alert { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #765a29; border-radius: var(--radius); background: #241d11; }
.maintenance-alert > div { display: grid; gap: 2px; }
.maintenance-alert span { color: #d7c39a; font-size: 13px; }
.maintenance-grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.maintenance-card { display: flex; min-width: 0; max-width: 100%; height: 100%; flex-direction: column; min-height: 0; box-shadow: none; overflow: hidden; }
.maintenance-card--services { grid-column: 1 / -1; height: auto; }
.maintenance-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.maintenance-card__heading .eyebrow { margin-bottom: 3px; }
.maintenance-card__heading h2 { margin-bottom: 12px; }
.maintenance-output { width: 100%; max-width: 100%; max-height: 260px; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); color: var(--muted); font-size: 12px; white-space: pre; }
.maintenance-card .package-row form { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.maintenance-card .package-row select { width: auto; min-width: 0; max-width: 100%; }
.service-list-summary { display: flex; gap: 16px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.service-list-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 430px; overflow-y: auto; padding-right: 6px; scrollbar-gutter: stable; }
.service-list-scroll:focus-visible { outline: 2px solid rgb(53 185 213 / 45%); outline-offset: 4px; }
.service-list-scroll .package-row { min-width: 0; }
.pairing-panel { border-top: 1px solid var(--border); padding-top: 24px; }
.pairing-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.pairing-qr { background: #fff; border-radius: 8px; padding: 14px; line-height: 0; width: min(100%, 300px); }
.pairing-qr svg { width: 100%; height: auto; }
.pairing-details { display: grid; gap: 16px; min-width: 0; }
.pairing-details dd { overflow-wrap: anywhere; }
.maintenance-list { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); font-size: 13px; }
.maintenance-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.maintenance-actions form, .maintenance-actions form + form { margin: 0; padding: 0; border: 0; }
.maintenance-actions button { width: auto; }
.diagnostic-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diagnostic-options label { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); color: var(--text); }
.diagnostic-options input { width: 18px; min-height: 18px; margin: 0; padding: 0; }
.maintenance-result { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.maintenance-result summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.maintenance-result pre { margin-top: 10px; padding: 10px; border-radius: 6px; background: #090f17; }
.technical-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.technical-panel > summary { display: flex; justify-content: space-between; gap: 16px; padding: 15px 17px; cursor: pointer; }
.technical-panel > summary span { font-weight: 750; }
.technical-panel > summary small { color: var(--muted); }
.technical-panel__content { display: grid; gap: 20px; padding: 4px 17px 17px; }
.capability-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.capability-groups > div { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.capability-groups span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

.workspace-section { display: grid; gap: 14px; }
.workspace-section > .card__heading { margin-bottom: 0; }
.workspace-card { box-shadow: none; }
.system-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { display: grid; align-content: start; gap: 5px; min-height: 128px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.stat-card__label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.stat-card strong { font-size: 18px; overflow-wrap: anywhere; }
.stat-card small { color: var(--muted); }
.stat-card--healthy { border-top: 3px solid var(--success); }
.stat-card--warning { border-top: 3px solid var(--warning); }
.progress { width: 100%; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #263447; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.friendly-list { grid-template-columns: minmax(120px, .65fr) minmax(0, 1.35fr); }
.friendly-list dt, .friendly-list dd { padding: 7px 0; border-bottom: 1px solid rgb(42 59 82 / 60%); }
.resource-list { display: grid; }
.resource-item { display: grid; gap: 7px; padding: 10px 0; border-bottom: 1px solid rgb(42 59 82 / 60%); }
.resource-item:last-child { border-bottom: 0; }
.resource-item > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.resource-item span { color: var(--muted); font-size: 13px; }
.resource-item strong { text-align: right; }
.sensor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sensor-card { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--muted); background: var(--surface-strong); }
.sensor-card--normal { border-left-color: var(--success); }
.sensor-card--warning { border-left-color: var(--warning); }
.sensor-card--critical { border-left-color: var(--danger); }
.sensor-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sensor-card__heading .status { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.sensor-card__value { font-size: 24px; }
.service-grid--friendly { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.service-grid--friendly .service-pill { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; }
.service-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.service-pill small { color: inherit; opacity: .8; }
.settings-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.settings-workspace--masonry { display: block; columns: 2; column-gap: 14px; }
.settings-workspace--masonry > * { width: 100%; margin: 0 0 14px; break-inside: avoid; }
.control-card { display: grid; align-content: start; gap: 14px; min-height: 0; box-shadow: none; }
.control-card h2 { margin-bottom: 4px; }
.control-card p:last-child { margin-bottom: 0; }
.compact-form { display: grid; gap: 11px; margin-top: 0; }
.card .compact-form { margin-top: 0; }
.compact-form--separated { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid var(--border); }
.operations-list { display: grid; gap: 8px; }
.operations-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; }
.operations-item > div { min-width: 0; display: grid; gap: 3px; }
.operations-item small { color: var(--muted); overflow-wrap: anywhere; }
.operations-item--critical { border-color: #71343c; }
.operations-item--warning { border-color: #6d5925; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 3px; }
.action-note { color: var(--muted); font-size: 12px; }
.action-note--warning { color: var(--warning); }
.system-reboot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid #66343b; border-radius: var(--radius); background: #211419; }
.system-reboot h2 { margin-bottom: 3px; }
.system-reboot p { margin: 0; color: var(--muted); }

.network-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.network-summary > div { display: grid; gap: 3px; padding: 14px 16px; border-right: 1px solid var(--border); }
.network-summary > div:last-child { border-right: 0; }
.network-summary span, .radio-card__facts small { color: var(--muted); font-size: 12px; }
.state-text { color: var(--muted); }
.state-text.is-online { color: var(--success); }
.state-text.is-offline { color: var(--danger); }
.interface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; }
.interface-card { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.interface-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.interface-card dl { grid-template-columns: minmax(70px, .55fr) minmax(0, 1.45fr); gap: 5px 9px; font-size: 13px; }
.inline-warning { margin: 0; color: var(--warning); font-size: 12px; }
.inline-details { border-top: 1px solid var(--border); padding-top: 12px; }
.inline-details summary, .client-actions summary { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 700; }
.device-port-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.device-port-list span { display: grid; gap: 1px; min-width: 135px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 12px; }
.settings-panel { padding: 0; overflow: hidden; box-shadow: none; }
.settings-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; }
.settings-panel > summary::-webkit-details-marker { display: none; }
.settings-panel > summary span:first-child { display: grid; gap: 2px; }
.settings-panel > summary small { color: var(--muted); font-weight: 400; }
.settings-panel > summary span:last-child { color: var(--primary); font-size: 13px; font-weight: 750; }
.settings-panel[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.settings-panel__body { padding: 16px 18px 18px; }
.settings-panel div.settings-panel__body { display: grid; gap: 16px; }
.inline-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.inline-actions form { display: flex; align-items: end; gap: 9px; margin: 0; }
.inline-actions label { min-width: 170px; }

.notice--compact { margin-bottom: 14px; padding: 9px 12px; font-size: 13px; }
.notice--success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.notice--error { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; min-width: 0; }
.radio-card { display: grid; gap: 15px; min-width: 0; max-width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.radio-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.radio-card__heading > div { display: grid; min-width: 0; }
.radio-card__band { color: var(--primary); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.radio-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.radio-card__facts > span { display: grid; min-width: 0; gap: 2px; padding: 8px; border-radius: 6px; background: var(--surface-muted); }
.radio-card__facts strong, .ssid-list strong, .ssid-list small { overflow-wrap: anywhere; }
.ssid-list { display: grid; min-width: 0; gap: 7px; }
.ssid-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid var(--border); }
.ssid-list > div > span:first-child { display: grid; min-width: 0; }
.ssid-list small { color: var(--muted); }

.clients-summary { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.clients-summary > div { display: grid; min-width: 120px; padding-right: 18px; border-right: 1px solid var(--border); }
.clients-summary span { color: var(--muted); font-size: 12px; }
.clients-summary strong { font-size: 24px; }
.clients-summary p { margin: 0; color: var(--muted); }
.client-list-heading { align-items: end; }
.client-list-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.client-search input { width: 210px; min-height: 36px; padding: 7px 10px; }
.client-filter { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); }
.client-filter button { min-height: 30px; padding: 5px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; }
.client-filter button:hover { color: var(--text); }
.client-filter button.is-active { background: #173b4a; color: var(--primary); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.client-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.client-list__header, .client-list-row__summary { display: grid; grid-template-columns: minmax(220px, 1.45fr) minmax(170px, 1.1fr) minmax(115px, .75fr) minmax(145px, .95fr) minmax(145px, .9fr) minmax(170px, 1fr) 18px; align-items: center; gap: 12px; }
.client-list--without-traffic .client-list__header, .client-list--without-traffic .client-list-row__summary { grid-template-columns: minmax(220px, 1.45fr) minmax(170px, 1.1fr) minmax(115px, .75fr) minmax(145px, .95fr) minmax(170px, 1fr) 18px; }
.client-list__header { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.client-list-row { border-bottom: 1px solid var(--border); }
.client-list-row:last-of-type { border-bottom: 0; }
.client-list-row[hidden] { display: none; }
.client-list-row__summary { min-height: 68px; padding: 9px 14px; cursor: pointer; list-style: none; transition: background .15s ease; }
.client-list-row__summary::-webkit-details-marker { display: none; }
.client-list-row__summary:hover, .client-list-row[open] > .client-list-row__summary { background: var(--surface-muted); }
.client-list-cell { display: grid; min-width: 0; gap: 2px; }
.client-list-cell strong, .client-list-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-list-cell strong { font-size: 13px; }
.client-list-cell small { color: var(--muted); font-size: 11px; }
.client-list-cell--identity { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 9px; }
.client-list-cell--identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
.client-state-dot { width: 8px; height: 8px; border: 2px solid var(--muted); border-radius: 50%; }
.client-state-dot.is-online { border-color: var(--success); background: var(--success); box-shadow: 0 0 0 4px rgb(66 211 126 / 10%); }
.client-state-dot.is-recent { border-color: var(--warning); background: var(--warning); box-shadow: 0 0 0 4px rgb(245 189 79 / 10%); }
.status--recent { background: #4b3d1e; color: var(--warning); }
.client-list-row__chevron { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.client-list-row[open] .client-list-row__chevron { transform: rotate(225deg) translate(-2px, -2px); }
.client-list-row__details { padding: 16px 18px 18px; border-top: 1px solid var(--border); background: #0d1725; }
.client-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--border); }
.client-detail-facts > div { display: grid; gap: 3px; padding: 10px 12px; background: var(--surface-muted); }
.client-detail-facts span { color: var(--muted); font-size: 11px; }
.client-policy-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
.client-policy-form > section { display: grid; align-content: start; gap: 11px; padding: 0 18px; border-right: 1px solid var(--border); }
.client-policy-form > section:first-of-type { padding-left: 0; }
.client-policy-form > section:last-of-type { padding-right: 0; border-right: 0; }
.client-policy-form h3 { margin: 0 0 2px; font-size: 15px; }
.client-policy-form .form-grid { grid-template-columns: 1fr; }
.client-policy-form > .form-actions { grid-column: 1 / -1; padding-top: 16px; }
.client-quick-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.client-quick-actions form { margin: 0; }
.client-preset-description { min-height: 32px; margin: -4px 0 0; color: var(--muted); font-size: 12px; }
.client-live-rate { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-muted); }
.client-live-rate span { color: var(--muted); font-size: 11px; }
.client-delete-lease { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.client-address-panel { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.5fr) auto; align-items: end; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.client-address-panel h3 { margin: 0 0 3px; font-size: 15px; }
.client-address-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.client-address-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, .7fr) auto; align-items: end; gap: 9px; }
.client-address-panel > form:last-child { align-self: end; }
.client-activity-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.client-activity-panel h3 { margin: 0 0 10px; font-size: 15px; }
.client-activity-list { display: grid; gap: 6px; }
.client-activity-list > div { display: grid; grid-template-columns: auto minmax(150px, .45fr) 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); }
.client-activity-list small { color: var(--muted); }
.client-forget-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--danger) 7%, var(--surface-muted)); }
.client-forget-panel h3 { margin: 0 0 3px; font-size: 15px; }
.client-forget-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.client-list-empty { padding: 26px; color: var(--muted); text-align: center; }
.profile-list { display: grid; gap: 8px; margin-top: 12px; }
.profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; }
.profile-row > div { display: grid; gap: 2px; }
.profile-row small { color: var(--muted); }
.profile-create { width: min(360px, 100%); }
.profile-create > summary { margin-left: auto; list-style: none; }
.profile-create > summary::-webkit-details-marker { display: none; }
.profile-create[open] { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.profile-create[open] > summary { margin: 0 0 12px auto; }
.managed-records { display: grid; gap: 8px; }
.managed-record, .managed-record-static { border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); }
.managed-record > summary, .managed-record-static { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; cursor: pointer; list-style: none; }
.managed-record > summary::-webkit-details-marker { display: none; }
.managed-record > summary > span:first-child, .managed-record-static > span { display: grid; gap: 2px; min-width: 0; }
.managed-record small, .managed-record-static small { color: var(--muted); overflow-wrap: anywhere; }
.managed-record[open] > summary { border-bottom: 1px solid var(--border); }
.managed-record__body { display: grid; gap: 14px; padding: 14px; }
.managed-record__body > form:last-child { justify-self: end; }
.managed-record-static { cursor: default; }
.managed-record-static form { margin: 0; }
.policy-chip { color: var(--muted); font-size: 11px; font-weight: 800; }
.policy-chip--accept { color: var(--success); }
.policy-chip--reject, .policy-chip--drop { color: var(--danger); }
.subheading { margin: 0; font-size: 15px; }
.maintenance-toolbar, .backup-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.maintenance-toolbar { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.package-list { display: grid; gap: 7px; margin-top: 16px; }
.package-list h3 { margin: 0; font-size: 15px; }
.package-list--installed { max-height: 360px; overflow: auto; margin-top: 10px; padding-right: 3px; }
.package-list--updates { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; padding-right: 3px; }
.package-search { display: grid; gap: 6px; margin-top: 12px; }
.package-search label { color: var(--muted); font-size: 13px; }
.package-search input { width: 100%; }
.package-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-muted); }
.package-row > span { display: grid; min-width: 0; }
.package-row[hidden] { display: none; }
.package-row strong, .package-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.package-row small { color: var(--muted); }
.backup-actions { margin-top: 12px; }
.client-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #173b4a; color: var(--primary); font-weight: 800; }

.config-preview { width: min(620px, calc(100% - 28px)); max-height: calc(100vh - 40px); padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.config-preview::backdrop { background: rgba(2, 8, 17, .78); }
.config-preview__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.config-preview__header h2 { margin: 2px 0 0; }
.config-preview__changes { grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); margin: 0 0 16px; }
.config-preview__changes dt, .config-preview__changes dd { padding: 8px 0; border-bottom: 1px solid var(--border); }
.config-preview__warnings p, #config-preview-errors p { margin: 8px 0; padding: 9px 11px; border-left: 3px solid var(--warning); background: var(--surface-muted); }
#config-preview-errors p { border-left-color: var(--danger); color: var(--danger); }

html[data-theme="light"] .brand__mark,
html[data-theme="light"] .device-sidebar__icon,
html[data-theme="light"] .router-card__icon,
html[data-theme="light"] .client-avatar { border-color: #73aec0; background: #e2f4f8; color: #086f8a; }
html[data-theme="light"] .button--secondary { border-color: #8da4b8; color: #17677c; }
html[data-theme="light"] .button--secondary:hover,
html[data-theme="light"] .icon-button:hover { background: #e2edf4; color: var(--text); }
html[data-theme="light"] .device-nav__item:hover,
html[data-theme="light"] tbody tr:hover { background: #eef4f8; }
html[data-theme="light"] .device-nav__item.is-active,
html[data-theme="light"] .client-filter button.is-active,
html[data-theme="light"] .chart-range:hover,
html[data-theme="light"] .chart-range.is-active { background: #dceef4; color: #075f76; }
html[data-theme="light"] .status--online,
html[data-theme="light"] .status--success,
html[data-theme="light"] .status--done { background: #dcf3e6; }
html[data-theme="light"] .status--offline,
html[data-theme="light"] .status--expired,
html[data-theme="light"] .status--failed { background: #f8e1e3; }
html[data-theme="light"] .status--queued,
html[data-theme="light"] .status--sent,
html[data-theme="light"] .status--running { background: #f9edd3; }
html[data-theme="light"] .notice,
html[data-theme="light"] .radio-current { background: #e4f3f7; }
html[data-theme="light"] .health-bar,
html[data-theme="light"] .maintenance-alert { background: #fff7e7; }
html[data-theme="light"] .health-bar.is-online { background: #e6f6ed; }
html[data-theme="light"] .danger-zone,
html[data-theme="light"] .system-reboot { background: #fff0f1; }
html[data-theme="light"] .traffic-chart,
html[data-theme="light"] .command-item pre,
html[data-theme="light"] .maintenance-result pre { background: #eef3f7; color: var(--text); }
html[data-theme="light"] .overview-hero { border-color: #9ec4cf; background: linear-gradient(105deg, #e9f6fa 0%, #f4f8fb 58%, #ebf7ef 100%); }
html[data-theme="light"] .client-list-row__details { background: var(--surface-muted); }
html[data-theme="light"] .resource-gauge { background: conic-gradient(var(--gauge) calc(var(--value) * 1%), #d9e3ed 0); }


.device-port-list--detailed { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.device-port { border: 1px solid var(--border); padding: 14px; background: var(--surface-muted); }
.device-port > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.device-port dl { display: grid; grid-template-columns: minmax(80px, .7fr) 1.3fr; gap: 6px 12px; margin: 12px 0 0; }
.device-port dt { color: var(--muted); }
.device-port dd { margin: 0; overflow-wrap: anywhere; }
.encrypted-dns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.encrypted-dns-grid > section { border: 1px solid var(--border); padding: 16px; }

.wifi-qr-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.wifi-qr-dialog::backdrop { background: rgba(2, 8, 16, .78); }
.wifi-qr-dialog__content { display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.wifi-qr-dialog__content h2, .wifi-qr-dialog__content p { margin: 0; }
.wifi-qr-dialog__content img { width: min(300px, 75vw); aspect-ratio: 1; padding: 10px; background: #fff; }

.terminal-card { padding: 0; overflow: hidden; }
.terminal-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.terminal-card__heading h2, .terminal-card__heading p { margin-bottom: 0; }
.terminal-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.terminal-status { color: var(--muted); font-size: .86rem; white-space: nowrap; }
[data-terminal-state="connected"] .terminal-status { color: var(--success); }
[data-terminal-state="failed"] .terminal-status { color: var(--danger); }
.terminal-surface { min-height: 440px; height: min(62vh, 720px); padding: 14px; background: #07101c; }
.terminal-surface .xterm, .terminal-surface .xterm-viewport { height: 100%; }
.terminal-card__note { margin: 0; padding: 12px 24px; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--border); }