/* ============================ TOKENS ============================ */
:root{
  --bg:#F4F5F8; --surface:#FFFFFF; --surface-2:#FAFAFC; --surface-3:#F0F1F6;
  --border:#E2E3EC; --border-strong:#CBCDDC;
  --text:#191A24; --text-2:#55586B; --text-3:#83869A;
  --accent:#4338A8; --accent-hi:#3A2F97; --accent-soft:#ECEBFA; --accent-line:#C9C5EE; --on-accent:#FFFFFF;
  --ok:#0F7B4C; --ok-soft:#E2F4EB; --ok-line:#B4E0CB;
  --warn:#A2660A; --warn-soft:#FBF0DA; --warn-line:#EBD3A0;
  --bad:#B0301F; --bad-soft:#FBE7E4; --bad-line:#F0C2BB;
  --info:#1C6C9E; --info-soft:#E3F0F8; --info-line:#B9D8EC;
  --idle:#6E7185; --idle-soft:#ECEDF2; --idle-line:#D8DAE4;
  --shadow:0 1px 2px rgba(20,22,40,.05), 0 8px 24px -14px rgba(20,22,40,.22);
  --shadow-pop:0 12px 40px -12px rgba(20,22,40,.30), 0 2px 6px rgba(20,22,40,.08);
  --rail:250px; --topbar:54px; --r:9px; --r-sm:6px;
  --f-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-dp:"Archivo","IBM Plex Sans",system-ui,sans-serif;
  --f-mn:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C0D14; --surface:#14161F; --surface-2:#191B26; --surface-3:#1F2230;
    --border:#272A3A; --border-strong:#3A3E52;
    --text:#EDEEF4; --text-2:#A3A6BB; --text-3:#73768E;
    --accent:#9B93F5; --accent-hi:#B0A9FF; --accent-soft:#211F3D; --accent-line:#3B3767; --on-accent:#14161F;
    --ok:#4CC98D; --ok-soft:#112A20; --ok-line:#1F4C39;
    --warn:#E3AB47; --warn-soft:#2A2113; --warn-line:#4C3C1C;
    --bad:#F2735F; --bad-soft:#2C1714; --bad-line:#553029;
    --info:#66B2E8; --info-soft:#12222E; --info-line:#254458;
    --idle:#868AA0; --idle-soft:#1D2029; --idle-line:#333748;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.7);
    --shadow-pop:0 16px 48px -14px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0D14; --surface:#14161F; --surface-2:#191B26; --surface-3:#1F2230;
  --border:#272A3A; --border-strong:#3A3E52;
  --text:#EDEEF4; --text-2:#A3A6BB; --text-3:#73768E;
  --accent:#9B93F5; --accent-hi:#B0A9FF; --accent-soft:#211F3D; --accent-line:#3B3767; --on-accent:#14161F;
  --ok:#4CC98D; --ok-soft:#112A20; --ok-line:#1F4C39;
  --warn:#E3AB47; --warn-soft:#2A2113; --warn-line:#4C3C1C;
  --bad:#F2735F; --bad-soft:#2C1714; --bad-line:#553029;
  --info:#66B2E8; --info-soft:#12222E; --info-line:#254458;
  --idle:#868AA0; --idle-soft:#1D2029; --idle-line:#333748;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.7);
  --shadow-pop:0 16px 48px -14px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.5);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-dp); margin:0; text-wrap:balance; letter-spacing:-.015em}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--f-mn); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.hide{display:none !important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

/* ============================ APP FRAME ============================ */
#app{display:flex; min-height:100vh}
/* --- Rail --- */
#rail{
  width:var(--rail); flex:0 0 var(--rail); background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:40;
}
.brand{display:flex; gap:10px; align-items:center; padding:13px 14px 12px; border-bottom:1px solid var(--border)}
.brand-mark{
  width:30px; height:30px; border-radius:8px; flex:0 0 30px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--accent),color-mix(in oklab,var(--accent) 55%, var(--bad)));
  color:var(--on-accent); font-family:var(--f-dp); font-weight:800; font-size:14px; letter-spacing:-.03em;
}
.brand-txt strong{display:block; font-family:var(--f-dp); font-weight:700; font-size:14.5px; letter-spacing:-.02em; line-height:1.15}
.brand-txt span{display:block; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); font-weight:600}
nav#nav{flex:1; overflow-y:auto; padding:8px 8px 20px; scrollbar-width:thin}
.nav-grp{margin-top:10px}
.nav-grp:first-child{margin-top:2px}
.nav-grp>.eyebrow{padding:6px 8px 4px; display:block}
.nav-i{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:6.5px 9px;
  border:0; background:none; border-radius:var(--r-sm); color:var(--text-2); cursor:pointer;
  font-size:13.2px; font-weight:500; line-height:1.3;
}
.nav-i:hover{background:var(--surface-3); color:var(--text)}
.nav-i.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav-i .ic{flex:0 0 16px; width:16px; height:16px; opacity:.85}
.nav-i .cnt{margin-left:auto; font-size:10.5px; font-family:var(--f-mn); color:var(--text-3); background:var(--surface-3); padding:1px 5px; border-radius:20px}
.nav-i.on .cnt{background:var(--surface); color:var(--accent)}
.nav-sub{padding-left:26px}
.rail-foot{border-top:1px solid var(--border); padding:9px 12px; font-size:11px; color:var(--text-3)}

/* --- Main --- */
#main{flex:1; min-width:0; display:flex; flex-direction:column}
#topbar{
  height:var(--topbar); flex:0 0 var(--topbar); display:flex; align-items:center; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--border); background:color-mix(in oklab,var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:35;
}
#burger{display:none}
.tb-title{font-family:var(--f-dp); font-weight:700; font-size:15px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-spacer{flex:1}
.evsel{
  display:flex; align-items:center; gap:7px; background:var(--surface-3); border:1px solid var(--border);
  border-radius:20px; padding:3px 4px 3px 10px; max-width:340px;
}
.evsel .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 7px; box-shadow:0 0 0 3px var(--ok-soft)}
.evsel select{border:0; background:none; font-size:12.5px; font-weight:600; max-width:250px; cursor:pointer; padding:2px 4px}
#content{padding:18px 18px 64px; flex:1; min-width:0}
.wrap{max-width:1500px; margin:0 auto}

/* ============================ ATOMS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  border-radius:var(--r-sm); padding:6px 11px; font-size:12.8px; font-weight:600; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--surface-3)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.pri{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn.dgr{color:var(--bad); border-color:var(--bad-line)}
.btn.dgr:hover{background:var(--bad-soft)}
.btn.sm{padding:3.5px 8px; font-size:11.8px}
.btn.gh{border-color:transparent; background:none}
.btn.gh:hover{background:var(--surface-3)}
.btn-row{display:flex; gap:7px; flex-wrap:wrap; align-items:center}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.card-h h3{font-size:13.5px; font-weight:700}
.card-h .sp{flex:1}
.card-b{padding:14px}
.card-b.flush{padding:0}

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:600; border:1px solid; white-space:nowrap; line-height:1.55;
}
.pill.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.pill.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.pill.bad{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line)}
.pill.info{background:var(--info-soft); color:var(--info); border-color:var(--info-line)}
.pill.idle{background:var(--idle-soft); color:var(--idle); border-color:var(--idle-line)}
.pill.acc{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.rag{width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 9px}
.rag.ok{background:var(--ok)} .rag.warn{background:var(--warn)} .rag.bad{background:var(--bad)} .rag.idle{background:var(--idle)}

.tag{display:inline-block; padding:1px 7px; border-radius:4px; background:var(--surface-3); border:1px solid var(--border); font-size:11px; color:var(--text-2); margin:1px 2px 1px 0}

/* Forms */
.fld{display:flex; flex-direction:column; gap:4px; min-width:0}
.fld>label{font-size:11.5px; font-weight:600; color:var(--text-2)}
.fld>label .req{color:var(--bad)}
.fld .hint{font-size:11px; color:var(--text-3)}
.in,select.in,textarea.in{
  width:100%; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:7px 9px; font-size:13px; color:var(--text); min-width:0;
}
.in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{resize:vertical; min-height:62px; line-height:1.45}
.in[readonly]{background:var(--surface-3); color:var(--text-2)}
.chk{display:flex; align-items:center; gap:7px; font-size:12.8px; cursor:pointer; padding:3px 0}
.chk input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex:0 0 15px}
.multi{display:flex; flex-wrap:wrap; gap:5px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:7px}
.multi label{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:2.5px 8px; border-radius:20px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer;
}
.multi label:has(input:checked){background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}
.multi input{accent-color:var(--accent); width:13px; height:13px}
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .span3{grid-column:span 2}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} .span2,.span3{grid-column:span 1}}

/* Tables */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tb{width:100%; border-collapse:separate; border-spacing:0; font-size:12.8px; min-width:max-content}
table.tb th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); padding:8px 11px; border-bottom:1px solid var(--border); background:var(--surface-2);
  position:sticky; top:0; z-index:2; white-space:nowrap;
}
table.tb td{padding:8px 11px; border-bottom:1px solid var(--border); vertical-align:middle}
table.tb tr:last-child td{border-bottom:0}
table.tb tbody tr:hover{background:var(--surface-2)}
table.tb td.r,table.tb th.r{text-align:right}
table.tb .act{white-space:nowrap; text-align:right}
.t-empty{padding:36px 16px; text-align:center; color:var(--text-3); font-size:13px}
.t-empty strong{display:block; font-family:var(--f-dp); color:var(--text-2); font-size:14px; margin-bottom:3px}

/* Toolbar above tables */
.tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.tools .in{width:auto; min-width:150px; padding:5px 9px; font-size:12.5px}
.tools .sp{flex:1}

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:11px 12px 10px; box-shadow:var(--shadow); min-width:0}
.kpi .k-l{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); display:block; line-height:1.3; min-height:2.6em}
.kpi .k-v{font-family:var(--f-dp); font-weight:700; font-size:25px; letter-spacing:-.03em; line-height:1.1; margin-top:5px; font-variant-numeric:tabular-nums; display:block}
.kpi .k-s{font-size:11px; color:var(--text-3); margin-top:2px; display:block; font-variant-numeric:tabular-nums}
.kpi.live .k-l::after{content:"LIVE"; float:right; color:var(--ok); font-size:9px; letter-spacing:.08em}
.kpi.acc{border-color:var(--accent-line); background:linear-gradient(180deg,var(--accent-soft),var(--surface) 65%)}
.kpi.acc .k-v{color:var(--accent)}
.kpi.pos .k-v{color:var(--ok)} .kpi.neg .k-v{color:var(--bad)}

/* Contact block */
.contact{display:inline-flex; align-items:center; gap:5px}
.iconbtn{
  display:inline-grid; place-items:center; width:23px; height:23px; border-radius:5px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-2); text-decoration:none; flex:0 0 23px;
}
.iconbtn:hover{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); text-decoration:none}
.iconbtn svg{width:12px; height:12px}

/* Modal */
.ovl{position:fixed; inset:0; background:rgba(9,10,18,.55); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:24px 14px; overflow-y:auto}
.mdl{background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--shadow-pop); width:100%; max-width:860px; margin:auto}
.mdl.wide{max-width:1120px}
.mdl.narrow{max-width:480px}
.mdl-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); border-radius:12px 12px 0 0; z-index:2}
.mdl-h h3{font-size:15px; font-weight:700}
.mdl-h .sp{flex:1}
.mdl-b{padding:16px}
.mdl-f{display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--surface); border-radius:0 0 12px 12px; flex-wrap:wrap}
.fs{border:0; padding:0; margin:0 0 16px}
.fs>legend{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); padding:0 0 8px; width:100%; border-bottom:1px solid var(--border); margin-bottom:11px}

/* Toast */
#toasts{position:fixed; bottom:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:340px}
.toast{background:var(--surface); border:1px solid var(--border-strong); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:9px 12px; box-shadow:var(--shadow-pop); font-size:12.8px; animation:tin .18s ease-out}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* Save chip */
.savechip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--text-3); padding:3px 9px; border-radius:20px; border:1px solid var(--border); background:var(--surface-3)}
.savechip .rag{width:7px; height:7px; flex:0 0 7px}
.userchip{display:inline-flex; align-items:center; gap:7px; padding:3px 9px 3px 4px; border-radius:20px; border:1px solid var(--border); background:var(--surface-3); cursor:pointer; font-size:12.2px; font-weight:600}
.av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-size:10px; font-weight:700; font-family:var(--f-dp); flex:0 0 22px}
.bell{position:relative; border:1px solid var(--border); background:var(--surface-3); width:30px; height:30px; border-radius:8px; display:grid; place-items:center; cursor:pointer; color:var(--text-2)}
.bell:hover{color:var(--accent); border-color:var(--accent-line)}
.bell .b-n{position:absolute; top:-5px; right:-5px; background:var(--bad); color:#fff; font-size:9.5px; font-weight:700; border-radius:20px; padding:1px 4.5px; min-width:15px; font-family:var(--f-mn)}

/* Section header */
.pg-h{display:flex; align-items:flex-end; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.pg-h h2{font-size:20px; font-weight:700; letter-spacing:-.028em; line-height:1.15}
.pg-h p{margin:3px 0 0; font-size:12.8px; color:var(--text-2); max-width:66ch}
.pg-h .sp{flex:1}

/* ============================ CONTROL ROOM (committed dark) ============================ */
.cr{
  --cr-bg:#0A0B12; --cr-s:#12141D; --cr-s2:#191C27; --cr-bd:#262A3A; --cr-tx:#F2F3F8; --cr-t2:#9EA2B8; --cr-t3:#6E7288;
  --cr-ok:#43D18F; --cr-warn:#F0B44C; --cr-bad:#FF7A63; --cr-acc:#A79DFF;
  background:var(--cr-bg); color:var(--cr-tx); border-radius:12px; border:1px solid var(--cr-bd); overflow:hidden;
}
.cr .cr-top{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--cr-bd); background:linear-gradient(90deg,rgba(167,157,255,.10),transparent 60%); flex-wrap:wrap}
.cr .cr-top h3{font-size:15px; color:var(--cr-tx); font-weight:800; letter-spacing:-.02em}
.cr .cr-clock{font-family:var(--f-mn); font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--cr-tx)}
.cr .cr-live{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--cr-ok); text-transform:uppercase}
.cr .cr-live i{width:7px; height:7px; border-radius:50%; background:var(--cr-ok); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(67,209,143,.55)}50%{opacity:.65; box-shadow:0 0 0 6px rgba(67,209,143,0)}}
.cr .cr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px; background:var(--cr-bd)}
.cr .cr-pane{background:var(--cr-bg); padding:13px 15px; min-width:0}
.cr .cr-pane>h4{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cr-t3); font-weight:700; margin-bottom:9px}
.cr .cr-stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(114px,1fr)); gap:12px 10px}
.cr .cr-n{font-family:var(--f-dp); font-size:25px; font-weight:800; letter-spacing:-.035em; line-height:1.05; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.cr .cr-n.money{font-size:19px}
.cr .cr-n small{display:block; font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cr-t3); margin-top:4px}
.cr table{width:100%; border-collapse:collapse; font-size:12.3px}
.cr table th{text-align:left; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--cr-t3); padding:5px 7px; border-bottom:1px solid var(--cr-bd); font-weight:700}
.cr table td{padding:6px 7px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--cr-t2)}
.cr table td.hi{color:var(--cr-tx); font-weight:600}
.cr .cr-row-live{background:rgba(67,209,143,.07)}
.cr .cr-pill{display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border:1px solid}
.cr .cr-pill.ok{color:var(--cr-ok); border-color:rgba(67,209,143,.35); background:rgba(67,209,143,.10)}
.cr .cr-pill.warn{color:var(--cr-warn); border-color:rgba(240,180,76,.35); background:rgba(240,180,76,.10)}
.cr .cr-pill.bad{color:var(--cr-bad); border-color:rgba(255,122,99,.35); background:rgba(255,122,99,.10)}
.cr .cr-pill.idle{color:var(--cr-t3); border-color:var(--cr-bd); background:rgba(255,255,255,.03)}
.cr .cr-btn{border:1px solid var(--cr-bd); background:var(--cr-s2); color:var(--cr-t2); border-radius:5px; padding:2.5px 8px; font-size:11px; font-weight:700; cursor:pointer; letter-spacing:.02em}
.cr .cr-btn:hover{background:var(--cr-s); color:var(--cr-tx); border-color:var(--cr-acc)}
.cr .cr-btn.go{color:var(--cr-ok); border-color:rgba(67,209,143,.4)}
.cr .cr-btn.dn{color:var(--cr-acc); border-color:rgba(167,157,255,.4)}
.cr .cr-btn.wn{color:var(--cr-warn); border-color:rgba(240,180,76,.4)}
.cr .cr-ic{display:inline-grid; place-items:center; width:21px; height:21px; border-radius:5px; border:1px solid var(--cr-bd); color:var(--cr-t2); background:var(--cr-s2)}
.cr .cr-ic:hover{color:var(--cr-tx); border-color:var(--cr-acc); text-decoration:none}
.cr .cr-ic svg{width:11px; height:11px}
.cr .cr-alert{display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:12px; color:var(--cr-t2)}
.cr .cr-alert b{color:var(--cr-tx); font-weight:600}

/* Bars */
.bar{height:7px; background:var(--surface-3); border-radius:20px; overflow:hidden; border:1px solid var(--border)}
.bar>i{display:block; height:100%; background:var(--accent); border-radius:20px}
.bar>i.ok{background:var(--ok)} .bar>i.warn{background:var(--warn)} .bar>i.bad{background:var(--bad)}
.hbars{display:flex; flex-direction:column; gap:9px}
.hb{display:grid; grid-template-columns:minmax(90px,148px) 1fr auto; gap:10px; align-items:center; font-size:12.4px}
.hb .hb-t{color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hb .hb-v{font-family:var(--f-mn); font-size:12px; color:var(--text); min-width:50px; text-align:right}

/* QR */
.qrbox{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start}
.qrcard{border:1px solid var(--border); border-radius:var(--r); padding:14px; background:var(--surface); text-align:center; width:212px}
.qrcard canvas{width:180px; height:180px; image-rendering:pixelated; background:#fff; border-radius:4px; display:block; margin:0 auto}
.qrcard .qr-t{font-weight:700; font-size:12.8px; margin-top:9px; font-family:var(--f-dp)}
.qrcard .qr-s{font-size:11px; color:var(--text-3); word-break:break-all; margin-top:3px}

/* Registration (phone-first) */
.reg-wrap{max-width:520px; margin:0 auto}
.reg-hero{text-align:center; padding:16px 0 18px}
.reg-hero .rh-k{font-family:var(--f-dp); font-size:26px; font-weight:800; letter-spacing:-.035em; line-height:1.1}
.reg-hero .rh-s{color:var(--text-2); font-size:13px; margin-top:5px}
.big-in{font-size:16px !important; padding:11px 12px !important}
.reg-ok{text-align:center; padding:26px 16px}
.reg-ok .tick{width:56px; height:56px; border-radius:50%; background:var(--ok-soft); color:var(--ok); display:grid; place-items:center; margin:0 auto 12px; border:1px solid var(--ok-line)}
.reg-ok .vid{font-family:var(--f-mn); font-size:21px; font-weight:600; letter-spacing:.01em; margin:6px 0 2px}

/* ============================ PUBLIC FORM & ENTRY PASS ============================ */
/* A visitor sees the page and nothing else — no menu, no event switcher, no bell. */
body.pub-mode #rail, body.pub-mode #topbar{display:none}
body.pub-mode #content{padding:18px 14px 40px}
body.pub-mode::after{display:none}
.pub-staffbar{
  max-width:460px; margin:14px auto 0; display:flex; gap:7px; align-items:center;
  padding:8px 11px; border:1px dashed var(--border-strong); border-radius:9px;
  background:var(--surface-2); font-size:11.5px; color:var(--text-3);
}
.pub-staffbar .sp{flex:1}
.pub{max-width:460px; margin:0 auto; padding:6px 0 40px}
.pub-card{border-radius:14px}
.pub-card>.card-b{padding:22px 20px}
.pub-h{font-family:var(--f-dp); font-size:23px; font-weight:800; letter-spacing:-.032em; line-height:1.15}
.pub-sub{font-size:12.5px; color:var(--text-3); margin-top:3px; font-variant-numeric:tabular-nums}
.pub-intro{font-size:13px; color:var(--text-2); margin:11px 0 0; line-height:1.5}
.pub-consent{
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:11px 13px; font-size:11.8px; color:var(--text-3); line-height:1.55;
}
.pub-go{width:100%; padding:13px; font-size:15px; border-radius:8px}
.pub-note{
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9px;
  padding:12px 14px; margin-top:18px; font-size:12.8px; color:var(--accent); line-height:1.55;
}
.pub-fine{font-size:11.5px; color:var(--text-3); margin:12px 0 0; line-height:1.5}
.pub-foot{text-align:center; font-size:11px; color:var(--text-3); margin-top:14px}
.passid{
  font-family:var(--f-mn); font-size:clamp(22px,7vw,31px); font-weight:600; letter-spacing:.04em;
  margin:5px 0 16px; word-break:break-all; line-height:1.2;
}
.passqr{
  width:min(230px,64vw); height:min(230px,64vw); image-rendering:pixelated;
  background:#fff; border-radius:8px; padding:6px; border:1px solid var(--border); display:block; margin:0 auto;
}
.telrow{display:flex; align-items:stretch; gap:0}
.telcc{
  display:flex; align-items:center; padding:0 11px; font-size:14px; font-weight:600; color:var(--text-2);
  background:var(--surface-3); border:1px solid var(--border-strong); border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm); font-family:var(--f-mn);
}
.telrow .in{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* form-designer preview */
.phone{max-width:290px; margin:0 auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.phone-in{padding:16px 14px}

/* Timeline */
.tl{position:relative; padding-left:18px}
.tl::before{content:""; position:absolute; left:5px; top:5px; bottom:5px; width:1px; background:var(--border)}
.tl-i{position:relative; padding:0 0 13px}
.tl-i::before{content:""; position:absolute; left:-16px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--surface); border:2px solid var(--border-strong)}
.tl-i.ok::before{border-color:var(--ok); background:var(--ok)}
.tl-i.live::before{border-color:var(--ok); background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft)}
.tl-i.bad::before{border-color:var(--bad); background:var(--bad)}
.tl-t{font-family:var(--f-mn); font-size:11.5px; color:var(--text-3)}
.tl-n{font-weight:600; font-size:13px}

/* Alerts panel */
.alerts{position:fixed; top:calc(var(--topbar) + 6px); right:14px; width:min(380px,calc(100vw - 28px)); max-height:70vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow-pop); z-index:60}
.al-i{display:flex; gap:9px; padding:9px 12px; border-bottom:1px solid var(--border); font-size:12.5px; align-items:flex-start}
.al-i:last-child{border-bottom:0}
.al-i .rag{margin-top:4px}
.al-i b{display:block; font-weight:600; font-size:12.6px}
.al-i span{color:var(--text-2); font-size:11.8px}
.al-i button{margin-left:auto; flex:0 0 auto}

/* Print */
@media print{
  #rail,#topbar,.tools,.act,.no-print{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; break-inside:avoid}
  #content{padding:0}
}

/* Responsive */
@media (max-width:900px){
  .savechip>span{display:none}
  .savechip{padding:5px 7px}
  .evsel{max-width:170px}
  .evsel select{max-width:108px}
}
@media (max-width:1000px){
  :root{--rail:0px}
  #rail{position:fixed; left:0; top:0; width:262px; flex-basis:262px; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-pop)}
  body.nav-open #rail{transform:none}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(9,10,18,.5); z-index:39}
  #burger{display:inline-grid}
  .evsel{max-width:190px}
  .evsel select{max-width:120px}
  #content{padding:14px 12px 60px}
}
@media (max-width:700px){
  #topbar{padding:0 10px; gap:7px}
  .tb-title{display:none}
  .userchip>span:not(.av){display:none}
  .userchip{padding:3px}
  .evsel{max-width:none; flex:1; min-width:0}
  .evsel select{max-width:none; width:100%}
}
@media (max-width:620px){
  .pg-h h2{font-size:17.5px}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
  .kpi .k-v{font-size:21px}
  .mdl-b{padding:13px}
  .tools{padding:9px}
  #toasts{left:12px; right:12px; max-width:none}
}

/* ============================ SIGN-IN PAGE ============================ */
body.pub-mode .login-wrap{min-height:calc(100vh - 60px); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:24px 0}
.login-card{width:100%; max-width:440px; padding:28px 26px 24px; border-radius:16px}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.login-t{font-family:var(--f-dp); font-weight:800; font-size:21px; letter-spacing:-.03em; line-height:1.1}
.login-h{font-size:18px; margin-bottom:6px}
.login-p{font-size:12.8px; margin:0 0 16px; line-height:1.5}
@media (max-width:520px){.login-card{padding:22px 18px}}

/* ============================ GATE SCANNER ============================ */
.scanbox{position:relative; background:#0b0c12; border-radius:10px; overflow:hidden; aspect-ratio:4/3}
.scanbox video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.scan-frame{position:absolute; inset:12%; border:2px solid rgba(255,255,255,.85); border-radius:14px; pointer-events:none;
  mask:linear-gradient(#000 0 0);
  box-shadow:0 0 0 999px rgba(8,9,14,.35)}
.scan-ok{border-color:var(--ok-line); background:linear-gradient(180deg,var(--ok-soft),var(--surface) 80%)}
.scan-bad{border-color:var(--bad-line); background:linear-gradient(180deg,var(--bad-soft),var(--surface) 80%)}
.scan-warn{border-color:var(--warn-line); background:linear-gradient(180deg,var(--warn-soft),var(--surface) 80%)}
.scan-info{border-color:var(--info-line); background:linear-gradient(180deg,var(--info-soft),var(--surface) 80%)}
.scan-t{font-family:var(--f-dp); font-weight:800; font-size:24px; letter-spacing:-.02em; line-height:1.15}
.scan-s{font-size:13px; color:var(--text-2); margin-top:6px; line-height:1.5}
@media (max-width:900px){#scanGrid{grid-template-columns:minmax(0,1fr) !important}}

/* ============================ QR POSTER (A4) ============================ */
.poster{max-width:640px; margin:0 auto; text-align:center; padding:34px 20px 60px}
.poster-ev{font-family:var(--f-dp); font-weight:800; font-size:clamp(28px,6vw,44px); letter-spacing:-.03em; line-height:1.05}
.poster-d{font-size:15px; color:var(--text-2); margin-top:6px}
.poster-h{font-family:var(--f-dp); font-weight:700; font-size:clamp(20px,4vw,28px); margin-top:26px}
.poster-qr{width:min(430px,82vw); height:min(430px,82vw); image-rendering:pixelated; background:#fff; padding:10px; border:1px solid var(--border); border-radius:14px; margin-top:16px}
.poster-s{font-size:14.5px; color:var(--text-2); max-width:46ch; margin:16px auto 0; line-height:1.55}
.poster-l{font-size:13px; font-weight:600; margin-top:14px}
.poster-u{font-size:11.5px; color:var(--text-3); margin-top:4px; word-break:break-all}
@media print{
  body.pub-mode #content{padding:0}
  .poster{max-width:none; padding:10mm 0 0}
  .poster-qr{width:150mm; height:150mm}
}