/* Layout: a control room of four real surfaces — the customer website (phone browser or desktop window), the branch web screen on a tablet, the courier Flutter app, and the admin web panel — each in its true device chrome */
:root{
  --bg:#F3F4F3; --surface:#FFFFFF; --surface-2:#EEF2F1; --ink:#0F1B1A; --ink-2:#2C3A38; --muted:#5E6C6A; --muted-2:#8E9B99; --line:#E2E8E6; --card-line:transparent;
  --brand:#0E9F7E; --brand-600:#0B8669; --brand-700:#0A6B56; --brand-soft:#EDF8F4; --brand-100:#D3F0E6; --on-brand:#FFFFFF;
  --deep:#063F33; --on-deep:#FFFFFF; --on-deep-2:#B9DCD1; --mint:#9BE3CC;
  --accent:#FF6A4D; --accent-600:#E8553A; --accent-soft:#FFE6E0; --on-accent:#FFFFFF;
  --warn:#F5A524; --warn-ink:#B87A0E; --warn-soft:#FDF1D6;
  --danger:#E5484D; --danger-ink:#C93A3F; --danger-soft:#FDE3E4;
  --info:#3E7BFA; --info-soft:#E4EDFF; --star:#F5A524;
  --map-land:#E9F1ED; --map-block:#DCE7E2; --map-park:#CBEBD9; --map-tree:#B5E2C9; --map-water:#CFE5F2; --map-road:#FFFFFF;
  --frame:#0F1B1A; --chrome:#E4E9E7; --field:#EEF1F0; --white:#FFFFFF;
  --snow-1:#E3F5FF; --snow-2:#E5ECF6; --snow-bg:#F7F9FB; --snow-act:#F0F2F5; --snow-ink:#1C1C1C;
  --scrim:rgba(8,20,18,.52); --glass:rgba(255,255,255,.92);
  --sh-1:0 1px 2px rgba(15,27,26,.05),0 14px 32px -12px rgba(15,27,26,.16);
  --sh-2:0 30px 70px -24px rgba(15,27,26,.38);
  --sh-brand:0 14px 26px -12px rgba(14,159,126,.65);
  --f-display:"Zain","Almarai",system-ui,sans-serif;
  --f-body:"Almarai",system-ui,"Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1514; --surface:#14201E; --surface-2:#1B2A28; --ink:#E6EFED; --ink-2:#C9D6D3; --muted:#97AAA6; --muted-2:#6F827E; --line:#253634; --card-line:#22322F;
  --brand:#2BB892; --brand-600:#3FC9A2; --brand-700:#7EDCC0; --brand-soft:#10302A; --brand-100:#16443A; --on-brand:#04221B;
  --deep:#0A2E27; --on-deep:#E9F7F2; --on-deep-2:#A7CFC3; --mint:#9BE3CC;
  --accent:#FF8466; --accent-600:#FF9A80; --accent-soft:#3A221B; --on-accent:#2A0E06;
  --warn:#E7AE4C; --warn-ink:#F4CF85; --warn-soft:#352A14;
  --danger:#F0726A; --danger-ink:#F8A9A3; --danger-soft:#3C1F1D;
  --info:#7AA2FF; --info-soft:#1B2745; --star:#F2B544;
  --map-land:#14211E; --map-block:#1B2B27; --map-park:#173A2E; --map-tree:#1F4A3A; --map-water:#14303F; --map-road:#25383A;
  --frame:#000000; --chrome:#1A2725; --field:#22312F; --white:#FFFFFF;
  --snow-1:#15283A; --snow-2:#1E2536; --snow-bg:#17211F; --snow-act:#20302C; --snow-ink:#E8EEEC;
  --scrim:rgba(0,0,0,.6); --glass:rgba(20,32,30,.9);
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 14px 32px -12px rgba(0,0,0,.6);
  --sh-2:0 30px 70px -24px rgba(0,0,0,.8);
  --sh-brand:0 14px 26px -12px rgba(43,184,146,.45); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0C1514; --surface:#14201E; --surface-2:#1B2A28; --ink:#E6EFED; --ink-2:#C9D6D3; --muted:#97AAA6; --muted-2:#6F827E; --line:#253634; --card-line:#22322F;
  --brand:#2BB892; --brand-600:#3FC9A2; --brand-700:#7EDCC0; --brand-soft:#10302A; --brand-100:#16443A; --on-brand:#04221B;
  --deep:#0A2E27; --on-deep:#E9F7F2; --on-deep-2:#A7CFC3; --mint:#9BE3CC;
  --accent:#FF8466; --accent-600:#FF9A80; --accent-soft:#3A221B; --on-accent:#2A0E06;
  --warn:#E7AE4C; --warn-ink:#F4CF85; --warn-soft:#352A14;
  --danger:#F0726A; --danger-ink:#F8A9A3; --danger-soft:#3C1F1D;
  --info:#7AA2FF; --info-soft:#1B2745; --star:#F2B544;
  --map-land:#14211E; --map-block:#1B2B27; --map-park:#173A2E; --map-tree:#1F4A3A; --map-water:#14303F; --map-road:#25383A;
  --frame:#000000; --chrome:#1A2725; --field:#22312F; --white:#FFFFFF;
  --snow-1:#15283A; --snow-2:#1E2536; --snow-bg:#17211F; --snow-act:#20302C; --snow-ink:#E8EEEC;
  --scrim:rgba(0,0,0,.6); --glass:rgba(20,32,30,.9);
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 14px 32px -12px rgba(0,0,0,.6);
  --sh-2:0 30px 70px -24px rgba(0,0,0,.8);
  --sh-brand:0 14px 26px -12px rgba(43,184,146,.45); color-scheme:dark }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.6;direction:rtl}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px;width:100%;min-width:0}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
textarea{resize:vertical;min-height:72px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3,h4,h5{margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.ic.fill{fill:currentColor;stroke:none}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.center{justify-content:center}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:10px}
.ph{display:block;width:40px;height:40px;border-radius:50%;background-color:var(--surface-2);background-size:cover;background-position:center;flex:none}
.cv{background-color:var(--surface-2);background-size:cover;background-position:center}

/* ---------- demo top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-block:10px;padding-inline:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.logo{flex:none}
.logo .lg-pin{fill:var(--brand)}.logo .lg-bag{fill:var(--on-brand)}.logo .lg-h{fill:none;stroke:var(--on-brand);stroke-width:1.7;stroke-linecap:round}
.wordmark{font-family:var(--f-display);font-weight:900;font-size:24px;line-height:1;direction:ltr;letter-spacing:.2px;color:var(--ink)}
.wordmark b{color:var(--brand);font-weight:900}
.brand .tag{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.seg{display:flex;gap:3px;background:var(--surface-2);padding:4px;border-radius:14px;overflow-x:auto;max-width:100%;scrollbar-width:none}
.seg button{border:0;background:transparent;padding:7px 13px;border-radius:10px;white-space:nowrap;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:38px;height:38px;display:grid;place-items:center;color:var(--ink)}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);padding:6px 11px;border-radius:999px;background:var(--surface-2)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync.live i{background:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}

/* ---------- stage + devices ---------- */
.stage{padding-block:24px 56px;padding-inline:16px;display:grid;gap:30px 24px;margin-inline:auto;max-width:1680px;align-items:start}
.stage.all{grid-template-columns:minmax(0,390px) minmax(0,1fr) minmax(0,390px);grid-template-areas:"cust branch cour" "admin admin admin"}
.stage.all.cdesk{grid-template-areas:"cust cust cust" "branch branch cour" "admin admin admin"}
.a-customer{grid-area:cust}.a-branch{grid-area:branch}.a-courier{grid-area:cour}.a-admin{grid-area:admin}
@media (max-width:1280px){.stage.all{grid-template-columns:repeat(2,minmax(0,390px));justify-content:center;grid-template-areas:"cust cour" "branch branch" "admin admin"}.stage.all.cdesk{grid-template-areas:"cust cust" "branch branch" "cour cour" "admin admin"}}
@media (max-width:860px){.stage.all,.stage.all.cdesk{grid-template-columns:minmax(0,1fr);grid-template-areas:"cust" "cour" "branch" "admin"}}
.stage.solo{grid-template-columns:minmax(0,1fr);max-width:1440px}
.stage.solo .dev{grid-area:auto}
.dev{display:flex;flex-direction:column;gap:10px;min-width:0}
.dev.phone{justify-self:center;width:min(390px,100%)}
.dev-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;font-size:13.5px;color:var(--ink-2);padding-inline:4px}
.dev-label .ic{color:var(--muted)}
.plat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap;flex:none}
.plat.p-web{background:var(--info-soft);color:var(--info)}
.plat.p-app{background:var(--accent-soft);color:var(--accent-600)}
.plat.p-part{background:var(--warn-soft);color:var(--warn-ink)}
.plat.p-adm{background:var(--ink);color:var(--surface)}
.devsw{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;margin-inline-start:auto}
.devsw button{border:0;background:none;border-radius:8px;padding:3px 10px;font-weight:700;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.devsw button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.screen{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);min-width:0}
.dev.phone .screen{height:800px;border-radius:46px;border:10px solid var(--frame);box-shadow:var(--sh-2)}
.dev.tablet .screen{height:720px;border-radius:30px;border:12px solid var(--frame);box-shadow:var(--sh-2)}
.dev.desk .screen{border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-2)}
.a-customer.desk .screen{height:780px}
.stage.solo .a-customer.desk .screen{height:calc(100dvh - var(--tb,64px) - 96px);min-height:640px}
.a-admin.desk .screen{min-height:640px}
@media (max-width:600px){
  .stage.solo{padding:0;gap:0}
  .stage.solo .dev-label,.stage.solo .chrome{display:none}
  .stage.solo .dev{width:100%}
  .stage.solo .dev .screen{height:calc(100dvh - var(--tb,64px));border:0;border-radius:0;box-shadow:none;min-height:0}
  .stage.solo .a-admin .screen,.stage.solo .a-branch .screen{height:auto;min-height:calc(100dvh - var(--tb,64px))}
}

/* device chrome */
.chrome{flex:none}
.sbar{display:flex;align-items:center;justify-content:space-between;height:40px;padding-inline:26px;font-weight:800;font-size:14.5px;color:var(--ink);background:var(--surface)}
.sbar svg{width:66px;height:12px;color:var(--ink)}
.sbar.over{position:absolute;inset-inline:0;top:0;z-index:6;background:transparent}
.murl{display:flex;align-items:center;gap:12px;height:50px;padding-inline:14px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink-2)}
.murl-f{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:36px;padding-inline:13px;border-radius:999px;background:var(--field);overflow:hidden;direction:ltr}
.murl-f .ic,.win-url .ic.lock,.tbar .ic.lock{color:var(--brand);width:14px;height:14px}
.murl-f span,.win-url span,.tbar span.u{font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.murl-f i,.win-url i,.tbar i{font-style:normal;font-weight:400;color:var(--muted)}
.murl-tabs{width:21px;height:21px;border-radius:6px;border:1.8px solid currentColor;display:grid;place-items:center;font-size:11px;font-weight:800}
.win-tabs{display:flex;align-items:flex-end;gap:16px;height:42px;padding-inline:16px;background:var(--chrome);direction:ltr;color:var(--muted)}
.lights{display:flex;gap:7px;align-self:center}
.lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
.win-tab{display:flex;align-items:center;gap:8px;height:34px;padding-inline:12px;width:min(280px,45%);border-radius:10px 10px 0 0;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:700}
.win-tab span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
.win-bar{display:flex;align-items:center;gap:14px;height:48px;padding-inline:16px;background:var(--surface);border-bottom:1px solid var(--line);direction:ltr;color:var(--ink-2)}
.win-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:34px;padding-inline:16px;border-radius:999px;background:var(--field)}
.win-av{width:28px;height:28px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center}
.tbar{display:flex;align-items:center;gap:8px;height:38px;padding-inline:14px;background:var(--chrome);direction:ltr;color:var(--muted);font-size:12.5px}
.tbar .tf{display:flex;align-items:center;gap:6px;height:28px;padding-inline:12px;border-radius:999px;background:var(--surface);min-width:0;flex:1;max-width:520px;margin-inline:auto}

/* ---------- primitives ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:10px 16px;font-weight:800;background:var(--surface-2);color:var(--ink);text-decoration:none;white-space:nowrap;min-height:42px}
.btn.primary{background:var(--brand);color:var(--on-brand)}
.btn.primary.pill,.btn.cta{border-radius:999px;box-shadow:var(--sh-brand)}
.btn.accent{background:var(--accent);color:var(--on-accent)}
.btn.dark{background:var(--ink);color:var(--surface)}
.btn.mint{background:var(--mint);color:#063F33}
.btn.ghost{background:var(--surface);border:1px solid var(--line)}
.btn.soft{background:var(--brand-soft);color:var(--brand-700)}
.btn.danger{background:var(--danger-soft);color:var(--danger-ink)}
.btn.block{width:100%}
.btn.lg{min-height:54px;padding:14px 22px;font-size:15.5px;border-radius:16px}
.btn.lg.pill,.btn.lg.cta{border-radius:999px}
.btn.sm{min-height:32px;padding:6px 12px;font-size:12.5px;border-radius:10px}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.link{border:0;background:none;color:var(--brand-600);font-weight:800;padding:0;text-decoration:underline;text-underline-offset:3px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--muted);white-space:nowrap;line-height:1.5}
.chip .dot,.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;display:inline-block}
.chip.brand,.chip.ok{background:var(--brand-100);color:var(--brand-700)}
.chip.accent{background:var(--accent-soft);color:var(--accent-600)}
.chip.warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip.danger{background:var(--danger-soft);color:var(--danger-ink)}
.chip.info{background:var(--info-soft);color:var(--info)}
.chip.dark{background:var(--ink);color:var(--surface)}
.chip.white{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.card{background:var(--surface);border:1px solid var(--card-line);border-radius:24px;padding:18px;box-shadow:var(--sh-1)}
.card h2,.h2{font-size:16px;font-weight:800}
.note{border-radius:16px;padding:12px 14px;font-size:13px;display:flex;gap:9px;align-items:flex-start;line-height:1.6}
.note .ic{margin-top:2px}
.note.warn{background:var(--warn-soft);color:var(--warn-ink)}
.note.info{background:var(--brand-soft);color:var(--brand-700)}
.note.danger{background:var(--danger-soft);color:var(--danger-ink)}
.note.blue{background:var(--info-soft);color:var(--ink-2)}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;font-weight:700;white-space:nowrap;color:var(--ink)}
.pill.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chips-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.label{font-size:12.5px;font-weight:700;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:7px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.kv>:last-child{color:var(--ink);font-weight:700}
.mny{white-space:nowrap}
.kv.total{font-weight:800;font-size:16.5px;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}
.kv.total>:last-child{font-weight:900}
.kv.good,.kv.good>:last-child{color:var(--brand-600)}
.empty{color:var(--muted);text-align:center;padding:24px 8px;font-size:13px}
.stars{color:var(--star);display:inline-flex;align-items:center;gap:3px;font-weight:800}
.stars .num{color:var(--ink)}
.hbtn{border:0;background:var(--surface);border-radius:999px;width:42px;height:42px;display:grid;place-items:center;color:var(--ink);flex:none;position:relative;box-shadow:var(--sh-1)}
.hbtn.glass{background:var(--glass);backdrop-filter:blur(6px)}
.hbtn .badge{position:absolute;top:-3px;inset-inline-end:-3px}
.badge{background:var(--accent);color:var(--on-accent);border-radius:999px;font-size:11px;font-weight:800;min-width:19px;height:19px;padding-inline:5px;display:inline-grid;place-items:center;line-height:1}
.qty{display:inline-flex;align-items:center;gap:10px}
.qty button{border:1px solid var(--line);background:var(--surface);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink)}
.qty b{min-width:14px;text-align:center}
.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);width:100%;text-align:start;color:var(--ink)}
.opt.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 .5px var(--brand);font-weight:700}
.opt .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);flex:none;display:grid;place-items:center}
.opt.on .dot{border:2px solid var(--brand)}
.opt.on .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand)}
.opt .dot.box{border-radius:7px}
.opt.on .dot.box{background:var(--brand);border-color:var(--brand)}
.opt.on .dot.box::after{width:11px;height:6px;border-radius:0;background:none;border-inline-start:2.4px solid var(--on-brand);border-bottom:2.4px solid var(--on-brand);transform:translateY(-1px) rotate(-45deg) scaleX(-1)}
.paym{display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);width:100%;text-align:start;color:var(--ink)}
.paym.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 .5px var(--brand)}
.paym .mk{min-width:56px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800;border:1px solid var(--line);background:var(--surface);direction:ltr;padding-inline:6px}
.paym .mk.dark{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.paym .rad{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;background:var(--surface)}
.paym.on .rad{border:2px solid var(--brand)}
.paym.on .rad::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.steps i{height:6px;border-radius:6px;background:var(--line)}
.steps i.done{background:var(--brand)}
.steps i.now{background:linear-gradient(90deg,var(--brand),var(--brand-100));animation:shimmer 1.6s linear infinite;background-size:200% 100%}
.steps-l{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-size:11px;color:var(--muted-2);font-weight:700}
.steps-l span.on{color:var(--brand-600)}
@keyframes shimmer{to{background-position:-200% 0}}
.otp-show{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp-show b{width:56px;height:60px;border-radius:16px;background:var(--brand-soft);color:var(--brand-700);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:32px}
.otp-in{direction:ltr;text-align:center;font-family:var(--f-display);font-size:30px;font-weight:900;letter-spacing:18px;padding:12px 10px 12px 28px;border-radius:16px;border:1.5px solid var(--brand);background:var(--brand-soft);color:var(--brand-700)}
.tl{display:flex;flex-direction:column;gap:0}
.tl div{position:relative;padding-inline-start:22px;padding-bottom:14px;font-size:13px}
.tl div::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--brand)}
.tl div::after{content:"";position:absolute;inset-inline-start:5px;top:20px;bottom:0;width:2px;background:var(--line)}
.tl div:last-child::after{display:none}
.tl b{font-weight:700}
.tl small{display:block;color:var(--muted-2);font-size:11.5px}
.msg{background:var(--brand-soft);color:var(--brand-700);border-radius:16px 16px 16px 4px;padding:10px 14px;font-weight:700;font-size:13px;align-self:flex-start}
.starpick{display:flex;gap:6px;direction:ltr;justify-content:flex-end}
.starpick button{border:0;background:none;padding:2px;color:var(--line)}
.starpick button.on{color:var(--star)}
.starpick .ic{width:30px;height:30px}
.facts{display:flex;flex-wrap:wrap;gap:5px}
.fact{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 9px;display:inline-flex;align-items:center;gap:4px}
.fact.kcal{color:var(--brand-700);background:var(--brand-100)}
.fact.salt{color:var(--warn-ink);background:var(--warn-soft)}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--warn)}
.bar.g i{background:var(--brand)}

/* map */
.mapbox{border-radius:22px;overflow:hidden;background:var(--map-land);position:relative}
.mapbox>svg{display:block;width:100%;height:100%}
.m-land{fill:var(--map-land)}.m-water{fill:var(--map-water)}.m-block{fill:var(--map-block)}.m-park{fill:var(--map-park)}.m-tree{fill:var(--map-tree)}
.m-road{fill:none;stroke:var(--map-road);stroke-width:10;stroke-linecap:round}.m-road.main{stroke-width:16}
.m-route{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.m-route.todo{stroke-dasharray:2 11;stroke-width:5}
.m-rest{fill:var(--surface);stroke:var(--brand);stroke-width:3.5}.m-rest-b{fill:var(--brand)}.m-rest-h{fill:none;stroke:var(--brand);stroke-width:1.8}
.m-home{fill:var(--accent)}.m-home-d{fill:var(--white)}
.m-halo{fill:var(--brand);opacity:.18}.m-courier{fill:var(--brand);stroke:var(--surface);stroke-width:3.5}.m-arrow{fill:var(--white)}
.m-radar{fill:none;stroke:var(--brand);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:radar 2.4s ease-out infinite}
.m-radar.b{animation-delay:1.2s}
@keyframes radar{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1);opacity:0}}
.m-dot{fill:var(--brand);stroke:var(--surface);stroke-width:2.5}.m-dot.late{fill:var(--danger)}.m-dot.wait{fill:var(--warn)}
.ringsvg .r-bg{fill:none;stroke:var(--line);stroke-width:6}.ringsvg .r-fg{fill:none;stroke:var(--accent);stroke-width:6}

/* sheets & modals */
.sheet-wrap{position:absolute;inset:0;z-index:30;background:var(--scrim);display:flex;align-items:flex-end;animation:fade .16s ease-out}
.sheet{background:var(--surface);width:100%;max-height:92%;overflow-y:auto;border-radius:28px 28px 0 0;padding:12px 18px 22px;display:flex;flex-direction:column;gap:14px;animation:up .22s ease-out}
.sheet::before{content:"";align-self:center;width:44px;height:5px;border-radius:5px;background:var(--line);flex:none}
.sheet h3{font-size:19px;font-weight:800}
.dev.tablet .sheet-wrap,.dev.desk .sheet-wrap{align-items:center;justify-content:center;padding:20px}
.dev.tablet .sheet,.dev.desk .sheet{width:min(520px,100%);border-radius:28px;padding:22px 24px 24px}
.dev.tablet .sheet::before,.dev.desk .sheet::before{display:none}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(24px);opacity:.6}}
.x-btn{border:0;background:var(--surface-2);border-radius:999px;width:36px;height:36px;display:grid;place-items:center;color:var(--ink);flex:none}
.photo-prev{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);max-width:100%}
.photo-prev img{width:100%;height:100%;object-fit:cover;display:block}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ================= CUSTOMER WEBSITE ================= */
.web{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;container:web / inline-size;background:var(--bg)}
.site{flex:1;overflow-y:auto;overscroll-behavior:contain;min-width:0;scroll-padding-top:120px}
.site-h{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:8px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px)}
.brand-btn{border:0;background:none;padding:0;display:flex;align-items:center;gap:6px}
.site-nav{display:flex;gap:26px;margin-inline-start:28px}
.nav-l{border:0;background:none;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink-2);border-bottom:3px solid transparent}
.nav-l.on{color:var(--brand-600);font-weight:800;border-bottom-color:var(--brand)}
.loc-pill{border:0;display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:6px 16px;text-align:start;color:var(--ink);box-shadow:var(--sh-1)}
.loc-pill .ic:first-child{color:var(--brand)}
.loc-pill small{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.loc-pill b{font-size:13.5px}
.acct{border:0;background:none;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.av{width:38px;height:38px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:18px;flex:none}
.site-main{display:flex;flex-direction:column;gap:20px;padding:6px 16px 28px}
.page-h{display:flex;align-items:center;gap:12px}
.page-h h1{font-size:19px;font-weight:800}
.crumb{font-size:13px;color:var(--muted)}
/* home */
.hero{display:flex;flex-direction:column;gap:16px}
.hero-t{display:flex;flex-direction:column;gap:16px;min-width:0}
.loc{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:start;color:var(--ink)}
.loc-ic{width:38px;height:38px;border-radius:50%;background:var(--brand-100);color:var(--brand-600);display:grid;place-items:center}
.loc small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
.loc b{font-size:14px}
.hero-h{font-family:var(--f-display);font-size:36px;font-weight:900;line-height:1.12}
.hero-p{font-size:17px;color:var(--muted);line-height:1.75;max-width:52ch}
.search{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:999px;padding:4px 18px;color:var(--muted);min-height:54px;flex:1}
.search input{border:0;padding:8px 0;background:transparent;box-shadow:none}
.search input:focus{box-shadow:none}
.vals{display:flex;gap:10px;flex-wrap:wrap}
.vals span{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ink-2)}
.vals .ic{color:var(--brand);width:20px;height:20px}
.hero-v{position:relative;width:520px;height:460px;flex:none}
.hero-v .blob{position:absolute;inset-inline-end:40px;top:20px;width:430px;height:430px;border-radius:50%;background:var(--brand-100)}
.hero-v .ph{position:absolute;border-radius:50%;box-shadow:0 20px 40px -12px rgba(15,27,26,.35)}
.hero-v .c1{width:330px;height:330px;inset-inline-end:90px;top:70px}
.hero-v .c2{width:160px;height:160px;inset-inline-end:370px;top:280px;border:6px solid var(--white)}
.hero-v .c3{width:140px;height:140px;inset-inline-end:10px;top:10px;border:6px solid var(--white)}
.live-card{position:absolute;inset-inline-end:300px;top:380px;display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:20px;padding:12px 16px;box-shadow:var(--sh-1);white-space:nowrap}
.live-card .ph{position:static;width:42px;height:42px;border:0;box-shadow:none}
.live-card small{display:block;color:var(--muted);font-size:12px}
.active-o{display:flex;align-items:center;gap:12px;text-align:start;width:100%;border:1px solid var(--brand-100);background:var(--brand-soft);color:var(--ink);border-radius:20px;padding:12px 14px}
.active-o .ph{width:46px;height:46px;border-radius:50%}
.cuisines{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.cuisines button{border:0;background:none;padding:4px 0 7px;font-size:14.5px;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent;font-weight:500}
.cuisines button.on{color:var(--brand-600);font-weight:800;border-bottom-color:var(--brand)}
.sec{display:flex;flex-direction:column;gap:14px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.sec-h h2{font-family:var(--f-display);font-size:23px;font-weight:800;line-height:1.1}
.dishes{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding-block:4px 10px;margin-inline:-16px;padding-inline:16px}
.dish{position:relative;flex:none;width:164px;border:0;background:none;padding:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:var(--ink)}
.dish::before{content:"";position:absolute;inset:50px 0 0;border-radius:28px;background:var(--surface);box-shadow:var(--sh-1);border:1px solid var(--card-line)}
.dish>*{position:relative}
.dish .ph{width:112px;height:112px;border-radius:50%;box-shadow:0 14px 26px -8px rgba(15,27,26,.35);margin-bottom:6px}
.dish b{font-size:14.5px;line-height:1.35;padding-inline:10px}
.dish small{font-size:11.5px;color:var(--muted)}
.dish .price{font-weight:800;color:var(--brand-600)}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.rcard{border:0;background:none;padding:0;text-align:start;color:var(--ink);display:flex;flex-direction:column;gap:8px;width:100%}
.rc-cover{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;height:160px;border-radius:20px;padding:10px;overflow:hidden}
.rc-cover .chip{box-shadow:var(--sh-1)}
.rc-cover .chip:not(.warn):not(.accent){background:var(--surface);color:var(--ink)}
.fav{width:34px;height:34px;border-radius:50%;background:var(--glass);display:grid;place-items:center;color:var(--ink);margin-inline-start:auto}
.rc-info{display:flex;flex-direction:column;gap:3px;padding-inline:4px}
.rc-name{font-family:var(--f-display);font-size:21px;font-weight:800;line-height:1.2}
.r-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);align-items:center}
.r-meta .ic{width:15px;height:15px}
.partners{display:grid;gap:14px}
.band{display:flex;align-items:center;gap:16px;border-radius:28px;padding:20px;background:var(--brand-soft)}
.band.deep{background:var(--deep);color:var(--on-deep)}
.band h3{font-family:var(--f-display);font-size:22px;font-weight:900;line-height:1.2}
.band p{font-size:13px;color:var(--muted);margin-block:4px 10px}
.band.deep p{color:var(--on-deep-2)}
.band .bic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);flex:none}
.band.deep .bic{background:color-mix(in srgb,var(--white) 12%,transparent);color:var(--mint)}
.band .bic .ic{width:32px;height:32px}
.site-f{background:var(--deep);color:var(--on-deep-2);padding:28px 16px;display:flex;flex-wrap:wrap;gap:22px 60px;font-size:13px}
.site-f .wordmark{color:var(--on-deep)}
.site-f .fcol b{color:var(--on-deep);display:block;margin-bottom:6px}
.site-f .fcol span{display:block;line-height:1.9}
/* restaurant */
.r-top{display:flex;flex-direction:column;margin-inline:-16px;margin-top:-6px}
.r-cover{position:relative;height:230px}
.r-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 45%)}
.r-acts{position:absolute;inset-inline:16px;top:12px;z-index:2;display:flex;gap:10px}
.r-over{position:absolute;z-index:2;inset-inline-start:36px;bottom:30px;color:var(--white);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.r-over h1{font-family:var(--f-display);font-size:52px;font-weight:900;line-height:1}
.r-head{position:relative;z-index:3;margin-top:-30px;background:var(--surface);border-radius:28px 28px 0 0;padding:20px 16px 4px;display:flex;flex-direction:column;gap:14px}
.r-title{display:flex;align-items:center;gap:12px}
.r-title h1{font-family:var(--f-display);font-size:30px;font-weight:900;line-height:1.1}
.rate-pill{display:inline-flex;align-items:center;gap:5px;background:var(--warn-soft);border-radius:999px;padding:7px 13px;font-weight:800;white-space:nowrap}
.rate-pill .ic{color:var(--star)}
.rate-pill small{font-weight:400;color:var(--muted)}
.r-facts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.r-facts .chip{padding:5px 12px}
.zone{display:flex;align-items:center;gap:8px;flex:1 1 100%;background:var(--brand-soft);color:var(--brand-700);border-radius:16px;padding:10px 14px;font-weight:700;font-size:13.5px}
.zone .chip{margin-inline-start:auto}
.r-layout{display:flex;flex-direction:column;gap:6px}
.r-cats{position:sticky;top:62px;z-index:4;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;background:var(--surface);margin-inline:-16px;padding:8px 16px 0;border-bottom:1px solid var(--line)}
.r-cats button{border:0;background:none;padding:6px 0 9px;white-space:nowrap;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent;display:flex;gap:6px;align-items:center}
.r-cats button.on{color:var(--brand-600);font-weight:800;border-bottom-color:var(--brand)}
.r-cats button span{font-size:11.5px;color:var(--muted-2)}
.r-menu{background:var(--surface);margin-inline:-16px;padding:4px 16px 90px;display:flex;flex-direction:column;gap:8px}
.r-sec h2{font-family:var(--f-display);font-size:22px;font-weight:800;margin-block:12px 4px}
.items{display:flex;flex-direction:column}
.mi{display:flex;gap:14px;align-items:center;padding-block:14px;border-bottom:1px solid var(--line)}
.items .mi:last-child{border-bottom:0}
.mi .ph{width:86px;height:86px;border-radius:50%;box-shadow:0 12px 22px -8px rgba(15,27,26,.32)}
.mi-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mi h3{font-size:15.5px;font-weight:800}
.mi p{color:var(--muted);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mi-f{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mi-f b{font-size:15.5px}
.add{border:0;background:var(--brand-soft);color:var(--brand-600);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.add.in{background:var(--brand);color:var(--on-brand)}
.add .ic{width:19px;height:19px;stroke-width:2.4}
.cartbar{position:absolute;inset-inline:14px;bottom:16px;z-index:9;display:flex;align-items:center;gap:10px;background:var(--brand);color:var(--on-brand);border:0;border-radius:999px;padding:10px 12px 10px 20px;font-weight:800;font-size:15.5px;box-shadow:var(--sh-brand)}
.cartbar .count{background:color-mix(in srgb,var(--on-brand) 24%,transparent);border-radius:50%;width:32px;height:32px;display:grid;place-items:center}
.side-cart{display:flex;flex-direction:column;gap:12px}
.r-layout>aside{position:sticky;top:96px}
.cl{display:flex;align-items:center;gap:10px}
.cl .ph{width:46px;height:46px;border-radius:50%}
.cl b{display:block;font-size:13.5px}
.cl .price{color:var(--brand-600);font-weight:800;font-size:13px}
.cl small{display:block;color:var(--muted);font-size:11.5px}
.hold{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--brand-700)}
/* checkout */
.co{display:flex;flex-direction:column;gap:16px}
.co-main,.co-side{display:contents}
.co-lines{order:0}.co-addr{order:1}.co-note{order:2}.co-tip{order:3}.co-pay{order:4}.co-sum{order:5}.co-hold{order:6}.co-cta{order:7}
.co .card{display:flex;flex-direction:column;gap:12px}
.mapbox.mini{height:120px;border-radius:16px}
.tips{display:flex;gap:8px;flex-wrap:wrap}
.pays{display:grid;gap:10px}
.rest-row{display:flex;align-items:center;gap:12px}
.rest-row .ph{width:46px;height:46px;border-radius:50%}
/* tracking */
.trk{display:flex;flex-direction:column;gap:14px}
.trk-side{display:contents}
.trk-status{order:0}.trk-pay{order:1}.trk-msg{order:2}.trk-map{order:3}.trk-cour{order:4}.trk-otp{order:5}.trk-more{order:6}
.trk-status{display:flex;flex-direction:column;gap:10px}
.trk-status h2{font-family:var(--f-display);font-size:30px;font-weight:900;line-height:1.1}
.trk-map .mapbox{height:230px}
.eta-float{position:absolute;top:12px;inset-inline-end:12px;display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:16px;padding:8px 14px;box-shadow:var(--sh-1);font-size:12px;color:var(--muted)}
.eta-float b{display:block;color:var(--ink);font-size:16px}
.cour{display:flex;align-items:center;gap:12px}
.cour .ph{width:52px;height:52px;border-radius:50%}
.circ{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-600);flex:none}
.circ.solid{background:var(--brand);color:var(--on-brand)}
.olist{display:grid;gap:12px}
.ocard{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:1px solid var(--card-line);background:var(--surface);color:var(--ink);border-radius:22px;padding:14px;box-shadow:var(--sh-1)}
.ocard .ph{width:50px;height:50px;border-radius:50%}
.me-grid{display:grid;gap:14px}
/* customer sheets */
.item-sheet{padding:0!important;gap:0!important}
.item-sheet::before{display:none}
.is-pic{position:relative;display:grid;place-items:center;padding:18px 0 4px;background:var(--surface)}
.is-pic .ph{width:200px;height:200px;border-radius:50%;box-shadow:0 22px 40px -14px rgba(15,27,26,.45)}
.is-pic .x-btn{position:absolute;top:14px;inset-inline-end:14px}
.is-body{display:flex;flex-direction:column;gap:14px;padding:12px 20px 22px;overflow-y:auto}
.is-body h3{font-family:var(--f-display);font-size:28px;font-weight:900;line-height:1.1;text-align:center}
.is-price{text-align:center;font-weight:800;color:var(--brand-600);font-size:18px}
.is-body .facts{justify-content:center}
.is-desc{text-align:center;color:var(--muted);font-size:13.5px}
.is-foot{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;background:var(--surface);padding-block:12px 4px}
.dialog-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-600);align-self:center}
.dialog-ic .ic{width:30px;height:30px}
.phone-in{display:flex;align-items:center;gap:10px;direction:ltr;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding-inline:14px}
.phone-in:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.phone-in b{font-weight:800;border-inline-end:1px solid var(--line);padding-inline-end:10px}
.phone-in input{border:0;padding-inline:0;box-shadow:none!important}
.chk{display:flex;align-items:center;gap:10px;font-size:13px}
.chk input{width:20px;height:20px;accent-color:var(--brand);flex:none}
.apple{display:flex;flex-direction:column;align-items:center;gap:4px;background:#000;color:#fff;border-radius:18px;padding:18px}
.apple b{font-size:20px;direction:ltr}
.tabby{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;font-size:12px}
.tabby div{background:var(--surface-2);border-radius:14px;padding:10px 4px}

@container web (max-width:859.98px){ .d-only{display:none!important} }
@container web (max-width:1199.98px){ .hero-v{display:none!important} }
@container web (min-width:860px) and (max-width:1150px){ .items{grid-template-columns:minmax(0,1fr)!important} .r-layout{grid-template-columns:190px minmax(0,1fr) 300px!important} }
@container web (min-width:860px){
  .m-only{display:none!important}
  .site-h{padding:14px max(40px,calc((100% - 1240px)/2));gap:22px;background:var(--surface);border-bottom:1px solid var(--line)}
  .site-main{padding:28px max(40px,calc((100% - 1240px)/2)) 56px;gap:44px}
  .hero{flex-direction:row;align-items:center;justify-content:space-between;gap:30px;padding-top:10px}
  .hero-t{gap:22px;max-width:640px}
  .hero-t .chip{align-self:flex-start;padding:6px 14px;font-size:13.5px}
  .hero-h{font-size:66px;line-height:1.06}
  .search{background:var(--surface);box-shadow:0 18px 40px -14px rgba(15,27,26,.18);min-height:70px;padding-inline:24px;font-size:16px}
  .vals{gap:24px}
  .cuisines{gap:12px}
  .cuisines button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:12px 22px;font-weight:700;color:var(--ink)}
  .cuisines button.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
  .sec-h h2{font-size:34px}
  .dishes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;overflow:visible;margin:0;padding:0}
  .dish{width:auto}
  .dish .ph{width:126px;height:126px}
  .rgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .rc-cover{height:210px}
  .partners{grid-template-columns:1fr 1fr;gap:24px}
  .band{padding:36px;gap:24px}
  .band h3{font-size:30px}
  .band p{font-size:15px}
  .band .bic{width:110px;height:110px;border-radius:32px}
  .band .bic .ic{width:52px;height:52px}
  .site-f{padding:44px max(40px,calc((100% - 1240px)/2));gap:60px}
  .page-h h1{font-family:var(--f-display);font-size:42px;font-weight:900}
  /* restaurant desktop */
  .r-top{margin:0;gap:18px}
  .r-cover{height:320px;border-radius:28px;overflow:hidden}
  .r-cover::after{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 70%)}
  .r-acts{inset-inline:auto 24px;top:24px}
  .r-acts .back-b{display:none}
  .r-head{margin:0;background:none;border-radius:0;padding:0}
  .r-facts{flex-wrap:nowrap}
  .zone{flex:0 1 auto;margin-inline-start:auto}
  .zone .chip{display:none}
  .r-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:24px;align-items:start}
  .r-cats{position:sticky;top:96px;flex-direction:column;gap:4px;margin:0;padding:16px;border:1px solid var(--card-line);border-radius:24px;box-shadow:var(--sh-1);overflow:visible}
  .r-cats button{justify-content:space-between;border:0;border-radius:12px;padding:11px 14px}
  .r-cats button.on{background:var(--brand-soft);color:var(--brand-700)}
  .r-menu{margin:0;padding:0;background:none}
  .r-sec h2{font-size:28px;margin-block:0 12px}
  .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .mi{background:var(--surface);border:1px solid var(--card-line);border-radius:24px;padding:16px;box-shadow:var(--sh-1);border-bottom:1px solid var(--card-line)}
  .items .mi:last-child{border-bottom:1px solid var(--card-line)}
  /* checkout desktop */
  .co{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;align-items:start}
  .co-main,.co-side{display:flex;flex-direction:column;gap:20px}
  .co-side{position:sticky;top:96px}
  .co .card{padding:24px}
  .mapbox.mini{height:200px}
  .pays{grid-template-columns:1fr 1fr}
  /* tracking desktop */
  .trk{display:grid;grid-template-columns:440px minmax(0,1fr);gap:24px;align-items:start}
  .trk-side{display:flex;flex-direction:column;gap:16px}
  .trk-map{position:sticky;top:96px}
  .trk-map .mapbox{height:640px;border-radius:28px}
  .olist{grid-template-columns:1fr 1fr}
  .me-grid{grid-template-columns:1fr 1fr}
  /* item modal */
  .item-sheet{width:min(920px,100%)!important;flex-direction:row!important;padding:0!important;max-height:92%}
  .is-pic{width:400px;flex:none;background:var(--brand-soft);place-content:center;gap:18px;padding:30px}
  .is-pic .ph{width:300px;height:300px}
  .is-pic .x-btn{inset-inline-end:auto;inset-inline-start:14px}
  .is-body{padding:30px 32px;gap:14px}
  .is-body h3,.is-price,.is-desc{text-align:start}
  .is-body .facts{justify-content:flex-start}
  .web .sheet-wrap{align-items:center;justify-content:center;padding:24px}
  .web .sheet{width:min(520px,100%);border-radius:28px;padding:24px}
  .web .sheet::before{display:none}
}

/* ================= BRANCH ================= */
.bx{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;container:bx / inline-size;background:var(--surface-2)}
.b-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.b-top h3{font-size:15.5px;font-weight:800}
.b-top .sub{display:block;font-size:11.5px;color:var(--muted)}
.b-status{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:2px}
.b-status button{border:0;background:none;border-radius:999px;padding:6px 13px;font-weight:700;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.b-status button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.b-status button.on.open .dot{background:var(--brand)}.b-status button.on.busy .dot{background:var(--warn)}.b-status button.on.closed .dot{background:var(--danger)}
.b-status .dot{background:var(--muted-2)}
.b-net{border:0;border-radius:999px;padding:7px 13px;font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.b-net.on{background:var(--brand-soft);color:var(--brand-700)}.b-net.off{background:var(--danger-soft);color:var(--danger-ink)}
.b-clock{font-family:var(--f-display);font-weight:900;font-size:22px}
.banner{display:flex;align-items:center;gap:10px;padding:10px 18px;font-weight:700;font-size:13px}
.banner.danger{background:var(--danger-soft);color:var(--danger-ink)}
.banner.warn{background:var(--warn-soft);color:var(--warn-ink)}
.board{flex:1;display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;padding:16px;overflow:auto;min-height:0}
.kcol{display:flex;flex-direction:column;gap:12px;min-width:0;background:color-mix(in srgb,var(--surface) 45%,var(--surface-2));border-radius:22px;padding:12px}
.kcol-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;padding:2px 4px}
.kcol-h .n{min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:12.5px;color:var(--white);background:var(--muted-2);padding-inline:6px}
.kcol-h .n.accent{background:var(--accent)}.kcol-h .n.warn{background:var(--warn)}.kcol-h .n.brand{background:var(--brand)}.kcol-h .n.info{background:var(--info)}
.oc{background:var(--surface);border:1px solid var(--card-line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-1)}
.oc-h{display:flex;align-items:center;gap:8px}
.oc-no{font-family:var(--f-display);font-weight:900;font-size:19px;direction:ltr}
.oc-lines{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2)}
.oc-lines small{color:var(--accent-600);font-weight:700}
.oc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
.oc-ring{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--accent-600)}
.ringing{border:2.5px solid var(--accent);animation:ring 1.2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.prep{display:flex;gap:6px;flex-wrap:wrap}
.prep button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:5px 10px;font-weight:800;font-size:12.5px;color:var(--ink)}
.prep button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.prep.big{display:grid;grid-template-columns:repeat(5,1fr)}
.prep.big button{padding:11px 4px;border-radius:14px;font-size:14px}
.oc-photo{display:flex;align-items:center;gap:10px}
.oc-photo img,.oc-photo .ph0{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--surface-2);flex:none}
.ring-wrap{position:absolute;inset:0;z-index:20;background:var(--scrim);display:grid;place-items:center;padding:20px;overflow:auto}
.ring-modal{width:min(500px,100%);background:var(--surface);border-radius:30px;overflow:hidden;box-shadow:var(--sh-2);animation:up .2s ease-out}
.ring-band{height:132px;background:var(--accent);display:grid;place-items:center}
.pulse{position:relative;width:64px;height:64px;border-radius:50%;background:var(--surface);color:var(--accent);display:grid;place-items:center}
.pulse .ic{width:30px;height:30px;stroke-width:2.2}
.pulse i{position:absolute;inset:0;border-radius:50%;background:var(--white);opacity:.25;animation:pul 1.6s ease-out infinite}
.pulse i+i{animation-delay:.8s}
@keyframes pul{0%{transform:scale(1);opacity:.35}100%{transform:scale(2.1);opacity:0}}
.ring-body{padding:20px 24px 22px;display:flex;flex-direction:column;gap:12px}
.ring-body h2{font-family:var(--f-display);font-size:36px;font-weight:900;text-align:center;line-height:1}
.ring-lines{background:var(--surface-2);border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.ring-lines b{color:var(--brand-600)}
.ring-lines small{display:block;color:var(--accent-600);font-weight:700;font-size:12px}
.shift{position:absolute;inset:0;z-index:25;background:color-mix(in srgb,var(--surface-2) 92%,transparent);display:grid;place-items:center;padding:20px;text-align:center}
.shift .card{max-width:440px;display:flex;flex-direction:column;gap:12px;align-items:center;padding:28px}
.shift h3{font-family:var(--f-display);font-size:30px;font-weight:900}
.cam-modal{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.cam{position:relative;border-radius:22px;overflow:hidden;background:#0F1B1A;aspect-ratio:1/1;display:grid;place-items:center;color:#B9C4C1;max-width:100%}
.cam img{width:100%;height:100%;object-fit:cover}
.cam .crn{position:absolute;width:34px;height:34px;border:4px solid #fff;border-radius:6px}
.cam .c1{top:14px;left:14px;border-right:0;border-bottom:0}.cam .c2{top:14px;right:14px;border-left:0;border-bottom:0}.cam .c3{bottom:14px;right:14px;border-left:0;border-top:0}.cam .c4{bottom:14px;left:14px;border-right:0;border-top:0}
.cam .chip{position:absolute;top:16px;left:50%;transform:translateX(-50%)}
.checklist{display:flex;flex-direction:column;gap:9px;background:var(--surface-2);border-radius:18px;padding:14px 16px;font-size:13.5px}
.checklist span{display:flex;align-items:center;gap:9px}
.checklist .tick{width:22px;height:22px;border-radius:7px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;flex:none}
.checklist .tick .ic{width:15px;height:15px;stroke-width:2.6}
.dev.tablet .sheet.cam-sheet{width:min(860px,100%)}
@container bx (min-width:700px){ .cam-modal{grid-template-columns:minmax(0,1fr) 360px;align-items:center} }
@container bx (max-width:900px){ .board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container bx (max-width:520px){ .board{grid-template-columns:minmax(0,1fr);overflow:visible} }

/* ================= COURIER APP ================= */
.app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.app-scroll{flex:1;overflow-y:auto;padding:12px 16px 20px;display:flex;flex-direction:column;gap:14px}
.k-map{position:absolute;inset:0;background:var(--map-land)}
.k-map>svg{width:100%;height:100%;display:block}
.k-top{position:absolute;top:10px;inset-inline:14px;z-index:5;display:flex;align-items:center;gap:10px}
.k-top .ph{width:44px;height:44px;border-radius:50%;border:3px solid var(--white);box-shadow:var(--sh-1)}
.opill{border:0;display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--surface);border-radius:999px;padding:6px 8px 6px 14px;font-weight:800;font-size:12.5px;white-space:nowrap;box-shadow:var(--sh-1);margin-inline:auto}
.opill .dot{width:9px;height:9px;background:var(--muted-2)}
.opill.on .dot{background:#5BE3B4;box-shadow:0 0 0 3px color-mix(in srgb,#5BE3B4 30%,transparent)}
.opill .sw{width:46px;height:28px;border-radius:999px;background:#7A8784;position:relative;flex:none}
.opill .sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:inset-inline-start .2s}
.opill.on .sw{background:var(--brand)}
.opill.on .sw::after{inset-inline-start:21px}
.opill:disabled{cursor:default}
.k-nav{position:absolute;top:66px;inset-inline:14px;z-index:5;display:flex;align-items:center;gap:12px;background:var(--deep);color:var(--on-deep);border-radius:20px;padding:12px 14px;box-shadow:var(--sh-1)}
.k-nav .ic{width:24px;height:24px}
.k-nav small{display:block;color:var(--on-deep-2);font-size:12px}
.k-sheet{position:absolute;inset-inline:0;bottom:0;z-index:6;max-height:74%;overflow-y:auto;background:var(--surface);border-radius:30px 30px 0 0;padding:10px 18px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 -10px 30px -12px rgba(15,27,26,.25)}
.k-sheet::before{content:"";align-self:center;width:44px;height:5px;border-radius:5px;background:var(--line);flex:none}
.k-sheet h3{font-size:16.5px;font-weight:800}
.kring{position:relative;width:66px;height:66px;flex:none;display:grid;place-items:center}
.kring svg{position:absolute;inset:0}
.kring b{font-family:var(--f-display);font-size:22px;font-weight:900;line-height:1;position:relative}
.kring small{position:absolute;bottom:12px;font-size:9.5px;color:var(--muted)}
.earn{display:flex;align-items:center;gap:12px;background:var(--brand-soft);border-radius:20px;padding:14px 16px}
.earn span{display:block;font-size:12.5px;color:var(--muted)}
.earn .big{font-family:var(--f-display);font-size:38px;font-weight:900;line-height:1;direction:ltr;display:inline-block}
.stop{display:flex;gap:12px;align-items:flex-start}
.stop .si{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.stop .si.g{background:var(--brand-100);color:var(--brand-700)}.stop .si.c{background:var(--accent-soft);color:var(--accent-600)}
.stop b{display:block;font-size:14.5px}
.stop small{color:var(--muted);font-size:12.5px}
.stop .d{font-weight:800;font-size:13.5px;white-space:nowrap}
.kprog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kprog div{display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:var(--muted-2);font-weight:700}
.kprog i{height:5px;border-radius:5px;background:var(--line)}
.kprog .done i{background:var(--brand)}.kprog .now i{background:var(--accent)}
.kprog .done,.kprog .now{color:var(--ink-2)}
.cust-row{display:flex;align-items:center;gap:12px}
.cust-row .av{background:var(--accent);color:var(--white);width:46px;height:46px}
.cust-row .ph{width:46px;height:46px}
.addr-card{border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.addr-card .chip{align-self:flex-start}
.k-home{padding:6px 16px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1}
.k-hello{display:flex;align-items:center;gap:12px}
.k-hello .ph{width:48px;height:48px;border-radius:50%}
.k-hello b{display:block;font-family:var(--f-display);font-size:22px;font-weight:800;line-height:1.1}
.k-hello span{font-size:12px;color:var(--muted)}
.k-shift{background:var(--deep);color:var(--on-deep);border-radius:28px;padding:20px;display:flex;flex-direction:column;gap:12px}
.k-shift h2{font-family:var(--f-display);font-size:28px;font-weight:900;line-height:1.15}
.k-shift .k-off{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--on-deep-2)}
.k-shift .small{color:var(--on-deep-2)}
.ksteps{display:flex;flex-direction:column;gap:9px}
.kstep{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--on-deep-2)}
.kstep i{width:24px;height:24px;border-radius:8px;border:1.5px solid color-mix(in srgb,var(--on-deep) 35%,transparent);display:grid;place-items:center;flex:none;font-style:normal;font-size:11.5px;font-weight:800}
.kstep.done{color:var(--on-deep)}
.kstep.done i{background:var(--brand);border-color:var(--brand);color:#fff}
.kstep.now{color:var(--on-deep);font-weight:800}
.kstep.now i{border-color:var(--mint);color:var(--mint)}
.kstep .link{color:var(--mint)}
.k-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.k-kpis div{background:var(--surface);border:1px solid var(--card-line);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--sh-1)}
.k-kpis .ki{width:32px;height:32px;border-radius:10px;background:var(--brand-soft);color:var(--brand-600);display:grid;place-items:center}
.k-kpis b{font-family:var(--f-display);font-size:19px;font-weight:900}
.k-kpis span{font-size:11.5px;color:var(--muted)}
.k-bal{background:var(--deep);color:var(--on-deep);border-radius:26px;padding:20px;display:flex;flex-direction:column;gap:4px}
.k-bal span{color:var(--on-deep-2);font-size:13px}
.k-bal .big{font-family:var(--f-display);font-size:42px;font-weight:900;line-height:1.05}
.k-bal-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.k-bal-row span{background:color-mix(in srgb,var(--white) 12%,transparent);border-radius:999px;padding:4px 12px;color:var(--on-deep);font-size:12.5px;font-weight:700}
.app-nav{flex:none;display:grid;grid-template-columns:repeat(2,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:14px}
.app-nav button{border:0;background:none;padding:10px 0 4px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--muted);font-weight:700}
.app-nav button.on{color:var(--brand-600);font-weight:800}
.app-nav .ic{width:24px;height:24px}
.home-ind{flex:none;height:18px;display:grid;place-items:center;background:var(--surface)}
.home-ind::after{content:"";width:130px;height:5px;border-radius:5px;background:var(--ink)}

/* ================= ADMIN (SnowUI) ================= */
.a-admin .screen{container:adm / inline-size}
.adm{flex:1;display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0;background:var(--surface);color:var(--snow-ink)}
.a-side{border-inline-end:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:3px}
.a-sub{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted);padding:6px 4px 14px}
.a-grp{font-size:12px;color:var(--muted-2);padding:12px 8px 4px}
.a-nav{border:0;background:none;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;font-weight:500;color:var(--snow-ink);text-align:start;position:relative}
.a-nav .ic{color:var(--muted)}
.a-nav.on{background:var(--snow-act);font-weight:800}
.a-nav.on::before{content:"";position:absolute;inset-inline-start:-6px;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--snow-ink)}
.a-nav.on .ic{color:var(--snow-ink)}
.a-nav .badge{margin-inline-start:auto}
.a-main{min-width:0;display:flex;flex-direction:column}
.a-topbar{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--line);color:var(--snow-ink)}
.a-topbar .crumb b{color:var(--snow-ink)}
.a-body{padding:22px 26px 28px;display:flex;flex-direction:column;gap:20px}
.a-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.a-title h2{font-family:var(--f-display);font-size:30px;font-weight:900;color:var(--snow-ink)}
.a-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.akpi{border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:var(--snow-1)}
.akpi:nth-child(even){background:var(--snow-2)}
.akpi span{font-size:13px;font-weight:700}
.akpi b{font-family:var(--f-display);font-size:30px;font-weight:900;line-height:1}
.akpi.attn{background:var(--accent-soft)}
.akpi.attn b{color:var(--accent-600)}
.snow{background:var(--snow-bg);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.snow>.row>b,.snow>b{font-size:15px;font-weight:800}
.a-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.a-grid.claims{grid-template-columns:300px minmax(0,1fr)}
.mapbox.admin{height:300px;border-radius:16px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;background:var(--brand)}
.tbl-wrap{overflow-x:auto;border-radius:14px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
th{font-size:12px;color:var(--muted);font-weight:700;text-align:start;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--snow-act)}
tbody tr.sel td{background:var(--brand-soft)}
.alerts{display:flex;flex-direction:column;gap:12px}
.alert{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.alert .ai{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--snow-2);flex:none}
.alert.hot .ai{background:var(--danger-soft);color:var(--danger-ink)}
.alert.warn .ai{background:var(--warn-soft);color:var(--warn-ink)}
.detail{background:var(--snow-bg);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:16px}
.evid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.evid figure{margin:0;display:flex;flex-direction:column;gap:6px}
.evid .ph0{aspect-ratio:4/3;border-radius:12px;background:var(--surface);overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:11.5px;text-align:center;padding:4px;border:1px solid var(--line)}
.evid img{width:100%;height:100%;object-fit:cover}
.evid figcaption{font-size:12px;color:var(--muted);font-weight:700}
.claim-it{border:1px solid transparent;background:none;border-radius:14px;padding:12px;text-align:start;width:100%;display:flex;flex-direction:column;gap:4px;color:var(--snow-ink)}
.claim-it.on{background:var(--surface);border-color:var(--snow-ink)}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.mini-seg{display:inline-flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.mini-seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font-weight:700;font-size:12.5px;color:var(--muted)}
.mini-seg button.on{background:var(--snow-ink);color:var(--surface)}
.timers{display:grid;grid-template-columns:auto 1fr 90px;gap:8px 10px;align-items:center;font-size:13px}
.timers input{padding:6px 8px;text-align:center}
@container adm (max-width:1100px){ .a-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .a-grid,.a-grid.claims{grid-template-columns:minmax(0,1fr)} }
@container adm (max-width:760px){
  .adm{grid-template-columns:minmax(0,1fr)}
  .a-side{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--line);padding:10px 12px;gap:6px;scrollbar-width:none}
  .a-side .brandrow,.a-sub,.a-grp{display:none}
  .a-nav{white-space:nowrap;flex:none}
  .a-nav.on::before{display:none}
  .a-topbar{padding:12px 16px}
  .a-body{padding:16px}
  .a-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .evid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* toasts + picker */
.toasts{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline:16px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--surface);border-radius:16px;padding:11px 16px;font-weight:700;font-size:13px;box-shadow:var(--sh-2);max-width:440px;display:flex;gap:8px;align-items:center;animation:up .2s ease-out}
.picker{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;gap:18px;padding:32px 16px;overflow:auto}
.picker>*{width:min(560px,100%);margin-inline:auto}
.picker h2{font-family:var(--f-display);font-size:36px;font-weight:900;line-height:1.1}
.picker .opts{display:grid;gap:10px}
.picker .opts button{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--card-line);border-radius:22px;padding:14px 16px;text-align:start;color:inherit;box-shadow:var(--sh-1)}
.picker .tile{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-600);flex:none}
.picker .tile .ic{width:24px;height:24px}
.picker .opts .plat{margin-inline-start:auto}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* ===== auth ===== */
.auth-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:14px;padding:4px;gap:4px}
.auth-seg button{border:0;background:none;border-radius:11px;padding:9px 6px;font-weight:700;color:var(--muted)}
.auth-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.hint{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);background:var(--info-soft);border-radius:14px;padding:10px 12px}
.hint .ic{color:var(--info);margin-top:2px}
.dev-row{display:flex;align-items:center;gap:10px}
.dev-row .ic{color:var(--brand-600);width:22px;height:22px}

/* ===== entry points ===== */
.stage.entry{max-width:1500px}
.en{display:flex;flex-direction:column;gap:26px;min-width:0}
.en-head{display:flex;flex-direction:column;gap:12px;max-width:900px}
.en-head h1{font-family:var(--f-display);font-size:clamp(32px,5vw,52px);font-weight:900;line-height:1.08}
.en-head p{font-size:16px;color:var(--muted);line-height:1.75}
.en-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 22px}
.en-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.en-lab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.en-lab b{font-size:15px}
.en-lab .step{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:12px;font-weight:800}
.en-ph{position:relative;width:100%;max-width:310px;aspect-ratio:9/18.5;border-radius:34px;border:8px solid var(--frame);overflow:hidden;box-shadow:var(--sh-2);margin-inline:auto;display:flex;flex-direction:column;background:#000;color:#fff;font-size:12px}
.en-ph .sb{display:flex;justify-content:space-between;align-items:center;height:28px;padding-inline:18px;font-weight:800;font-size:12px;flex:none;position:relative;z-index:3}
.en-ph .sb svg{width:52px;height:10px}
.en-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.en-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 45%,rgba(0,0,0,.85))}
.en-ov{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:8px 14px 16px;gap:8px;min-height:0}
.en-disc{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.en-disc .logo{width:22px;height:22px}
.en-head-row{display:flex;align-items:center;gap:8px}
.en-head-row b{font-size:13px;direction:ltr}
.en-head-row small{display:block;font-size:11px;opacity:.85}
.en-bars{display:flex;gap:3px}.en-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}.en-bars i:first-child{background:#fff}
.en-big{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:1.05;color:#fff}
.en-cta{border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:800;font-size:14px;padding:12px 22px;cursor:pointer}
.en-cta.white{background:#fff;color:#0F1B1A}
.en-cta.green{background:#0E9F7E;color:#fff;border-radius:8px;justify-content:space-between;width:100%}
.en-cta:focus-visible{outline:3px solid #9BE3CC}
.pulse-ring{animation:ring 1.4s ease-out infinite}
.en-yt{background:#0F0F0F}
.en-yt .vid{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;flex:none}
.en-yt .vid .ad{position:absolute;bottom:10px;inset-inline-start:8px;background:rgba(0,0,0,.6);border-radius:5px;padding:2px 8px;font-weight:700;font-size:11px}
.en-yt .vid .skip{position:absolute;bottom:8px;inset-inline-end:0;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.5);border-inline-end:0;padding:6px 10px;font-weight:700;font-size:11.5px}
.en-yt .vid .prog{position:absolute;inset-inline:0;bottom:0;height:3px;background:rgba(255,255,255,.3)}
.en-yt .vid .prog i{position:absolute;inset-inline-end:0;top:0;bottom:0;width:40%;background:#F5C518}
.en-yt .strip{display:flex;align-items:center;gap:10px;background:#1F1F1F;padding:10px 12px}
.en-yt .strip small{display:block;color:#AAA;font-size:11px}
.en-yt .t{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.en-yt .t b{font-size:14px;line-height:1.4}
.en-yt .t span{color:#BBB;font-size:11.5px;line-height:1.5}
.en-yt .sug{display:flex;gap:10px;padding:4px 12px}
.en-yt .sug i{width:120px;aspect-ratio:16/9;border-radius:8px;background-size:cover;background-position:center;flex:none}
.en-yt .sug span{font-size:11.5px;color:#DDD;line-height:1.4}
.en-tt-rail{position:absolute;inset-inline-end:10px;top:38%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10.5px;font-weight:700}
.en-tt-rail .ic{width:28px;height:28px}
.en-tt-rail span{display:flex;flex-direction:column;align-items:center;gap:1px}
.en-tt-nav{position:relative;z-index:3;display:flex;justify-content:space-around;align-items:center;background:#000;height:50px;font-size:9.5px;flex:none}
.en-tt-nav span{display:flex;flex-direction:column;align-items:center;gap:1px}
.en-tt-nav .ic{width:20px;height:20px}
.en-tt-nav .mk{width:36px;height:24px;border-radius:7px;background:#fff;color:#000;display:grid;place-items:center}
.en-snap-card{display:flex;align-items:center;gap:10px;background:#fff;color:#0F1B1A;border-radius:18px;padding:10px;border:0;width:100%;text-align:start;cursor:pointer}
.en-snap-card .go{width:34px;height:34px;border-radius:50%;background:#0E9F7E;color:#fff;display:grid;place-items:center;flex:none}
.en-snap-card small{display:block;color:#5E6C6A;font-size:11px}
.en-white{background:#fff;color:#0F1B1A}
.en-q{display:flex;align-items:center;gap:8px;margin:6px 12px 0;height:38px;border-radius:999px;background:#F1F3F4;padding-inline:12px;font-size:13px}
.en-q .ic{color:#5E6C6A}
.en-tabs{display:flex;gap:16px;padding:10px 14px 0;font-size:12px;color:#5E6C6A;border-bottom:1px solid #E2E8E6}
.en-tabs span{padding-bottom:7px}
.en-tabs span.on{color:#0F1B1A;font-weight:800;border-bottom:3px solid #0F1B1A}
.en-res{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-bottom:1px solid #E2E8E6}
.en-site{display:flex;align-items:center;gap:7px;font-size:11.5px}
.en-site .en-disc{width:24px;height:24px;background:#EDF8F4}.en-site .en-disc .logo{width:16px;height:16px}
.en-site small{display:block;color:#5E6C6A;direction:ltr;text-align:right}
.en-link{border:0;background:none;padding:0;text-align:start;color:#1A5FD1;font-size:15.5px;line-height:1.35;cursor:pointer;font-weight:400}
.en-link:hover{text-decoration:underline}
.en-res p{font-size:11.5px;color:#2C3A38;line-height:1.55}
.en-sl{display:flex;gap:5px;flex-wrap:wrap}.en-sl span{border:1px solid #E2E8E6;border-radius:999px;padding:3px 10px;color:#1A5FD1;font-size:11px}
.en-maps .map{position:relative;height:42%;flex:none;background:var(--map-land)}
.en-maps .map svg{position:absolute;inset:0;width:100%;height:100%}
.en-maps .msearch{position:absolute;top:34px;inset-inline:10px;z-index:2;display:flex;align-items:center;gap:8px;height:38px;border-radius:999px;background:#fff;color:#0F1B1A;padding-inline:12px;font-size:12.5px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.en-maps .sheet2{position:relative;z-index:2;margin-top:-18px;flex:1;background:#fff;color:#0F1B1A;border-radius:20px 20px 0 0;padding:10px 14px;display:flex;flex-direction:column;gap:7px;overflow:hidden;box-shadow:0 -8px 20px -8px rgba(0,0,0,.2)}
.en-maps .sheet2 h4{font-family:var(--f-display);font-size:21px;font-weight:900}
.en-maps .acts{display:flex;flex-wrap:wrap;gap:6px}
.en-maps .acts span,.en-maps .acts button{display:inline-flex;align-items:center;gap:5px;border:1px solid #E2E8E6;border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:700;color:#1A5FD1;background:#fff}
.en-maps .acts .hot{border:2px solid #0E9F7E;background:#EDF8F4;color:#0A6B56;cursor:pointer}
.en-maps .pics{display:flex;gap:6px}.en-maps .pics i{flex:1;aspect-ratio:16/10;border-radius:10px;background-size:cover;background-position:center}
.en-prov{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;width:100%;text-align:start;border:0;background:none;color:#8E9B99;font-size:11.5px}
.en-prov b{display:block;font-size:14px}
.en-prov .lg{width:34px;height:34px;border-radius:10px;background:#EEF2F1;flex:none;display:grid;place-items:center}
.en-prov.om{background:#EDF8F4;border:1.5px solid #0E9F7E;color:#2C3A38;cursor:pointer}
.en-prov.om b{color:#0F1B1A}
.en-prov.om .lg{background:#fff;border:1px solid #E2E8E6}
.en-prov.om .lg .logo{width:24px;height:24px}
.en-url{font-size:12px;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:7px 10px;direction:ltr;text-align:left;overflow-wrap:anywhere}
.en-note{font-size:12.5px;color:var(--muted)}
.en-table{overflow-x:auto;border-radius:22px;background:var(--surface);box-shadow:var(--sh-1);border:1px solid var(--card-line)}
.en-table table{min-width:860px}
.en-table td .en-url{display:inline-block}

/* ===== admin (SnowUI, per approved A1–A5) ===== */
.adm{grid-template-columns:240px minmax(0,1fr)}
.a-side{gap:2px;padding:18px 14px;background:var(--surface)}
.a-brand{display:flex;align-items:center;gap:6px;padding:2px 6px 8px}
.a-me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--snow-bg);margin-bottom:6px}
.a-me .av{width:36px;height:36px;font-size:15px;background:var(--snow-ink);color:var(--surface)}
.a-me b{display:block;font-size:13px}.a-me small{font-size:11.5px;color:var(--muted)}
.a-nav{padding:8px 10px;gap:10px;font-size:13.5px}
.a-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--snow-bg);color:var(--muted);flex:none}
.a-nav.on .a-ic{background:var(--snow-ink);color:var(--surface)}
.a-nav .ic{width:17px;height:17px}
.a-count{margin-inline-start:auto;font-size:11.5px;color:var(--muted);font-weight:700}
.a-nav .badge{margin-inline-start:auto}
.a-topbar{gap:10px;padding:14px 24px}
.a-tb{border:0;background:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--snow-ink);position:relative}
.a-tb:hover{background:var(--snow-act)}
.a-tb .badge{position:absolute;top:-2px;inset-inline-end:-2px;min-width:16px;height:16px;font-size:10px}
.a-search{display:flex;align-items:center;gap:8px;background:var(--snow-act);border-radius:10px;padding:0 10px;height:36px;width:min(280px,40%);color:var(--muted)}
.a-search input{border:0;background:none;padding:0;height:100%;box-shadow:none!important;font-size:13px}
.a-search kbd{font-family:inherit;font-size:11px;color:var(--muted-2);direction:ltr}
.a-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start;min-width:0}
.a-wrap.solo{grid-template-columns:minmax(0,1fr)}
.a-rp{border-inline-start:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column;gap:18px;min-height:100%}
.a-rp h4{font-size:14.5px;font-weight:800}
.a-feed{display:flex;flex-direction:column;gap:12px}
.a-feed div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5}
.a-feed .fi{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--snow-2)}
.a-feed .fi.hot{background:var(--danger-soft);color:var(--danger-ink)}.a-feed .fi.warn{background:var(--warn-soft);color:var(--warn-ink)}.a-feed .fi.ok{background:var(--brand-100);color:var(--brand-700)}.a-feed .fi.blue{background:var(--snow-1)}
.a-feed small{display:block;color:var(--muted-2);font-size:11px}
.a-title{gap:10px 12px}
.a-title .grow{min-width:0}
.a-title small{display:block;color:var(--muted);font-size:12.5px}
.a-filter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:700;background:var(--surface)}
.a-kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.k4{border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--snow-1);min-width:0}
.k4:nth-child(even){background:var(--snow-2)}
.k4.attn{background:var(--accent-soft)}
.k4 .kh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.k4 .kh .ki{width:30px;height:30px;border-radius:10px;background:var(--surface);display:grid;place-items:center;flex:none}
.k4 .kv2{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.k4 .kv2 b{font-family:var(--f-display);font-size:32px;font-weight:900;line-height:1;white-space:nowrap}
.k4 .kv2 span{font-size:11.5px;color:var(--muted);font-weight:700;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.k4 .spark{height:26px;width:100%}
.k4 .spark path{fill:none;stroke:var(--snow-ink);stroke-width:2;opacity:.55}
.a-row2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.sbar2{display:flex;flex-direction:column;gap:6px}
.sbar2 .row{font-size:13px}
.sbar2 .bar{height:8px}
.hbars{display:flex;flex-direction:column;gap:12px}
.hbar{display:grid;grid-template-columns:120px minmax(0,1fr) 70px;gap:10px;align-items:center;font-size:13px}
.hbar .bar{height:10px;background:var(--snow-act)}
.hbar .bar i{background:var(--snow-ink)}
.hbar b{text-align:end}
.src-ic{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;background:var(--snow-1);flex:none}
.a-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.rest-c{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.rest-c .cv{height:110px}
.rest-c .b{padding:14px;display:flex;flex-direction:column;gap:8px}
.perm{display:grid;place-items:center}
.perm .ic{color:var(--brand-600)}
.perm .no{color:var(--muted-2)}
.bulk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--snow-ink);color:var(--surface);border-radius:18px;padding:14px 18px}
.bulk .muted{color:color-mix(in srgb,var(--surface) 70%,transparent)}
.seg2{display:inline-flex;gap:4px;background:var(--snow-act);border-radius:12px;padding:4px}
.seg2 button{border:0;background:none;border-radius:9px;padding:7px 14px;font-weight:700;font-size:13px;color:var(--muted)}
.seg2 button.on{background:var(--surface);color:var(--snow-ink);box-shadow:var(--sh-1)}
.docrow{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:14px;padding:12px;flex-wrap:wrap}
.docrow .di{width:38px;height:38px;border-radius:10px;background:var(--snow-act);display:grid;place-items:center;flex:none}
.app-it{border:1px solid transparent;background:none;border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;width:100%;text-align:start;color:var(--snow-ink)}
.app-it.on{background:var(--surface);border-color:var(--snow-ink)}
.app-it .av{width:36px;height:36px;font-size:15px;background:var(--snow-2);color:var(--snow-ink)}
@container adm (max-width:1250px){ .a-wrap{grid-template-columns:minmax(0,1fr)} .a-rp{border-inline-start:0;border-top:1px solid var(--line)} }
@container adm (max-width:1000px){ .a-kpi4{grid-template-columns:repeat(2,minmax(0,1fr))} .a-row2{grid-template-columns:minmax(0,1fr)} }
@container adm (max-width:760px){ .a-me,.a-brand{display:none} .a-ic{width:24px;height:24px} .a-search{display:none} .hbar{grid-template-columns:90px minmax(0,1fr) 54px} }

.a-nav.on .a-ic .ic{color:var(--surface)}
.a-search kbd{white-space:nowrap}


/* ===== v4: one trip, handover evidence, owner portal, partners ===== */
.trip{display:flex;flex-direction:column;gap:8px;background:var(--brand-soft);border:1px solid var(--brand-100);border-radius:20px;padding:14px;margin-top:12px}
.trip-b{display:inline-flex;align-items:center;gap:5px;background:var(--surface);color:var(--brand-700);border-radius:999px;padding:3px 10px;font-weight:800;font-size:12.5px;align-self:flex-start}
.trip-b .ic{width:15px;height:15px}
.trip-b.sm{padding:1px 8px;font-size:11.5px;background:var(--brand-soft)}
.trip-h{font-family:var(--f-display);font-size:21px;font-weight:800;line-height:1.3;color:var(--ink)}
.trip-list{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.trip-it{border:0;background:var(--surface);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:140px;color:var(--ink);box-shadow:var(--sh-1)}
.trip-it .ph{width:56px;height:56px}
.trip-band{display:flex;align-items:center;gap:10px;background:var(--brand-soft);border:1px solid var(--brand-100);border-radius:16px;padding:12px 14px;margin-top:12px;color:var(--ink)}
.trip-band>.ic{color:var(--brand-600);width:22px;height:22px;flex:none}
.trip-sec{display:flex;flex-direction:column;gap:10px;padding-block:6px;border-bottom:1px dashed var(--line)}
.trip-sec:last-child{border-bottom:0}
.trip-sec .ph{width:30px;height:30px}
.trip-sts{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.trip-sts .ph{width:28px;height:28px}
.trip-dec{border:2px solid var(--warn);gap:10px}
.trip-dec h3{text-align:center;font-size:19px}
.trip-dec p{text-align:center}
.kprog.five{grid-template-columns:repeat(5,1fr)}
.stamps{display:flex;flex-direction:column;gap:2px;position:relative}
.stamp{display:flex;align-items:center;gap:10px;padding:6px 0;position:relative}
.stamp:not(:last-child)::after{content:"";position:absolute;inset-inline-start:15px;top:38px;bottom:-6px;width:2px;background:var(--line)}
.stamp .si{width:32px;height:32px;background:var(--surface-2);color:var(--muted)}
.stamp .si .ic{width:16px;height:16px}
.stamp.g .si{background:var(--brand-100);color:var(--brand-700)}
.stamp.w .si{background:var(--warn-soft);color:var(--warn-ink)}
.stamp.r .si{background:var(--danger-soft);color:var(--danger-ink)}
.stamp b{font-size:13.5px}
.stamp small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.stamp>.num{font-size:13px;color:var(--ink-2)}
.k-wait{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:20px;padding:12px 14px}
.k-wait.late{background:var(--warn-soft)}
.k-wait>.grow>b{display:block;font-family:var(--f-display);font-size:36px;font-weight:900;line-height:1}
.oc.stuck{border:2px solid var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}
.stuckb{align-items:center}
.stuckb .btn{flex:none}
.bx.owner{background:var(--bg)}
.o-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:16px;align-items:start;min-height:0}
.o-side{display:flex;flex-direction:column;gap:4px;background:var(--surface);border-radius:18px;padding:10px;position:sticky;top:0}
.o-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.o-h{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.o-h h2{font-family:var(--f-display);font-size:28px;font-weight:900}
.o-note{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:var(--info-soft);font-size:13px;color:var(--ink)}
.o-note.hot{background:var(--danger-soft)}
.o-note>.ic{width:18px;height:18px;flex:none;margin-top:2px}
.o-form .row>.field{flex:1;min-width:0}
.join{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.join .row>.field{flex:1;min-width:0}
.join-why .si{width:34px;height:34px}
.flink{border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.k-joinl{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:start;color:var(--ink)}
.k-joinl>.ic:first-child{width:22px;height:22px;color:var(--brand-600)}
.k-joinl small{display:block;color:var(--muted);font-size:12px}
.kj-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;font-size:11px;color:var(--muted-2);text-align:center}
.kj-steps span{display:flex;flex-direction:column;gap:5px}
.kj-steps i{height:6px;border-radius:6px;background:var(--line)}
.kj-steps .done{color:var(--brand-600)}.kj-steps .done i{background:var(--brand)}
.kj-steps .now{color:var(--ink);font-weight:800}.kj-steps .now i{background:var(--brand-100);box-shadow:inset 0 0 0 2px var(--brand)}
.cm-scale{position:relative;display:grid;grid-template-columns:50fr 20fr 30fr;height:10px;border-radius:6px;overflow:visible}
.cm-scale i{display:block;height:10px}
.cm-scale i.r{background:var(--danger);border-start-start-radius:6px;border-end-start-radius:6px}
.cm-scale i.a{background:var(--warn)}
.cm-scale i.g{background:var(--brand);border-start-end-radius:6px;border-end-end-radius:6px}
.cm-scale b{position:absolute;top:-5px;width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);transform:translateX(50%)}
.sw-btn{border:0;width:48px;height:28px;border-radius:999px;background:#7A8784;position:relative;flex:none;padding:0}
.sw-btn span{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:inset-inline-start .2s}
.sw-btn.on{background:var(--brand)}.sw-btn.on span{inset-inline-start:23px}
input[type=range]{width:100%;accent-color:var(--brand)}
.hand-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
.hand-attr{background:var(--surface-2);border-radius:14px;padding:14px;gap:6px}
.ph.big{width:56px;height:56px;border-radius:14px}
tr.sel td{background:var(--brand-soft)}
@container web (min-width:860px){.join{grid-template-columns:320px minmax(0,1fr)}}
@media (max-width:700px){.o-wrap{grid-template-columns:minmax(0,1fr)}.o-side{flex-direction:row;overflow-x:auto;position:static}.hand-grid{grid-template-columns:minmax(0,1fr)}}
.app-nav{grid-template-columns:repeat(3,1fr)}