:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090e19;
  color: #e9eef8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --muted: #8995aa;
  --panel: #111a29;
  --line: #202d41;
  --accent: #62d6b3;
  --blue: #67a8ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 80% -20%, #182640 0, transparent 44%), #090e19; }
.topbar { min-height: 112px; padding: 24px clamp(18px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 22px; letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: 17px; }
.connection { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.connection label { color: var(--muted); font-size: 12px; }
input { border: 1px solid var(--line); border-radius: 8px; outline: none; color: #e9eef8; background: #0b1321; padding: 10px 12px; }
input:focus { border-color: #4777aa; }
#router-id { width: 145px; }
.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 700; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: #8995aa; }
.badge.online { color: #78e5c2; background: #102b28; border-color: #205347; }
.badge.online i { background: #62d6b3; box-shadow: 0 0 10px #62d6b3; }
.badge.offline { color: #ff818d; background: #301921; border-color: #61303b; }
.badge.offline i { background: #ff6979; }
.badge.unreachable { color: #ffbf74; background: #302519; border-color: #5b4426; }
.badge.unreachable i { background: #ffb14d; }
.source-badge { color: var(--muted); font-size: 11px; }
#dashboard[hidden], [hidden] { display: none !important; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 380px); padding: 32px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(19, 29, 45, .98), rgba(13, 21, 34, .98)); box-shadow: 0 10px 30px #0003; }
.login-card h1 { margin-bottom: 10px; }
.login-description { margin-bottom: 24px; color: var(--muted); font-size: 13px; }
.login-card label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.login-card input { width: 100%; }
.login-card button, .logout-button { border: 1px solid #205347; border-radius: 8px; color: #78e5c2; background: #102b28; font: inherit; font-weight: 700; cursor: pointer; }
.login-card button { width: 100%; margin-top: 16px; padding: 11px 14px; }
.login-card button:hover, .logout-button:hover { background: #163a34; }
.login-card button:disabled { cursor: wait; opacity: .65; }
.login-message { min-height: 16px; margin: 14px 0 0; color: #ff818d; font-size: 12px; }
.logout-button { padding: 8px 11px; font-size: 11px; }
main { width: min(1440px, 100%); margin: 0 auto; padding: 30px clamp(18px, 5vw, 72px) 44px; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.card, .panel { border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(19, 29, 45, .98), rgba(13, 21, 34, .98)); box-shadow: 0 10px 30px #0002; }
.card { min-height: 128px; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.card-label { margin-bottom: 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.04em; }
.card small { margin-top: 8px; color: var(--muted); font-size: 10px; }
.panel { padding: 22px; margin-top: 16px; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.live-left-column { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0; height: 440px; min-width: 0; }
.live-grid .panel { min-width: 0; margin-top: 16px; }
.live-left-column .panel { margin-top: 16px; }
.live-left-column > .panel { display: flex; min-height: 0; flex-direction: column; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.chart-window { color: var(--muted); font-size: 11px; }
.chart-wrap { position: relative; flex: 1; min-height: 0; }
.client-panel .panel-heading { margin-bottom: 12px; }
.client-traffic-wrap { height: 320px; position: relative; }
.chart-empty { display: none; margin: 0; }
.search { width: min(260px, 50%); font-size: 12px; }
.table-wrap { min-height: 0; flex: 1; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 0 14px 12px; color: var(--muted); font-size: 10px; font-weight: 700; }
td { padding: 13px 14px; border-top: 1px solid #1d293a; font-size: 12px; }
.client-index { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 4px 7px; margin-right: 8px; border-radius: 999px; background: rgba(98, 214, 179, .12); border: 1px solid rgba(98, 214, 179, .3); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.client-name { color: #e9eef8; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #172337; }
tbody tr.top-talker { background: linear-gradient(90deg, #1d2b36, transparent); }
tbody tr.top-talker td:first-child { color: var(--accent); }
th button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
th button:hover { color: #fff; }
.empty { color: var(--muted); text-align: center; padding: 32px; }
.queue-note { min-height: 14px; margin: 12px 0 0; color: #f5bd72; font-size: 10px; }
.client-traffic-panel { height: 424px; }
footer { padding: 20px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 10px; }
@media (max-width: 1050px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .live-grid .panel { margin-top: 16px; }
  .live-left-column { height: auto; grid-template-rows: none; }
  .live-left-column > .panel { min-height: 0; }
  .chart-wrap { height: 280px; flex: none; }
  .table-wrap { max-height: 320px; flex: none; }
  .client-traffic-panel { height: auto; }
  .client-traffic-wrap { height: 320px; }
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .connection { justify-content: flex-start; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { min-height: 112px; padding: 14px; }
  .panel { padding: 16px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .search { width: 100%; }
  .chart-wrap { height: 230px; }
  .client-traffic-wrap { height: 260px; }
  th, td { padding-left: 10px; padding-right: 10px; }
}