/* Bamsell – calm, mobile-first UI. No build step, no external fonts (fast on mobile data). */
:root{
  --bg:#f5f6f3; --surface:#fff; --surface-2:#f9faf8; --line:#e5e7e1; --line-2:#d6d9d1;
  --ink:#16201b; --ink-2:#3f4a44; --muted:#6b756f;
  --brand:#0f7a4f; --brand-ink:#fff; --brand-soft:#e5f3ec; --brand-dark:#0a5c3b;
  --wa:#1fa855; --danger:#c2352b; --danger-soft:#fcebea; --warn:#b26b00; --warn-soft:#fff3dc;
  --blue:#2459c7; --blue-soft:#e8effc; --violet:#6a43c2; --violet-soft:#efeafb; --sky:#0a7192; --sky-soft:#e2f3f8;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(16,24,20,.05),0 2px 8px rgba(16,24,20,.04);
  --font: ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.01em}
h1{font-size:22px;font-weight:700}
h2{font-size:17px;font-weight:650}
h3{font-size:15px;font-weight:650}
p{margin:0}
.i{flex:none;display:block}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
.nowrap{white-space:nowrap} .right{text-align:right} .num{font-variant-numeric:tabular-nums}
.pos{color:var(--brand)} .neg{color:var(--danger)}
.stack{display:flex;flex-direction:column;gap:12px} .stack-lg{display:flex;flex-direction:column;gap:20px}
.row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
@media (max-width:899px){.hide-sm{display:none !important}}
.show-xs{display:none}
@media (max-width:520px){.hide-xs{display:none !important}.show-xs{display:block !important}}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Shell ---------- */
.shell{min-height:100vh}
.sidebar{display:none}
.topbar{position:sticky;top:0;z-index:20;background:rgba(245,246,243,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:56px}
.topbar .biz{font-weight:700;font-size:16px}
.brand-dot{width:28px;height:28px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.main{padding:16px 16px 96px;max-width:1120px;margin:0 auto}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.page-head>div:first-child{flex:1 1 220px;min-width:0}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:2px}
.backlink{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:14px;margin-bottom:8px}

.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a,.bottomnav button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:11px;color:var(--muted);font-weight:550}
.bottomnav .on{color:var(--brand)}
.bottomnav .badge{position:absolute;margin-left:18px;margin-top:-4px}
.nav-ic{position:relative}

.fab{position:fixed;right:16px;bottom:76px;z-index:25;width:56px;height:56px;border-radius:18px;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(15,122,79,.35)}

@media (min-width: 900px){
  .shell{display:grid;grid-template-columns:240px 1fr}
  .sidebar{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:var(--surface);padding:16px 12px}
  .sidebar .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
  .sidebar .logo b{font-size:16px}
  .sidebar nav{display:flex;flex-direction:column;gap:2px}
  .sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink-2);font-weight:550}
  .sidebar nav a:hover{background:var(--surface-2)}
  .sidebar nav a.on{background:var(--brand-soft);color:var(--brand-dark)}
  .sidebar nav a .badge{margin-left:auto}
  .sidebar .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted)}
  .topbar,.bottomnav,.fab{display:none}
  .main{padding:28px 32px 48px}
  .hide-lg{display:none !important}
  h1{font-size:24px}
}

/* ---------- Cards & lists ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-head a{color:var(--brand);font-size:14px;font-weight:600}
.list{display:flex;flex-direction:column}
.list > .item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.list > .item:first-child{border-top:0}
a.item:hover{background:var(--surface-2)}
.grid{display:grid;gap:12px}
@media (min-width:700px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} }
.grid-2>*,.grid-3>*{min-width:0} .grid-2>.btn,.grid-3>.btn,.grid-2>form>.btn,.grid-3>form>.btn{white-space:normal;line-height:1.2;text-align:center;padding:0 10px;height:auto;min-height:44px}
.grid-main{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .grid-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start} }

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.kpi .label{font-size:12.5px;color:var(--muted);font-weight:550}
.kpi .value{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .hint{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.hero{background:var(--brand);border-color:var(--brand);color:#fff}
.kpi.hero .label,.kpi.hero .hint{color:rgba(255,255,255,.8)}
.kpi.hero.loss{background:var(--danger);border-color:var(--danger)}

/* ---------- Action tiles (dashboard) ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.tile .n{font-size:26px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1}
.tile .t{font-size:13px;color:var(--ink-2);font-weight:600}
.tile.hot{border-color:#b9dccb;background:linear-gradient(0deg,var(--brand-soft),#fff)}
.tile.hot .n{color:var(--brand-dark)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 15px var(--font);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(.95);background:var(--wa)}
.btn-danger{color:var(--danger);border-color:#f1c7c3}
.btn-ghost{border-color:transparent;background:transparent}
.btn-sm{height:36px;padding:0 12px;font-size:14px;border-radius:10px}
.btn-block{width:100%}
.btn-icon{width:40px;height:40px;padding:0;border-radius:12px}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.icon-btn.wa{color:var(--wa)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.linkbtn{all:unset;cursor:pointer;color:var(--brand);font-weight:600}

/* ---------- Status pills & badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.todo{background:var(--blue-soft);color:var(--blue)}
.pill.follow{background:var(--warn-soft);color:var(--warn)}
.pill.ready{background:var(--violet-soft);color:var(--violet)}
.pill.out{background:var(--sky-soft);color:var(--sky)}
.pill.delivered{background:var(--brand-soft);color:var(--brand-dark)}
.pill.failed{background:var(--danger-soft);color:var(--danger)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700}
.badge.soft{background:var(--line);color:var(--ink-2)}
.tag{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--warn-soft);color:var(--warn);font-size:11.5px;font-weight:650}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs a .c{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
@media (min-width:900px){.tabs{margin:0 0 12px;padding:0}}

/* ---------- Orders list ---------- */
.order{display:flex;gap:12px;padding:14px 16px;border-top:1px solid var(--line);align-items:flex-start}
.order:first-child{border-top:0}
.order:hover{background:var(--surface-2)}
.order .who{font-weight:650}
.order .what{color:var(--ink-2);font-size:14px}
.order .meta{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.order .amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.order .acts{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.avatar{width:38px;height:38px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--ink-2);flex:none;font-size:14px}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field .help{font-size:12.5px;color:var(--muted)}
.field .err{font-size:12.5px;color:var(--danger);font-weight:550}
.input,select.input,textarea.input{width:100%;height:46px;padding:0 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font:16px var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;min-height:88px;padding:11px 13px;line-height:1.45;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b756f' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,122,79,.15)}
.input.bad{border-color:var(--danger)}
.input-sm{height:38px;font-size:14px;border-radius:10px}
/* Money inputs: the currency (₦, GH₵…) is part of the box, so any symbol fits. */
.prefix{display:flex;align-items:center;width:100%;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.prefix:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,122,79,.15)}
.prefix:has(.input-sm){border-radius:10px}
.prefix span{flex:none;padding-left:13px;color:var(--muted);font-weight:600;white-space:nowrap;pointer-events:none}
.prefix .input{flex:1;min-width:0;border:0;box-shadow:none;background:transparent;padding-left:6px}
.prefix .input:focus{box-shadow:none}
.form-grid{display:grid;gap:14px}
@media (min-width:700px){.form-grid.two{grid-template-columns:1fr 1fr}.span-2{grid-column:span 2}}
.check{display:flex;align-items:center;gap:10px;font-size:14.5px}
.check input{width:20px;height:20px;accent-color:var(--brand)}
.searchbar{position:relative;flex:1}
.searchbar .i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.searchbar .input{padding-left:38px;height:42px}
.choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.choice label{position:relative}
.choice input{position:absolute;opacity:0}
.choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px;border:1px solid var(--line-2);border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;background:var(--surface)}
.choice input:checked + span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark);box-shadow:inset 0 0 0 1px var(--brand)}

/* ---------- Dialog / bottom sheet ---------- */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:92vh;border-radius:20px 20px 0 0;background:var(--surface);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.18)}
dialog.sheet::backdrop{background:rgba(16,24,20,.42)}
dialog.sheet[open]{animation:up .2s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px}
.sheet-body{padding:8px 18px 20px;overflow:auto}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:8px auto 0}
@media (min-width:700px){dialog.sheet{margin:auto;border-radius:20px}.sheet-grip{display:none}}

/* ---------- Flash ---------- */
.flash{position:fixed;left:50%;transform:translateX(-50%);top:12px;z-index:60;max-width:calc(100% - 32px);width:max-content;padding:11px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:550;font-size:14.5px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:flex;gap:10px;align-items:center;transition:opacity .3s,transform .3s}
.flash.error{background:var(--danger)}
.flash.gone{opacity:0;transform:translate(-50%,-10px);pointer-events:none}

/* ---------- Empty / callouts ---------- */
.empty{text-align:center;padding:36px 20px;color:var(--muted)}
.empty .ic{width:52px;height:52px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 12px;color:var(--ink-2)}
.empty h3{color:var(--ink);margin-bottom:4px}
.callout{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:#6e4300;font-size:14px}
.callout.info{background:var(--blue-soft);color:#1b3f8c}
.callout.ok{background:var(--brand-soft);color:var(--brand-dark)}

/* ---------- Setup checklist ---------- */
.steps{display:flex;flex-direction:column}
.step{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;color:var(--muted)}
.step.done .dot{background:var(--brand);border-color:var(--brand);color:#fff}
.step.done .t{color:var(--muted);text-decoration:line-through}
.progress{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--brand);border-radius:6px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:650;text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t .num{text-align:right}
table.t tfoot td{font-weight:700;background:var(--surface-2)}
.stock-neg{color:var(--danger);font-weight:700}
.stock-low{color:var(--warn);font-weight:700}

/* ---------- Statement (P&L) ---------- */
.statement .line{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.statement .line:first-child{border-top:0}
.statement .line.sub{padding-left:32px;color:var(--ink-2);font-size:14px}
.statement .line.total{font-weight:700;background:var(--surface-2)}
.statement .line.grand{font-weight:800;font-size:17px;background:var(--brand-soft);color:var(--brand-dark)}
.statement .line.grand.neg{background:var(--danger-soft);color:var(--danger)}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0 16px 8px}
.timeline li{position:relative;padding:8px 0 8px 18px;font-size:13.5px;border-left:2px solid var(--line);margin-left:4px}
.timeline li::before{content:"";position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.timeline li:first-child::before{border-color:var(--brand);background:var(--brand)}

/* ---------- Detail rows ---------- */
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:14.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}

/* ---------- Code / copy ---------- */
.code{display:block;width:100%;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0f1713;color:#d6f5e4;border-radius:12px;padding:12px 14px;white-space:pre-wrap;word-break:break-all;border:0}
.copyline{display:flex;gap:8px;align-items:center}
.copyline .input{font:13.5px ui-monospace,Menlo,monospace;background:var(--surface-2)}

/* ---------- Public pages (login, order form) ---------- */
.public{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:32px 16px}
.public .box{width:100%;max-width:420px}
.public .logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;font-weight:750;font-size:18px}
.formpage{background:var(--bg);min-height:100vh;padding:20px 16px 40px}
.formpage.embed{background:transparent;min-height:0;padding:0}
.formpage .box{max-width:520px;margin:0 auto}
.summary{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:12px;background:var(--brand-soft);color:var(--brand-dark);font-weight:650}
.summary .big{font-size:20px;font-weight:800}

/* ---------- WhatsApp chat ---------- */
.chat{display:flex;flex-direction:column;gap:8px;padding:14px 16px;max-height:420px;overflow-y:auto;background:#efeae2}
.bubble{max-width:85%;padding:7px 10px 5px;border-radius:12px;font-size:14px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08);word-wrap:break-word}
.bubble.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:4px}
.bubble.in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.bubble.failed{background:#fde3e1}
.bubble .meta{font-size:11px;color:#667781;text-align:right;margin-top:2px}
.bubble .err{font-size:12px;color:var(--danger);font-weight:600}
.tick{font-size:11px;letter-spacing:-2px;color:#667781;margin-left:4px}
.tick.read{color:#2b9fe0}
.tick.fail{color:var(--danger);font-weight:800;letter-spacing:0}
.composer{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line-2);margin-right:6px;vertical-align:middle}
.status-dot.on{background:var(--wa);box-shadow:0 0 0 4px rgba(31,168,85,.18)}
.status-dot.warn{background:var(--warn)}
.qrbox{display:grid;place-items:center;width:280px;height:280px;margin:0 auto;border-radius:16px;border:1px solid var(--line);background:#fff}
.qrbox img{width:260px;height:260px;image-rendering:pixelated}
.switch{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.switch:first-child{border-top:0}
.switch input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand);flex:none}

/* ---------- Package cards (order forms) ---------- */
.pkgs{display:grid;gap:10px}
.pkg{position:relative;display:block;cursor:pointer}
.pkg input{position:absolute;opacity:0;pointer-events:none}
.pkg-box{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.pkg input:checked + .pkg-box{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,122,79,.15);background:linear-gradient(0deg,var(--brand-soft),var(--surface))}
.pkg input:focus-visible + .pkg-box{outline:2px solid var(--brand);outline-offset:2px}
.pkg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pkg-main b{font-size:16px}
.pkg-main small{color:var(--muted);font-size:13px}
.pkg-price{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pkg-badge{position:absolute;top:-9px;right:14px;background:var(--brand);color:#fff;font-size:11px;font-weight:750;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.pkg-row{display:grid;grid-template-columns:1.6fr .6fr .9fr 1fr 1fr auto auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.pkg-row:first-child{border-top:0}
@media (max-width:760px){.pkg-row{grid-template-columns:1fr 1fr;padding:12px 0}.pkg-row .lab{grid-column:span 2}}

@media print{
  .sidebar,.topbar,.bottomnav,.fab,.no-print{display:none !important}
  .shell{display:block} .main{padding:0} body{background:#fff}
  .card,.kpi{box-shadow:none}
}

/* Order page: customer order + status */
.pill.callback{background:var(--warn-soft);color:var(--warn)}
.pill.rescheduled{background:var(--violet-soft);color:var(--violet)}
.cust{overflow:hidden}
.cust-top{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
.cust-top h1{font-size:22px;line-height:1.2}
.avatar.lg{width:46px;height:46px;font-size:19px;flex:none}
.cust-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 14px}
.cust-actions .btn{height:48px;font-size:15px}
.cust-kv{padding:14px 16px;border-top:1px solid var(--line);margin:0}
.cust-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2,#fafaf8)}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-btn{height:56px;font-size:15px;justify-content:center;min-width:0;padding:0 10px}
.cust-foot .linkbtn{display:inline-flex;align-items:center;gap:5px}
.st-btn.st-ok{border-color:#b9dccb;color:var(--brand-dark)}
.st-btn.st-bad{color:var(--danger)}
.st-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.st-btn.st-bad.on{background:var(--danger);border-color:var(--danger);color:#fff}

/* Plan & billing */
.usage{display:grid;gap:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative;padding:20px;display:flex;flex-direction:column;gap:10px}
.plan.pop{border:2px solid var(--brand)}
.plan-tag{position:absolute;top:-11px;left:18px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.plan h3{font-size:18px}
.plan .price{font-size:28px;font-weight:800;letter-spacing:-.02em}
.plan .price small{font-size:14px;font-weight:600;color:var(--muted);margin-left:4px}
.ticks{list-style:none;padding:0;margin:4px 0 8px;display:grid;gap:6px;flex:1}
.ticks li{position:relative;padding-left:24px;font-size:14px;color:var(--ink-2)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:800}

/* (i) help buttons and their popups */
.tip-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.tip-shot{width:100%;max-width:320px;border-radius:12px;border:1px solid var(--line);align-self:center}
.help-link{display:block;margin:auto 0 10px;padding:8px 12px;border-radius:10px;font-weight:650;font-size:14px;color:var(--ink-2)}
.help-link:hover{background:var(--surface-2)}
.help-link + .foot{margin-top:0}
.sidebar .help-link{margin-top:auto}

/* ⓘ help button */
.help-i{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;border-radius:50%;color:var(--muted);cursor:pointer;vertical-align:-5px;transition:color .15s,background .15s}
.help-i svg{width:17px;height:17px;display:block}
.help-i:hover,.help-i:focus-visible{color:var(--brand);background:var(--brand-soft)}

/* Country switcher */
.mkt{position:relative}
.mkt summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 8px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);font-weight:650;font-size:14px;color:var(--ink);white-space:nowrap;user-select:none;transition:border-color .15s,box-shadow .15s}
.mkt summary::-webkit-details-marker{display:none}
.mkt summary::marker{content:''}
.mkt summary:hover,.mkt[open] summary{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.mkt-flag{font-size:18px;line-height:1}
.mkt-chev{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.mkt[open] .mkt-chev{transform:rotate(180deg)}
.mkt.in-side{margin:-4px 0 16px}
.mkt.in-side summary{width:100%}
.mkt.in-side .mkt-chev{margin-left:auto}
.mkt.in-top .mkt-name{display:none}
.mkt-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(16,24,20,.14);padding:6px}
.mkt.in-top .mkt-menu{left:auto;right:0}
.mkt-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.mkt-menu form{margin:0}
.mkt-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;cursor:pointer}
.mkt-menu button:hover{background:var(--surface-2)}
.mkt-menu button.on{background:var(--brand-soft)}
.mkt-txt{display:flex;flex-direction:column;line-height:1.2}
.mkt-txt b{font-size:14.5px;color:var(--ink)}
.mkt-txt small{font-size:12px;color:var(--muted)}
.mkt-check{width:18px;height:18px;margin-left:auto;color:var(--brand)}
.mkt-menu a{display:block;padding:10px;margin-top:4px;border-top:1px solid var(--line);font-weight:650;color:var(--brand);font-size:14px}

/* Order emails list */
.mail-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mail-list li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-top:1px solid var(--line);min-width:0}
.mail-list li:first-child{border-top:0}
.mail-list .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.mail-list form{margin:0}
.mail-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);flex:none}
.icon-btn.sm{width:32px;height:32px;border-radius:10px}
.icon-btn.sm:hover{color:#b42318;border-color:#f3c3bd;background:#fff5f4}
.callout.warn{background:#fff7e6;color:#7a5200}

/* Install as app */
.install-card{align-items:center;gap:12px}
.install-card .btn-icon{color:inherit}
.help-link.linkbtn{display:flex;align-items:center;gap:6px;width:100%;text-align:left;font-family:inherit;cursor:pointer;margin-top:-6px;background:none;border:0}
.help-link.linkbtn + .foot{margin-top:0}
.callout.install-card[hidden],.help-link[hidden]{display:none}
.install-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.install-steps li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.install-steps .n{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-weight:700;font-size:14px}
.ios-share{width:20px;height:20px;vertical-align:-4px;color:#0a84ff}

/* WhatsApp: QR or phone-number linking */
.seg{display:flex;gap:4px;padding:4px;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:600 15px var(--font);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pair-code{margin:10px 0 12px;font:700 clamp(30px,8vw,40px)/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--ink);user-select:all}

/* Small message at the bottom */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9999;max-width:min(92vw,420px);padding:12px 16px;border-radius:12px;background:#14201a;color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:toastIn .2s ease-out}
.toast.bad{background:#7a1d16}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:900px){.toast{bottom:24px}}

.icon-btn.copied{color:var(--brand);border-color:var(--brand)}

/* Free gifts */
.gift-tag{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 9px;border-radius:999px;background:#fdf2e3;color:#8a4b00;font-size:13px;font-weight:600}
.gift-tag .muted{font-weight:400;color:#a0672a}
.gift-inline{color:#8a4b00;font-weight:600}
.gift-box{padding:12px 14px;border:1px dashed #e8c79a;border-radius:12px;background:#fffaf2}
.pkg-gift{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#8a4b00;margin-top:-2px}
.pkg-gift select{width:auto;min-width:200px;max-width:100%}
.pkg-main small.pkg-gift-line{color:#8a4b00;font-weight:600}

/* Full report (same rows as the Excel Monthly Report and P&L) */
.full-report{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:1100px){.full-report{grid-template-columns:1.15fr 1fr;align-items:start}.full-report > p{grid-column:1/-1}}
.fr-sheet{padding:20px 20px 14px}
.fr-title{font-size:19px;margin:0 0 2px}
.fr-sub{margin:0 0 6px;color:var(--muted);font-size:13px}
.fr-gap{height:12px}
.fr-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.fr-row > span:first-child{min-width:0}
.fr-row > span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.fr-row small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:1px}
.fr-head{background:var(--brand-soft);color:var(--brand-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border:0;border-radius:8px;margin-top:2px}
.fr-section{font-weight:750;margin:6px 0 0;padding:8px 0 4px;font-size:15px}
.fr-strong{font-weight:700}
.fr-strong > span:last-child{font-size:15.5px}
.fr-indent > span:first-child{padding-left:18px;color:var(--ink-2)}
.fr-row .neg{color:var(--danger)} .fr-row .pos{color:var(--brand)}
@media print{.full-report{grid-template-columns:1fr}.fr-sheet{break-inside:avoid;box-shadow:none}}
.wa-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.acct-link{color:inherit;text-decoration:none;font-weight:600}
.acct-link:hover{color:var(--brand)}
.badge.warn{background:#d97706}
.alert-raw{white-space:pre-wrap;word-break:break-word;font:12.5px/1.5 ui-monospace,Menlo,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0 0;max-height:240px;overflow:auto}
.pw-wrap{position:relative;display:block}
.pw-wrap .input{padding-right:84px}
.pw-toggle{all:unset;cursor:pointer;position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:550}
.pw-toggle:hover{color:var(--ink);background:var(--surface-2)}
.pw-toggle:focus-visible{outline:2px solid var(--brand,#0f7a4f);outline-offset:1px}
.stock-t th:first-child,.stock-t td:first-child{position:sticky;left:0;background:var(--surface,#fff);z-index:1;min-width:120px}
.stock-t .store-row td{background:var(--surface-2)}
.stock-t tfoot th{border-top:2px solid var(--line);padding-top:10px}
.stock-t .st-states{display:inline-block;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.wa-option{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.wa-option.on{border-color:#9fd3b8;background:#f4faf6}
.tpl-states{display:flex;flex-wrap:wrap;gap:6px}
.tpl-state{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.tpl-state.ok{background:#e7f3ec;border-color:#b9dcc8;color:#14603f}
.tpl-state.wait{background:#fff7e6;border-color:#f1d9a8;color:#7a5200}
.tpl-state.bad{background:#fdecea;border-color:#f1c7c3;color:#a8321f}
.fw-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:fw}
.fw-steps>li{position:relative;padding-left:40px;display:flex;flex-direction:column;gap:6px;counter-increment:fw}
.fw-steps>li::before{content:counter(fw);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink-2)}
.fw-steps>li.done::before{content:"✓";background:#e7f3ec;border-color:#b9dcc8;color:#14603f}
/* Settings: jump list */
.jump{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.jump a:hover{border-color:var(--brand);color:var(--brand)}
[id]{scroll-margin-top:72px}
/* Brand */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wordmark{font-weight:800;letter-spacing:-.04em;font-size:22px;color:var(--ink);line-height:1}
.wordmark span{color:var(--brand)}
.mark{flex:none;display:block}
.bamsell-by{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);text-decoration:none}
.bamsell-by .wordmark{font-size:13px}