/* =====================================================================
   ATLAS THEME ENGINE — dashboard style presets
   Applied via html[data-atlas-theme="<id>"] and persisted by atlas-themes.js.
   "native" (no attribute) keeps each page's own look.
   ===================================================================== */

/* Shared semantic palette + derived aliases (every preset). */
html[data-atlas-theme]{
  background:var(--bg);
  --gold:#f5b93c; --gold2:#ffd978; --pink:#f472b6; --money:#f472b6;
  --sky:#38bdf8; --blue:#38bdf8; --cyan:#44d7ff; --violet:#a78bfa; --magenta:#ff3fd1;
  --green:#4ade80; --amber:#fbbf24; --red:#f87171; --danger:#ff8b8b; --warn:#f5b93c;
  --ok:#4ade80; --bad:#ff8b8b; --me:#38bdf8; --ember:#fb7185; --leaf:#3ecf8e;
  --coder:#38bdf8; --atlas:#a78bfa; --hazard:#fbbf24; --steel:#94a3b8; --concrete:#1a2332;
  /* derived aliases so every page (incl. messenger-style chat) picks up the palette */
  --bg0:var(--bg);
  --bg1:color-mix(in srgb, var(--bg) 86%, var(--accent));
  --panel2:var(--panel);
  --card2:var(--panel);
  --deep:color-mix(in srgb, var(--bg) 62%, var(--accent));
  --fg:var(--ink);
  --muted2:var(--dim);
  --side:var(--bg);
  --bubble:var(--panel);
  --bubble-me:color-mix(in srgb, var(--accent) 24%, var(--bg));
  --hdr:var(--bg1);
  --hdr2:color-mix(in srgb, var(--bg1) 78%, var(--accent));
  --accent-2:var(--accent2);
  --online:var(--accent);
}

/* ---- presets ---- */
html[data-atlas-theme="emerald"]{ --bg:#07120e; --panel:rgba(8,18,14,.95); --card:rgba(8,18,14,.95); --ink:#e9f5ec; --text:#e9f5ec; --dim:#8aa79b; --muted:#8aa79b; --accent:#4ade80; --accent2:#22c55e; --line:rgba(74,222,128,.16); --line2:rgba(74,222,128,.34); }
html[data-atlas-theme="midnight"]{ --bg:#060a18; --panel:rgba(10,16,34,.95); --card:rgba(10,16,34,.95); --ink:#e6ecfb; --text:#e6ecfb; --dim:#8b9ac0; --muted:#8b9ac0; --accent:#4f83ff; --accent2:#38bdf8; --line:rgba(79,131,255,.18); --line2:rgba(79,131,255,.36); }
html[data-atlas-theme="royal"]{ --bg:#0d0716; --panel:rgba(19,12,32,.95); --card:rgba(19,12,32,.95); --ink:#efe9fb; --text:#efe9fb; --dim:#9d8ec4; --muted:#9d8ec4; --accent:#a78bfa; --accent2:#c084fc; --line:rgba(167,139,250,.18); --line2:rgba(167,139,250,.36); }
html[data-atlas-theme="ocean"]{ --bg:#04141a; --panel:rgba(6,22,30,.95); --card:rgba(6,22,30,.95); --ink:#e4f6fb; --text:#e4f6fb; --dim:#7fb2c0; --muted:#7fb2c0; --accent:#22d3ee; --accent2:#38bdf8; --line:rgba(34,211,238,.18); --line2:rgba(34,211,238,.36); }
html[data-atlas-theme="sunset"]{ --bg:#140d04; --panel:rgba(26,18,7,.95); --card:rgba(26,18,7,.95); --ink:#fdf3dd; --text:#fdf3dd; --dim:#c2a377; --muted:#c2a377; --accent:#fbbf24; --accent2:#f59e0b; --line:rgba(251,191,36,.18); --line2:rgba(251,191,36,.36); }
html[data-atlas-theme="rose"]{ --bg:#160610; --panel:rgba(26,8,20,.95); --card:rgba(26,8,20,.95); --ink:#fbe7f2; --text:#fbe7f2; --dim:#c58ba4; --muted:#c58ba4; --accent:#f472b6; --accent2:#ec4899; --line:rgba(244,114,182,.18); --line2:rgba(244,114,182,.36); }
html[data-atlas-theme="cyber"]{ --bg:#020604; --panel:rgba(3,12,8,.95); --card:rgba(3,12,8,.95); --ink:#d8ffe6; --text:#d8ffe6; --dim:#6fae86; --muted:#6fae86; --accent:#39ff88; --accent2:#00e676; --line:rgba(57,255,136,.22); --line2:rgba(57,255,136,.44); }
html[data-atlas-theme="crimson"]{ --bg:#140407; --panel:rgba(24,6,9,.95); --card:rgba(24,6,9,.95); --ink:#ffe7ea; --text:#ffe7ea; --dim:#c08b92; --muted:#c08b92; --accent:#f87171; --accent2:#ef4444; --line:rgba(248,113,113,.2); --line2:rgba(248,113,113,.4); }
html[data-atlas-theme="mono"]{ --bg:#0b0d10; --panel:rgba(18,21,26,.95); --card:rgba(18,21,26,.95); --ink:#e8eaee; --text:#e8eaee; --dim:#98a2ad; --muted:#98a2ad; --accent:#94a3b8; --accent2:#cbd5e1; --line:rgba(148,163,184,.2); --line2:rgba(148,163,184,.4); }
html[data-atlas-theme="nord"]{ --bg:#0a0f17; --panel:rgba(15,22,34,.95); --card:rgba(15,22,34,.95); --ink:#e5ecf5; --text:#e5ecf5; --dim:#8ba0b5; --muted:#8ba0b5; --accent:#88c0d0; --accent2:#81a1c1; --line:rgba(136,192,208,.18); --line2:rgba(136,192,208,.36); }
html[data-atlas-theme="veloce"]{ --bg:#121212; --panel:#1e1e1e; --card:#1e1e1e; --ink:#ffffff; --text:#ffffff; --dim:#9ca3af; --muted:#9ca3af; --accent:#f97316; --accent2:#fb923c; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.2); --gold:#f97316; --gold2:#fb923c; --hazard:#f97316; }
html[data-atlas-theme="helios"]{ --bg:#0d0814; --panel:rgba(20,12,32,.92); --card:rgba(20,12,32,.92); --ink:#f6eefc; --text:#f6eefc; --dim:#a99cc0; --muted:#a99cc0; --accent:#ec4899; --accent2:#a78bfa; --line:rgba(236,72,153,.2); --line2:rgba(167,139,250,.35); --magenta:#ff3fd1; --pink:#f472b6; --money:#f472b6; --violet:#a78bfa; }
html[data-atlas-theme="dwison"]{ --bg:#050505; --panel:#0e0e0e; --card:#0e0e0e; --ink:#f4fbe8; --text:#f4fbe8; --dim:#93a87a; --muted:#93a87a; --accent:#ccff00; --accent2:#9be60a; --line:rgba(204,255,0,.18); --line2:rgba(204,255,0,.4); --green:#ccff00; --ok:#ccff00; --leaf:#b8e600; --red:#ff5252; --danger:#ff5252; --bad:#ff5252; --warn:#ffe14d; --amber:#ffe14d; }
html[data-atlas-theme="finnova"]{ --bg:#ffffff; --panel:#ffffff; --card:#ffffff; --ink:#1e1b2e; --text:#1e1b2e; --dim:#6b7280; --muted:#6b7280; --accent:#6366f1; --accent2:#8b5cf6; --line:rgba(30,27,46,.12); --line2:rgba(30,27,46,.22); --gold:#b45309; --gold2:#d97706; --pink:#db2777; --money:#db2777; --sky:#0284c7; --blue:#2563eb; --cyan:#0891b2; --violet:#7c3aed; --magenta:#c026d3; --green:#16a34a; --amber:#d97706; --red:#dc2626; --danger:#dc2626; --warn:#b45309; --ok:#16a34a; --bad:#dc2626; --me:#2563eb; --ember:#e11d48; --leaf:#16a34a; --coder:#2563eb; --atlas:#7c3aed; --hazard:#d97706; }
html[data-atlas-theme="paper"]{
  --bg:#f4f6f9; --panel:#ffffff; --card:#ffffff; --ink:#15202b; --text:#15202b;
  --dim:#5b6b7c; --muted:#5b6b7c; --accent:#0f9f8a; --accent2:#0e7c66;
  --line:rgba(21,32,43,.14); --line2:rgba(21,32,43,.28);
  --gold:#b45309; --gold2:#d97706; --pink:#db2777; --money:#db2777;
  --sky:#0284c7; --blue:#0369a1; --cyan:#0891b2; --violet:#7c3aed; --magenta:#c026d3;
  --green:#0f9f8a; --amber:#d97706; --red:#dc2626; --danger:#dc2626; --warn:#b45309;
  --ok:#0f9f8a; --bad:#dc2626; --me:#0284c7; --ember:#e11d48; --leaf:#0f9f8a;
  --coder:#0284c7; --atlas:#7c3aed; --hazard:#d97706;
}

/* ---- Atlas family: the owner's professional palette ---- */
html[data-atlas-theme="atlas"]{
  --bg:#edf7f3;--panel:#ffffff;--card:#ffffff;--ink:#142a24;--text:#142a24;
  --dim:#647b73;--muted:#647b73;--accent:#15966a;--accent2:#0b7f58;
  --line:rgba(20,42,36,.13);--line2:rgba(20,42,36,.27);
  --gold:#b58128;--gold2:#d3a347;--sky:#2376b8;--blue:#1d62a1;--cyan:#0e9bb5;
  --green:#15966a;--ok:#15966a;--red:#d04e66;--danger:#d04e66;--bad:#d04e66;
  --warn:#b58128;--amber:#c58a25;--me:#2376b8;--leaf:#15966a;--atlas:#0b7f58;
}
html[data-atlas-theme="atlas-night"]{
  --bg:#071510;--panel:#0e2119;--card:#0e2119;--ink:#e7f7ee;--text:#e7f7ee;
  --dim:#8aada0;--muted:#8aada0;--accent:#4ade80;--accent2:#15966a;
  --line:rgba(74,222,128,.17);--line2:rgba(74,222,128,.36);
  --gold:#f5c45d;--gold2:#ffdc85;--sky:#61b7ed;--blue:#61b7ed;--cyan:#45d4df;
  --green:#4ade80;--ok:#4ade80;--red:#ff8799;--danger:#ff8799;--bad:#ff8799;
  --warn:#f5c45d;--amber:#f5c45d;--me:#61b7ed;--leaf:#4ade80;--atlas:#4ade80;
}
html[data-atlas-theme="atlas-slate"]{
  --bg:#eef2f6;--panel:#ffffff;--card:#ffffff;--ink:#1b2735;--text:#1b2735;
  --dim:#68798c;--muted:#68798c;--accent:#2f6f8f;--accent2:#24586f;
  --line:rgba(27,39,53,.13);--line2:rgba(27,39,53,.27);
  --gold:#b58128;--gold2:#d3a347;--sky:#2f6f8f;--blue:#24586f;--cyan:#258ca0;
  --green:#238b68;--ok:#238b68;--red:#c94f65;--danger:#c94f65;--bad:#c94f65;
  --warn:#ad7920;--amber:#ad7920;--me:#2f6f8f;--leaf:#238b68;--atlas:#2f6f8f;
}

/* =====================================================================
   LAYOUT PERSONALITY — beyond color: corner radius, padding, shadow,
   density and number weight. This is what makes each theme read as a
   *different dashboard design*, not just a recolor.
   ===================================================================== */
html[data-atlas-theme]{--radius:14px;--radius-lg:18px;--pad:16px;--pad-sm:10px;--shadow:0 6px 22px rgba(0,0,0,.25);--num-w:700}
/* Command Center (dwison) — flat, sharp, dense, high-contrast */
html[data-atlas-theme="dwison"]{--radius:8px;--radius-lg:10px;--pad:12px;--pad-sm:8px;--shadow:none;--num-w:800}
/* Industrial (veloce) — chunky, 24px rounded, thick padding, 1px borders */
html[data-atlas-theme="veloce"]{--radius:24px;--radius-lg:28px;--pad:24px;--pad-sm:14px;--shadow:none;--num-w:700}
/* Helios — glassmorphism, soft magenta glow */
html[data-atlas-theme="helios"]{--radius:18px;--radius-lg:22px;--pad:18px;--pad-sm:12px;--shadow:0 10px 40px rgba(236,72,153,.14);--num-w:750}
/* Finnova — airy light admin, diffuse shadows */
html[data-atlas-theme="finnova"]{--radius:14px;--radius-lg:18px;--pad:20px;--pad-sm:12px;--shadow:0 10px 30px rgba(30,27,46,.08);--num-w:700}
/* Paper — crisp flat light */
html[data-atlas-theme="paper"]{--radius:12px;--radius-lg:16px;--pad:18px;--pad-sm:11px;--shadow:0 2px 8px rgba(21,32,43,.06);--num-w:700}

/* ---- NEW PRESETS (layout + color) ---- */
html[data-atlas-theme="terminal"]{--bg:#000000;--panel:#0a0a0a;--card:#0a0a0a;--ink:#00ff88;--text:#00ff88;--dim:#3a8f6a;--muted:#3a8f6a;--accent:#00ff88;--accent2:#00cc66;--line:rgba(0,255,136,.2);--line2:rgba(0,255,136,.45);--gold:#00ff88;--green:#00ff88;--ok:#00ff88;--red:#ff4444;--danger:#ff4444;--bad:#ff4444;--warn:#ffcc00;--amber:#ffcc00;--radius:4px;--radius-lg:6px;--pad:12px;--pad-sm:8px;--shadow:none;--num-w:700}
html[data-atlas-theme="solar"]{--bg:#fdf6ec;--panel:#ffffff;--card:#ffffff;--ink:#2a1f14;--text:#2a1f14;--dim:#8a7460;--muted:#8a7460;--accent:#f59e0b;--accent2:#ea580c;--line:rgba(42,31,20,.12);--line2:rgba(42,31,20,.22);--gold:#b45309;--green:#16a34a;--ok:#16a34a;--red:#dc2626;--danger:#dc2626;--warn:#b45309;--amber:#d97706;--radius:16px;--radius-lg:20px;--pad:18px;--pad-sm:12px;--shadow:0 10px 30px rgba(42,31,20,.08);--num-w:700}
html[data-atlas-theme="arctic"]{--bg:#f3f8fc;--panel:#ffffff;--card:#ffffff;--ink:#0f2a3a;--text:#0f2a3a;--dim:#5b7c8d;--muted:#5b7c8d;--accent:#0ea5e9;--accent2:#2563eb;--line:rgba(15,42,58,.12);--line2:rgba(15,42,58,.22);--gold:#b45309;--green:#16a34a;--ok:#16a34a;--red:#dc2626;--danger:#dc2626;--warn:#b45309;--amber:#d97706;--radius:14px;--radius-lg:18px;--pad:18px;--pad-sm:12px;--shadow:0 8px 24px rgba(15,42,58,.08);--num-w:700}
html[data-atlas-theme="graphite"]{--bg:#14161a;--panel:#1c1f24;--card:#1c1f24;--ink:#e6e8ec;--text:#e6e8ec;--dim:#8b929c;--muted:#8b929c;--accent:#8b5cf6;--accent2:#a78bfa;--line:rgba(230,232,236,.1);--line2:rgba(230,232,236,.2);--radius:10px;--radius-lg:12px;--pad:16px;--pad-sm:10px;--shadow:none;--num-w:700}
html[data-atlas-theme="aurora"]{--bg:#061018;--panel:rgba(10,22,34,.9);--card:rgba(10,22,34,.9);--ink:#e6f4ff;--text:#e6f4ff;--dim:#7fa8c4;--muted:#7fa8c4;--accent:#22d3ee;--accent2:#a78bfa;--line:rgba(34,211,238,.18);--line2:rgba(167,139,250,.3);--radius:18px;--radius-lg:22px;--pad:18px;--pad-sm:12px;--shadow:0 10px 40px rgba(34,211,238,.12);--num-w:750}
html[data-atlas-theme="sakura"]{--bg:#fff5f7;--panel:#ffffff;--card:#ffffff;--ink:#3a1f2a;--text:#3a1f2a;--dim:#a8758a;--muted:#a8758a;--accent:#f472b6;--accent2:#db2777;--line:rgba(58,31,42,.12);--line2:rgba(58,31,42,.22);--gold:#b45309;--green:#16a34a;--ok:#16a34a;--red:#dc2626;--danger:#dc2626;--warn:#b45309;--amber:#d97706;--radius:20px;--radius-lg:24px;--pad:20px;--pad-sm:14px;--shadow:0 12px 32px rgba(58,31,42,.08);--num-w:700}

/* Geometry application — structural surfaces adopt each theme's feel. */
html[data-atlas-theme] .card,html[data-atlas-theme] .room,html[data-atlas-theme] .panel,
html[data-atlas-theme] .rail,html[data-atlas-theme] .tile,html[data-atlas-theme] .sheet,
html[data-atlas-theme] .glass-panel,html[data-atlas-theme] .login-card,html[data-atlas-theme] .station,
html[data-atlas-theme] .kpi,html[data-atlas-theme] .metric{border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
html[data-atlas-theme] .card,html[data-atlas-theme] .panel,
html[data-atlas-theme] .sheet,html[data-atlas-theme] .glass-panel,html[data-atlas-theme] .login-card{padding:var(--pad)!important}
html[data-atlas-theme] button,html[data-atlas-theme] .btn,html[data-atlas-theme] input,
html[data-atlas-theme] select,html[data-atlas-theme] textarea,html[data-atlas-theme] .chip,
html[data-atlas-theme] .badge,html[data-atlas-theme] .tag{border-radius:max(6px,calc(var(--radius) * .6))!important}
html[data-atlas-theme] .stat b,html[data-atlas-theme] .stat strong,html[data-atlas-theme] .g-val,
html[data-atlas-theme] .kpi b,html[data-atlas-theme] .metric b,html[data-atlas-theme] .big,
html[data-atlas-theme] .num{font-weight:var(--num-w)!important}
/* Flat layouts: hairline borders are the only card separation. */
html[data-atlas-theme="dwison"] .card,html[data-atlas-theme="dwison"] .room,html[data-atlas-theme="dwison"] .panel,
html[data-atlas-theme="dwison"] .rail,html[data-atlas-theme="dwison"] .tile,
html[data-atlas-theme="veloce"] .card,html[data-atlas-theme="veloce"] .room,html[data-atlas-theme="veloce"] .panel,
html[data-atlas-theme="veloce"] .rail,html[data-atlas-theme="veloce"] .tile,
html[data-atlas-theme="terminal"] .card,html[data-atlas-theme="terminal"] .room,html[data-atlas-theme="terminal"] .panel,
html[data-atlas-theme="terminal"] .rail,html[data-atlas-theme="terminal"] .tile,
html[data-atlas-theme="graphite"] .card,html[data-atlas-theme="graphite"] .room,html[data-atlas-theme="graphite"] .panel,
html[data-atlas-theme="graphite"] .rail,html[data-atlas-theme="graphite"] .tile{border:1px solid var(--line)!important}

/* ---- floating switcher widget ---- */
#atlas-theme-switcher{position:fixed;left:16px;bottom:16px;z-index:2147483000;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#ats-fab{height:44px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);cursor:pointer;display:flex;align-items:center;gap:8px;background:rgba(10,14,18,.92);box-shadow:0 6px 18px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s;color:#e8eaee}
#ats-fab:hover{transform:scale(1.06)}
#ats-fab svg{flex:0 0 auto}
.ats-fab-label{font-size:13px;font-weight:700;font-family:inherit;letter-spacing:.02em}
#ats-panel{position:absolute;left:0;bottom:52px;width:min(300px,78vw);background:rgba(10,14,18,.96);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.6);color:#e8eaee}
#ats-panel .ats-title{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9aa3af;margin:2px 2px 8px;font-weight:700}
#ats-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#ats-grid button{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e8eaee;cursor:pointer;font-size:12px;font-weight:600;text-align:left}
#ats-grid button:hover{background:rgba(255,255,255,.1)}
#ats-grid button.on{outline:2px solid #38bdf8;outline-offset:1px}
#ats-grid .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

/* Light themes (paper, finnova): flatten hardcoded dark surfaces so text stays readable. */
html[data-atlas-theme="paper"] body,html[data-atlas-theme="finnova"] body{background:var(--bg)!important;color:var(--ink)!important}
html[data-atlas-theme="paper"] header,html[data-atlas-theme="finnova"] header,
html[data-atlas-theme="paper"] nav,html[data-atlas-theme="finnova"] nav,
html[data-atlas-theme="paper"] .glass-panel,html[data-atlas-theme="finnova"] .glass-panel,
html[data-atlas-theme="paper"] .terminal,html[data-atlas-theme="finnova"] .terminal,
html[data-atlas-theme="paper"] .card,html[data-atlas-theme="finnova"] .card,
html[data-atlas-theme="paper"] .room,html[data-atlas-theme="finnova"] .room,
html[data-atlas-theme="paper"] .rail,html[data-atlas-theme="finnova"] .rail{background:var(--panel)!important;border-color:var(--line)!important}
html[data-atlas-theme="paper"] input,html[data-atlas-theme="finnova"] input,
html[data-atlas-theme="paper"] textarea,html[data-atlas-theme="finnova"] textarea,
html[data-atlas-theme="paper"] select,html[data-atlas-theme="finnova"] select{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}

/* Deeper flattening for pages with hardcoded dark surfaces (Manager, Guard, Forge…).
   Structural surfaces only — accent/status colors (buttons, dots, fills) keep their hue. */
html[data-atlas-theme="paper"] .dashnav,html[data-atlas-theme="finnova"] .dashnav,
html[data-atlas-theme="paper"] .toast,html[data-atlas-theme="finnova"] .toast,
html[data-atlas-theme="paper"] .claim,html[data-atlas-theme="finnova"] .claim,
html[data-atlas-theme="paper"] .sheet,html[data-atlas-theme="finnova"] .sheet,
html[data-atlas-theme="paper"] .login-card,html[data-atlas-theme="finnova"] .login-card,
html[data-atlas-theme="paper"] .empty,html[data-atlas-theme="finnova"] .empty,
html[data-atlas-theme="paper"] #owner-gate .card,html[data-atlas-theme="finnova"] #owner-gate .card,
html[data-atlas-theme="paper"] code,html[data-atlas-theme="finnova"] code
{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-atlas-theme="paper"] .cat-title .cnt,html[data-atlas-theme="finnova"] .cat-title .cnt,
html[data-atlas-theme="paper"] .r-watts,html[data-atlas-theme="finnova"] .r-watts
{background:var(--panel)!important;color:var(--dim)!important;border-color:var(--line)!important}
html[data-atlas-theme="paper"] .powerbar .bar,html[data-atlas-theme="finnova"] .powerbar .bar,
html[data-atlas-theme="paper"] .bar,html[data-atlas-theme="finnova"] .bar,
html[data-atlas-theme="paper"] .progress-track,html[data-atlas-theme="finnova"] .progress-track,
html[data-atlas-theme="paper"] .line-track,html[data-atlas-theme="finnova"] .line-track,
html[data-atlas-theme="paper"] .fp-track,html[data-atlas-theme="finnova"] .fp-track
{background:var(--line)!important}

/* =====================================================================
   WORKSPACE SURFACE BRIDGE
   Shared desktop dashboards use different markup, but these common surfaces
   inherit the selected Atlas family so the style follows the customer from
   Guard to Factory Dashboard, Rooms, Issues, and Protect views.
   ===================================================================== */
html[data-atlas-theme] .side-nav,html[data-atlas-theme] .topbar,html[data-atlas-theme] .rail,
html[data-atlas-theme] .panel,html[data-atlas-theme] .kpi,html[data-atlas-theme] .chart-panel,
html[data-atlas-theme] .hw,html[data-atlas-theme] .gauge-card,html[data-atlas-theme] .svc,
html[data-atlas-theme] .room,html[data-atlas-theme] .powerbar,html[data-atlas-theme] .pool,
html[data-atlas-theme] .work-row,html[data-atlas-theme] .c-row,html[data-atlas-theme] .act-row{
  background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important;
}
html[data-atlas-theme] .nav-mark .m,html[data-atlas-theme] .nav-item.on,
html[data-atlas-theme] .mini.go,html[data-atlas-theme] button.primary,html[data-atlas-theme] a.btn.primary{
  background:var(--accent)!important;color:var(--bg)!important;border-color:var(--accent)!important;
}
html[data-atlas-theme] .nav-item{color:var(--dim)!important}html[data-atlas-theme] .nav-item:hover{background:color-mix(in srgb,var(--accent) 10%,var(--panel))!important;color:var(--ink)!important}
html[data-atlas-theme] .sec-head h2,html[data-atlas-theme] .rail h3,html[data-atlas-theme] .brand h1 span,
html[data-atlas-theme] .kpi .v,html[data-atlas-theme] .hw .hw-val,html[data-atlas-theme] .gauge-card .g-val{color:var(--accent)!important}
html[data-atlas-theme] .muted,html[data-atlas-theme] .dim,html[data-atlas-theme] .sub,html[data-atlas-theme] .hint,
html[data-atlas-theme] .kpi .k,html[data-atlas-theme] .kpi .d,html[data-atlas-theme] .hw .hw-sub,
html[data-atlas-theme] .gauge-card .g-label,html[data-atlas-theme] .gauge-card .g-sub{color:var(--dim)!important}
html[data-atlas-theme] .bar,html[data-atlas-theme] .p-bar,html[data-atlas-theme] .progress-track{background:var(--line)!important}
html[data-atlas-theme] .bar i,html[data-atlas-theme] .fill,html[data-atlas-theme] .switch.on::after{background:var(--accent)!important}
html[data-atlas-theme] input,html[data-atlas-theme] select,html[data-atlas-theme] textarea{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}

/* =====================================================================
   MOBILE / RESPONSIVE SAFETY NET
   Applies to EVERY dashboard (native + themed). Loaded after each page's
   own <style>, so these win on small screens and give a usable phone view
   even where a page lacks its own breakpoints.
   ===================================================================== */
/* =====================================================================
   SURFACE MODE — one explicit dark/light preference for every dashboard.
   Theme controls keep the accent family; mode controls the workspace surface.
   ===================================================================== */
html[data-atlas-mode="dark"]{
  --mode-bg:#071018;--mode-panel:#0e1a28;--mode-panel2:#122236;--mode-ink:#e7eef6;--mode-dim:#91a4b7;
  --mode-line:rgba(148,163,184,.18);--mode-shadow:0 14px 38px rgba(0,0,0,.34);
}
html[data-atlas-mode="light"]{
  --mode-bg:#eef3f7;--mode-panel:#ffffff;--mode-panel2:#f7fafc;--mode-ink:#172536;--mode-dim:#617387;
  --mode-line:rgba(23,37,54,.14);--mode-shadow:0 10px 26px rgba(23,37,54,.08);
}
html[data-atlas-mode] body{background:var(--mode-bg)!important;color:var(--mode-ink)!important}
html[data-atlas-mode] .side-nav,html[data-atlas-mode] .rail,html[data-atlas-mode] .topbar,
html[data-atlas-mode] .panel,html[data-atlas-mode] .kpi,html[data-atlas-mode] .chart-panel,
html[data-atlas-mode] .hw,html[data-atlas-mode] .gauge-card,html[data-atlas-mode] .svc,
html[data-atlas-mode] .room,html[data-atlas-mode] .powerbar,html[data-atlas-mode] .work-row,
html[data-atlas-mode] .c-row,html[data-atlas-mode] .act-row,html[data-atlas-mode] .card,
html[data-atlas-mode] .sheet,html[data-atlas-mode] .tile,html[data-atlas-mode] .glass-panel{
  background:var(--mode-panel)!important;color:var(--mode-ink)!important;border-color:var(--mode-line)!important;box-shadow:var(--mode-shadow)!important;
}
html[data-atlas-mode] .stat,html[data-atlas-mode] .pool,html[data-atlas-mode] .agent-card,
html[data-atlas-mode] input,html[data-atlas-mode] select,html[data-atlas-mode] textarea,
html[data-atlas-mode] .svc,html[data-atlas-mode] .room .ic{background:var(--mode-panel2)!important;color:var(--mode-ink)!important;border-color:var(--mode-line)!important}
html[data-atlas-mode] .brand .sub,html[data-atlas-mode] .sub,html[data-atlas-mode] .dim,
html[data-atlas-mode] .hint,html[data-atlas-mode] .kpi .k,html[data-atlas-mode] .kpi .d,
html[data-atlas-mode] .hw-sub,html[data-atlas-mode] .gauge-card .g-label,html[data-atlas-mode] .gauge-card .g-sub,
html[data-atlas-mode] .nav-foot{color:var(--mode-dim)!important}
html[data-atlas-mode="light"] .topbar,html[data-atlas-mode="light"] header,
html[data-atlas-mode="light"] #topbar,html[data-atlas-mode="light"] #vnc-bar,
html[data-atlas-mode="light"] #ovl .bar{background:rgba(255,255,255,.94)!important}
html[data-atlas-mode="light"] .nav-item{color:var(--mode-dim)!important}
html[data-atlas-mode="light"] .nav-item.on{color:#fff!important}
html[data-atlas-mode="light"] #atlas-theme-switcher #ats-fab{background:#fff;color:var(--mode-ink);border-color:var(--mode-line)}
html[data-atlas-mode="light"] #ats-panel{background:rgba(255,255,255,.98);color:var(--mode-ink);border-color:var(--mode-line)}
html[data-atlas-mode="light"] #ats-grid button{background:var(--mode-panel2);color:var(--mode-ink);border-color:var(--mode-line)}
#ats-mode{width:100%;border:1px solid var(--mode-line);background:var(--mode-panel2);color:var(--mode-ink);border-radius:9px;padding:7px 9px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ats-mode-row{display:flex;align-items:center;gap:8px;margin:0 2px 9px;color:var(--mode-dim);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ats-mode-row span{flex:1}
.ats-mode-row #ats-mode{width:auto;text-transform:none;letter-spacing:0}

@media (max-width: 760px){
  body{overflow-x:hidden!important}

  /* Collapse multi-column grids to a single readable column. */
  .grid,.grid.two,.grid.three,.grid.four,.grid.kpi,
  .hero,.kpi-row,.cast-row,.statgrid,.shields,.acc-2col,
  .rooms,.wall,.masonry,.feed,.cols,.items{grid-template-columns:1fr!important;gap:10px!important}

  /* Flex rows wrap instead of spilling off-screen. */
  .row,.toolbar,.topbar,.acts,.r-top,.login-status,.stat-row{flex-wrap:wrap!important}

  /* Surfaces fill the viewport; no desktop min-widths. */
  .card,.panel,.rail,.tile,.sheet,.room,.glass-panel,.login-card,
  .station,.kpi,.metric,.wrap,.shell,.main-wrapper{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  .card,.panel,.sheet,.glass-panel{padding:12px!important}

  /* Tables scroll horizontally instead of squashing columns. */
  table{display:block!important;overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important}

  /* Media + form fields never overflow. */
  img,video{max-width:100%!important;height:auto!important}
  input,select,textarea{max-width:100%!important}

  /* Style switcher stays on-screen and scrollable. */
  #atlas-theme-switcher{left:10px!important;bottom:10px!important}
  #ats-panel{max-height:70vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
}