:root {
  --bg: #07110f;
  --panel: rgba(16, 31, 28, .78);
  --panel-edge: rgba(147, 188, 174, .13);
  --text: #edf7f2;
  --muted: #8ca39c;
  --green: #53e6a5;
  --green-soft: rgba(83, 230, 165, .14);
  --cyan: #67cde4;
  --orange: #ffb567;
  --red: #ff6b72;
  --radius: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, #12372d 0, transparent 36rem),
    linear-gradient(145deg, #06100e, #0a1514 60%, #07110f);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .25; }
.ambient-a { width: 26rem; height: 26rem; background: #1fc789; right: -12rem; top: 15%; }
.ambient-b { width: 20rem; height: 20rem; background: #287e91; left: -10rem; bottom: 0; }
.shell { position: relative; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 70px; }
.topbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.dashboard-topbar { display: grid; width: 100%; justify-content: stretch; gap: 18px; }
.dashboard-title-row { display: flex; width: 100%; align-items: end; gap: 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 680; letter-spacing: -.055em; }
h2 { font-size: 1.05rem; font-weight: 620; letter-spacing: -.015em; }
.eyebrow { margin-bottom: 8px; color: var(--green); font-size: .68rem; font-weight: 750; letter-spacing: .18em; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.dashboard-title-row .header-actions { margin-left: auto; }
.header-actions > button {
  box-sizing: border-box; height: 42px; min-height: 42px; margin: 0; padding: 8px 14px; line-height: 1.2;
}
select, button, input[type="date"], .button-link {
  color: var(--text); background: rgba(13, 29, 26, .85); border: 1px solid var(--panel-edge);
  border-radius: 12px; padding: 10px 14px; font: inherit;
}
button { cursor: pointer; color: var(--green); }
.button-link { color: var(--green); text-decoration: none; }
.header-actions > .button-link { box-sizing: border-box; height: 42px; min-height: 42px; margin: 0; padding: 10px 14px; line-height: 1.2; }
.header-context { display: flex; min-height: 46px; align-items: center; justify-content: flex-start; gap: 18px; padding-top: 14px; border-top: 1px solid var(--panel-edge); }
#host-select { width: min(420px, 55vw); height: 42px; min-height: 42px; margin: 0; padding: 8px 38px 8px 14px; line-height: 1.2; }
.freshness { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.freshness span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px currentColor; }
.freshness.live span { background: var(--green); }
.freshness.stale span { background: var(--red); }

.summary-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.summary-card, .panel {
  border: 1px solid var(--panel-edge); background: var(--panel); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .16); backdrop-filter: blur(16px);
}
.summary-card { min-height: 142px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.summary-card.primary { justify-content: flex-start; background: linear-gradient(145deg, rgba(41, 115, 89, .54), rgba(14, 36, 31, .76)); }
.summary-card.primary.host-offline { background: linear-gradient(145deg, rgba(133, 39, 48, .68), rgba(49, 17, 21, .86)); border-color: rgba(255,107,114,.38); }
.summary-card .label { color: var(--muted); font-size: .78rem; }
.summary-card.primary .label { margin-bottom: 12px; }
.summary-card.primary #snapshot-time { margin-top: auto; padding-top: 14px; }
.summary-card strong { font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 650; letter-spacing: -.04em; }
.summary-card small { color: var(--muted); }
.host-meta { display: grid; gap: 3px; }
.host-meta small:last-child { font-size: .68rem; }
.status-summary { display: flex; flex-wrap: wrap; gap: 6px; font-size: clamp(.82rem, 1.2vw, .98rem); font-weight: 620; line-height: 1.15; }
.tag-health { padding: 5px 8px; border-radius: 9px; background: rgba(255,255,255,.045); }
.tag-health b { margin-right: 3px; }
.tag-health.healthy { color: var(--green); }
.tag-health.warning { color: var(--orange); }
.tag-health.down { color: var(--red); }
.tag-health-icon { display: inline-grid; width: 1.1em; height: 1.1em; place-items: center; margin-left: 2px; font-size: 1.12em; font-weight: 850; line-height: 1; }
.host-offline-label { color: #ff9da2; font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 680; }
.panel { padding: 22px; }
.panel-heading { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.chart-panel { margin-bottom: 14px; }
.chart-list { display: grid; gap: 16px; }
.interface-chart-block { padding: 14px 16px 10px; background: linear-gradient(110deg,var(--chart-tint),rgba(5,17,14,.34) 42%); border: 1px solid color-mix(in srgb,var(--chart-rx) 22%,transparent); border-radius: 14px; }
.chart-palette-0 { --chart-rx:#53e6a5; --chart-tx:#67cde4; --chart-tint:rgba(83,230,165,.13); }
.chart-palette-1 { --chart-rx:#ffb567; --chart-tx:#f080b8; --chart-tint:rgba(255,181,103,.13); }
.chart-palette-2 { --chart-rx:#b69cff; --chart-tx:#f0d66f; --chart-tint:rgba(182,156,255,.14); }
.chart-palette-3 { --chart-rx:#65a9ff; --chart-tx:#a9df68; --chart-tint:rgba(101,169,255,.14); }
.chart-palette-4 { --chart-rx:#ed78da; --chart-tx:#ff8b68; --chart-tint:rgba(237,120,218,.13); }
.chart-palette-5 { --chart-rx:#55d7c2; --chart-tx:#a883ff; --chart-tint:rgba(85,215,194,.13); }
.interface-chart-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.interface-chart-heading strong { font-size: .82rem; }
.interface-chart-heading small { color: var(--muted); font-size: .62rem; }
.interface-chart-heading .legend { justify-self: end; }
.chart { position: relative; height: 235px; overflow: hidden; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-selection { display: block; margin-top: 5px; color: var(--muted); font-size: .66rem; }
.chart-grid { stroke: rgba(160, 194, 182, .1); stroke-width: 1; }
.chart-rx { fill: none; stroke: var(--chart-rx); stroke-width: 2.3; vector-effect: non-scaling-stroke; }
.chart-tx { fill: none; stroke: var(--chart-tx); stroke-width: 2.3; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--chart-rx); opacity: .1; }
.chart-crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(237,247,242,.58); pointer-events: none; }
.chart-tooltip { position: absolute; top: 10px; display: grid; gap: 4px; min-width: 165px; padding: 9px 11px; transform: translateX(-50%); color: var(--text); background: rgba(4,14,12,.94); border: 1px solid var(--panel-edge); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.4); font-size: .68rem; pointer-events: none; }
.chart-tooltip b { margin-bottom: 2px; font-size: .72rem; }
.chart-tooltip .rx-value { color: var(--chart-rx); }
.chart-tooltip .tx-value { color: var(--chart-tx); }
.legend { color: var(--muted); font-size: .75rem; display: flex; gap: 7px; align-items: center; }
.legend span { width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; }
.rx-dot { background: var(--chart-rx,var(--green)); } .tx-dot { background: var(--chart-tx,var(--cyan)); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.count { padding: 5px 9px; color: var(--muted); background: rgba(255,255,255,.035); border-radius: 9px; font-size: .72rem; }
.card-list { display: grid; gap: 10px; }
.gateway-section { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--panel-edge); border-radius: 17px; background: rgba(3,12,10,.22); }
.gateway-section-ungrouped { padding: 0; border: 0; background: transparent; }
.gateway-section-cards { display: grid; gap: 8px; }
.gateway-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 4px 3px; font-size: .64rem; letter-spacing: .08em; }
.gateway-section-header strong { font-size: .7rem; }
.gateway-section-header span { color: var(--muted); font-size: .56rem; font-weight: 750; }
.gateway-section.gateway-group-color-0 { border-color: rgba(238,112,73,.28); }
.gateway-section.gateway-group-color-1 { border-color: rgba(221,174,53,.27); }
.gateway-section.gateway-group-color-2 { border-color: rgba(83,190,113,.27); }
.gateway-section.gateway-group-color-3 { border-color: rgba(68,184,205,.28); }
.gateway-section.gateway-group-color-4 { border-color: rgba(143,104,224,.3); }
.gateway-section.gateway-group-color-5 { border-color: rgba(213,91,159,.28); }
.gateway-section.gateway-group-color-0 .gateway-section-header strong { color: #ffb39d; }
.gateway-section.gateway-group-color-1 .gateway-section-header strong { color: #f4d77f; }
.gateway-section.gateway-group-color-2 .gateway-section-header strong { color: #91dca6; }
.gateway-section.gateway-group-color-3 .gateway-section-header strong { color: #91dfed; }
.gateway-section.gateway-group-color-4 .gateway-section-header strong { color: #c7adff; }
.gateway-section.gateway-group-color-5 .gateway-section-header strong { color: #f0a8cf; }
.item-card { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(5, 17, 14, .43); }
.item-card.default-gateway { background: linear-gradient(110deg, rgba(83, 230, 165, .12), rgba(5, 17, 14, .5)); box-shadow: inset 0 0 0 1px rgba(83, 230, 165, .22); }
.item-card.gateway-grouped.gateway-group-color-0 { background: linear-gradient(110deg, rgba(238,112,73,.19), rgba(5,17,14,.52)); box-shadow: inset 0 0 0 1px rgba(238,112,73,.34); }
.item-card.gateway-grouped.gateway-group-color-1 { background: linear-gradient(110deg, rgba(221,174,53,.18), rgba(5,17,14,.52)); box-shadow: inset 0 0 0 1px rgba(221,174,53,.32); }
.item-card.gateway-grouped.gateway-group-color-2 { background: linear-gradient(110deg, rgba(83,190,113,.18), rgba(5,17,14,.52)); box-shadow: inset 0 0 0 1px rgba(83,190,113,.32); }
.item-card.gateway-grouped.gateway-group-color-3 { background: linear-gradient(110deg, rgba(68,184,205,.19), rgba(5,17,14,.52)); box-shadow: inset 0 0 0 1px rgba(68,184,205,.34); }
.item-card.gateway-grouped.gateway-group-color-4 { background: linear-gradient(110deg, rgba(143,104,224,.21), rgba(5,17,14,.52)); box-shadow: inset 0 0 0 1px rgba(143,104,224,.36); }
.item-card.gateway-grouped.gateway-group-color-5 { background: linear-gradient(110deg, rgba(213,91,159,.19), rgba(5,17,14,.52)); box-shadow: inset 0 0 0 1px rgba(213,91,159,.34); }
.status-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(83,230,165,.55); }
.status-mark.down { background: var(--red); box-shadow: 0 0 14px rgba(255,107,114,.4); }
.status-mark.warning, .status-mark.unknown { background: var(--orange); box-shadow: 0 0 12px rgba(255,181,103,.32); }
.status-mark.noncritical { background: var(--muted); box-shadow: none; }
.item-card.noncritical-item { opacity: .68; }
.noncritical-badge { padding: 3px 6px; border-radius: 6px; color: var(--muted); background: rgba(140,163,156,.13); font-size: .54rem; font-weight: 800; letter-spacing: .07em; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: center; }
.tag-chip { padding: 3px 7px; border-radius: 999px; color: var(--cyan); background: rgba(103,205,228,.1); font-size: .6rem; font-weight: 700; }
.gateway-group-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.gateway-group-chip { padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: .59rem; font-weight: 750; }
.gateway-group-chip.gateway-group-color-0 { color: #ffb39d; background: rgba(238,112,73,.14); border-color: rgba(238,112,73,.4); }
.gateway-group-chip.gateway-group-color-1 { color: #f4d77f; background: rgba(221,174,53,.14); border-color: rgba(221,174,53,.4); }
.gateway-group-chip.gateway-group-color-2 { color: #91dca6; background: rgba(83,190,113,.14); border-color: rgba(83,190,113,.4); }
.gateway-group-chip.gateway-group-color-3 { color: #91dfed; background: rgba(68,184,205,.14); border-color: rgba(68,184,205,.4); }
.gateway-group-chip.gateway-group-color-4 { color: #c7adff; background: rgba(143,104,224,.16); border-color: rgba(143,104,224,.42); }
.gateway-group-chip.gateway-group-color-5 { color: #f0a8cf; background: rgba(213,91,159,.14); border-color: rgba(213,91,159,.4); }
.gateway-active-badge, .gateway-pool-badge { padding: 3px 7px; border-radius: 999px; font-size: .55rem; font-weight: 850; letter-spacing: .06em; }
.gateway-active-badge { color: #06100e; background: var(--green); }
.gateway-pool-badge { color: var(--cyan); background: rgba(103,205,228,.12); }
.item-title { font-size: .9rem; font-weight: 620; }
.item-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.default-badge { padding: 3px 6px; border-radius: 6px; color: #06100e; background: var(--green); font-size: .56rem; font-weight: 850; letter-spacing: .1em; }
.item-subtitle { color: var(--muted); font-size: .72rem; margin-top: 4px; }
.item-metrics { display: flex; gap: 14px; text-align: right; }
.metric strong { display: block; font-size: .86rem; font-weight: 600; }
.metric small { color: var(--muted); font-size: .65rem; }
.metric .traffic-volume { margin-top: 2px; font-size: .62rem; font-weight: 650; }
.metric .rx-volume { color: rgba(83,230,165,.72); }
.metric .tx-volume { color: rgba(103,205,228,.76); }
.timeline-panel { padding-bottom: 17px; }
.history-picker { display: grid; grid-template-columns: 180px 180px max-content; align-items: end; gap: 10px; margin: -4px 0 17px; }
.history-control { display: grid; grid-template-rows: 16px 42px; gap: 5px; color: var(--muted); font-size: .66rem; }
.history-control span { display: flex; align-items: center; line-height: 1; }
.history-picker select, .history-picker input, .history-picker button { width: 100%; height: 42px; min-height: 42px; margin: 0; padding: 8px 11px; font-size: .8rem; line-height: 1.2; }
.history-picker button { width: auto; min-width: 105px; align-self: end; }
#history-slider { width: 100%; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
#history-slider::-webkit-slider-runnable-track { height: 8px; background: var(--history-gradient, var(--green)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
#history-slider::-moz-range-track { height: 8px; background: var(--history-gradient, var(--green)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
#history-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -5px; appearance: none; -webkit-appearance: none; border: 3px solid #d9fff0; border-radius: 50%; background: var(--green); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
#history-slider::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #d9fff0; border-radius: 50%; background: var(--green); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
#history-slider.problem-selected::-webkit-slider-thumb { background: var(--red); }
#history-slider.problem-selected::-moz-range-thumb { background: var(--red); }
#history-slider.warning-selected::-webkit-slider-thumb { background: var(--orange); }
#history-slider.warning-selected::-moz-range-thumb { background: var(--orange); }
.timeline-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; margin-top: 7px; }
.timeline-legend { display: flex; justify-content: flex-end; gap: 13px; margin-top: 8px; color: var(--muted); font-size: .62rem; }
.timeline-legend span { display: flex; align-items: center; gap: 5px; }
.timeline-legend i { width: 13px; height: 5px; border-radius: 2px; }
.timeline-legend .healthy { background: var(--green); }
.timeline-legend .warning { background: var(--orange); }
.timeline-legend .problem { background: var(--red); }
.icon-button { padding: 3px 10px; color: var(--muted); background: transparent; border: 0; font-size: 1.7rem; line-height: 1; }
dialog { width: min(900px, calc(100% - 28px)); max-height: min(820px, calc(100vh - 28px)); padding: 0; color: var(--text); background: #0b1715; border: 1px solid var(--panel-edge); border-radius: 20px; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(2,8,7,.78); backdrop-filter: blur(5px); }
#settings-form { display: flex; max-height: min(820px, calc(100vh - 28px)); flex-direction: column; }
.settings-header, .settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; }
.settings-header { border-bottom: 1px solid var(--panel-edge); }
.settings-footer { border-top: 1px solid var(--panel-edge); justify-content: flex-end; }
#settings-error { margin-right: auto; color: var(--red); font-size: .75rem; }
.settings-scroll { overflow-y: auto; padding: 20px 22px; }
.settings-section + .settings-section { margin-top: 24px; }
.settings-section h3 { margin: 0 0 10px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.settings-note { margin: -3px 0 10px; color: var(--muted); font-size: .65rem; }
.settings-general { padding: 13px; background: rgba(5,17,14,.5); border-radius: 12px; }
.settings-host-name { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr); align-items: center; gap: 14px; color: var(--muted); font-size: .68rem; }
.settings-host-name input { width: 100%; color: var(--text); background: rgba(13,29,26,.85); border: 1px solid var(--panel-edge); border-radius: 9px; padding: 8px 10px; font: inherit; }
.settings-list { display: grid; gap: 8px; }
.settings-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(210px, 1fr) auto; align-items: end; gap: 14px; padding: 13px; background: rgba(5,17,14,.5); border-radius: 12px; }
.settings-identity { display: grid; gap: 4px; align-self: center; }
.settings-identity strong { font-size: .86rem; }
.settings-identity small { color: var(--muted); font-size: .66rem; }
.settings-tags { display: grid; gap: 5px; color: var(--muted); font-size: .64rem; }
.settings-tags input { width: 100%; color: var(--text); background: rgba(13,29,26,.85); border: 1px solid var(--panel-edge); border-radius: 9px; padding: 8px 10px; font: inherit; }
.settings-flags { display: grid; min-width: 140px; gap: 8px; align-self: center; }
.settings-flags-single { min-height: 30px; align-self: end; align-content: center; }
.settings-chart, .settings-noncritical { display: grid; min-height: 16px; grid-template-columns: 16px 1fr; grid-template-rows: minmax(16px, auto) auto; align-items: start; gap: 2px 8px; color: var(--muted); font-size: .68rem; line-height: 16px; white-space: nowrap; }
.settings-chart input, .settings-noncritical input { width: 16px; height: 16px; grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; }
.settings-chart input { accent-color: var(--cyan); }
.settings-noncritical input { accent-color: var(--green); }
.settings-noncritical small { grid-column: 2; color: var(--orange); font-size: .57rem; line-height: 1.25; white-space: normal; }
.empty-state { min-height: 430px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; color: var(--muted); }
.empty-state h2 { color: var(--text); font-size: 1.35rem; }
.radar { width: 90px; height: 90px; position: relative; margin-bottom: 18px; }
.radar i { position: absolute; inset: 50%; border: 1px solid rgba(83,230,165,.5); border-radius: 50%; animation: radar 2.4s infinite; }
.radar i:nth-child(2) { animation-delay: .8s; }.radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { from { inset: 50%; opacity: 1; } to { inset: 0; opacity: 0; } }

.admin-shell { max-width: 1120px; }
.admin-topbar { align-items: center; }
.admin-topbar h1 { font-size: clamp(2rem, 4vw, 3rem); }
.admin-panel { padding: 24px; }
.admin-users-panel { margin-top: 16px; }
.admin-note { margin: -8px 0 18px; color: var(--muted); font-size: .72rem; }
.admin-router-list { display: grid; gap: 10px; }
.admin-router-row { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(480px,1.8fr) auto; align-items: end; gap: 14px; padding: 15px; border-radius: 14px; background: rgba(5,17,14,.5); }
.admin-user-row { grid-template-columns: 1fr auto; align-items: center; }
.admin-router-identity { display: grid; gap: 4px; }
.admin-router-identity strong { font-size: .92rem; }
.admin-router-identity code { color: var(--cyan); font-size: .66rem; }
.admin-router-identity small { color: var(--muted); font-size: .64rem; }
.admin-router-fields { display: grid; grid-template-columns: minmax(150px,.65fr) minmax(300px,1.35fr); gap: 10px; }
.admin-inline-field, .admin-field { display: grid; gap: 6px; color: var(--muted); font-size: .65rem; }
.admin-inline-field input, .admin-field input, .admin-field textarea, .admin-field select { width: 100%; color: var(--text); background: rgba(13,29,26,.85); border: 1px solid var(--panel-edge); border-radius: 9px; padding: 9px 10px; font: inherit; }
.admin-inline-field input { height: 38px; min-height: 38px; margin: 0; line-height: 18px; }
.router-secret-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: .66rem !important; }
.admin-field textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.45; }
.admin-input-action { position: relative; display: block; }
.admin-input-action input { padding-right: 42px; }
.admin-input-action .admin-action-icon { position: absolute; top: 50%; right: 4px; width: 32px; height: 32px; transform: translateY(-50%); border: 0; background: transparent; }
.admin-router-actions { display: flex; align-items: center; gap: 6px; }
.admin-action-icon { display: inline-grid; width: 38px; height: 38px; padding: 9px; place-items: center; color: var(--green); background: rgba(13,29,26,.82); border: 1px solid var(--panel-edge); border-radius: 9px; }
.admin-action-icon:hover { background: rgba(83,230,165,.11); border-color: rgba(83,230,165,.34); }
.admin-action-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-action-icon.copied { color: #06100e; background: var(--green); }
.danger-button { color: #ff9da2; }
.admin-error { min-height: 1.2em; margin-top: 14px; color: var(--red); font-size: .72rem; }
.admin-toast { position: fixed; z-index: 1000; top: 22px; left: 50%; max-width: min(520px,calc(100% - 32px)); padding: 12px 17px; transform: translateX(-50%); color: #06100e; background: var(--green); border-radius: 11px; box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: .76rem; font-weight: 750; }
.admin-toast.error { color: #fff; background: #b33d46; }
.admin-toast[hidden] { display: none; }
.admin-dialog { width: min(600px,calc(100% - 28px)); }
.admin-dialog-body { display: grid; gap: 14px; padding: 22px; }
.admin-warning { color: var(--orange); font-size: .75rem; }
.admin-field small { color: var(--muted); font-size: .6rem; }
.admin-host-choices { display: grid; max-height: 220px; overflow-y: auto; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--panel-edge); border-radius: 10px; }
.admin-host-choices legend { padding: 0 5px; color: var(--muted); font-size: .65rem; }
.admin-host-choices label { display: flex; align-items: center; gap: 8px; font-size: .72rem; }
.admin-host-choices input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.admin-host-choices:disabled { opacity: .45; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { display: grid; width: min(420px,100%); gap: 20px; padding: 30px; }
.login-card h1 { font-size: 2.4rem; }
.login-card button { min-height: 44px; }

@media (max-width: 860px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .two-column { grid-template-columns: 1fr; }
  .admin-router-row { grid-template-columns: 1fr; }
  .admin-user-row { grid-template-columns: 1fr auto; }
  .admin-router-fields { grid-template-columns: 1fr; }
  .admin-router-actions { justify-content: flex-end; }
}
@media (max-width: 560px) {
  .shell { width: min(100% - 24px, 1240px); padding-top: 26px; }
  .topbar { align-items: start; flex-direction: column; }
  .topbar > div:first-child { width: 100%; }
  .dashboard-topbar { display: grid; width: 100%; }
  .dashboard-title-row { align-items: start; flex-direction: column; }
  .header-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .dashboard-title-row .header-actions { margin-left: 0; }
  .header-context { width: 100%; align-items: stretch; flex-direction: column; gap: 10px; }
  #host-select { width: 100%; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card { min-height: 112px; }
  .panel { padding: 16px; }
  .item-card { grid-template-columns: auto 1fr; }
  .item-metrics { grid-column: 2; justify-content: flex-start; gap: 18px; text-align: left; }
  .history-picker { grid-template-columns: 1fr; align-items: stretch; }
  .history-picker button { width: 100%; }
  .settings-host-name { grid-template-columns: 1fr; }
  .settings-row { grid-template-columns: 1fr; align-items: stretch; }
  .settings-footer { flex-wrap: wrap; }
}