/* ===================================================================
   ZENITH — Appearance layer
   Loaded AFTER theme.css. Adds:
     1. Four colour themes, switched with <html data-theme="...">
     2. "Simple mode" (body.simple) — removes HUD decoration for calmer screens
   Nothing here changes layout or behaviour; it only re-skins.
   =================================================================== */

/* ---------- defaults (= the original Midnight look) ---------- */
:root{
  --page-bg:#02040b;
  --glow-1:rgba(106,92,255,.22);
  --glow-2:rgba(40,120,255,.14);
  --card-bg:linear-gradient(180deg,rgba(7,18,46,.80),rgba(3,8,22,.88));
  --card-line:rgba(77,184,255,.34);
  --card-shadow:0 0 0 1px rgba(77,184,255,.05),0 0 38px -10px rgba(61,150,255,.5),0 30px 60px -34px #000,inset 0 0 46px rgba(61,150,255,.07);
}

html,body{background:var(--page-bg)}
body:before{background:
  radial-gradient(ellipse 60% 45% at 80% -10%,var(--glow-1),transparent 60%),
  radial-gradient(ellipse 50% 40% at 0% 60%,var(--glow-2),transparent 60%)}
.card{background:var(--card-bg);border-color:var(--card-line);box-shadow:var(--card-shadow)}

/* ============================ AURORA ============================ */
html[data-theme="aurora"]{
  --page-bg:#010908;
  --glow-1:rgba(46,242,192,.16);
  --glow-2:rgba(23,184,166,.13);
  --card-bg:linear-gradient(180deg,rgba(4,28,25,.84),rgba(1,11,10,.90));
  --card-line:rgba(46,242,192,.30);
  --card-shadow:0 0 0 1px rgba(46,242,192,.05),0 0 38px -10px rgba(46,242,192,.38),0 30px 60px -34px #000,inset 0 0 46px rgba(46,242,192,.05);
  --a:#2ef2c0; --b:#17b8a6; --c:#4db8ff;
  --sys:#2ef2c0; --sys2:#17b8a6;
  --line:rgba(46,242,192,.22);
  --grad:linear-gradient(110deg,#2ef2c0,#17b8a6 60%,#4db8ff);
  --glass:rgba(2,20,18,.74);
  --ok:#7dffc4; --bad:#ff6b6b; --gold:#ffd166;
}

/* ============================= EMBER ============================ */
html[data-theme="ember"]{
  --page-bg:#0b0503;
  --glow-1:rgba(255,120,60,.16);
  --glow-2:rgba(255,77,61,.12);
  --card-bg:linear-gradient(180deg,rgba(40,15,9,.86),rgba(13,6,4,.90));
  --card-line:rgba(255,138,61,.32);
  --card-shadow:0 0 0 1px rgba(255,138,61,.05),0 0 38px -10px rgba(255,120,60,.38),0 30px 60px -34px #000,inset 0 0 46px rgba(255,120,60,.05);
  --a:#ff9a4d; --b:#ff5f3d; --c:#ffc857;
  --sys:#ff9a4d; --sys2:#ff5f3d;
  --line:rgba(255,138,61,.24);
  --grad:linear-gradient(110deg,#ffc857,#ff9a4d 55%,#ff5f3d);
  --glass:rgba(24,9,5,.76);
  --ok:#3ddc97; --bad:#ff4d6d; --gold:#ffd166;
}

/* ============================= VIOLET =========================== */
html[data-theme="violet"]{
  --page-bg:#08030f;
  --glow-1:rgba(212,107,255,.20);
  --glow-2:rgba(138,92,255,.16);
  --card-bg:linear-gradient(180deg,rgba(30,11,48,.84),rgba(9,3,16,.90));
  --card-line:rgba(212,107,255,.30);
  --card-shadow:0 0 0 1px rgba(212,107,255,.05),0 0 38px -10px rgba(180,90,255,.40),0 30px 60px -34px #000,inset 0 0 46px rgba(180,90,255,.06);
  --a:#d46bff; --b:#8a5cff; --c:#4db8ff;
  --sys:#d46bff; --sys2:#8a5cff;
  --line:rgba(212,107,255,.22);
  --grad:linear-gradient(110deg,#d46bff,#8a5cff 60%,#4db8ff);
  --glass:rgba(14,4,26,.76);
  --ok:#2ef2c0; --bad:#ff4d6d; --gold:#ffc857;
}

/* ============================= MONO ============================= */
html[data-theme="mono"]{
  --page-bg:#07090c;
  --glow-1:rgba(200,220,255,.10);
  --glow-2:rgba(140,160,190,.08);
  --card-bg:linear-gradient(180deg,rgba(18,22,28,.86),rgba(8,10,13,.92));
  --card-line:rgba(190,210,235,.24);
  --card-shadow:0 0 0 1px rgba(190,210,235,.04),0 0 30px -12px rgba(200,220,255,.22),0 30px 60px -34px #000;
  --a:#e8eef9; --b:#9fb2cc; --c:#6f86a6;
  --sys:#c9d8ea; --sys2:#9fb2cc;
  --line:rgba(190,210,235,.18);
  --grad:linear-gradient(110deg,#ffffff,#c9d8ea 60%,#9fb2cc);
  --glass:rgba(10,13,18,.78);
  --ok:#9fe8c4; --bad:#ff8a8a; --gold:#e8d9a8;
}

/* ========================= THEME PICKER ========================= */
.theme-picker{gap:10px;flex-wrap:wrap}
.theme-dot{
  width:32px;height:32px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid rgba(255,255,255,.22);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.theme-dot:hover{transform:scale(1.09);border-color:rgba(255,255,255,.5)}
.theme-dot.on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.theme-dot[data-theme="midnight"]{background:linear-gradient(135deg,#4db8ff,#6a5cff)}
.theme-dot[data-theme="aurora"]{background:linear-gradient(135deg,#2ef2c0,#17b8a6)}
.theme-dot[data-theme="ember"]{background:linear-gradient(135deg,#ffc857,#ff4d3d)}
.theme-dot[data-theme="violet"]{background:linear-gradient(135deg,#d46bff,#8a5cff)}
.theme-dot[data-theme="mono"]{background:linear-gradient(135deg,#ffffff,#9fb2cc)}

/* ===================== PROTOCOL EMPTY STATE ===================== */
.sx-empty{
  padding:26px 18px;margin-bottom:2px;text-align:center;
  border:1px dashed rgba(120,165,225,.38);border-radius:6px;
  color:#8ba5d0;font:500 13.5px Alexandria,system-ui,sans-serif;
  background:rgba(6,16,38,.35);
}

/* ========================== SIMPLE MODE ========================= */
body.simple .card:before,
body.simple .card:after{display:none!important}
body.simple .bg .scan-lines{display:none!important}
body.simple .bg .vignette{opacity:.55}
body.simple .card .sys,
body.simple .page > .card > .sys{display:none!important}
body.simple .card{box-shadow:0 14px 34px -26px rgba(0,0,0,.9);border-radius:10px}
body.simple .card-head h2,body.simple .card h2{letter-spacing:.4px;text-shadow:none}
body.simple .tilt{transform:none!important}
body.simple .accent-line,body.simple .hud-line{display:none}