/* Color layer only. Layout, client access and VPN behavior are unchanged. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-raised: #ffffff;
  --ink: #111827;
  --ink-soft: #334155;
  --muted: #64748b;
  --muted-light: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #eef2f6;
  --line-strong: #cbd5e1;
  --rail: #111827;
  --rail-soft: #1f2937;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff6ff;
  --teal: #2563eb;
  --teal-soft: #eff6ff;
  --green: #047857;
  --green-soft: #ecfdf5;
  --amber: #a16207;
  --amber-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --shadow-low: 0 1px 3px rgba(15,23,42,.045);
  --shadow-mid: 0 16px 40px rgba(15,23,42,.12);
}

/* Graphite navigation; a single blue accent, no olive tint. */
.app-header { background: var(--rail); border-color: #263244; }
.brand-mark { color: #ffffff; background: #2563eb; border-color: #3b82f6; }
.brand-lockup strong > span,.nav-caption { color: #94a3b8; }
.rail-demo { color: #cbd5e1; border-color: #374151; }
.header-actions .btn,.header-actions .btn-red { color: #cbd5e1; border-color: transparent; }
.header-actions .btn:hover,.header-actions .btn-red:hover { color: #ffffff; background: #1f2937; }
.header-actions .btn.active,.header-actions .btn[aria-current="page"] { color: #ffffff; background: #2563eb; border-color: #3b82f6; }
.header-actions .btn.active svg { color: #ffffff; }
.rail-note { background: #1b2536; border-color: #334155; }
.rail-note .rail-signal,.rail-note > span:last-child { color: #93c5fd; }
.rail-note strong,.operator-badge strong { color: #f8fafc; }
.rail-note p,.operator-badge small { color: #aab8cc; }
.operator-badge { border-top-color: #334155; }
.operator-avatar { background: #334155; color: #e2e8f0; border-color: #475569; }

/* Neutral, higher-contrast type throughout the working surface. */
.page-heading h1,.section-head h2,.section-head h3,.users-section-head h2,
.server-panel h2,.metric-card > strong,.modal-head h3,.drawer-metrics strong,
#usersTable .user-name { color: var(--ink); }
.eyebrow,.page-heading p,.metric-top,.metric-card p,.section-kicker,.section-head p,
.chart-legend,.chart-readout,.chart-source,.chart-empty,.server-description,
.server-facts > div,.users-section-head p,.result-count,.user-meta,.presence-label,
.limit-caption,.expiry-hint,.users-foot,.footer-brand,.modal-head p,.field-hint,.hint,
.drawer-user-state,.drawer-metrics span,.drawer-explainer p,.qr-status,
.download-label,.download-hint,.login-foot { color: var(--muted); }
.chart-legend b,.server-facts strong,.expiry-button,.menu-btn,
.modal .field label,.field label,.field-label,.drawer-explainer h4 { color: var(--ink-soft); }
.meta-dot,.traffic-link > span:last-child { color: #94a3b8; }
#usersTable tbody td::before { color: var(--muted); }

/* Buttons and selection states. */
.btn { color: var(--ink-soft); background: #ffffff; border-color: var(--line-strong); }
.btn:hover { color: var(--ink); background: #f8fafc; border-color: #94a3b8; }
.btn-primary { color: #ffffff; background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 4px rgba(37,99,235,.16); }
.btn-primary:hover { color: #ffffff; background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-red { color: var(--danger); background: var(--danger-soft); border-color: #fecaca; }
.btn-red:hover { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.header-actions .btn { background: transparent; }
.header-actions .btn:hover,.header-actions .btn-red:hover { background: var(--rail-soft); border-color: transparent; }
.header-actions .btn.active,.header-actions .btn[aria-current="page"] { background: var(--accent); border-color: #3b82f6; }
.text-button,.traffic-link,.limit-caption .text-button,.server-help { color: var(--accent); }
.text-button:hover,.traffic-link:hover,.expiry-button:hover,.server-help:hover,#usersTable .user-name:hover { color: var(--accent-dark); }
.access-btn,.state-toggle.resume-toggle { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.access-btn:hover,.state-toggle.resume-toggle:hover { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
.state-toggle,.modal-close { color: #475569; background: #ffffff; border-color: var(--line); }
.state-toggle:hover { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.action-menu summary { color: #64748b; }
.menu-btn:hover,.modal-close:hover { background: #f1f5f9; color: var(--ink); }
.menu-btn.danger { color: var(--danger); }
.quick-durations .btn { color: var(--ink-soft); background: #f8fafc; border-color: var(--line); }
.quick-durations .btn:hover { color: var(--accent-dark); background: #eff6ff; border-color: #bfdbfe; }
.filter-btn,.range-btn,.protocol-tab { color: #475569; }
.filter-btn.active { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.filter-btn:hover { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.range-btn.active { color: #1d4ed8; background: #ffffff; box-shadow: 0 1px 4px rgba(15,23,42,.1); }
.protocol-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.btn:focus-visible,button:focus-visible,.input:focus-visible,.select:focus-visible,
a:focus-visible,.sortable:focus-visible,canvas:focus-visible,.protocol-tab:focus-visible { outline-color: rgba(37,99,235,.5); }
.input:focus,.select:focus,.textarea:focus,.speed-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px #dbeafe; }

/* Pure white cards and neutral dividers. */
.surface,.metric-card,.modal,.action-popover { background: #ffffff; border-color: var(--line); }
.user-search .input,.modal .input { color: var(--ink); background: #ffffff; border-color: var(--line-strong); }
.user-search svg { color: #94a3b8; }
.chart-controls,#usersTable thead th,.users-foot,.drawer-explainer { background: #f8fafc; border-color: var(--line); }
#usersTable thead th { color: #475569; }
.filter-row,#usersTable tbody td,.server-facts,.drawer-user-state,.drawer-metrics > div,
.protocol-tabs,.drawer-explainer,.menu-separator { border-color: var(--line); }
#usersTable tbody tr { border-color: var(--line); }
#usersTable tbody .user-column { border-bottom-color: var(--line); }
#usersTable tbody tr:hover td { background: #f8fafc; }
.menu-separator { background: var(--line); }
.count-badge { color: #475569; background: #f1f5f9; }
.user-avatar { color: #2563eb; background: #eff6ff; }
#usersTable tr:nth-child(4n+2) .user-avatar { color: #7c3aed; background: #f5f3ff; }
#usersTable tr:nth-child(4n+3) .user-avatar { color: #475569; background: #f1f5f9; }
#usersTable tr:nth-child(4n+4) .user-avatar { color: #0369a1; background: #f0f9ff; }
.metric-icon,.metric-icon.teal { color: #2563eb; background: #eff6ff; }
.metric-icon.indigo { color: #7c3aed; background: #f5f3ff; }
.metric-icon.amber-icon { color: #a16207; background: #fffbeb; }
.live-label { color: #64748b; }
.live-label i { background: #3b82f6; box-shadow: 0 0 0 4px #dbeafe; }

/* Chart colors match the canvas palette in app.js. */
.legend-dot.tx { background: #2563eb; }
.legend-dot.rx { background: #7c3aed; }
.chart-tip { color: #f8fafc; background: #111827; border-color: #334155; box-shadow: 0 10px 35px rgba(15,23,42,.18); }
.chart-empty { background: rgba(255,255,255,.95); }
.chart-empty::before { border-color: #e2e8f0; border-top-color: #2563eb; }
.server-panel { background: #ffffff; }
.server-orbit { border-color: #dbeafe; }
.server-orbit::after { background: #3b82f6; box-shadow: 0 0 0 4px #ffffff; }
.server-orbit > span { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.protocol-badge { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.protocol-badge.neutral { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.release-notice,.callout.info-callout { color: #334155; background: #eff6ff; border-color: #bfdbfe; }
.release-notice { border-left-color: #2563eb; }
.release-notice strong { color: #1e40af; }
.callout { color: #475569; }

/* Green is semantic success only, amber is paused, red is expired/error. */
.pill.green { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.pill.amber { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.pill.red { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.live-dot.unknown,.live-dot.offline { background: #cbd5e1; }
.live-dot.online { background: #10b981; }
.live-dot.paused { background: #f59e0b; }
.live-dot.expired { background: #ef4444; }
.status-chip { color: #64748b; }
.status-chip.healthy { color: #047857; }
.status-chip.warning,.risk-note,.expiry-hint.due-soon,.chart-source.stale { color: #a16207; }
.status-chip.error,.chart-empty.is-error { color: #b91c1c; }
.access-modal .access-notice { color: #92400e; background: #fffbeb; border-color: #fde68a; }

/* Dialogs and login share the same neutral palette. QR pixels stay untouched. */
.modal-backdrop { background: rgba(15,23,42,.46); }
.modal { box-shadow: 0 25px 100px rgba(15,23,42,.22); }
.action-popover { box-shadow: 0 10px 35px rgba(15,23,42,.14); }
.access-modal .qr-stage { background: #ffffff; border-color: #e2e8f0; }
.skip-link { color: var(--accent-dark); }
.login-page { background: radial-gradient(ellipse at 15% 20%,#dbeafe,transparent 45%),#f3f4f6; }
.login-card { border-color: #e2e8f0; box-shadow: 0 24px 90px rgba(15,23,42,.15); }
.login-head { background: linear-gradient(145deg,#1e293b,#111827); }
.login-head::after { border-color: #3b82f6; box-shadow: 0 0 0 35px rgba(37,99,235,.10),0 0 0 70px rgba(37,99,235,.05); }
.login-head p { color: #cbd5e1; }
.login-body::before { color: var(--accent); }
.demo-badge { color: #bfdbfe; background: rgba(37,99,235,.16); border-color: #3b82f6; }
.login-foot { border-top-color: #e2e8f0; }