:root{color-scheme:light;
  --brand:#6D28D9; --brand-2:#DB2777; --brand-soft:#F3EEFF; --brand-ink:#4C1D95;
  --rail:#15132B; --rail-2:#1F1C3D; --rail-ink:#A9A5D1;
  --bg:#F4F4F8; --card:#FFFFFF; --ink:#1B1B2F; --ink-2:#5B5B76; --ink-3:#8E8EA8;
  --line:#E7E6F0; --ok:#16A34A; --ok-soft:#E8F7EE; --warn:#F59E0B; --warn-soft:#FFF6E5;
  --bad:#DC2626; --bad-soft:#FDECEC; --info:#2563EB; --info-soft:#EAF1FE;
  --radius:12px; --shadow:0 1px 2px rgba(20,18,50,.06),0 4px 16px rgba(20,18,50,.06);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
.hidden{display:none!important}
.muted{color:var(--ink-3)} .ink2{color:var(--ink-2)}
.mono{font-variant-numeric:tabular-nums}

/* ── Login ─────────────────────────────────────────── */
.login{min-height:100%;display:grid;grid-template-columns:1.1fr 1fr}
.login-hero{background:radial-gradient(1200px 600px at 0% 0%,#3B1D8F 0,transparent 60%),linear-gradient(135deg,var(--rail),#2A1660);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.login-hero h1{font-size:44px;line-height:1.05;margin:0 0 16px;letter-spacing:-.02em}
.login-hero p{color:#C9C4F2;font-size:16px;max-width:440px;line-height:1.5}
.feat{display:flex;gap:12px;align-items:center;color:#DDD8FF;margin:10px 0}
.feat i{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-style:normal}
.login-form{display:grid;place-items:center;padding:32px}
.login-card{width:100%;max-width:380px}
.login-card h2{margin:0 0 6px;font-size:24px}
.field{display:block;margin:16px 0}
.field span{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:none;transition:border .15s,box-shadow .15s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;font-weight:600;font-size:14px;transition:transform .05s,filter .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{filter:brightness(1.08)}
.btn-grad{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-danger{background:#fff;color:var(--bad);border:1px solid #F5C2C2} .btn-danger:hover{background:var(--bad-soft)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)} .btn-ghost:hover{background:#FAFAFD}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:8px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.01em}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 20px rgba(219,39,119,.35)}

/* ── Shell ─────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:92px 1fr;height:100vh}
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;overflow-y:auto}
.rail .logo-mark{margin-bottom:14px}
.rail-btn{width:78px;padding:10px 4px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;position:relative}
.rail-btn svg{width:22px;height:22px}
.rail-btn:hover{background:var(--rail-2);color:#fff}
.rail-btn.active{background:var(--rail-2);color:#fff}
.rail-btn.active::before{content:'';position:absolute;left:-7px;top:12px;bottom:12px;width:4px;border-radius:4px;background:linear-gradient(var(--brand),var(--brand-2))}
.rail-badge{position:absolute;top:6px;right:14px;background:var(--brand-2);color:#fff;font-size:10px;border-radius:9px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.rail-spacer{flex:1}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{background:var(--rail);color:#fff;display:flex;align-items:center;gap:18px;padding:0 22px;height:64px;flex-shrink:0}
.topbar h1{font-size:17px;letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:800}
.vsep{width:1px;height:30px;background:rgba(255,255,255,.15)}
.outlet{display:flex;flex-direction:column;line-height:1.2}
.outlet b{font-size:14px} .outlet small{font-size:11.5px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--ok);box-shadow:0 0 0 3px rgba(22,163,74,.25)}
.status-dot.off{background:var(--bad);box-shadow:0 0 0 3px rgba(220,38,38,.25)}
.topbar .grow{flex:1}
.toggle{position:relative;width:46px;height:26px;border-radius:20px;background:#4B4870;transition:background .2s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.toggle.on{background:var(--ok)} .toggle.on::after{left:23px}
.toggle.light{background:#D7D5E5} .toggle.light.on{background:var(--ok)}
.chip-live{display:flex;align-items:center;gap:8px;font-size:12px;color:#C9C4F2;background:rgba(255,255,255,.06);padding:6px 10px;border-radius:20px}
.pulse{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:pulse 1.6s infinite}
.pulse.off{background:#F59E0B;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#C9C4F2;position:relative}
.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.icon-btn svg{width:20px;height:20px}

/* ── Tabs ─────────────────────────────────────────── */
.tabs{display:flex;background:#fff;border-bottom:1px solid var(--line);padding:0 18px;flex-shrink:0;align-items:center}
.tab{padding:16px 22px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.count{min-width:22px;height:22px;border-radius:11px;background:#EFEEF6;color:var(--ink-2);display:grid;place-items:center;font-size:11.5px;padding:0 6px;font-weight:700}
.tab.active .count{background:var(--brand);color:#fff}
.tab.alert .count{background:var(--brand-2);color:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.45}}
.tabs .grow{flex:1}

/* ── Board ─────────────────────────────────────────── */
.board{flex:1;display:grid;grid-template-columns:360px 1fr;min-height:0}
.list-col{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:#FAFAFD}
.search{margin:14px;position:relative}
.search input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:none}
.search svg{position:absolute;left:11px;top:10px;width:16px;height:16px;color:var(--ink-3)}
.list{overflow-y:auto;padding:0 14px 14px;flex:1}
.ocard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;cursor:pointer;transition:border .15s,box-shadow .15s;position:relative}
.ocard:hover{box-shadow:var(--shadow)}
.ocard.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.ocard.new{border-color:var(--brand-2);animation:glow 1.4s infinite}
@keyframes glow{50%{box-shadow:0 0 0 4px rgba(219,39,119,.18)}}
.ocard-h{display:flex;align-items:center;gap:8px}
.oid{font-size:20px;font-weight:800;color:var(--brand);letter-spacing:-.01em}
.oid small{font-size:12px;color:var(--ink-3);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:#EFEEF6;color:var(--ink-2)}
.tag.pending{background:var(--brand-2);color:#fff}
.tag.prep{background:#F9D7E6;color:#9D174D}
.tag.ready{background:var(--ok-soft);color:var(--ok)}
.tag.picked{background:var(--info-soft);color:var(--info)}
.tag.done{background:var(--ok-soft);color:var(--ok)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.cod{background:var(--warn-soft);color:#B45309}
.tag.paid{background:var(--ok-soft);color:var(--ok)}
.tag.dark{background:#1F1C3D;color:#fff}
.tag.sched{background:var(--info-soft);color:var(--info)}
.ometa{font-size:13px;color:var(--ink-2);line-height:1.45}
.ometa b{color:var(--ink)}
.rider-mini{display:flex;gap:10px;align-items:center;border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;font-size:12.5px;color:var(--ink-2)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;flex-shrink:0;font-size:13px}
.ocard .cta{margin-top:12px;width:100%;padding:10px;border-radius:9px;font-weight:700;font-size:13.5px}
.cta.accept{background:var(--ok);color:#fff}
.cta.ready{background:linear-gradient(90deg,#F472B6,#EC4899);color:#fff}
.cta.late{background:linear-gradient(90deg,#EF4444,#DC2626);color:#fff}
.cta.wait{background:#EFEEF6;color:var(--ink-2)}
.empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.empty svg{width:56px;height:56px;color:#CFCDE3;margin-bottom:12px}
.empty b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:4px}

/* ── Detail ────────────────────────────────────────── */
.detail{overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.d-head{background:#fff;padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:2}
.d-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-size:20px}
.d-title{font-size:19px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.d-title .hl{color:var(--brand)}
.d-sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.d-head .grow{flex:1}
.d-body{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:20px 24px;flex:1}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
.panel h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.banner{border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:12px;display:flex;gap:8px;align-items:center}
.banner.warn{background:var(--warn-soft);color:#92400E}
.banner.info{background:var(--info-soft);color:#1E40AF}
.banner.bad{background:var(--bad-soft);color:#991B1B}
.note{background:#FFFBEA;border:1px dashed #F3D27A;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.item{display:grid;grid-template-columns:18px 48px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #F1F0F6}
.item:last-child{border-bottom:0}
.veg{width:14px;height:14px;border:1.5px solid var(--ok);border-radius:3px;display:grid;place-items:center}
.veg::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok)}
.veg.nv{border-color:#B45309}.veg.nv::after{background:#B45309;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;background:#F1F0F6}
.item-name{font-weight:600} .item-sub{font-size:12px;color:var(--ink-3)}
.qty{text-align:right;font-weight:800;font-size:16px}
.qty small{display:block;font-weight:500;font-size:12px;color:var(--ink-3)}
.bill-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px;color:var(--ink-2)}
.bill-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;color:var(--ink);font-weight:800;font-size:15px}
.side-card{display:flex;gap:12px;align-items:flex-start}
.side-card .t{font-weight:700}
.side-card .s{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.call{margin-left:auto;color:var(--brand);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--brand-soft);flex-shrink:0}
.call svg{width:16px;height:16px}
.pass{display:inline-block;margin-top:6px;font-weight:800;color:var(--brand-2);letter-spacing:.08em}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 14px 22px;font-size:13px}
.timeline li::before{content:'';position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#D7D5E5}
.timeline li::after{content:'';position:absolute;left:7.5px;top:14px;bottom:0;width:1px;background:#E7E6F0}
.timeline li:last-child::after{display:none}
.timeline li.done::before{background:var(--ok)}
.timeline li.now::before{background:var(--brand-2);box-shadow:0 0 0 4px rgba(219,39,119,.15)}
.timeline small{display:block;color:var(--ink-3);font-size:11.5px}
.prep-strip{margin:0 24px;border-radius:12px;background:linear-gradient(90deg,#5B21B6,#9D174D 60%,#DB2777);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:16px}
.prep-ring{width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.6);display:grid;place-items:center;text-align:center;line-height:1;font-weight:800;font-size:18px}
.prep-ring small{display:block;font-size:9px;font-weight:600;opacity:.85}
.prep-strip b{font-size:15px} .prep-strip p{margin:3px 0 0;font-size:12.5px;opacity:.85}
.d-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 24px;display:flex;gap:12px;margin-top:16px}
.d-foot .btn{flex:1;padding:14px}
.prep-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prep-pick button{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700;font-size:13px}
.prep-pick button.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Pages ─────────────────────────────────────────── */
.page{flex:1;overflow-y:auto;padding:24px}
.page-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-h h2{margin:0;font-size:22px;letter-spacing:-.01em}
.page-h .grow{flex:1}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.kpi small{color:var(--ink-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.kpi b{display:block;font-size:26px;margin-top:6px;letter-spacing:-.02em}
.kpi .delta{font-size:12px;margin-top:4px}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.seg{display:inline-flex;background:#EFEEF6;border-radius:10px;padding:3px}
.seg button{padding:7px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line);background:#FAFAFD;position:sticky;top:0}
.table td{padding:10px 12px;border-bottom:1px solid #F1F0F6;vertical-align:middle}
.table tr:hover td{background:#FCFBFF}
.menu-item{display:flex;align-items:center;gap:12px}
.bars{display:flex;align-items:flex-end;gap:10px;height:200px;padding-top:10px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar i{display:block;width:100%;max-width:46px;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--brand),#8B5CF6);min-height:2px;position:relative}
.bar i:hover::after{content:attr(data-v);position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;padding:3px 6px;border-radius:5px;white-space:nowrap;font-style:normal}
.bar span{font-size:11.5px;color:var(--ink-3)}
.stars{color:#F59E0B;letter-spacing:1px}
.review{border-bottom:1px solid #F1F0F6;padding:14px 0}
.review:last-child{border-bottom:0}
.rating-big{font-size:46px;font-weight:800;letter-spacing:-.03em}
.dist{display:grid;grid-template-columns:24px 1fr 36px;gap:8px;align-items:center;font-size:12.5px;margin:6px 0}
.dist div{height:8px;border-radius:4px;background:#EFEEF6;overflow:hidden}
.dist div i{display:block;height:100%;background:#F59E0B}
.set-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #F1F0F6}
.set-row:last-child{border-bottom:0}
.set-row .grow{flex:1}
.set-row b{display:block} .set-row small{color:var(--ink-3);font-size:12.5px}
.select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.warn{background:var(--warn-soft);color:#B45309}

/* ── Modal ─────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(15,13,35,.55);display:grid;place-items:center;z-index:50;padding:20px;backdrop-filter:blur(2px)}
.modal{background:#fff;border-radius:16px;width:100%;max-width:440px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{margin:0 0 4px;font-size:18px}
.reasons{display:grid;gap:8px;margin:16px 0}
.reasons label{display:flex;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.reasons label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* ── Toast ─────────────────────────────────────────── */
.toasts{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:up .2s}
.toast.ok{background:#14532D} .toast.bad{background:#7F1D1D}
@keyframes up{from{transform:translateY(10px);opacity:0}}

/* ── Full-screen NEW ORDER alert ───────────────────── */
.alarm{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  background:radial-gradient(900px 600px at 50% 30%,rgba(255,255,255,.12),transparent 60%),linear-gradient(135deg,#4C1D95,#9D174D 55%,#DB2777);
  animation:alarmbg 1.2s infinite alternate;padding:24px;text-align:center}
@keyframes alarmbg{to{filter:saturate(1.35) brightness(1.08)}}
.alarm .ring{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;animation:ring 1s infinite;margin-bottom:22px}
.alarm .ring svg{width:56px;height:56px;animation:shake .5s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 46px rgba(255,255,255,0)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.alarm h1{font-size:56px;margin:0;letter-spacing:-.02em;line-height:1}
.alarm .a-id{font-size:22px;opacity:.9;margin:10px 0 4px;font-weight:700}
.alarm .a-amt{font-size:40px;font-weight:800;margin:6px 0}
.alarm .a-items{max-width:620px;background:rgba(0,0,0,.18);border-radius:14px;padding:14px 18px;margin:16px 0 26px;font-size:17px;line-height:1.6;text-align:left;max-height:30vh;overflow:auto;width:100%}
.alarm .a-items div{display:flex;justify-content:space-between;gap:20px}
.alarm .a-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.alarm .a-btns button{padding:18px 36px;font-size:19px;font-weight:800;border-radius:14px}
.a-accept{background:#fff;color:#4C1D95;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.a-view{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.5)!important}
.a-more{margin-top:16px;font-size:14px;opacity:.85}
.a-prep{display:flex;gap:8px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.a-prep button{padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.15);font-weight:700}
.a-prep button.on{background:#fff;color:#4C1D95}

/* Go-live gate (unlocks sound + fullscreen with a user gesture) */
.gate{position:fixed;inset:0;z-index:90;background:rgba(21,19,43,.92);display:grid;place-items:center;color:#fff;text-align:center;padding:24px}
.gate h2{font-size:30px;margin:14px 0 8px}
.gate p{color:#C9C4F2;max-width:460px;margin:0 auto 22px;line-height:1.5}
.gate ul{text-align:left;display:inline-block;color:#DDD8FF;margin:0 0 24px;line-height:1.9}

@media (max-width:1100px){.d-body{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media (max-width:820px){.login{grid-template-columns:1fr}.login-hero{display:none}.board{grid-template-columns:1fr}.board.has-sel .list-col{display:none}.board:not(.has-sel) .detail{display:none}.shell{grid-template-columns:1fr}.rail{flex-direction:row;position:fixed;bottom:0;left:0;right:0;z-index:20;padding:6px;overflow-x:auto}.rail .logo-mark,.rail-spacer{display:none}.rail-btn{width:auto;min-width:66px}.main{padding-bottom:70px}.tab{padding:14px 12px}.topbar{padding:0 12px;gap:10px}.topbar h1{display:none}}

/* ── v2: shared page components ───────────────────── */
.page{padding:24px 28px 40px}
.page>*{max-width:1440px;margin-left:auto;margin-right:auto}
.page-h .sub{color:var(--ink-3);font-size:13px;margin-top:3px}
.panel h3{font-weight:700}
.stat-chip{display:flex;gap:6px;align-items:baseline;padding:8px 14px;border-radius:10px;font-size:13px;background:#fff;border:1px solid var(--line)}
.stat-chip b{font-size:17px}
.stat-chip.ok b{color:var(--ok)} .stat-chip.bad b{color:var(--bad)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tbl{padding:0;overflow:hidden}
.tbl-scroll{overflow-x:auto}
.tbl-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tbl-head h3{margin:0}
.table td{height:56px}
.table tr.click{cursor:pointer}
.table tr.dim td{background:#FCFBFE}
.table tr.dim .clip,.table tr.dim .thumb{opacity:.6}
.table input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.clip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.strike{text-decoration:line-through;font-size:12px}
.thumb.sm{width:42px;height:42px;border-radius:9px;flex-shrink:0}
.thumb.ph,.ph{display:grid;place-items:center;background:linear-gradient(135deg,#EDE7FE,#FCE7F3);color:var(--brand-ink);font-weight:800;font-size:13px}
.avail{display:flex;align-items:center;gap:10px;white-space:nowrap}
.avail span{font-size:12.5px;font-weight:600}
.ok-t{color:var(--ok)}
.bulkbar{display:flex;align-items:center;gap:8px;background:var(--rail);color:#fff;border-radius:12px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.bulkbar .grow{flex:1}
.menu-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.cat-list{position:sticky;top:0;max-height:calc(100vh - 180px);overflow-y:auto;padding:12px}
.cat-list h3{padding:4px 8px}
.cat{display:flex;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border-radius:9px;text-align:left;font-size:13.5px;color:var(--ink-2)}
.cat:hover{background:#F6F5FB;color:var(--ink)}
.cat.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.cat i{font-style:normal;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cat.on i{color:var(--brand)}
.pager{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:#FCFBFE;flex-wrap:wrap}
.list .pager{border:1px solid var(--line);border-radius:10px;background:#fff;justify-content:center;padding:8px}
.list .pager .pager-size{display:none}
.pager-info{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:auto}
.pager-btns{display:flex;gap:4px;align-items:center}
.pager-btns button{min-width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;padding:0 8px}
.pager-btns button:hover:not([disabled]){border-color:var(--brand);color:var(--brand)}
.pager-btns button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager-btns button[disabled]{opacity:.4;cursor:default}
.pager-gap{color:var(--ink-3);padding:0 4px}
.pager-size{padding:6px 8px;font-size:12.5px}
.link{color:var(--brand);font-weight:600;font-size:13px;padding:0;margin-top:6px}
.link:hover{text-decoration:underline}
.sel{user-select:all}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2 .field{margin:10px 0}
textarea.input{resize:vertical;line-height:1.5}
.modal{max-height:calc(100vh - 40px);overflow-y:auto}
.modal .field{margin:12px 0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Payouts */
.kpi.hero{background:linear-gradient(135deg,#2A1660,#5B21B6 70%,#9D174D);color:#fff;border:0}
.kpi.hero small{color:#D9CFFF} .kpi.hero .delta{color:#E9E3FF}
.kpi .delta.muted,.kpi .delta .muted{color:var(--ink-3)}
.pay-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.kv{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid #F1F0F6;min-width:0}
.kv:last-child{border-bottom:0}
.kv span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:600}
.kv b{font-weight:600;overflow-wrap:anywhere}
.steps{margin:0 0 8px;padding-left:18px;color:var(--ink-2);font-size:13px;line-height:1.6}
.stmt{background:#FAFAFD;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-top:14px}
.mini-list{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px 12px}
.avail-box{display:flex;justify-content:space-between;align-items:center;background:var(--ok-soft);color:#14532D;border-radius:10px;padding:12px 14px;margin-top:14px}
.avail-box b{font-size:20px}

/* Account */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.subtabs button{padding:11px 16px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subtabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.profile-card{padding:0;overflow:hidden}
.pc-banner{height:110px;background:linear-gradient(120deg,#2A1660,#6D28D9 55%,#DB2777);background-size:cover;background-position:center}
.pc-body{display:flex;gap:16px;align-items:flex-end;padding:0 20px 16px;margin-top:-34px}
.pc-logo{width:84px;height:84px;border-radius:18px;border:4px solid #fff;object-fit:cover;background:#fff;flex-shrink:0;font-size:26px;box-shadow:var(--shadow)}
.pc-name{margin:0 0 2px;font-size:21px;text-transform:none;letter-spacing:0;color:var(--ink)}
.pc-rating{background:var(--ok);color:#fff;font-weight:800;padding:6px 10px;border-radius:8px}
.kv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;padding:4px 20px 10px}
.kyc-head{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.kyc-head.ok{background:var(--ok-soft);color:#14532D} .kyc-head.warn{background:var(--warn-soft);color:#78350F} .kyc-head.bad{background:var(--bad-soft);color:#7F1D1D}
.kyc-badge{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;background:rgba(255,255,255,.7)}
.progress{height:6px;border-radius:3px;background:#EFEEF6;overflow:hidden;margin-bottom:8px}
.progress i{display:block;height:100%;background:var(--ok)}
.doc-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #F1F0F6}
.doc-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#EFEEF6;color:var(--ink-3);font-weight:800;flex-shrink:0}
.doc-ic.ok{background:var(--ok-soft);color:var(--ok)}
.strength{height:5px;border-radius:3px;background:#EFEEF6;overflow:hidden;margin:-4px 0 6px}
.strength i{display:block;height:100%;width:0;transition:width .2s}
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.legal-nav{padding:10px;position:sticky;top:0}
.legal-doc{padding:28px 34px}
.legal-doc h2{margin:0 0 4px;font-size:22px}
.legal-doc h4{margin:20px 0 6px;font-size:15px}
.legal-doc p{margin:0;color:var(--ink-2);line-height:1.65;max-width:72ch}
.about{display:grid;gap:16px;max-width:760px;padding:28px}
.about p{margin:0;color:var(--ink-2);line-height:1.6}

/* Help */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:16px}
.contact{display:flex;align-items:center;gap:12px;margin:0;min-width:0}
.contact>div:nth-child(2){flex:1;min-width:0}
.contact small{display:block;color:var(--ink-3);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.contact b{font-size:15px}
.c-ic{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.c-ic.wa{background:var(--ok-soft);color:var(--ok)}
.c-ic svg{width:20px;height:20px}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.topic{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;text-align:left;font-weight:600;transition:border .15s,background .15s}
.topic:hover{border-color:var(--brand);background:var(--brand-soft)}
.topic svg{width:20px;height:20px;color:var(--brand)}
.faq{border-bottom:1px solid #F1F0F6;padding:12px 0}
.faq:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:'+';color:var(--brand);font-weight:800}
.faq[open] summary::after{content:'−'}
.faq p{margin:8px 0 0;color:var(--ink-2);line-height:1.55;font-size:13.5px}

/* rail fits 8 items */
.rail-btn{padding:9px 4px;gap:5px}
.rail-btn svg{width:21px;height:21px}

@media (max-width:1100px){.menu-layout,.pay-layout,.legal{grid-template-columns:1fr}.cat-list{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto}.cat-list h3{display:none}.cat{width:auto;white-space:nowrap}.kv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.row2,.kv-grid{grid-template-columns:1fr}.page{padding:16px}.legal-doc{padding:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.grow{flex:1}
a.btn{text-decoration:none}
.profile-card .pc-name{margin:0 0 2px;font-size:21px;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.pc-body>div:nth-child(2){padding-bottom:4px}
@media (max-width:820px){.topbar [data-sim],.topbar .chip-live{display:none}}

/* Login: left panel is the brand artwork, sized to its own 889×1086 ratio so nothing is cropped */
.login{grid-template-columns:min(calc(100vh * 889 / 1086), 56vw) 1fr;min-height:100vh}
.login-hero{padding:0;background:#21124F;overflow:hidden;position:relative;display:block}
.login-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
@media (max-width:820px){.login{grid-template-columns:1fr}.login-hero{display:none}}

/* Login hero intro is driven by runHeroIntro() in app.js (waits for both images to load). */
.login-hero .hero-a{opacity:0}
.login-hero .hero-b{opacity:1}
.login-hero.no-intro .hero-a{display:none}
.login-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.login-links button{font-size:12.5px;color:var(--ink-3);font-weight:600;padding:2px 0}
.login-links button:hover{color:var(--brand);text-decoration:underline}
.modal .legal-doc h2{font-size:20px;margin:0 0 4px}
.modal .legal-doc h4{margin:16px 0 4px;font-size:14px}
.modal .legal-doc p{margin:0;color:var(--ink-2);line-height:1.6;font-size:13.5px}

/* Live connection indicator */
.topbar{position:relative}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;transition:opacity .4s}
.topbar.is-live::after{opacity:1;background:linear-gradient(90deg,transparent 0%,#22C55E 20%,#A78BFA 50%,#F472B6 80%,transparent 100%);background-size:200% 100%;animation:liveSweep 2.8s linear infinite}
.topbar.is-down::after{opacity:1;background:repeating-linear-gradient(90deg,#F59E0B 0 12px,transparent 12px 24px);background-size:48px 100%;animation:liveDash 1s linear infinite}
@keyframes liveSweep{from{background-position:200% 0}to{background-position:0 0}}
@keyframes liveDash{from{background-position:0 0}to{background-position:48px 0}}
.chip-live{gap:8px;padding:6px 12px 6px 10px;border:1px solid rgba(255,255,255,.08);transition:background .3s,color .3s}
.chip-live.on{background:rgba(34,197,94,.12);color:#BBF7D0}
.chip-live.off{background:rgba(245,158,11,.14);color:#FDE68A}
.live-dot{position:relative;width:10px;height:10px;display:inline-block}
.live-dot i{position:absolute;inset:0;border-radius:50%;background:#22C55E}
.live-dot i:last-child{animation:liveRing 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.chip-live.off .live-dot i{background:#F59E0B}
.chip-live.off .live-dot i:last-child{animation:liveBlink 1s ease-in-out infinite}
@keyframes liveRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@keyframes liveBlink{50%{opacity:.2}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.eq b{width:2px;background:#4ADE80;border-radius:1px;animation:eq 1s ease-in-out infinite}
.eq b:nth-child(2){animation-delay:.2s}.eq b:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.ocard.fresh{animation:cardIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.topbar.is-live::after,.topbar.is-down::after,.live-dot i,.eq b{animation:none!important}}

/* Sales chart: green bars that fill the card, amount above each bar */
.chart-panel{display:flex;flex-direction:column}
.chart-panel .bars{flex:1;min-height:220px;height:auto;padding-top:22px}
.bar i{background:linear-gradient(180deg,#22C55E,#15803D);transform-origin:bottom;animation:barUp .6s cubic-bezier(.2,.8,.2,1) both}
.bar i:hover{filter:brightness(1.08)}
.bar em{font-style:normal;font-size:11px;font-weight:700;color:#15803D;white-space:nowrap;font-variant-numeric:tabular-nums;min-height:14px}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.size-line{font-size:13px;color:var(--ink-2);margin-top:2px;font-variant-numeric:tabular-nums}
.size-line .pack{display:inline-block;background:#EEF7F1;color:#15803D;font-weight:700;border-radius:5px;padding:1px 6px;font-size:12px}
.size-line b{color:var(--ink);font-weight:800}

/* Order items: size / quantity in its own centred column */
.item{grid-template-columns:18px 48px minmax(0,1fr) minmax(150px,220px) 72px}
.size-col{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;text-align:center;font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink-2)}
.size-col .pack{background:#EEF7F1;color:#15803D;font-weight:700;border-radius:6px;padding:3px 8px;font-size:13px;white-space:nowrap}
.size-col .mult{font-weight:600;white-space:nowrap}
.size-col .eqs{white-space:nowrap}
.size-col .eqs b{color:var(--ink);font-weight:800;font-size:14px}
@media (max-width:640px){.item{grid-template-columns:18px 40px minmax(0,1fr) 60px}.size-col{grid-column:3 / 4;justify-content:flex-start}}

/* Today at a glance (empty order pane) */
.today{padding:22px 24px 30px;display:flex;flex-direction:column;gap:16px}
.today-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.today-h h2{margin:0;font-size:22px;letter-spacing:-.01em}
.today-closed{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-weight:600}
.today-kpis{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:12px}
.tk{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tk small{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.tk b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tk span{font-size:12px;color:var(--ink-3)}
.tk.main{background:linear-gradient(135deg,#065F46,#16A34A);border:0;color:#fff}
.tk.main small,.tk.main span{color:#D1FAE5}
.tk.warn b{color:var(--bad)}
.today-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.today-grid .panel{margin:0}
@media (max-width:1300px){.today-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.today-grid{grid-template-columns:1fr}}

/* Call partner care */
.care-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px;border-radius:999px;background:#16A34A;color:#fff;font-weight:700;font-size:13.5px;box-shadow:0 4px 14px rgba(22,163,74,.35);transition:transform .1s,filter .15s;white-space:nowrap}
.care-btn:hover{filter:brightness(1.08)}
.care-btn:active{transform:scale(.97)}
.care-btn svg{width:17px;height:17px;flex-shrink:0}
.care-btn.waiting{background:#FEF3C7;color:#92400E;box-shadow:none;border:1px solid #FCD34D}
.care-btn.calling{background:#16A34A;animation:carePulse 1.4s ease-in-out infinite}
.care-btn.calling svg{animation:shake .5s infinite}
@keyframes carePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.btn-care{background:#16A34A;color:#fff;box-shadow:0 4px 14px rgba(22,163,74,.3)} .btn-care:hover{filter:brightness(1.07)}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:12px}
.care-modal{text-align:left}
.care-modal h3{font-size:20px;margin:10px 0 4px}
.care-modal p{margin:0 0 6px;line-height:1.5}
.care-ic{width:56px;height:56px;border-radius:16px;background:#DCFCE7;color:#16A34A;display:grid;place-items:center}
.care-ic svg{width:28px;height:28px}
.care-ic.ring{animation:carePulse 1.4s infinite}
.care-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.care-topics label{cursor:pointer}
.care-topics input{position:absolute;opacity:0;pointer-events:none}
.care-topics span{display:block;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.care-topics input:checked+span{border-color:#16A34A;background:#F0FDF4;color:#14532D}
.care-topics input:focus-visible+span{outline:2px solid #16A34A;outline-offset:2px}
.care-actions{flex-wrap:wrap}
.care-actions .btn-care{flex:1;padding:13px 18px;font-size:15px}
.care-direct{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#F0FDF4;border-radius:10px;padding:10px 12px;margin-top:12px;font-size:13.5px}
.care-steps{display:flex;flex-direction:column;gap:2px;margin:14px 0 4px;border-left:2px solid var(--line);padding-left:14px}
.care-steps div{position:relative;font-size:13.5px;color:var(--ink-3);padding:4px 0}
.care-steps div::before{content:'';position:absolute;left:-20px;top:9px;width:10px;height:10px;border-radius:50%;background:#D7D5E5}
.care-steps .done{color:var(--ink)} .care-steps .done::before{background:#16A34A}
.care-steps .now{color:var(--ink);font-weight:600} .care-steps .now::before{background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.care-steps small{color:var(--ink-3);font-weight:400;margin-left:6px}
.care-hero{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:16px;margin-bottom:16px;background:linear-gradient(120deg,#052E16,#166534 55%,#16A34A);color:#fff;flex-wrap:wrap}
.care-hero h3{margin:0 0 4px;font-size:20px;color:#fff;text-transform:none;letter-spacing:-.01em}
.care-hero p{margin:0;color:#D1FAE5;font-size:14px;line-height:1.5}
.care-hero-ic{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0}
.care-hero-ic svg{width:28px;height:28px}
.care-hero .btn-care{background:#fff;color:#166534;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.care-hero.waiting{background:linear-gradient(120deg,#78350F,#B45309)}
.care-hero.calling .care-hero-ic{animation:carePulse 1.4s infinite}
@media (max-width:1100px){.care-btn span{display:none}.care-btn{padding:0 11px}}
.care-number{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:12px;padding:14px 16px;margin:14px 0 6px;display:flex;flex-direction:column;gap:2px}
.care-number small{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#15803D}
.care-number b{font-size:26px;letter-spacing:.02em;color:#14532D;font-variant-numeric:tabular-nums}
.care-number span{font-size:13px;color:#166534}

/* Login: brand mark on top, copyright footer at the bottom */
.login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:40px 32px 92px}
.login-brand{display:flex;align-items:flex-start;gap:2px;margin-bottom:28px}
.login-brand img{height:56px;width:auto;display:block}
.login-brand .tm{font-size:13px;font-weight:700;color:var(--ink-2);line-height:1;margin-top:2px}
.login-foot{position:absolute;left:32px;right:32px;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px}
.login-foot span:first-child{color:var(--ink-2);font-weight:600}
.brandMark{font-size:.75em;vertical-align:super;line-height:0;margin-left:1px}
@media (max-width:820px){.login-form{padding:28px 20px 100px}.login-brand img{height:48px}}
.about-pub{display:flex;flex-direction:column;gap:10px}
.about-pub .about-logo{height:52px;width:auto;align-self:flex-start;margin-bottom:4px}
.about-pub .about-tag{font-weight:700;color:var(--ink);font-size:15px}
.about-pub p{margin:0;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* Delivery partner photo */
.avatar.rider-photo{object-fit:cover;background:#E8F7EE;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.avatar.rider-av{background:#E8F7EE;color:var(--ok)}
.side-card .avatar{width:48px;height:48px;font-size:15px}
.r-rate{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;background:var(--ok);border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:middle}
.r-veh{font-weight:600;color:var(--ink-2)}

/* Frizbee F mark (replaces the purple "F" tile) */
.logo-mark{background:#15132B;box-shadow:0 4px 14px rgba(0,0,0,.25);padding:5px;overflow:hidden}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}
.rail .logo-mark{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.gate .logo-mark{background:rgba(255,255,255,.08);box-shadow:none;padding:12px;border-radius:20px}

/* Forgot / reset password */
.link-btn{display:block;margin:14px auto 0;background:none;border:0;padding:6px 8px;color:var(--brand);font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:6px}
.link-btn:hover{text-decoration:underline}
.link-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sent-ic{width:56px;height:56px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:26px;margin:4px 0 14px}
.sent-tips{margin:16px 0 18px;padding:12px 14px 12px 30px;background:#FAF8F6;border:1px solid #EEE9E4;border-radius:10px;font-size:13px;line-height:1.6;color:#4A4A63}
.pw-meter{height:6px;border-radius:4px;background:#EEE;overflow:hidden;margin-top:8px}
.pw-meter>i{display:block;height:100%;width:0;transition:width .25s,background .25s}

/* ===== Phones & small tablets ===== */
html,body{max-width:100%;overflow-x:hidden}
.grid2>*,.row2>*,.d-body>*,.kv-grid>*,.today-grid>*{min-width:0}
@media (max-width:820px){
  .shell{height:100vh;height:100dvh}
  .grid2{grid-template-columns:1fr!important}
  /* bottom navigation */
  .rail{height:auto;padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:2px;justify-content:space-between;scrollbar-width:none;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .rail::-webkit-scrollbar{display:none}
  .rail-btn{flex:1 0 56px;min-width:56px;width:auto;padding:7px 2px;gap:3px;font-size:9px;letter-spacing:.02em}
  .rail-btn svg{width:20px;height:20px}
  .rail-btn.active::before{left:22%;right:22%;top:-4px;bottom:auto;width:auto;height:3px}
  .rail-badge{top:2px;right:8px}
  .main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* top bar */
  .topbar{height:56px;gap:8px;padding:0 10px}
  .topbar .vsep,.topbar [data-fs]{display:none}
  .outlet{min-width:0;flex:0 1 auto}
  .outlet b{display:block;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .outlet small{white-space:nowrap}
  .topbar .chip-live{display:inline-flex!important;padding:6px;min-width:0}
  .topbar .chip-live>span:not(.live-dot),.topbar .chip-live .eq{display:none}
  .topbar .toggle{flex-shrink:0}
  .topbar .icon-btn{width:38px;height:38px;flex-shrink:0}
  /* order tabs scroll sideways */
  .tabs{overflow-x:auto;padding:0 6px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex-shrink:0;padding:13px 12px}
  /* sub tabs / segments / tables */
  .subtabs,.seg{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .subtabs button,.seg button{white-space:nowrap;flex-shrink:0}
  .tbl-scroll{-webkit-overflow-scrolling:touch}
  .page-h{flex-wrap:wrap;gap:10px}
  .page-h .grow{display:none}
  /* overlays */
  .gate{padding:20px}
  .gate h2{font-size:24px}
  .gate p,.gate ul{max-width:100%}
  .gate ul{display:block;padding-left:20px}
  .modal-bg{padding:12px;place-items:end center}
  .modal{max-width:100%;border-radius:16px 16px 12px 12px;max-height:calc(100dvh - 24px)}
  .alarm{padding:20px 16px}
  /* bigger touch targets */
  .btn{min-height:42px}
  .input,.select{font-size:16px} /* stops iOS zoom on focus */
}
@media (max-width:380px){
  .rail-btn span{font-size:8.5px}
  .care-btn{padding:0 9px}
  .outlet b{max-width:34vw}
}
@media (max-width:820px){
  .rail{justify-content:stretch;overflow-x:hidden}
  .rail-btn{flex:1 1 0;min-width:0;padding:7px 0;font-size:9.5px;letter-spacing:0;text-transform:none;font-weight:600}
  .rail-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .set-row{flex-wrap:wrap;gap:8px 12px}
  .set-row .grow{flex:1 1 100%}
  .set-row>.select,.set-row>select,.set-row>.input{flex:1 1 100%;width:100%}
  .d-head,.d-top{flex-wrap:wrap}
}
/* Go live — light green */
.go-live-btn{padding:16px 44px;font-size:17px;font-weight:800;background:#4ADE80;color:#052E16;border-radius:14px;box-shadow:0 10px 30px rgba(74,222,128,.35);transition:transform .15s,background .15s,box-shadow .15s;animation:goPulse 2s ease-in-out infinite}
.go-live-btn:hover{background:#6EE7A0;transform:translateY(-1px);box-shadow:0 14px 36px rgba(74,222,128,.45)}
.go-live-btn:active{transform:translateY(0)}
.go-live-btn:focus-visible{outline:3px solid #BBF7D0;outline-offset:3px}
@keyframes goPulse{0%,100%{box-shadow:0 10px 30px rgba(74,222,128,.35),0 0 0 0 rgba(74,222,128,.45)}50%{box-shadow:0 10px 30px rgba(74,222,128,.35),0 0 0 12px rgba(74,222,128,0)}}
@media (prefers-reduced-motion:reduce){.go-live-btn{animation:none}}