/* ---------- shared tokens and controls ---------- */
:root{
  --floor:#071f1a; --felt:#0f3a30; --felt-hi:#14493c; --rail:#2b1d14; --rail-hi:#3a281b;
  --brass:#dcb15a; --brass-deep:#a97f2e; --on-brass:#1d1406;
  --ivory:#f2ebda; --muted:#9db6aa; --line:rgba(242,235,218,.14); --shade:rgba(0,0,0,.28);
  --red:#cf4a3f; --win:#86d9a1; --lose:#f0a197;
  --display:"Limelight", Georgia, serif; --body:"Manrope", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--floor);color:var(--ivory)}
body{font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 70% at 50% 0%, var(--felt) 0%, var(--floor) 72%) var(--floor)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.brand{font-family:var(--display);font-size:26px;color:var(--brass);letter-spacing:.02em;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{min-height:46px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:rgba(242,235,218,.06);
  color:var(--ivory);font:600 15px var(--body);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .08s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:hover{background:rgba(242,235,218,.11)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px}
.btn.primary{background:linear-gradient(var(--brass),var(--brass-deep));color:var(--on-brass);border-color:transparent;font-weight:800}
.btn.big{min-height:56px;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.btn.danger{color:var(--lose);border-color:rgba(207,74,63,.5)}
.btn.danger.armed{background:var(--red);color:#fff}
.icob{width:42px;height:42px;flex:none;border-radius:10px;border:1px solid var(--line);background:rgba(242,235,218,.06);color:var(--brass);cursor:pointer;display:grid;place-items:center;padding:0;font:700 16px var(--body)}
.icob svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icob.off{color:var(--muted);opacity:.75}
.icob:hover{background:rgba(242,235,218,.12)}
.icob:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
input,select,textarea{min-height:46px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--ivory);font:600 16px var(--body);padding:0 12px;width:100%;min-width:0}
textarea{padding:10px 12px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:32px}
input[type=range]{min-height:36px;padding:0;background:none;border:none;accent-color:var(--brass)}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--brass)}
.err{color:var(--lose);font-weight:700;min-height:1.4em}
.pos{color:var(--win)} .neg{color:var(--lose)}

#toasts{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:70;display:grid;gap:8px;width:min(92vw,440px);pointer-events:none}
.toast{padding:14px 18px;border-radius:12px;background:var(--rail);border:1px solid var(--rail-hi);box-shadow:0 10px 30px rgba(0,0,0,.5);font-weight:700;animation:toastin .35s cubic-bezier(.3,1.5,.5,1)}
.toast.good{border-color:var(--win);color:#d9ffe4}.toast.bad{border-color:var(--red);color:#ffd2cb}
.toast.out{opacity:0;transform:translateY(10px);transition:.35s}
@keyframes toastin{from{transform:translateY(-16px);opacity:0}}

.modal{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px}
.mback{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.mcard{position:relative;width:min(100%,460px);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:14px;padding:22px;border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%,var(--felt-hi),var(--felt));box-shadow:inset 0 0 0 5px var(--rail),inset 0 0 0 6px var(--rail-hi),0 30px 60px rgba(0,0,0,.6);
  animation:toastin .3s cubic-bezier(.3,1.4,.5,1)}
.mcard.wide{width:min(100%,640px)}
.mcard h2{font-family:var(--display);font-size:26px;color:var(--brass)}
.mcard h3.sub{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
.mrow{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.mrow .btn{flex:1}
.pthead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xbtn{color:var(--ivory)}
.langlist{display:grid;gap:8px}
.langlist .btn{justify-content:flex-start;font-size:17px}
@keyframes spinr{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* ---------- staff dashboards ---------- */
:root{--surface:#0c2a23;--surface2:#0f3229}
body{min-height:100vh}
.brandrow{display:flex;align-items:center;gap:10px;min-width:0}
.brandrow.center{justify-content:center}
.rolepill{font:800 11px var(--body);letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--brass);color:var(--on-brass)}
.loading{display:grid;place-items:center;min-height:30vh}.loading.sm{min-height:60px}
.spinner{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brass);animation:spinr .9s linear infinite}
.sm{font-size:13px}
.pad{padding:18px}

/* sign in */
.loginwrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px}
.loginwrap .lcard{width:min(100%,420px);display:grid;gap:14px;padding:26px;border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,var(--felt-hi),var(--felt));
  box-shadow:inset 0 0 0 5px var(--rail),inset 0 0 0 6px var(--rail-hi),0 30px 60px rgba(0,0,0,.6)}
.loginwrap h1{font:700 16px var(--body);color:var(--muted);text-align:center}
.fld{display:grid;gap:5px}
.fld>span{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lfoot{display:flex;gap:10px;align-items:center;justify-content:space-between}
.lfoot small{color:var(--muted)}

/* shell */
.sbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand ctx tools" "nav nav nav";gap:8px 16px;align-items:center;
  padding:10px 18px 0;background:var(--rail);border-bottom:1px solid var(--rail-hi);box-shadow:0 6px 20px var(--shade)}
.sbar .brandrow{grid-area:brand}.sbar .tools{grid-area:tools;display:flex;gap:6px}
.ctx{grid-area:ctx;display:flex;flex-direction:column;min-width:0}
.ctx span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.ctx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{grid-area:nav;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tab{padding:10px 14px;border-radius:10px 10px 0 0;color:var(--muted);text-decoration:none;font:700 14px var(--body);white-space:nowrap;border-bottom:3px solid transparent}
.tab:hover{color:var(--ivory)}
.tab.on{color:var(--brass);border-bottom-color:var(--brass);background:rgba(220,177,90,.08)}
.tab:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.view{max-width:1280px;margin:0 auto;padding:18px 18px 60px;display:grid;gap:16px}
.vhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.vhead h1{font-family:var(--display);font-size:30px;color:var(--brass)}
.ctrls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ctrls input[type=search]{width:220px}.ctrls select{width:auto;min-width:160px}
.updated{margin-top:-10px;font-size:13px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);flex-wrap:wrap}
.seg button{min-height:38px;padding:0 12px;border:none;border-radius:9px;background:transparent;color:var(--muted);font:700 13px var(--body);cursor:pointer}
.seg button.on{background:var(--brass);color:var(--on-brass)}
.seg button:focus-visible{outline:3px solid var(--brass);outline-offset:1px}

/* panels and kpis */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;gap:10px;min-width:0}
.panel.flush{padding:0;overflow:hidden}
.panel.narrow{max-width:520px}
.panel h2{font:800 16px var(--body);letter-spacing:.02em}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px;min-width:0}
.kpi span{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kpi b{font-size:clamp(20px,2.4vw,28px);color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi small{color:var(--muted);font-size:13px}
.mini-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mini-kpis .kpi{padding:8px 10px}.mini-kpis .kpi b{font-size:18px}
.stack{display:grid;gap:12px}
.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}

/* tables */
.tablewrap{overflow-x:auto;min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface2);position:sticky;top:0}
.tbl td{padding:9px 12px;border-bottom:1px solid rgba(242,235,218,.07);vertical-align:middle}
.tbl tbody tr:hover{background:rgba(242,235,218,.035)}
.tbl tr.click{cursor:pointer}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .acts{text-align:right;white-space:nowrap}.tbl td.acts .btn{margin-left:4px}
.tbl tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:none}
.tbl.compact td,.tbl.compact th{padding:6px 8px;font-size:13px}
.tbl .detail{max-width:420px}
.strong{font-weight:700;color:var(--brass)}
.mcell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.mcell img{width:26px;height:26px;object-fit:contain}
.tag{display:inline-block;font:700 11px var(--body);letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:rgba(242,235,218,.08);border:1px solid var(--line);white-space:nowrap}
.tag.good{color:var(--win);border-color:rgba(134,217,161,.4)}.tag.bad{color:var(--lose);border-color:rgba(240,161,151,.45)}.tag.warn{color:#f2c46b;border-color:rgba(242,196,107,.4)}
.chg{display:inline-block;margin-right:10px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(242,235,218,.25);margin-right:8px}.dot.on{background:var(--win);box-shadow:0 0 8px var(--win)}
.linkish{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;text-align:left}
.linkish:hover b{text-decoration:underline}
.linkish:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.rtpbar{position:relative;height:6px;border-radius:3px;background:rgba(242,235,218,.1);min-width:120px;margin:2px 0 3px}
.rtpbar .act{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#2f93c2}
.rtpbar .tgt{position:absolute;top:-4px;width:2px;height:14px;background:var(--ivory);margin-left:-1px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.filters input,.filters select{width:auto;min-width:150px;flex:1 1 150px}
.filters .dl{display:grid;gap:3px;flex:0 1 160px}.filters .dl span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.filters .dl input{min-width:0;width:100%}

/* charts */
.chart{position:relative}
.cbox{min-height:230px}
.clegend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ivory);margin-bottom:6px}
.clegend span{display:inline-flex;align-items:center;gap:6px}
.clegend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.clegend.scale{color:var(--muted)}.clegend .ramp{width:120px;height:10px;border-radius:3px;background:linear-gradient(90deg,rgba(232,196,106,.18),rgba(232,196,106,1))}
.chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.cgrid{stroke:rgba(242,235,218,.08);stroke-width:1}
.cbase{stroke:rgba(242,235,218,.35);stroke-width:1}
.caxis{fill:#9db6aa;font:500 11px var(--mono)}
.ccross{stroke:rgba(242,235,218,.45);stroke-width:1;stroke-dasharray:3 3}
.chl{fill:rgba(242,235,218,.06)}
.cdot{stroke:#0c2a23;stroke-width:2}
.cbar{stroke:#0c2a23;stroke-width:1}
.hcell{stroke:none}
.ctip{position:absolute;top:28px;z-index:3;pointer-events:none;background:#081c17;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;box-shadow:0 10px 24px rgba(0,0,0,.5);min-width:150px}
.ctip b{display:block;margin-bottom:4px}
.ctip div{display:flex;align-items:center;gap:6px}.ctip div span{margin-left:auto;padding-left:12px}
.ctip i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* house form */
.hform{display:grid;gap:14px}
.rtpblock{display:grid;gap:10px;padding:14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.rtphead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.rtphead h3{font:800 16px var(--body)}
.rtpbig{display:flex;align-items:baseline;gap:4px}
.rtpbig input{width:120px;font:600 32px var(--mono);text-align:right;color:var(--brass);min-height:56px}
.rtpbig span{font:600 24px var(--mono);color:var(--brass)}
.rtpnote{font-size:14px}.rtpnote.warn{color:#f2c46b}
.mrtp{display:grid;gap:6px}
.mrow2{display:grid;grid-template-columns:minmax(170px,1.2fr) auto minmax(100px,2fr) auto;gap:12px;align-items:center;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.2)}
.mval{display:flex;align-items:center;gap:4px;font-family:var(--mono)}.mval input{width:90px;text-align:right;min-height:40px}
.tog{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:14px}
.tog.big{padding:12px;border-radius:12px;background:rgba(0,0,0,.2);align-items:flex-start}
.tog.big span{display:grid}
input:disabled{opacity:.45}
.savebar{position:sticky;bottom:12px;z-index:10;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:var(--rail);border:1px solid var(--rail-hi);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.savebar span{flex:1;min-width:200px;color:var(--muted)}
.savebar.show{border-color:var(--brass)}.savebar.show span{color:var(--ivory)}

/* round viewer */
.rgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px;border-radius:12px;background:rgba(0,0,0,.35);max-width:420px}
.rgrid span{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:rgba(242,235,218,.04)}
.rgrid span.hit{background:rgba(220,177,90,.22);box-shadow:inset 0 0 0 2px var(--brass)}
.rgrid img{width:86%;height:86%;object-fit:contain}
.fsgrids{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fsgrids .rgrid{gap:2px;padding:3px}

@media (max-width:1000px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}}
@media (max-width:640px){
  .sbar{grid-template-areas:"brand tools" "ctx ctx" "nav nav";grid-template-columns:1fr auto;padding:8px 12px 0}
  .view{padding:12px 12px 50px}.vhead h1{font-size:24px}
  .mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mrow2{grid-template-columns:1fr auto;}.mrow2 .mr{grid-column:1}.mrow2 .mval{justify-self:end}
  .ctrls input[type=search]{width:100%}
}
.subbox{display:grid;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.subbox h3.sub{margin:0}
.pwrow{display:flex;gap:8px}.pwrow input{flex:1;font-family:var(--mono)}
.creds{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;padding:14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--brass)}
.creds dt{color:var(--muted);font-size:13px;font-weight:700}.creds dd{margin:0;font-size:16px;word-break:break-all;user-select:all}
#toasts{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.tbl td.acts{white-space:normal;min-width:230px}.tbl td.acts .btn{margin:2px 0 2px 4px}
.tbl small{white-space:nowrap}

/* ---------- demo bar, demo button and guided tour ---------- */
.tshade{position:fixed;inset:0;z-index:79;background:transparent}
.tshade.full{background:rgba(0,0,0,.62)}
.tspot{position:fixed;z-index:80;border-radius:14px;pointer-events:none;box-shadow:0 0 0 3px var(--brass),0 0 0 9999px rgba(0,0,0,.62);transition:left .25s,top .25s,width .25s,height .25s}
.tcard{position:fixed;z-index:81;width:min(380px,calc(100vw - 16px));display:grid;gap:10px;padding:16px 18px;border-radius:16px;
  background:radial-gradient(120% 90% at 50% 0%,#14493c,#0f3a30);box-shadow:inset 0 0 0 2px var(--brass),0 24px 50px rgba(0,0,0,.6);color:var(--ivory);animation:toastin .25s ease-out}
.tcard h3{font:800 18px var(--body);color:var(--brass);margin:0}
.tcard p{margin:0;font-size:15px;line-height:1.5}
.thead{display:flex;align-items:center;gap:8px}.thead .tcount{flex:1;font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.thead .xbtn{width:34px;height:34px}
.tnav{display:flex;justify-content:space-between;gap:8px}
.dseg{display:inline-flex;padding:2px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.dseg button{min-height:30px;min-width:38px;border:none;border-radius:7px;background:transparent;color:var(--muted);font:800 12px var(--body);cursor:pointer}
.dseg button.on{background:var(--brass);color:var(--on-brass)}
.demobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 18px;background:linear-gradient(90deg,#3a281b,#4a3216);border-bottom:1px solid var(--brass);font-size:13px}
.demobar .dtag{font:800 11px var(--body);letter-spacing:.16em;padding:3px 9px;border-radius:999px;background:var(--brass);color:var(--on-brass)}
.demobar .dtxt{color:var(--ivory)}.demobar .dgrow{flex:1}
.demobar .dswitch{display:flex;gap:6px;flex-wrap:wrap}
.dbtn{flex:none;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--brass);background:rgba(220,177,90,.16);color:var(--brass);font:800 12px var(--body);letter-spacing:.12em;cursor:pointer}
.dbtn:hover{background:rgba(220,177,90,.28)}
@media (max-width:640px){.demobar{padding:6px 10px}.demobar .dtxt{display:none}}
.tcard[hidden],.tspot[hidden],.tshade[hidden]{display:none!important}