*{margin:0;padding:0;box-sizing:border-box;}html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:var(--font);background:var(--bg);color:var(--t1);display:flex;min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
/* ServerPanel redesign tokens (Phase 6 foundation) — FlyWP OKLCH + warm-sand identity.
   Alias names unchanged so all ~4,140 var() call-sites inherit the new look. */
:root{
  --font:Inter,'Inter Variable',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  /* warm-sand neutrals (signature, kept) */
  --w:#ffffff;--bg:oklch(0.97 0.005 80);--bg2:oklch(0.955 0.006 80);--c:#ffffff;
  --b1:oklch(0.925 0.008 80);--b2:oklch(0.88 0.01 80);
  --t1:oklch(0.21 0.034 264.665);--t2:oklch(0.446 0.03 256.802);--t3:oklch(0.551 0.027 264.364);--t4:oklch(0.707 0.022 261.325);
  /* primary brand → blue (#1654d2, was bright indigo #4f38f8) */
  --a:#1654d2;--ab:#e9f0fc;--ah:#1146b0;
  /* accent orange (new, sparing) */
  --ac:oklch(0.646 0.222 41.116);--acb:oklch(0.962 0.05 75);
  /* semantic ramps (structure kept, → OKLCH) */
  --g:oklch(0.627 0.194 149.214);--gb:oklch(0.962 0.044 156.743);--gbd:oklch(0.8 0.12 152);
  --y:oklch(0.769 0.158 70);--yb:oklch(0.97 0.05 95);--ybd:oklch(0.85 0.12 80);
  --r:oklch(0.577 0.245 27.325);--rb:oklch(0.936 0.032 17.717);--rbd:oklch(0.8 0.13 22);
  /* orange — the fourth severity step. A CRITICAL/HIGH/MEDIUM/LOW scale needs a
     rung between red and amber, and its absence is why HIGH was hardcoded to
     #ED8936 in three places while its neighbours used tokens. */
  --o:oklch(0.70 0.17 50);--ob:oklch(0.96 0.045 60);--obd:oklch(0.82 0.13 55);
  --bl:oklch(0.621 0.187 259);--blb:oklch(0.97 0.018 256);--blbd:oklch(0.82 0.1 255);
  /* Violet + cyan. Not a general palette — the Server Settings tab bar is
     hue-coded per tab (General/SSH/Docker/Danger) and two of those hues had no
     token at all, so their pills were hardcoded light tints that stayed pale on
     the dark tab bar. */
  --vi:oklch(0.55 0.16 285);--vib:oklch(0.96 0.03 285);
  --cy:oklch(0.58 0.13 235);--cyb:oklch(0.96 0.03 235);
  /* violet secondary retired → collapse into primary */
  --p:var(--a);--pb:var(--ab);--pbd:var(--ah);
  --sw:248px;--th:58px;
  /* spacing scale (new) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;
  /* radii collapsed 16/12/8 → 8/6/4 */
  --radius:8px;--radius-sm:6px;--radius-xs:4px;--radius-pill:9999px;
  /* flat FlyWP shadows */
  --shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 1px 3px rgba(0,0,0,.10),0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-lg:0 6px 6px rgba(0,0,0,.02),0 8px 24px rgba(0,0,0,.12);
}
[data-theme="dark"]{
  --w:#1e1c17;--bg:#15140f;--bg2:#232019;--c:#1e1c17;
  --b1:#322e25;--b2:#423c31;
  --t1:#f2f1ec;--t2:#c8c5bc;--t3:#a6a29a;--t4:#89857c;
  --a:#4a82e6;--ab:#18294d;--ah:#6f9cf0;
  --ac:oklch(0.75 0.18 60);--acb:oklch(0.30 0.07 70);
  --g:oklch(0.723 0.219 149.579);--gb:oklch(0.30 0.08 150);--gbd:oklch(0.45 0.1 150);
  --y:oklch(0.80 0.16 70);--yb:oklch(0.30 0.07 70);--ybd:oklch(0.5 0.1 70);
  --r:oklch(0.70 0.20 25);--rb:oklch(0.30 0.10 20);--rbd:oklch(0.5 0.14 22);
  --o:oklch(0.78 0.15 50);--ob:oklch(0.30 0.075 55);--obd:oklch(0.5 0.12 52);
  --bl:oklch(0.70 0.15 255);--blb:oklch(0.30 0.08 255);--blbd:oklch(0.5 0.1 255);
  --vi:oklch(0.75 0.14 285);--vib:oklch(0.30 0.07 285);
  --cy:oklch(0.74 0.11 235);--cyb:oklch(0.30 0.06 235);
  --p:var(--a);--pb:var(--ab);--pbd:var(--ah);
  --shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5);
}
[data-theme="dark"] .fi,[data-theme="dark"] .fsel{background:var(--bg2);border-color:var(--b1);color:var(--t1);}
[data-theme="dark"] .fi::placeholder,[data-theme="dark"] input::placeholder{color:var(--t4);}
[data-theme="dark"] .tbl thead{background:var(--bg2);}
[data-theme="dark"] .tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.02);}
[data-theme="dark"] .tbl tbody tr:hover td{background:rgba(255,255,255,.04) !important;}
[data-theme="dark"] .card{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .sc{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .stat-strip{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .modal{background:var(--w);}
[data-theme="dark"] .np{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .np-head{background:var(--w);}
[data-theme="dark"] .search-results{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .topbar{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .tb-search{background:var(--bg2);border-color:var(--b1);}
[data-theme="dark"] .tb-btn{background:var(--w);border-color:var(--b1);color:var(--t2);}
[data-theme="dark"] .terminal{background:#0a0d14;}
[data-theme="dark"] .term-body{background:#0a0d14;}
[data-theme="dark"] .prov-row{background:var(--bg2);border-color:var(--b1);}
[data-theme="dark"] .srv-card{background:var(--w);border-color:var(--b1);}
[data-theme="dark"] .rb{background:var(--bg2);border-color:var(--b1);}
[data-theme="dark"] .tabs{background:var(--bg2);}
[data-theme="dark"] .tab.on{background:var(--w);}
[data-theme="dark"] .tag{background:var(--bg2);border-color:var(--b1);}
[data-theme="dark"] .pp{background:var(--bg2);border-color:var(--b1);}
[data-theme="dark"] .logout-btn:hover{background:var(--rb);color:var(--r);}
[data-theme="dark"] img{opacity:0.9;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--t4);}