/* =====================================================================
   MOON | QUB GIFT City Compliance Engine - stylesheet
   Visual system reproduced from the manager-created reference artifact:
   white ground, maroon/red identity, Source Sans 3 body, serif headings.
   ===================================================================== */
:root{
  --night:#8E1A1C; --night2:#B31E20; --gold:#C00000; --gold-soft:#FBECEC; --red:#C00000; --maroon:#8E1A1C;
  --bg:#FFFFFF; --card:#FFFFFF; --ink:#111111; --muted:#555555; --line:#E3DDDD; --soft:#F7F5F5;
  --ok:#1E7B34; --ok-bg:#E4F3E7; --warn:#A8650A; --warn-bg:#FCF1DE; --bad:#C00000; --bad-bg:#FBE4E4;
  --info:#2F5AA8; --info-bg:#E6EDF9; --na:#777777; --na-bg:#EEEEEE;
  --r-lg:12px; --r-md:9px; --r-sm:6px;
  --shadow:0 1px 2px rgba(60,20,20,.04),0 4px 14px rgba(60,20,20,.05);
  --font:"Source Sans 3", Calibri, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --head:"Bookman Old Style","Libre Baskerville",Georgia,"Times New Roman",serif;
  --top-h:77px; --scope-h:73px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --night:#7A1416; --night2:#9E1B1D; --gold:#E0474A; --gold-soft:#3A1818;
  --bg:#141212; --card:#1D1A1A; --ink:#F1ECEC; --muted:#B3A9A9; --line:#352E2E; --soft:#242020;
  --ok:#5CC27A; --ok-bg:#15301D; --warn:#E7A948; --warn-bg:#3A2C12; --bad:#FF7B7B; --bad-bg:#3E1B1B;
  --info:#7FA6F0; --info-bg:#1A2A4C; --na:#A0A0A0; --na-bg:#2A2727;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top-h) + var(--scope-h))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--info)}
img{max-width:100%}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Top bar (MOON standing theme: white, maroon headings, logo top right) ---------- */
.topbar{background:var(--card);color:var(--ink);display:flex;align-items:center;gap:14px;padding:10px 22px 10px 40px;position:sticky;top:0;z-index:40;border-bottom:3px solid var(--red);min-height:74px}
.topbar::before{content:"";position:absolute;left:0;top:0;width:26px;height:74px;background:var(--red);clip-path:polygon(0 0,100% 0,0 100%)}
.hamb{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer}
.apptitle{min-width:0}
.apptitle b{display:block;font-family:var(--head);color:var(--maroon);font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="dark"] .apptitle b{color:#FF8A8A}
.apptitle span{font-size:12.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client{margin-left:auto;text-align:right;min-width:0;border-right:1px solid var(--line);padding-right:14px}
.client b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.client span{font-size:12px;color:var(--muted);white-space:nowrap}
.aypill{font-size:12px;font-weight:700;color:var(--maroon);background:var(--gold-soft);border-radius:999px;padding:4px 10px;white-space:nowrap}
:root[data-theme="dark"] .aypill{color:#FF8A8A}
.logo{flex:none;display:block;height:52px;background:#fff;border-radius:4px}
.logo img{height:52px;width:auto;display:block}
.sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.sync i{width:8px;height:8px;border-radius:50%;background:#999;display:inline-block}
.sync.on i{background:#1E7B34}.sync.off i{background:#C00000}.sync.off{color:var(--bad);font-weight:600}
.sync.busy i{background:#E7A948;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
/* API loading bar (top of the page while a request to the server is in flight) */
#apiBusy{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(90deg,transparent,var(--red),transparent);background-size:40% 100%;background-repeat:no-repeat}
#apiBusy.on{opacity:1;animation:apibusy 1.1s linear infinite}
@keyframes apibusy{from{background-position:-40% 0}to{background-position:140% 0}}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:12px;position:relative;display:inline-flex;align-items:center;gap:6px}
.iconbtn:hover{border-color:var(--red);color:var(--red)}
.iconbtn .badge{position:absolute;top:-7px;right:-7px}
.userchip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;background:transparent;cursor:pointer;max-width:170px}
.userchip:hover{border-color:var(--red)}
.userchip i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:800;flex:none}
.userchip span{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Notification panel */
.notif{position:fixed;top:80px;right:16px;width:min(420px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 110px));background:var(--card);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.22);z-index:90;display:flex;flex-direction:column}
.notif header{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.notif header h3{margin:0;font-family:var(--head);color:var(--maroon);font-size:15px}
.notif .nl{overflow:auto}
.notif button.ni{display:flex;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 16px;cursor:pointer}
.notif button.ni:hover{background:var(--soft)}
.notif .ni i{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.notif .ni b{display:block;font-size:13px;font-weight:600}
.notif .ni span{font-size:12px;color:var(--muted)}
.notif button.ni.read{opacity:.62}.notif button.ni.read b{font-weight:500}
.notif .ngrp{font-size:11.5px;font-weight:700;color:var(--maroon);background:var(--gold-soft);padding:5px 16px;text-transform:uppercase;letter-spacing:.03em}

/* ---------- Scope strip ---------- */
.scopebar{background:var(--soft);border-bottom:1px solid var(--line);display:flex;gap:6px;padding:8px 14px 10px;overflow-x:auto;position:sticky;top:var(--top-h);z-index:39;scrollbar-width:thin}
.scope{flex:0 0 auto;min-width:148px;max-width:190px;text-align:left;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 10px 8px;cursor:pointer;position:relative;border-top:3px solid var(--maroon)}
.scope:hover{border-color:var(--red);border-top-color:var(--red)}
.scope.active{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.scope .sn{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.scope.active .sn{color:#F6D6D6}
.scope .st{font-size:12.5px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.scope .bar{height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.scope.active .bar{background:rgba(255,255,255,.3)}
.scope .bar b{display:block;height:100%;background:var(--red)}
.scope.active .bar b{background:#fff}
.scope .od{color:var(--red);font-weight:700}
.scope.active .od{color:#FFD2D2}
.scope.out{border-style:dashed;border-top-style:solid}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:calc(100vh - 150px)}
.shell>div{min-width:0}
.sidenav{padding:16px 10px;border-right:1px solid var(--line);background:var(--card);position:sticky;top:calc(var(--top-h) + var(--scope-h));align-self:start;height:calc(100vh - var(--top-h) - var(--scope-h));overflow:auto}
.sidenav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:500;margin-bottom:2px;line-height:1.3}
.sidenav a:hover{background:var(--soft)}
.sidenav a.active{background:var(--gold-soft);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.sidenav a svg{flex:none;opacity:.8}
.sidenav .grp{font-size:11.5px;color:var(--muted);padding:14px 12px 4px;font-weight:600}
.sidenav .grp:first-child{padding-top:0}
.sidenav .badge{margin-left:auto}
main{padding:22px 26px 60px;min-width:0}
.mobnav{display:none}
.navscrim{display:none}

/* ---------- Page header ---------- */
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{font-size:24px;line-height:1.25;margin:0;font-weight:700;font-family:var(--head);color:var(--maroon);padding-bottom:6px;border-bottom:2px solid var(--red);display:inline-block}
:root[data-theme="dark"] .ph h1,:root[data-theme="dark"] .card h2,:root[data-theme="dark"] .mh h3,:root[data-theme="dark"] .step h4,:root[data-theme="dark"] .notif header h3{color:#FF8A8A}
.ph p{margin:6px 0 0;color:var(--muted);max-width:80ch}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 13px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--night);border-color:var(--night);color:#fff}
.btn.pri:hover{background:var(--night2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.xs{padding:3px 8px;font-size:11.5px}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--soft)}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btngrp{display:inline-flex;gap:4px;flex-wrap:wrap}

/* ---------- Cards and grid ---------- */
.grid{display:grid;gap:16px}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.span2{grid-column:span 2}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.card h2{font-size:15px;margin:0 0 12px;font-weight:700;font-family:var(--head);color:var(--maroon);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .sub{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:auto;font-family:var(--font)}
.kpi{padding:16px 16px 14px}
.kpi .k{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .v{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted);margin-top:4px}
.kpi.hero{background:var(--night);color:#fff;border-color:var(--night)}
.kpi.hero .k,.kpi.hero .s{color:#F6D6D6}
.kpi.alert .v{color:var(--bad)}
.kpi.good .v{color:var(--ok)}
.kpi.amber .v{color:var(--warn)}
a.kpi,button.kpi{text-decoration:none;color:inherit;text-align:left;cursor:pointer;font:inherit;display:block;width:100%}
a.kpi:hover,button.kpi:hover{border-color:var(--red)}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.18) 0);display:grid;place-items:center;flex:none}
.ring span{width:50px;height:50px;border-radius:50%;background:var(--night);display:grid;place-items:center;font-weight:800;font-size:13px}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.6}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.info{background:var(--info-bg);color:var(--info)}
.chip.na{background:var(--na-bg);color:var(--na)}
.chip.gold{background:var(--gold-soft);color:var(--gold)}
.chip.demo{background:#FFF4CC;color:#7A5A00;border:1px dashed #C9A227}
:root[data-theme="dark"] .chip.demo{background:#3A3212;color:#E7C948}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.badge.muted{background:var(--na-bg);color:var(--muted)}

/* ---------- Tables ---------- */
.tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.tw.tall{max-height:70vh}
table{border-collapse:collapse;width:100%}
th,td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:12px;color:var(--maroon);font-weight:700;background:var(--gold-soft);white-space:nowrap;position:sticky;top:0;z-index:1}
:root[data-theme="dark"] th{color:#FF9E9E}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{text-decoration:underline}
th.sort .ar{opacity:.55;font-size:10px;margin-left:3px}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
tbody tr:hover td{background:var(--soft)}
tr.click{cursor:pointer}
tr.flash td{animation:flash 2.2s ease-out}
@keyframes flash{0%,40%{background:var(--warn-bg)}100%{background:transparent}}
tr.tot td{font-weight:700;background:var(--soft)}
.tsub{font-size:12px;color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.nowrap{white-space:nowrap}
.wrapcell{min-width:200px}

/* Pagination */
.pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding:10px 2px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pager button{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:3px 9px;cursor:pointer;font-size:12px;font-weight:600}
.pager button.on{background:var(--night);color:#fff;border-color:var(--night)}
.pager button[disabled]{opacity:.4;cursor:default}

/* ---------- Bars ---------- */
.hbar{height:8px;background:var(--soft);border-radius:4px;overflow:hidden;display:flex;border:1px solid var(--line)}
.hbar b{display:block;height:100%}
.b-ok{background:var(--ok)}.b-warn{background:var(--warn)}.b-bad{background:var(--bad)}.b-gold{background:var(--gold)}.b-na{background:var(--na)}.b-info{background:var(--info)}
.row{display:flex;align-items:center;gap:10px}
.row.sp{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.stack>*+*{margin-top:10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mt{margin-top:16px}.mt2{margin-top:24px}.mt0{margin-top:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 11px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--night);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

input.in,select.in,textarea.in{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 10px;min-width:0}
input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px var(--gold-soft)}
textarea.in{width:100%;min-height:70px;resize:vertical}
.search{min-width:220px}
.in.invalid{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--bad-bg)!important}
.err{display:block;color:var(--bad);font-size:11.5px;font-weight:600;margin-top:3px}

/* Status select */
.ss{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12.5px;font-weight:600;background:var(--card)}
.ss.received{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.ss.partial{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.ss.not_received{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.ss.na{background:var(--na-bg);color:var(--na);border-color:transparent}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs button.on{color:var(--maroon);border-bottom-color:var(--red)}
:root[data-theme="dark"] .tabs button.on{color:#FF8A8A}

/* Accordion */
details.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px}
details.acc>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:12px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary .code{width:28px;height:28px;border-radius:7px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-weight:800;flex:none}
details.acc>summary .t{font-weight:700;color:var(--maroon)}
:root[data-theme="dark"] details.acc>summary .t{color:#FF8A8A}
details.acc>summary .meta{margin-left:auto;display:flex;align-items:center;gap:10px}
details.acc[open]>summary{border-bottom:1px solid var(--line)}
details.acc .tw{border:0;border-radius:0 0 var(--r-md) var(--r-md)}
.remark{width:100%;min-width:140px;border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 6px}
.remark:hover,.remark:focus{border-color:var(--line);background:var(--card)}

/* ---------- Modal ---------- */
.ov{position:fixed;inset:0;background:rgba(20,8,8,.5);z-index:100;display:grid;place-items:center;padding:16px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--card);border-radius:14px;border-top:4px solid var(--red);width:min(640px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .18s}
.modal.wide{width:min(980px,100%)}
.modal.xwide{width:min(1180px,100%)}
@keyframes pop{from{transform:translateY(8px);opacity:0}}
.mh{padding:18px 20px 12px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.mh h3{margin:0;font-size:17px;line-height:1.3;font-family:var(--head);color:var(--maroon)}
.mh p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.mh .x{margin-left:auto}
.mb{padding:16px 20px;overflow:auto}
.mb h4{margin:16px 0 8px;color:var(--maroon);font-size:13.5px}
.mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.mf .left{margin-right:auto}
/* Form grid: fields are bottom-aligned so every input in a row lines up,
   even when one label is longer and wraps to a second line. */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.form.f3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form .full{grid-column:1/-1}
.form .s2{grid-column:span 2}
/* block (not flex) so the caption, the required star and any hint stay on one line */
.form label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.35}
.form label > .in,.form label > input,.form label > select,.form label > textarea{display:block;width:100%;margin-top:5px}
/* one height for every single-line control, so text boxes, drop-downs and
   date pickers in the same row line up exactly */
.form label > input,.form label > select{height:38px;line-height:1.3}
.form label > input[type="file"]{height:auto;padding:7px 10px}
.form label .in{color:var(--ink);font-weight:500}
.form label > .tsub{font-weight:500}
.form label > .in + .tsub,.form label > select + .tsub,.form label > textarea + .tsub{display:block;margin-top:4px}
.form label.cb{display:flex;flex-direction:row;align-items:center;gap:8px}
.form label.cb > input{display:inline-block;width:auto;margin:0}
.req{color:var(--bad);margin-left:2px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:13px;background:var(--soft);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600}

/* Toast */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--night);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90vw;animation:pop .18s}
.toast.err{background:#5a1010}

/* ---------- Flow ---------- */
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
.step{padding:14px 14px 16px;border:1px solid var(--line);background:var(--card);position:relative}
.step:first-child{border-radius:12px 0 0 12px}.step:last-child{border-radius:0 12px 12px 0}
.step+.step{border-left:0}
.step:not(:last-child)::after{content:"";position:absolute;right:-7px;top:22px;width:12px;height:12px;background:var(--card);border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);z-index:1}
.step .d{font-size:11.5px;font-weight:700;color:var(--gold)}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;margin-bottom:8px}
.step h4{margin:0 0 6px;font-size:13.5px;color:var(--maroon)}
.step ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--muted)}
.step .who{margin-top:8px}
.step.done .n{background:var(--ok)}

/* ---------- Calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dh{font-size:11px;color:var(--muted);font-weight:700;text-align:center;padding:4px 0}
.cal button{aspect-ratio:1.25;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:5px 6px;font-size:12px;min-height:44px}
.cal button.dim{opacity:.35}
.cal button.today{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cal button.sel{background:var(--gold-soft)}
.cal .dots{display:flex;gap:3px;flex-wrap:wrap}
.cal .dots i{width:6px;height:6px;border-radius:50%}
/* Full month calendar */
.bigcal{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:4px;min-width:860px}
.bigcal .dh{font-size:11.5px;color:var(--maroon);font-weight:700;text-align:center;padding:6px 0;background:var(--gold-soft);border-radius:6px}
.bigcal .cell{border:1px solid var(--line);border-radius:8px;min-height:112px;padding:5px;background:var(--card);display:flex;flex-direction:column;gap:3px}
.bigcal .cell.out{background:var(--soft);opacity:.55}
.bigcal .cell.today{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.bigcal .cell .dn{font-size:12px;font-weight:700;color:var(--muted)}
.bigcal .ev{display:block;width:100%;text-align:left;border:0;border-left:3px solid;border-radius:4px;padding:2px 5px;font-size:11px;line-height:1.3;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bigcal .ev.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.bigcal .ev.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.bigcal .ev.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.bigcal .ev.info{background:var(--info-bg);border-color:var(--info);color:var(--info)}
.bigcal .ev.na{background:var(--na-bg);border-color:var(--na);color:var(--na)}
.bigcal .more{font-size:11px;color:var(--muted);background:none;border:0;cursor:pointer;text-align:left;padding:0 4px}

/* ---------- Drop zone / Upload ---------- */
.drop{border:2px dashed var(--line);border-radius:14px;padding:26px;text-align:center;background:var(--card);cursor:pointer}
.drop:hover{border-color:var(--gold)}
.drop.hot{border-color:var(--gold);background:var(--gold-soft)}
.segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.segc{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);cursor:pointer;text-align:left}
.segc.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:var(--gold-soft)}
.segc b{display:block;font-size:13.5px}
.segc span{font-size:12px;color:var(--muted)}
.segc em{font-style:normal;font-size:11px;font-weight:700;color:var(--gold);display:block;margin-top:4px}
.banner{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-weight:600;font-size:13px}
.banner.info{background:var(--info-bg);color:var(--info)}
.banner.bad{background:var(--bad-bg);color:var(--bad)}
.banner.demo{background:#FFF4CC;color:#7A5A00;border:1px dashed #C9A227}
:root[data-theme="dark"] .banner.demo{background:#3A3212;color:#E7C948}
.banner a{color:inherit}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.rawtext{white-space:pre-wrap;font-family:Consolas,"Courier New",monospace;font-size:11.5px;background:var(--soft);border-radius:8px;padding:10px;max-height:200px;overflow:auto;margin:0}
.progressline{height:4px;background:var(--soft);border-radius:2px;overflow:hidden;margin-top:4px}
.progressline b{display:block;height:100%;background:var(--gold);transition:width .2s}

/* ---------- Reports ---------- */
.reports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rep{display:flex;flex-direction:column;gap:8px}
.rep p{margin:0;color:var(--muted);font-size:12.5px;flex:1}
.rep .no{font-size:11px;font-weight:800;color:var(--gold)}

/* Charts */
.chartbox{position:relative;height:250px}
.chartbox.tall{height:300px}
.chartbox canvas{max-width:100%}
.nochart{height:100%;display:grid;place-items:center;color:var(--muted);font-size:12.5px;text-align:center;padding:10px}

/* Activity feed */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0}
.feed .fi{width:30px;height:30px;border-radius:8px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;flex:none;font-weight:800;font-size:11px}
.feed b{font-weight:600}

.footer{color:var(--muted);font-size:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.kbd{font-family:Consolas,monospace;font-size:11.5px;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* Print area (branded print layout) */
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  body.printing #printArea{display:block}
  body:not(.printing) .scopebar,body:not(.printing) .iconbtn,body:not(.printing) .sidenav,body:not(.printing) .mobnav,body:not(.printing) .acts,body:not(.printing) .btn,body:not(.printing) .topbar .userchip{display:none!important}
  body:not(.printing) .shell{display:block}
  body{background:#fff;color:#111}
  .topbar,.scopebar{position:static}
}
.pr{font-family:Calibri,"Source Sans 3",Arial,sans-serif;color:#111;font-size:10.5pt}
.pr .phd{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2.5px solid #C00000;padding-bottom:8px;margin-bottom:10px}
.pr .phd h1{font-family:"Bookman Old Style",Georgia,serif;color:#8E1A1C;font-size:18pt;margin:0}
.pr .phd p{margin:2px 0 0;color:#333;font-size:9.5pt}
.pr .phd img{height:48px}
.pr h2{font-family:"Bookman Old Style",Georgia,serif;color:#C00000;font-size:12.5pt;border-bottom:1px solid #C00000;padding-bottom:3px;margin:16px 0 6px;page-break-after:avoid}
.pr table{border-collapse:collapse;width:100%;font-size:9pt;page-break-inside:auto}
.pr tr{page-break-inside:avoid}
.pr th{background:#8E1A1C!important;color:#fff!important;position:static;padding:5px 6px;text-align:left;-webkit-print-color-adjust:exact;print-color-adjust:exact;white-space:normal}
.pr td{padding:4px 6px;border-bottom:1px solid #E3DDDD;vertical-align:top}
.pr tr:nth-child(even) td{background:#FBECEC;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pr td.r{text-align:right}
.pr .pft{margin-top:14px;font-size:8.5pt;color:#555;font-style:italic;border-top:1px solid #E3DDDD;padding-top:6px}
.pr .pfix{display:none}
/* The page margin is 0 so that the browser has no margin area in which to print
   its own header and footer (page URL, date, page number). The white space is
   created by the padding on .pr instead, and our own footer repeats on every
   printed page. */
@page{size:A4 landscape;margin:0}
@media print{
  .pr{padding:11mm 10mm 15mm}
  .pr .pfix{display:flex;justify-content:space-between;gap:10mm;position:fixed;left:10mm;right:10mm;bottom:5mm;
    font-size:8pt;color:#555;border-top:1px solid #E3DDDD;padding-top:3px;background:#fff}
}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g5,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reports{grid-template-columns:repeat(2,minmax(0,1fr))}.segs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}.step{border-left:1px solid var(--line)!important;border-radius:0!important}.step::after{display:none}
  .client{display:none}
}
@media (max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidenav{position:fixed;left:0;top:0;bottom:0;height:100vh;width:260px;z-index:95;transform:translateX(-105%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.25);padding-top:20px}
  body.navopen .sidenav{transform:none}
  body.navopen .navscrim{display:block;position:fixed;inset:0;background:rgba(20,8,8,.4);z-index:94}
  .hamb{display:inline-flex}
  .topbar{padding-left:34px}
}
@media (max-width:900px){
  main{padding:16px 14px 50px}
  .g3,.g2,.g21{grid-template-columns:minmax(0,1fr)}
  .span2{grid-column:auto}
  .topbar{padding:10px 14px 10px 34px;gap:10px;min-height:62px}
  .topbar::before{height:62px}
  :root{--top-h:65px}
  .sync span,.apptitle span,.aypill{display:none}
  .logo,.logo img{height:40px}
  .userchip span{display:none}.userchip{padding:3px}
  .form.f3,.form.f4{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .g6,.g5,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reports,.segs,.flow{grid-template-columns:minmax(0,1fr)}
  .form,.form.f3,.form.f4{grid-template-columns:minmax(0,1fr)}
  .form .s2{grid-column:auto}
  .apptitle b{font-size:15px}.kpi .v{font-size:21px}
  .search{min-width:0;width:100%}
  .scopebar{position:static}
  .sidenav{top:0}
  .ph .acts{margin-left:0}
}