/* ── Theme Tokens ─────────────────────────────────────────────────── */
:root {
  --acc:  #00ff88; --acc2: #00cc6a;
  --blue: #4f8ef7; --ora:  #f97316;
  --red:  #ef4444; --yel:  #facc15;
  --r: 8px;
  --sbw: 234px;
  --fh: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fm: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --trans: background .25s, color .25s, border-color .25s, box-shadow .25s;
}

/* ── DARK MODE (default) ──────────────────────────────────────────── */
[data-theme="dark"], :root {
  --bg:   #080a0f; --bg2: #0d1017; --bg3: #121620; --bg4: #181c26;
  --bd:   #1e2433; --bd2: #252d3e;
  --tx:   #c8d0e0; --tx2: #8896b0; --mu:  #556070;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --card-hover: rgba(255,255,255,.012);
}

/* ── LIGHT MODE ───────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:   #f0f4f8; --bg2: #ffffff; --bg3: #f8fafc; --bg4: #edf2f7;
  --bd:   #e2e8f0; --bd2: #cbd5e0;
  --tx:   #1a202c; --tx2: #4a5568; --mu:  #718096;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --card-hover: rgba(0,0,0,.012);
  --acc:  #00aa55; --acc2: #008844;
}
[data-theme="light"] .sb-name { color: #00aa55; }
[data-theme="light"] .sb-brand { background: #1a202c; border-color: #2d3748; }
[data-theme="light"] .sidebar  { background: #1a202c; border-color: #2d3748; }
[data-theme="light"] .sb-nav .nav-group { color: #718096; }
[data-theme="light"] .ni { color: #a0aec0; }
[data-theme="light"] .ni:hover { background: #2d3748; color: #e2e8f0; border-color: #4a5568; }
[data-theme="light"] .ni.active { background: rgba(0,170,85,.15); color: #00aa55; border-color: rgba(0,170,85,.3); }
[data-theme="light"] .sb-uname { color: #e2e8f0; }
[data-theme="light"] .sb-urole { color: #718096; }
[data-theme="light"] .sb-av    { background: rgba(0,170,85,.15); border-color: rgba(0,170,85,.4); }
[data-theme="light"] .sb-foot  { border-color: #2d3748; }
[data-theme="light"] .kpi-val  { color: var(--tx); }
[data-theme="light"] .auth-left { background: #1a202c; border-color: #2d3748; }
[data-theme="light"] .auth-grid { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); }
[data-theme="light"] .auth-hl  { color: #e2e8f0; }
[data-theme="light"] .auth-desc{ color: #a0aec0; }
[data-theme="light"] .ab       { color: #a0aec0; }
[data-theme="light"] .auth-brand-name { color: #00aa55; }
[data-theme="light"] .auth-brand-tag  { color: #718096; }
[data-theme="light"] .tbl th   { background: #f8fafc; color: var(--mu); }
[data-theme="light"] .tbl td   { border-color: var(--bd); }
[data-theme="light"] .tbl tbody tr:hover { background: rgba(0,0,0,.025); }
[data-theme="light"] .badge    { border-width: 1px; }
[data-theme="light"] .theme-btn { background: #2d3748; color: #e2e8f0; border-color: #4a5568; }
[data-theme="light"] .theme-btn:hover { background: #4a5568; }

/* ── Reset ────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--tx);
  line-height: 1.6;
  min-height: 100vh;
  transition: var(--trans);
}
a { color:var(--acc); text-decoration:none; transition:opacity .15s }
a:hover { opacity:.8 }
input,select,textarea,button { font-family:var(--fb) }

/* ── Shell ────────────────────────────────────────────────────────── */
.shell { display:flex; min-height:100vh }

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sbw); background:var(--bg2); border-right:1px solid var(--bd);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100; overflow-y:auto;
  transition: var(--trans);
}
.sb-brand { display:flex; align-items:center; gap:12px; padding:18px 16px 14px; border-bottom:1px solid var(--bd) }
.sb-hex   { width:38px; height:38px; flex-shrink:0 }
.sb-name  { font-family:var(--fh); font-weight:700; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc) }
.sb-sub   { font-size:.62rem; color:var(--mu); letter-spacing:.07em; text-transform:uppercase; margin-top:1px }

.sb-nav   { flex:1; padding:10px 8px; display:flex; flex-direction:column; gap:1px }
.nav-group{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mu); padding:10px 8px 3px }
.ni {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px;
  color:var(--tx2); font-size:.8rem; font-weight:500; letter-spacing:.02em;
  transition:all .15s; border:1px solid transparent;
}
.ni svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.ni:hover  { background:var(--bg3); color:var(--tx); border-color:var(--bd) }
.ni.active { background:rgba(0,255,136,.08); color:var(--acc); border-color:rgba(0,255,136,.2) }
[data-theme="light"] .ni.active { background:rgba(0,170,85,.1); color:var(--acc); border-color:rgba(0,170,85,.25) }

.sb-foot  { padding:12px; border-top:1px solid var(--bd); display:flex; align-items:center; gap:10px }
.sb-user  { display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.sb-av    { width:32px; height:32px; background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.3); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:700; font-size:.95rem; color:var(--acc); flex-shrink:0 }
.sb-uname { font-weight:600; font-size:.8rem; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sb-urole { font-size:.65rem; color:var(--mu); text-transform:uppercase; letter-spacing:.06em }
.sb-logout{ padding:6px; border-radius:6px; color:var(--mu); display:flex; transition:color .15s }
.sb-logout svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.sb-logout:hover { color:var(--red) }

/* ── Theme Toggle Button ──────────────────────────────────────────── */
.theme-btn {
  width:30px; height:30px; border-radius:6px;
  background:var(--bg3); border:1px solid var(--bd);
  color:var(--mu); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:all .2s; flex-shrink:0;
}
.theme-btn:hover { background:var(--bd2); color:var(--tx) }

/* ── Main ─────────────────────────────────────────────────────────── */
.main { margin-left:var(--sbw); flex:1; padding:24px 28px; min-width:0 }

/* ── Page header ──────────────────────────────────────────────────── */
.ph   { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:12px }
.ph-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.pt   { font-family:var(--fh); font-weight:700; font-size:1.55rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx) }
.ps   { color:var(--mu); font-size:.75rem; margin-top:3px; letter-spacing:.02em }

/* ── Card ─────────────────────────────────────────────────────────── */
.card { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); margin-bottom:16px; transition:var(--trans) }
.card-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 12px; border-bottom:1px solid var(--bd) }
.card-hdr h3 { font-family:var(--fh); font-weight:700; font-size:.85rem; letter-spacing:.07em; text-transform:uppercase }
.hdr-r { display:flex; align-items:center; gap:14px }
.card-foot { padding:12px 16px; border-top:1px solid var(--bd); display:flex; gap:8px }

/* ── KPI Row ──────────────────────────────────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px }
.kpi { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:16px 14px; position:relative; overflow:hidden; transition:var(--trans) }
.kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--bd2) }
.kpi-blue::after   { background:var(--blue); box-shadow:0 0 10px rgba(79,142,247,.5) }
.kpi-cyan::after   { background:#06b6d4;     box-shadow:0 0 10px rgba(6,182,212,.5) }
.kpi-green::after  { background:var(--acc);  box-shadow:0 0 10px rgba(0,255,136,.4) }
.kpi-orange::after { background:var(--ora);  box-shadow:0 0 10px rgba(249,115,22,.5) }
.kpi-red::after    { background:var(--red);  box-shadow:0 0 10px rgba(239,68,68,.5) }
.kpi-yellow::after { background:var(--yel);  box-shadow:0 0 10px rgba(250,204,21,.5) }
.kpi-top  { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.kpi-lbl  { font-size:.68rem; color:var(--mu); text-transform:uppercase; letter-spacing:.08em }
.kpi-ico  { width:18px; height:18px; stroke:var(--mu); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.kpi-val  { font-family:var(--fh); font-weight:700; font-size:2rem; letter-spacing:-.01em; line-height:1; color:var(--tx); margin-bottom:4px }
.kpi-sub  { font-size:.7rem; color:var(--tx2) }

/* ── Table ────────────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; font-size:.79rem }
.tbl th { text-align:left; padding:9px 14px; color:var(--mu); font-weight:600; font-size:.67rem; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--bd); white-space:nowrap }
.tbl td { padding:10px 14px; border-bottom:1px solid rgba(0,0,0,.04); vertical-align:middle }
[data-theme="dark"] .tbl td { border-bottom-color:rgba(255,255,255,.03) }
.tbl tbody tr:last-child td { border-bottom:none }
.tbl tbody tr:hover { background:var(--card-hover) }
.mu   { color:var(--mu); font-size:.73rem }
.mono { font-family:var(--fm); font-size:.76rem; color:var(--tx2) }
.err  { color:var(--red); font-size:.7rem }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge      { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.b-draft    { background:rgba(85,96,112,.2);  color:#778899; border:1px solid rgba(85,96,112,.3) }
.b-running  { background:rgba(0,255,136,.1);  color:var(--acc); border:1px solid rgba(0,255,136,.25) }
.b-completed{ background:rgba(0,204,106,.1);  color:var(--acc2);border:1px solid rgba(0,204,106,.25) }
.b-paused   { background:rgba(249,115,22,.1); color:var(--ora); border:1px solid rgba(249,115,22,.25) }
.b-scheduled{ background:rgba(79,142,247,.1); color:var(--blue);border:1px solid rgba(79,142,247,.25) }
.b-info     { background:rgba(79,142,247,.1); color:var(--blue);border:1px solid rgba(79,142,247,.25) }
.b-danger   { background:rgba(239,68,68,.1);  color:var(--red); border:1px solid rgba(239,68,68,.25) }
.b-warn     { background:rgba(249,115,22,.1); color:var(--ora); border:1px solid rgba(249,115,22,.25) }

/* ── Strength badges ──────────────────────────────────────────────── */
.stbadge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em }
.stb-w { background:rgba(239,68,68,.12);  color:var(--red); border:1px solid rgba(239,68,68,.3) }
.stb-m { background:rgba(249,115,22,.12); color:var(--ora); border:1px solid rgba(249,115,22,.3) }
.stb-s { background:rgba(0,255,136,.1);   color:var(--acc); border:1px solid rgba(0,255,136,.25) }

/* ── Stat pills ───────────────────────────────────────────────────── */
.sp { display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:2px 7px; border-radius:20px; font-size:.76rem; font-weight:600 }
.sp-red { background:rgba(239,68,68,.12);  color:var(--red); border:1px solid rgba(239,68,68,.25) }
.sp-yel { background:rgba(250,204,21,.12); color:var(--yel); border:1px solid rgba(250,204,21,.25) }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-p {
  background:var(--acc); color:#000; border:none; padding:9px 18px; border-radius:6px;
  font-family:var(--fh); font-weight:700; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; display:inline-block; transition:all .15s;
}
.btn-p:hover { background:var(--acc2); transform:translateY(-1px); color:#000 }
.btn-o {
  background:transparent; color:var(--tx2); border:1px solid var(--bd2); padding:9px 18px; border-radius:6px;
  font-family:var(--fh); font-weight:600; font-size:.84rem; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; display:inline-block; transition:all .15s;
}
.btn-o:hover { border-color:var(--acc); color:var(--acc) }
.btn-d {
  background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.3);
  padding:9px 18px; border-radius:6px; font-family:var(--fh); font-weight:700; font-size:.84rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:all .15s;
}
.btn-d:hover { background:var(--red); color:#fff; border-color:var(--red) }
.btn-xs {
  padding:3px 10px; border-radius:4px; font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(79,142,247,.1); color:var(--blue); border:1px solid rgba(79,142,247,.2);
  cursor:pointer; display:inline-block; transition:all .15s;
}
.btn-xs:hover    { background:rgba(79,142,247,.25) }
.btn-xs-g        { background:rgba(0,255,136,.1);  color:var(--acc); border-color:rgba(0,255,136,.2) }
.btn-xs-g:hover  { background:rgba(0,255,136,.25) }
.btn-xs-red      { background:rgba(239,68,68,.1);  color:var(--red); border-color:rgba(239,68,68,.2) }
.btn-xs-red:hover{ background:rgba(239,68,68,.25) }
.btn-xs-yel      { background:rgba(250,204,21,.1); color:var(--yel); border-color:rgba(250,204,21,.2) }
.btn-xs-yel:hover{ background:rgba(250,204,21,.25) }
.btn-block { width:100%; display:block; text-align:center }
.btn-sim {
  background:rgba(250,204,21,.12); color:var(--yel); border:1px solid rgba(250,204,21,.3);
  padding:9px 18px; border-radius:6px; font-family:var(--fh); font-weight:700; font-size:.84rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:all .15s;
}
.btn-sim:hover { background:var(--yel); color:#000; border-color:var(--yel) }
.btn-warn-sm {
  background:rgba(250,204,21,.12); color:var(--yel); border:1px solid rgba(250,204,21,.3);
  padding:8px 14px; border-radius:6px; font-family:var(--fh); font-weight:700; font-size:.78rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; display:inline-block; transition:all .15s;
}
.btn-warn-sm:hover { background:var(--yel); color:#000 }

/* ── Export dropdown ──────────────────────────────────────────────── */
.export-wrap { position:relative; display:inline-block }
.export-menu {
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:var(--bg2); border:1px solid var(--bd2); border-radius:8px;
  min-width:210px; z-index:200; box-shadow:var(--shadow); padding:6px;
}
.export-wrap:hover .export-menu,
.export-wrap:focus-within .export-menu { display:block }
.export-menu a {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:5px; font-size:.78rem; color:var(--tx2); font-weight:500;
  transition:background .12s;
}
.export-menu a:hover { background:var(--bg3); color:var(--tx) }
.export-menu a .em-icon { font-size:1rem; flex-shrink:0 }
.export-sep { height:1px; background:var(--bd); margin:4px 0 }
.export-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mu); padding:6px 12px 2px }
.btn-export {
  background:rgba(79,142,247,.1); color:var(--blue); border:1px solid rgba(79,142,247,.25);
  padding:9px 16px; border-radius:6px; font-family:var(--fh); font-weight:700; font-size:.84rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; display:inline-flex;
  align-items:center; gap:7px; transition:all .15s;
}
.btn-export:hover { background:rgba(79,142,247,.2) }

/* ── Flash ────────────────────────────────────────────────────────── */
#flash-box { margin-bottom:14px }
.flash { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:6px; font-size:.8rem; margin-bottom:6px; font-weight:500 }
.flash button { background:none; border:none; cursor:pointer; font-size:1.1rem; line-height:1; color:inherit; opacity:.5 }
.f-success { background:rgba(0,255,136,.08);  color:var(--acc); border:1px solid rgba(0,255,136,.2) }
.f-danger  { background:rgba(239,68,68,.08);  color:var(--red); border:1px solid rgba(239,68,68,.2) }
.f-info    { background:rgba(79,142,247,.08); color:var(--blue);border:1px solid rgba(79,142,247,.2) }
.f-warning { background:rgba(249,115,22,.08); color:var(--ora); border:1px solid rgba(249,115,22,.2) }

/* ── Filter bar ───────────────────────────────────────────────────── */
.fbar  { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; align-items:center }
.fp    { padding:4px 12px; border-radius:4px; font-size:.69rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mu); border:1px solid var(--bd); background:var(--bg2); transition:all .15s }
.fp:hover { border-color:var(--acc); color:var(--acc) }
.fp-a  { background:rgba(0,255,136,.1); color:var(--acc); border-color:rgba(0,255,136,.3) }
.fp-weak.fp-a   { background:rgba(239,68,68,.1);  color:var(--red); border-color:rgba(239,68,68,.3) }
.fp-medium.fp-a { background:rgba(249,115,22,.1); color:var(--ora); border-color:rgba(249,115,22,.3) }
.fsep  { color:var(--bd2); margin:0 2px; font-size:.75rem }

/* ── Empty ────────────────────────────────────────────────────────── */
.empty { padding:48px; text-align:center; color:var(--mu) }
.ei    { font-size:2.2rem; margin-bottom:10px }
.empty h3 { font-family:var(--fh); font-weight:700; color:var(--tx); margin-bottom:6px; letter-spacing:.04em }
.empty p  { margin-bottom:18px; font-size:.8rem }

/* ── Two-col detail ───────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1.6fr; gap:14px }
.dr { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 16px; border-bottom:1px solid rgba(0,0,0,.04); font-size:.79rem }
[data-theme="dark"] .dr { border-bottom-color:rgba(255,255,255,.03) }
.dr:last-child { border-bottom:none }
.dr span:first-child { color:var(--mu); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; flex-shrink:0; margin-right:12px }
.ck   { color:var(--acc); font-weight:700 }
.ck-o { color:var(--ora) }
.ck-r { color:var(--red) }
.ck-y { color:var(--yel) }

/* ── Progress ─────────────────────────────────────────────────────── */
.pb-w { display:flex; align-items:center; gap:7px }
.pb   { height:5px; background:rgba(79,142,247,.55); border-radius:3px; min-width:2px; max-width:65px }
.pb-o { background:rgba(249,115,22,.55) }

/* ── Legend ───────────────────────────────────────────────────────── */
.legend { display:flex; align-items:center; gap:12px; font-size:.72rem; color:var(--mu); flex-wrap:wrap }
.ld { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px }

/* ── Select ───────────────────────────────────────────────────────── */
.sel-sm { background:var(--bg2); border:1px solid var(--bd2); color:var(--tx); padding:7px 12px; border-radius:6px; font-size:.78rem; cursor:pointer; outline:none; font-family:var(--fb); transition:var(--trans) }

/* ── Links ────────────────────────────────────────────────────────── */
.lnk-m { color:var(--mu); font-size:.78rem }
.lnk-m:hover { color:var(--acc) }
.lnk-g { color:var(--acc) }
.text-acc { color:var(--acc) }
.text-red { color:var(--red) }

/* ── Forms ────────────────────────────────────────────────────────── */
.camp-form { max-width:780px }
.fs { padding:20px; margin-bottom:16px }
.fs-title { font-family:var(--fh); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--bd) }
.fs-desc  { font-size:.78rem; color:var(--mu); margin-bottom:12px; line-height:1.7 }
.fg { margin-bottom:13px }
.fg label { display:block; font-size:.67rem; font-weight:600; color:var(--mu); margin-bottom:5px; text-transform:uppercase; letter-spacing:.07em }
.fg input,.fg select,.fg textarea {
  width:100%; background:var(--bg3); border:1px solid var(--bd2); border-radius:6px;
  padding:9px 12px; color:var(--tx); font-size:.82rem; font-family:var(--fb);
  transition:var(--trans); outline:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--acc); box-shadow:0 0 0 2px rgba(0,255,136,.1) }
[data-theme="light"] .fg input:focus { box-shadow:0 0 0 2px rgba(0,170,85,.12) }
.fg select  { appearance:none; cursor:pointer }
.fg textarea{ resize:vertical; min-height:76px }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fcheck { display:flex; align-items:center; gap:8px; margin-bottom:14px }
.fcheck input  { width:auto; accent-color:var(--acc) }
.fcheck label  { margin:0; font-size:.8rem; text-transform:none; letter-spacing:0; color:var(--tx2) }
.form-actions  { display:flex; justify-content:flex-end; gap:10px; padding:4px 0 18px }
.req  { color:var(--red) }
.hint { font-weight:400; color:var(--mu); text-transform:none; letter-spacing:0; font-size:.7rem }

/* ── Template bar ─────────────────────────────────────────────────── */
.templ-bar   { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.templ-label { font-size:.68rem; color:var(--mu); text-transform:uppercase; letter-spacing:.06em }
.templ-btn   { background:var(--bg3); border:1px solid var(--bd2); color:var(--tx2); padding:4px 12px; border-radius:4px; font-family:var(--fb); font-size:.74rem; cursor:pointer; transition:all .15s }
.templ-btn:hover { border-color:var(--acc); color:var(--acc) }
.tvar-hint   { background:var(--bg3); border:1px solid var(--bd); border-radius:6px; padding:10px 14px; font-size:.74rem; color:var(--mu); line-height:1.8; margin-bottom:10px }
.tvar-hint code { color:var(--acc); background:rgba(0,255,136,.08); padding:1px 5px; border-radius:3px }
.target-counter { font-size:.74rem; color:var(--mu); margin-top:6px }
.target-counter span { color:var(--acc); font-weight:600 }
.email-preview { background:#fff; border-radius:6px; padding:16px; min-height:120px; font-family:Arial,sans-serif; font-size:14px; color:#333; border:1px solid var(--bd2) }

/* ── Profile ──────────────────────────────────────────────────────── */
.prof-av-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:14px; background:var(--bg3); border-radius:8px; border:1px solid var(--bd) }
.prof-av     { width:48px; height:48px; background:rgba(0,255,136,.1); border:1px solid rgba(0,255,136,.3); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:700; font-size:1.4rem; color:var(--acc); flex-shrink:0 }
.camp-form.narrow { max-width:520px }

/* ── Auth pages ───────────────────────────────────────────────────── */
.auth-wrap { display:flex; min-height:100vh }
.auth-left {
  flex:1; background:var(--bg); border-right:1px solid var(--bd);
  padding:52px 48px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; transition:var(--trans);
}
.auth-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,255,136,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,.025) 1px,transparent 1px); background-size:36px 36px; pointer-events:none }
.auth-lc   { position:relative; z-index:1 }
.auth-logo { display:flex; align-items:center; gap:16px; margin-bottom:48px }
.auth-logo svg { width:56px; height:56px; flex-shrink:0 }
.auth-brand-name { font-family:var(--fh); font-weight:700; font-size:1.4rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc) }
.auth-brand-tag  { font-size:.66rem; color:var(--mu); letter-spacing:.08em; text-transform:uppercase; margin-top:2px }
.auth-hl  { font-family:var(--fh); font-weight:700; font-size:3rem; line-height:1.08; letter-spacing:.05em; text-transform:uppercase; color:var(--tx); margin-bottom:16px }
.auth-hl em { font-style:normal; color:var(--acc); text-shadow:0 0 28px rgba(0,255,136,.35) }
.auth-desc { color:var(--tx2); font-size:.82rem; max-width:420px; line-height:1.85; margin-bottom:30px }
.auth-bullets { display:flex; flex-direction:column; gap:10px }
.ab  { display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--tx2) }
.ab-dot { display:inline-block; width:6px; height:6px; background:var(--acc); border-radius:50%; flex-shrink:0; box-shadow:0 0 8px var(--acc) }
.auth-right { width:460px; display:flex; align-items:center; justify-content:center; padding:40px 28px; background:var(--bg2); transition:var(--trans) }
.auth-card  { width:100%; max-width:380px }
.ac-icon    { width:46px; height:46px; margin-bottom:16px }
.ac-icon svg{ width:46px; height:46px }
.ac-title   { font-family:var(--fh); font-weight:700; font-size:1.45rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px }
.ac-sub     { color:var(--mu); font-size:.74rem; letter-spacing:.04em; margin-bottom:22px; text-transform:uppercase }
.auth-card .fg { margin-bottom:11px }
.ac-sw      { text-align:center; color:var(--mu); font-size:.78rem; margin-top:16px }
.demo-hint  { display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; padding:9px 14px; background:var(--bg3); border-radius:6px; border:1px solid var(--bd2); font-size:.76rem; color:var(--mu) }
.demo-pill  { background:rgba(0,255,136,.1); color:var(--acc); border:1px solid rgba(0,255,136,.2); padding:1px 7px; border-radius:3px; font-size:.64rem; font-weight:700; letter-spacing:.08em }
.demo-hint code { color:var(--acc); font-family:var(--fb); font-size:.78rem }
.auth-card .flash { margin-bottom:12px }

/* ── Diagnostic ───────────────────────────────────────────────────── */
.diag-warn { display:flex; align-items:flex-start; gap:14px; background:rgba(250,204,21,.07); border:1px solid rgba(250,204,21,.3); border-radius:var(--r); padding:16px 20px; margin-bottom:16px; font-size:.82rem; color:var(--tx2); line-height:1.7 }
.diag-warn strong { color:var(--yel) }
.diag-ok   { display:flex; align-items:flex-start; gap:14px; background:rgba(0,255,136,.07); border:1px solid rgba(0,255,136,.25); border-radius:var(--r); padding:16px 20px; margin-bottom:16px; font-size:.82rem; color:var(--tx2); line-height:1.7 }
.diag-ok strong { color:var(--acc) }
.dw-icon   { font-size:1.4rem; flex-shrink:0; line-height:1.3 }
.test-links{ display:flex; flex-direction:column; gap:14px }
.tl        { background:var(--bg3); border:1px solid var(--bd); border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:16px }
.tl-label  { font-family:var(--fh); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tx); min-width:160px }
.tl-desc   { font-size:.78rem; color:var(--mu); flex:1; line-height:1.6 }
.fix-opt   { background:var(--bg3); border:1px solid var(--bd); border-radius:8px; padding:16px 20px }
.fo-title  { font-family:var(--fh); font-weight:700; font-size:.88rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx); margin-bottom:8px; display:flex; align-items:center; gap:10px }
.fo-badge  { background:rgba(0,255,136,.12); color:var(--acc); border:1px solid rgba(0,255,136,.2); padding:1px 8px; border-radius:3px; font-size:.65rem; letter-spacing:.06em }
.fo-desc   { font-size:.8rem; color:var(--mu); margin-bottom:12px; line-height:1.6 }
.fo-steps  { display:flex; flex-direction:column; gap:7px }
.fos       { font-size:.79rem; color:var(--tx2); line-height:1.6; padding-left:12px; border-left:2px solid var(--bd2) }
.code-block{ background:var(--bg); border:1px solid var(--bd2); border-radius:5px; padding:9px 14px; font-family:var(--fm); font-size:.8rem; color:var(--acc); letter-spacing:.03em; margin:2px 0 }

/* ── Live dot ─────────────────────────────────────────────────────── */
.live-dot   { display:inline-block; width:7px; height:7px; background:var(--acc); border-radius:50%; margin-left:6px; vertical-align:middle; opacity:.7; transition:all .3s }
.live-pulse { opacity:1; box-shadow:0 0 0 4px rgba(0,255,136,.3); transform:scale(1.3) }

/* ── Responsive ───────────────────────────────────────────────────── */
@media(max-width:960px){
  .sidebar    { transform:translateX(-100%); transition:transform .2s }
  .main       { margin-left:0; padding:16px 14px }
  .two-col    { grid-template-columns:1fr }
  .frow       { grid-template-columns:1fr }
  .auth-left  { display:none }
  .auth-right { width:100%; padding:28px 20px; background:var(--bg) }
  .kpi-row    { grid-template-columns:repeat(2,1fr) }
  .export-menu{ right:auto; left:0 }
}

/* ── Email report category legend rows ────────────────────────────── */
.rleg-row { display:flex; align-items:center; gap:8px; margin-bottom:10px }
.rleg-row:last-child { margin-bottom:0 }
.rleg-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0 }
.rleg-lbl { font-size:.78rem; color:var(--tx2); min-width:72px }
.rleg-val { font-size:.82rem; font-weight:700; color:var(--tx); min-width:28px; text-align:right }
.rleg-bar { flex:1; height:6px; background:var(--bg3); border-radius:3px; overflow:hidden }
.rleg-bar div { height:100%; border-radius:3px; transition:width .4s }

/* ── Filter bar coloured pills ────────────────────────────────────── */
.fp-red.fp-a  { background:rgba(239,68,68,.12); color:var(--red); border-color:rgba(239,68,68,.35) }
.fp-ora.fp-a  { background:rgba(249,115,22,.12); color:var(--ora); border-color:rgba(249,115,22,.35) }
.fp-blue.fp-a { background:rgba(79,142,247,.12); color:var(--blue); border-color:rgba(79,142,247,.35) }
.fp-red:hover  { border-color:var(--red);  color:var(--red) }
.fp-ora:hover  { border-color:var(--ora);  color:var(--ora) }
.fp-blue:hover { border-color:var(--blue); color:var(--blue) }

/* ── Training module filter pills ─────────────────────────────────── */
.fp-g.fp-a  { background:rgba(0,255,136,.1);  color:var(--acc);  border-color:rgba(0,255,136,.3) }
.fp-r.fp-a  { background:rgba(239,68,68,.1);  color:var(--red);  border-color:rgba(239,68,68,.3) }
.fp-g:hover { border-color:var(--acc); color:var(--acc) }
.fp-r:hover { border-color:var(--red); color:var(--red) }