:root{
  /* Kardix: everything is a card. Black ground, royal-blue actions, gold foil on card edges, prices and the wordmark. */
  --bg:#05070E;--surface:#0D1322;--ink:#EDF1FF;--muted:#93A0C0;--line:#1F2B4A;
  --accent:#8FAAFF;--accent-bg:#2F5BFF;--accent-ink:#FFFFFF;--accent-soft:#111C42;
  --gold:#E8BE4F;--gold-soft:#2A2208;--gold-hi:#F7E3A0;--gold-lo:#B98A22;
  --card-a:#111C42;--card-b:#070B1A;--foil-1:#E8BE4F;--foil-2:#5C78E8;--foil-3:#8A6A1E;--guil:rgba(143,170,255,.11);
  --glow-1:rgba(47,91,255,.24);--glow-2:rgba(232,190,79,.07);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%238FAAFF' stroke-opacity='.07'%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Ccircle cx='60' cy='60' r='36'/%3E%3Ccircle cx='60' cy='60' r='48'/%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='120' cy='0' r='24'/%3E%3Ccircle cx='0' cy='120' r='24'/%3E%3Ccircle cx='120' cy='120' r='24'/%3E%3C/svg%3E");
  --warn:#F0B35A;--warn-soft:#33260C;--ok:#5CD18F;--ok-soft:#10301F;--bad:#FF8C80;--bad-soft:#3A1714;
  --f-display:'Reem Kufi','Cairo','Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
  --f-body:'Tajawal','Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F1F4FB;--surface:#FFFFFF;--ink:#0A1226;--muted:#56627F;--line:#D5DBEE;
    --accent:#1B45D8;--accent-bg:#1B45D8;--accent-ink:#FFFFFF;--accent-soft:#E1E8FF;
    --gold:#8A6400;--gold-soft:#F8EBC4;--gold-hi:#B8860B;--gold-lo:#5E4300;
    --card-a:#FFFFFF;--card-b:#E6EDFF;--foil-1:#B8860B;--foil-2:#2F5BFF;--foil-3:#7A5A10;--guil:rgba(27,69,216,.09);
    --glow-1:rgba(27,69,216,.12);--glow-2:rgba(184,134,11,.10);
    --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%231B45D8' stroke-opacity='.06'%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Ccircle cx='60' cy='60' r='36'/%3E%3Ccircle cx='60' cy='60' r='48'/%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='120' cy='0' r='24'/%3E%3Ccircle cx='0' cy='120' r='24'/%3E%3Ccircle cx='120' cy='120' r='24'/%3E%3C/svg%3E");
    --warn:#8F5506;--warn-soft:#FBEBD0;--ok:#16723F;--ok-soft:#D9F1E3;--bad:#B42318;--bad-soft:#FBE3E0;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F1F4FB;--surface:#FFFFFF;--ink:#0A1226;--muted:#525E7B;--line:#D5DBEE;
  --accent:#1B45D8;--accent-bg:#1B45D8;--accent-ink:#FFFFFF;--accent-soft:#E1E8FF;
  --gold:#8A6400;--gold-soft:#F8EBC4;--gold-hi:#B8860B;--gold-lo:#5E4300;
  --card-a:#FFFFFF;--card-b:#E6EDFF;--foil-1:#B8860B;--foil-2:#2F5BFF;--foil-3:#7A5A10;--guil:rgba(27,69,216,.09);
  --glow-1:rgba(27,69,216,.12);--glow-2:rgba(184,134,11,.10);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%231B45D8' stroke-opacity='.06'%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Ccircle cx='60' cy='60' r='36'/%3E%3Ccircle cx='60' cy='60' r='48'/%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='120' cy='0' r='24'/%3E%3Ccircle cx='0' cy='120' r='24'/%3E%3Ccircle cx='120' cy='120' r='24'/%3E%3C/svg%3E");
  --warn:#8F5506;--warn-soft:#FBEBD0;--ok:#16723F;--ok-soft:#D9F1E3;--bad:#B42318;--bad-soft:#FBE3E0;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-inline:16px;background:var(--bg);color:var(--ink);font:500 16px/1.7 var(--f-body)}
b,strong,.pill{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.wrap{max-width:1080px;margin-inline:auto}
.wrap.wide{max-width:1240px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

/* header */
.hdr{position:sticky;top:0;z-index:20;margin-inline:-16px;padding-inline:16px;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand-n{font:800 26px/1 var(--f-display);color:var(--gold);letter-spacing:.04em;direction:ltr}
.brand-t{font-size:13px;color:var(--muted)}
.acts{display:flex;align-items:center;gap:6px}
.who{font-size:13.5px;color:var(--muted);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{display:flex;gap:2px;overflow-x:auto;margin-top:4px}
.nav button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;color:var(--muted);font-weight:500;cursor:pointer;white-space:nowrap}
.nav button[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent-bg)}
.nav .dot{display:inline-block;min-width:20px;height:20px;padding:0 6px;margin-inline-start:6px;border-radius:10px;background:var(--gold);color:#1A1400;font-size:12px;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:620px){.brand-t,.who{display:none}}

/* buttons + fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border:1px solid var(--accent-bg);border-radius:10px;background:var(--accent-bg);color:var(--accent-ink);font-weight:700;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px}
.walletbtn{color:var(--gold);border-color:var(--gold);font-variant-numeric:tabular-nums}
.cartbtn{position:relative}
.badge{position:absolute;top:-6px;inset-inline-start:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:#1A1400;font-size:12px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.in{width:100%;min-height:44px;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.in::placeholder{color:var(--muted)}
.in.ltr,.ltr{direction:ltr;text-align:left}
label.f{display:grid;gap:5px;font-size:14px;font-weight:700}
label.f small{font-weight:500;color:var(--muted)}
textarea.in{min-height:110px;resize:vertical}
textarea.in.mono{font-family:var(--f-mono);direction:ltr;text-align:left}
.check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px}

/* main */
main{padding-block:18px 56px}
.intro{margin-bottom:18px}
.intro h1{font:800 clamp(24px,5.5vw,34px)/1.35 var(--f-display);text-wrap:balance;margin-bottom:6px}
.intro p{color:var(--muted);max-width:60ch}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}
.chips{display:flex;gap:8px;overflow-x:auto;flex:1 1 320px;min-width:0}
.chip{white-space:nowrap;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.search{flex:1 1 220px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px}
.empty{padding:36px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:14px;display:grid;gap:12px;justify-items:center}
.loading{padding:48px 0;text-align:center;color:var(--muted)}

/* ticket */
.ticket{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-width:0}
.t-top{display:flex;gap:12px;align-items:center;padding:16px 16px 6px}
.t-top h3{font:700 18px/1.35 var(--f-display)}
.meta{font-size:12.5px;color:var(--muted)}
.tile.has-img{padding:0;overflow:hidden;background:var(--surface)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.filebtn{position:relative;overflow:hidden;cursor:pointer;display:inline-flex}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;width:100%;height:100%}
.imgpick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.imgpick .tile{width:64px;height:64px}
.tile{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:none;font:800 20px/1 var(--f-display);background:var(--accent-soft);color:var(--gold);border:1px solid var(--line)}
.t-mid{padding:4px 16px 16px;display:grid;gap:12px;flex:1;align-content:start}
.desc{font-size:14px;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:14px}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.perf{position:relative;border-top:2px dashed var(--line);margin-inline:14px}
.perf::before,.perf::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.perf::before{inset-inline-start:-24px}
.perf::after{inset-inline-end:-24px}
.t-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px 16px}
.price{font:800 22px/1.2 var(--f-display);font-variant-numeric:tabular-nums;color:var(--gold)}
.stock{font-size:12.5px}
.stock.ok{color:var(--ok)}.stock.low{color:var(--warn)}.stock.out{color:var(--bad)}

/* overlay / modal */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(2,4,10,.65);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;max-height:92%;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;animation:up .22s ease-out}
.sheet.lg{max-width:680px}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.scrim{align-items:center}.sheet{border-radius:18px;max-height:88%}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sh-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sh-head h2{font:800 21px/1.3 var(--f-display)}
.x{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:18px}
.form{display:grid;gap:12px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.line{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.line-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.line-n{font-weight:700}
.qty{display:inline-flex;align-items:center;gap:4px}
.qty button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:18px}
.qty span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.link{background:none;border:0;padding:0;color:var(--bad);cursor:pointer;font-size:13px;text-decoration:underline}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;font-weight:700}
.total b{font:800 22px var(--f-display);font-variant-numeric:tabular-nums;color:var(--gold)}
.err{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:9px 12px;font-size:14px}
.note{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:9px 12px;font-size:14px}
.okbox{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:9px 12px;font-size:14px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);padding:4px;border-radius:12px}
.tabs2 button{min-height:40px;border:0;border-radius:9px;background:transparent;cursor:pointer;font-weight:500}
.tabs2 button[aria-pressed="true"]{background:var(--surface);font-weight:700;box-shadow:0 0 0 1px var(--line)}
.hint{font-size:13px;color:var(--muted)}
.pay{background:var(--gold-soft);color:var(--gold);border-radius:10px;padding:12px 14px;font-size:14px;display:grid;gap:4px}
.pay b{font-variant-numeric:tabular-nums}
.gate{max-width:440px;margin-inline:auto;display:grid;gap:18px;padding-block:8px}
.gate-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:14px}

/* wallet */
.wallet{background:var(--surface);border:1px solid var(--gold);border-radius:16px;padding:18px;display:grid;gap:2px;margin-bottom:14px}
.wallet small{color:var(--muted)}
.wallet b{font:800 36px/1.2 var(--f-display);color:var(--gold);font-variant-numeric:tabular-nums}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.tx{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.tx small{display:block;color:var(--muted);font-variant-numeric:tabular-nums}
.tx .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx .plus{color:var(--ok)}.tx .minus{color:var(--bad)}

/* orders */
.page-h{font:800 24px/1.3 var(--f-display);margin-bottom:14px}
.page-h.sm{font-size:19px}
.list{display:grid;gap:14px}
.ocard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;min-width:0}
.ocard.focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.ohead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.oid{font:500 15px var(--f-mono);direction:ltr}
.odate{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;white-space:nowrap}
.pill.warn,.pill.pending,.pill.review{background:var(--warn-soft);color:var(--warn)}
.pill.accent,.pill.processing,.pill.placing{background:var(--accent-soft);color:var(--accent)}
.pill.ok,.pill.done,.pill.partial{background:var(--ok-soft);color:var(--ok)}
.pill.bad,.pill.failed{background:var(--bad-soft);color:var(--bad)}
.pill.muted,.pill.cancelled{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.oline{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.oline-t{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.codebox{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.code{flex:1 1 200px;min-width:0;direction:ltr;text-align:left;font:500 15px/1.5 var(--f-mono);letter-spacing:.04em;padding:9px 12px;background:var(--bg);border:1px dashed var(--gold);border-radius:8px;overflow-wrap:anywhere;user-select:all}
.how{font-size:13px;color:var(--muted)}
.acct{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.acct-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center}
.acct-l{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.acct-row .code{flex:none;min-width:0}
.row-acts{display:flex;gap:8px;flex-wrap:wrap}
.cust{font-size:13.5px;color:var(--muted)}

/* admin */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat small{color:var(--muted);display:block}
.stat b{font:800 22px var(--f-display);font-variant-numeric:tabular-nums}
.stat.alert{border-color:var(--gold)}
.stat.alert b{color:var(--gold)}
.sub-nav{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;margin-bottom:14px;min-width:0}
.panel h3{font:700 17px var(--f-display)}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}
.vrow .vn{flex:1 1 180px;min-width:0}
.vrow .vn small{display:block;color:var(--muted)}
.vrow input.in{width:104px;min-height:38px;text-align:center;font-variant-numeric:tabular-nums}
.vrow.off{opacity:.55}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:8px 10px;text-align:start;border-top:1px solid var(--line);vertical-align:middle}
.tbl th{color:var(--muted);font-weight:700;font-size:13px;border-top:0;white-space:nowrap}
.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow-x:auto;margin-inline:-4px}
.tbl tr.picked{background:var(--accent-soft)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
#toast{position:fixed;inset-inline:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;justify-content:center;pointer-events:none}
#toast span{background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
#toast.show span{opacity:1;transform:none}

.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ===== Kardix identity: foil-edged cards, kufic display type ===== */
body{background:radial-gradient(900px 420px at 85% -8%,var(--glow-1),transparent 62%),radial-gradient(700px 380px at 0% 0%,var(--glow-2),transparent 58%),var(--pattern),var(--bg);background-attachment:fixed}
.brand-n{display:inline-flex;align-items:center;gap:9px;font-weight:700;background:linear-gradient(100deg,var(--gold-hi),var(--gold) 50%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-n::before{content:"";width:34px;height:34px;background:url(/brand/card.svg?v=2) center/contain no-repeat;flex:none}
:root[data-theme="light"] .brand-n::before{background-image:url(/brand/card-light.svg?v=2)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .brand-n::before{background-image:url(/brand/card-light.svg?v=2)}}
.intro h1{font-weight:700;font-size:clamp(26px,6vw,40px)}
.btn{border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-bg) 80%,#fff),var(--accent-bg));box-shadow:0 8px 18px -10px var(--accent-bg),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.ghost,.btn.danger{background:transparent;box-shadow:none}
.chip{border-radius:999px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--gold);font-weight:700}
.opt[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent-bg);color:var(--accent-ink)}
.tile{border-radius:14px;border-color:var(--gold);background:linear-gradient(145deg,var(--accent-soft),var(--bg))}
.price,.total b,.wallet b,.stat b,.page-h{font-weight:700}

/* product card */
.ticket{--tx:0deg;--ty:0deg;--px:50%;--py:0%;--lift:0px;border:1px solid transparent;border-radius:20px;background:linear-gradient(160deg,var(--card-a),var(--card-b)) padding-box,linear-gradient(135deg,var(--foil-1),var(--foil-2) 38%,var(--foil-3) 62%,var(--foil-1)) border-box;box-shadow:0 18px 32px -22px rgba(0,0,0,.9);transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift));transition:transform .2s ease-out,box-shadow .25s ease}
.ticket::after{content:"";position:absolute;inset-inline-end:-70px;top:-70px;width:210px;height:210px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 7px,var(--guil) 7px 8px);pointer-events:none}
.ticket::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(260px circle at var(--px) var(--py),rgba(255,226,140,.20),transparent 62%);opacity:0;transition:opacity .25s;pointer-events:none}
.ticket:hover{--lift:-4px;box-shadow:0 26px 40px -22px rgba(0,0,0,.95)}
.ticket:hover::before{opacity:1}
.ticket .t-top,.ticket .t-mid,.ticket .t-bot,.ticket .perf{position:relative;z-index:2}
.perf{border-top:2px dashed color-mix(in srgb,var(--gold) 45%,transparent)}
.perf::before,.perf::after{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
@media (prefers-reduced-motion:reduce){.ticket{transition:none;transform:none}.ticket::before{display:none}}

/* wallet = the Kardix card */
.wallet{position:relative;overflow:hidden;min-height:190px;align-content:end;padding:76px 22px 22px;border:1px solid transparent;border-radius:22px;background:linear-gradient(135deg,#17297A,#080D22 72%) padding-box,linear-gradient(135deg,#F7E3A0,#E8BE4F 30%,#5C78E8 62%,#B98A22) border-box;box-shadow:0 22px 40px -24px rgba(0,0,0,.9)}
.wallet small{color:#B9C4EA}
.wallet b{color:#F6DD8C;font-size:clamp(34px,9vw,46px)}
.wallet .hint{color:#8F9CC6}
.wallet::before{content:"";position:absolute;top:22px;right:22px;width:42px;height:31px;border-radius:7px;background:linear-gradient(135deg,#F7E3A0,#E8BE4F 55%,#B98A22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset 13px 0 0 -12px rgba(0,0,0,.32),inset -13px 0 0 -12px rgba(0,0,0,.32)}
.wallet::after{content:"Kardix";position:absolute;top:24px;left:22px;font:700 22px/1 var(--f-display);letter-spacing:.06em;color:rgba(247,227,160,.35);direction:ltr}

/* ===== hero card stack ===== */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;margin-bottom:26px}
.hero h1{font:700 clamp(28px,6vw,46px)/1.3 var(--f-display);text-wrap:balance;margin-bottom:10px}
.hero p{color:var(--muted);max-width:56ch}
.trust{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.trust li{font-size:13.5px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));background:var(--gold-soft);color:var(--gold)}
.hero-v{--rx:8deg;--ry:-14deg;--mx:50%;--my:50%;position:relative;height:250px;perspective:900px;direction:ltr;touch-action:pan-y}
.hcard{position:absolute;top:50%;inset-inline-start:50%;width:min(88%,340px);aspect-ratio:1.586;margin:calc(min(88%,340px)/-3.17) 0 0 calc(min(88%,340px)/-2);border-radius:22px;transform-style:preserve-3d;transition:transform .35s ease-out}
.hcard.h1{padding:20px;display:grid;grid-template-rows:auto 1fr auto auto;border:1px solid transparent;background:linear-gradient(135deg,#1C32A0,#070B1F 72%) padding-box,linear-gradient(135deg,#F7E3A0,#E8BE4F 30%,#5C78E8 62%,#B98A22) border-box;box-shadow:0 30px 50px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03) inset;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(30px);overflow:hidden;animation:floaty 6s ease-in-out infinite}
.hcard.h1::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,240,190,.28),transparent 45%),conic-gradient(from 210deg at var(--mx) var(--my),rgba(255,120,200,.16),rgba(120,200,255,.18),rgba(255,230,120,.16),rgba(255,120,200,.16));mix-blend-mode:screen;pointer-events:none}
.hcard.h1::after{content:"";position:absolute;inset-inline-end:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 7px,rgba(143,170,255,.12) 7px 8px);pointer-events:none}
.hcard.h2{background:linear-gradient(135deg,#F7E3A0,#D9AB38 55%,#8E6713);transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-7deg) translate3d(-34px,-16px,0);box-shadow:0 24px 40px -26px rgba(0,0,0,.9)}
.hcard.h3{background:linear-gradient(135deg,#3C63FF,#1A2E8A);transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(6deg) translate3d(36px,18px,-30px);opacity:.9;box-shadow:0 24px 40px -26px rgba(0,0,0,.9)}
.hc-chip{width:44px;height:33px;border-radius:7px;background:linear-gradient(135deg,#F7E3A0,#E8BE4F 55%,#B98A22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset 14px 0 0 -13px rgba(0,0,0,.3),inset -14px 0 0 -13px rgba(0,0,0,.3)}
.hc-name{position:absolute;top:18px;right:20px;font:700 22px/1 var(--f-display);letter-spacing:.05em;color:#F6DD8C}
.hc-no{align-self:end;font:500 15px/1 var(--f-mono);letter-spacing:.08em;color:rgba(235,240,255,.78)}
.hc-tag{margin-top:8px;font-size:12px;color:rgba(235,240,255,.55);direction:rtl;text-align:right}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.grid.enter .ticket{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.grid.enter .ticket:nth-child(2){animation-delay:.05s}.grid.enter .ticket:nth-child(3){animation-delay:.1s}.grid.enter .ticket:nth-child(4){animation-delay:.15s}
.grid.enter .ticket:nth-child(5){animation-delay:.2s}.grid.enter .ticket:nth-child(6){animation-delay:.25s}.grid.enter .ticket:nth-child(n+7){animation-delay:.3s}
.gate .hero-v{height:210px;margin-bottom:-6px}
@media (max-width:760px){.hero{grid-template-columns:1fr;gap:6px}.hero-v{order:-1;height:210px}}
@media (prefers-reduced-motion:reduce){.hcard.h1{animation:none}.hcard{transition:none}.grid.enter .ticket{animation:none}}

/* ===== more character: page lattice, header foil sweep, delivery badge ===== */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28L28 0l28 28-28 28z' fill='none' stroke='%238FAAFF' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E"),radial-gradient(900px 420px at 85% -8%,var(--glow-1),transparent 62%),radial-gradient(700px 380px at 0% 0%,var(--glow-2),transparent 58%);background-color:var(--bg);background-attachment:fixed}
.hdr::after{height:2px;background:linear-gradient(90deg,transparent,var(--gold-lo),var(--gold-hi),var(--gold-lo),transparent);background-size:220% 100%;opacity:.85;animation:sweep 7s linear infinite}
@keyframes sweep{from{background-position:120% 0}to{background-position:-120% 0}}
.tagb{position:absolute;z-index:3;top:0;inset-inline-start:18px;padding:3px 11px 5px;border-radius:0 0 9px 9px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1A1400;font-size:12px;font-weight:700;letter-spacing:.02em}
.ticket .t-top{padding-top:26px}
@media (prefers-reduced-motion:reduce){.hdr::after{animation:none}}

/* ===== ticker + admin accents ===== */
.ticker{overflow:hidden;direction:ltr;margin:0 -16px 20px;padding:11px 0;border-block:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));background:linear-gradient(90deg,var(--gold-soft),transparent 30%,transparent 70%,var(--gold-soft));-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-in{display:flex;gap:0;width:max-content;animation:tick 70s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker span{white-space:nowrap;padding-inline:18px;font:600 15px/1 var(--f-display);color:var(--gold);display:inline-flex;align-items:center;gap:36px;direction:rtl}
.ticker span::after{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--gold);opacity:.55}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-in{animation:none}.ticker{overflow-x:auto;-webkit-mask:none;mask:none}}
.stat{border-top:2px solid var(--gold);background:linear-gradient(180deg,var(--card-a),var(--card-b))}
.panel{background:linear-gradient(180deg,var(--card-a),var(--card-b))}
.nav button[aria-current="page"]{border-bottom-color:var(--gold)}

/* ===== announcement, voucher, nav link ===== */
.announce{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:14px;background:linear-gradient(90deg,var(--gold-soft),transparent);color:var(--gold);font-weight:500}
.announce span:first-child{font-size:10px;margin-top:8px}
.redeem{display:flex;gap:8px}.redeem .in{flex:1;min-width:0;text-transform:uppercase}
.nav .navlink{display:inline-flex;align-items:center;padding:10px 14px;color:var(--gold);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}

/* ===== Royal polish: gold-leaf type, metallic CTA, depth, ornament ===== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--leaf:linear-gradient(100deg,var(--gold-lo),var(--gold-hi) 38%,var(--gold) 55%,var(--gold-lo))}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.55));opacity:.8}
:root[data-theme="light"] body::before{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::before{display:none}}
::selection{background:var(--gold);color:#1A1400}
.price{background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--f-display);font-size:1.18em;letter-spacing:.01em}
.page-h,.intro h1{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--f-display)}
.page-h::after{content:"";display:block;width:84px;height:10px;margin-top:8px;background:radial-gradient(circle at 50% 50%,var(--gold) 0 3px,transparent 3.5px) center/10px 10px no-repeat,linear-gradient(90deg,var(--gold),transparent) 0 50%/36px 1px no-repeat,linear-gradient(270deg,var(--gold),transparent) 100% 50%/36px 1px no-repeat;opacity:.9}
.btn:not(.ghost):not(.danger):not(.sm){position:relative;overflow:hidden;font-weight:700;letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:not(.ghost):not(.danger)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(120%);transition:transform .7s var(--ease);pointer-events:none}
.btn:not(.ghost):not(.danger):hover::after{transform:translateX(-120%)}
.btn:not(.ghost):not(.danger):hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 14px 26px -12px var(--accent-bg),0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.t-bot .btn,.redeem .btn{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));border-color:var(--gold);color:#1A1400;box-shadow:0 10px 20px -12px var(--gold),inset 0 1px 0 rgba(255,255,255,.55)}
.t-bot .btn:hover,.redeem .btn:hover{box-shadow:0 14px 26px -12px var(--gold),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.ghost{transition:background .25s,color .25s,box-shadow .25s}
.btn.ghost:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:var(--gold);color:var(--gold-hi)}
.ticket{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ticket:hover{box-shadow:0 34px 50px -26px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent),0 0 44px -18px var(--gold)}
.tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 10px 22px -14px rgba(0,0,0,.8)}
.hdr{background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.nav button[aria-current="page"]{color:var(--gold-hi)}
.wallet{box-shadow:0 30px 60px -28px rgba(0,0,0,.95),0 0 60px -26px var(--gold)}
.wallet b{background:linear-gradient(180deg,#FFF1BF,#E8BE4F 70%,#B98A22);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--f-display);letter-spacing:.02em}
.chip{transition:all .2s var(--ease)}
.chip:hover{border-color:var(--gold);color:var(--gold-hi)}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);outline:0}
.announce{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 14%,transparent),transparent);border-block:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}}

/* ===== notifications bell, notes list, report button ===== */
.bell{position:relative;padding-inline:10px}
.bell .dot{position:absolute;top:-7px;inset-inline-start:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--bad);color:#fff;font:700 11px/19px var(--f-body);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.notes{display:grid;gap:8px}
.note-item{display:grid;gap:3px;text-align:start;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,var(--card-a),var(--card-b));cursor:pointer;line-height:1.6}
.note-item.new{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}
.note-item small{color:var(--muted);font-size:12px}
.ohead .rep{margin-inline-start:auto;min-height:32px;padding:0 10px;font-size:12.5px}

/* VIP */
.vip{display:inline-block;padding:1px 9px;border-radius:999px;font:700 12px/20px var(--f-display);color:#1A1400;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));box-shadow:0 0 14px -4px var(--gold)}
.vip.big{font-size:15px;padding:3px 14px}
.vipcard{border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 10%,var(--surface)),var(--surface))}
.vip-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-weight:600}
.vip-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:6px}
.vip-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.who{display:inline-flex;gap:6px;align-items:center}

/* ===== best-seller badge, sort select ===== */
.bestb{position:absolute;inset-block-start:12px;inset-inline-start:14px;z-index:3;padding:3px 10px;border-radius:999px;background:linear-gradient(180deg,#FFB36B,#E8742A);color:#2A1200;font:700 12px/1.5 var(--f-body);box-shadow:0 6px 14px -8px #E8742A}
.tools .sortsel{max-width:200px;min-height:44px}
@media (max-width:620px){.tools .sortsel{max-width:none;width:100%}}
.tools .chips{flex:1 1 100%}
.tools .search{flex:1 1 220px}

/* ===== sale, coupon, referral, footer, support button ===== */
.ticket .saleb{position:absolute;inset-block-start:38px;inset-inline-start:14px;z-index:3;padding:3px 10px;border-radius:999px;background:linear-gradient(180deg,#7CE3A6,#2FA865);color:#04210F;font:700 12px/1.5 var(--f-body)}
.ticket.on-sale{box-shadow:0 0 0 1px color-mix(in srgb,#2FA865 55%,transparent),0 18px 36px -24px #2FA865}
.price s.old{font:500 .7em var(--f-body);color:var(--muted);-webkit-text-fill-color:currentColor;margin-inline-end:4px}
.sale{font-size:12.5px;color:#7CE3A6;font-variant-numeric:tabular-nums;margin-top:2px}
.cp-toggle{display:block;margin:8px 0}
.cp-box{margin:8px 0}.cp-row{display:flex;gap:8px}.cp-row .in{flex:1;min-width:0;text-transform:uppercase}
.refcard .ref-link{display:flex;gap:8px;margin-top:8px}.refcard .ref-link .in{flex:1;min-width:0;font-size:13px}
.invite{margin:14px 0;padding:10px 14px;border-radius:12px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold);font-weight:600}
.foot{margin:48px -16px 0;padding:22px 16px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.foot a{color:var(--muted);text-decoration:none;font-size:14px}.foot a:hover{color:var(--gold-hi)}
.foot-c{margin-top:10px;font-size:12.5px;color:var(--muted);opacity:.8}
.fab{position:fixed;z-index:15;inset-inline-start:16px;inset-block-end:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:linear-gradient(180deg,#34D17A,#1FA35B);color:#03210F;font:700 15px/1 var(--f-body);text-decoration:none;box-shadow:0 14px 28px -12px #1FA35B,0 0 0 1px rgba(255,255,255,.25) inset}
.fab:hover{filter:brightness(1.08)}
.fab.wa{background:#25D366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.35)}
.fab-wa{flex:none;display:block}
@media (max-width:620px){.fab span{display:none}.fab{padding:14px;font-size:20px}}

.doc{max-width:760px;padding-block:28px 8px;line-height:2}.doc h1{font:800 clamp(26px,5vw,34px) var(--f-head);background:linear-gradient(180deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.doc h2{font:700 19px var(--f-head);margin:26px 0 6px;color:var(--gold-hi)}.doc ul{padding-inline-start:22px}.doc .note{margin-top:24px;padding:10px 14px;border-radius:12px;border:1px dashed var(--line);color:var(--muted);font-size:13.5px}
body.page .brand{font:800 22px var(--f-head);color:var(--gold-hi);text-decoration:none}

/* overview */
.ov-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ov-top .page-h,.ov-top h3{margin-bottom:0}
.ov-top .chips{flex:0 1 auto}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.todo{display:grid;gap:8px;margin-bottom:18px}
.todo-i{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 14px;background:var(--surface);border:1px solid var(--gold);border-radius:12px}
.todo-i b{min-width:36px;height:36px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);font:800 17px var(--f-display);font-variant-numeric:tabular-nums}
.todo-i span{flex:1 1 180px;min-width:0}
.todo-i.bad{border-color:var(--bad)}
.todo-i.bad b{background:var(--bad-soft);color:var(--bad)}
.allclear{padding:12px 14px;border:1px solid var(--ok);background:var(--ok-soft);color:var(--ok);border-radius:12px;margin-bottom:18px;font-weight:700}
.delta{display:inline-block;margin-inline-start:8px;font-size:12.5px;font-weight:700;padding:1px 7px;border-radius:8px;vertical-align:middle}
.delta.up{color:var(--ok);background:var(--ok-soft)}
.delta.down{color:var(--bad);background:var(--bad-soft)}
.share{height:5px;border-radius:3px;background:var(--accent-soft);overflow:hidden;margin-top:5px;max-width:220px}
.share i{display:block;height:100%;background:var(--accent-bg)}
.stats.mini{margin-top:4px}
.stats.mini .stat b{font-size:18px}
/* admin sidebar */
.menubtn{display:none;position:relative;align-self:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;cursor:pointer}
.menubtn .dot{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#1A1400;font-size:11px;line-height:18px;font-weight:700}
.brand-cur{display:none;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.has-side .hdr-in{padding-bottom:10px}
#side{display:none}
body.has-side #side{display:block}
.side-nav{display:grid;gap:14px;padding:14px 10px}
.side-g{display:grid;gap:2px}
.side-h{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;padding:0 10px 4px}
.side-nav button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--muted);font-weight:500;text-align:start;cursor:pointer}
.side-nav button:hover{background:var(--accent-soft);color:var(--ink)}
.side-nav button[aria-current="page"]{background:var(--accent-soft);color:var(--gold-hi);font-weight:700;box-shadow:inset -3px 0 0 var(--gold)}
.side-i{width:22px;text-align:center;flex:none;font-size:15px}
.side-l{flex:1;min-width:0}
.side-nav .dot{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--gold);color:#1A1400;font-size:12px;line-height:20px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:980px){
  body.has-side main.wrap.wide{margin-inline-start:252px;margin-inline-end:0;max-width:1200px}
  body.has-side .hdr .wrap.wide{max-width:none}
  body.has-side #side{position:fixed;top:var(--hh,64px);bottom:0;inset-inline-start:0;width:236px;overflow-y:auto;border-inline-end:1px solid var(--line);background:var(--bg);z-index:15}
}
@media (max-width:979px){
  .menubtn{display:inline-block}
  .brand-cur{display:inline}
  .brand-n{font-size:21px}
  body.has-side #side{position:fixed;top:var(--hh,64px);bottom:0;inset-inline-start:0;width:min(290px,86vw);overflow-y:auto;background:var(--surface);border-inline-end:1px solid var(--line);z-index:40;transform:translateX(100%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  body.menu-open #side{transform:none;visibility:visible;box-shadow:-12px 0 40px rgba(0,0,0,.45)}
  body.menu-open::after{content:"";position:fixed;inset:var(--hh,64px) 0 0 0;background:rgba(2,4,10,.55);z-index:35}
}
@media (max-width:620px){.brand{flex:none}.brand-n{font-size:0;gap:0}.brand-n::before{width:30px;height:30px}.acts{min-width:0}.acts .btn span{display:none}}
@media (prefers-reduced-motion:reduce){body.has-side #side{transition:none}}
/* admin orders */
.chip .cnt{display:inline-block;min-width:20px;margin-inline-start:6px;padding:0 6px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:12px;line-height:20px;font-variant-numeric:tabular-nums}
.chip .cnt.hot{background:var(--gold);color:#1A1400;font-weight:700}
.chip.sm{min-height:32px;padding:0 10px;font-size:13px}
.ord-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:-4px 0 14px;font-size:13.5px;color:var(--muted)}
.pickall{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;cursor:pointer;color:var(--ink)}
.pickall input,.oline .pick{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;flex:none}
.bulk{position:sticky;top:calc(var(--hh,64px) + 8px);z-index:12;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;margin-bottom:14px;border:1px solid var(--gold);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.bulk b{color:var(--gold);margin-inline-end:auto}
.ocard.needs{border-color:var(--gold)}
.ohead .o-total{margin-inline-start:auto;font:800 17px var(--f-display);font-variant-numeric:tabular-nums}
.o-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-top:-4px}
.cust-btn{background:none;border:0;padding:0;color:var(--accent);font-size:13.5px;cursor:pointer;text-align:start}
.cust-btn:hover{text-decoration:underline}
.oline-t{align-items:center}
.oline-t b{flex:1;min-width:0}
.oline.picked{background:var(--accent-soft);margin-inline:-16px;padding-inline:16px}
.target{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.target code{font:14px var(--f-mono,monospace);padding:3px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line);overflow-wrap:anywhere;user-select:all}
.target .copy{min-height:30px;padding:0 10px;font-size:12.5px}
@media (max-width:620px){.pickall{margin-inline-start:0}.tools .sortsel{flex:1 1 45%}}
/* admin wallet top-ups */
.trust{font-size:12.5px;padding:2px 9px;border-radius:10px;background:var(--ok-soft);color:var(--ok)}
.trust.new{background:var(--accent-soft);color:var(--accent)}
.trust.warn{background:var(--warn-soft);color:var(--warn)}
.odate.late{color:var(--warn);font-weight:700}
.ohead .odate{margin-inline-start:auto}
.tp-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.tp-box small{display:block;color:var(--muted);font-size:12.5px;margin-bottom:2px}
.tp-box b{font:800 19px var(--f-display);font-variant-numeric:tabular-nums}
.tp-box .copy{min-height:28px;padding:0 9px;font-size:12px;margin-inline-start:8px;vertical-align:middle}
/* admin products */
.stat-btn{font:inherit;color:inherit;text-align:start;cursor:pointer;width:100%}
.stat-btn:hover{border-color:var(--accent)}
.stat-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.stat.bad{border-color:var(--bad)}
.stat.bad b{color:var(--bad)}
.panel.prod{padding:10px 14px;gap:10px;margin-bottom:10px}
.panel.prod.open{padding:14px 16px}
.panel.prod.off .prod-head{opacity:.7}
.prod-head{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.prod-head .tile{width:42px;height:42px}
.prod-t{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.prod-t h3{font:700 16px var(--f-display);margin:0}
.chev{color:var(--muted);transition:transform .15s}
.panel.prod.open .chev{transform:rotate(180deg)}
.stock-n.ok{color:var(--ok)}
.stock-n.low{color:var(--warn);font-weight:700}
.stock-n.out{color:var(--bad);font-weight:700}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
/* admin reports */
.rp-text{margin:0;padding:10px 14px;border-inline-start:3px solid var(--gold);background:var(--bg);border-radius:8px;font-size:15px;line-height:1.7}
.rp-order{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.rp-order .ohead .oid{margin-inline-end:auto}
.rp-order .ohead .o-total{margin-inline-start:0;font-size:15px}
.rp-order .oline{padding-top:8px}
/* admin customers */
.tbl.users tr.off td{opacity:.65}
.tbl.users .cust-btn b{color:var(--ink)}
.tbl.users .cust-btn:hover b{color:var(--accent)}
.prof-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prof-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));margin-bottom:4px}
.prof-stats .stat b{font-size:18px}
.prof-h{font:700 16px var(--f-display);margin:8px 0 0;color:var(--gold)}
.prof-rp{font-size:14px;padding:6px 0;border-top:1px solid var(--line)}
.tbl td.neg{color:var(--bad)}
.tbl td.pos{color:var(--ok)}
@media (max-width:700px){
  .tbl.users thead{display:none}
  .tbl.users,.tbl.users tbody,.tbl.users tr,.tbl.users td{display:block;width:100%}
  .tbl.users tr{padding:12px 0;border-top:1px solid var(--line)}
  .tbl.users tr:first-child{border-top:0}
  .tbl.users td{border:0;padding:3px 0}
  .tbl.users td[data-l]:not(:first-child){display:flex;justify-content:space-between;gap:10px}
  .tbl.users td[data-l]:not(:first-child)::before{content:attr(data-l);color:var(--muted);font-size:13px}
  .tbl.users td .row-acts{margin-top:6px}
}
/* admin providers */
.prov-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.prov-h h3{margin:0}
.dot-st{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.dot-st.ok{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.dot-st.bad{background:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.prov-stats{margin-bottom:0}
.prov-stats .stat b{font-size:19px}
.prov-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;background:var(--bg)}
.prov-bar i{display:block;min-width:4px}
.prov-bar i.ok,.prov-legend i.ok{background:var(--ok)}
.prov-bar i.warn,.prov-legend i.warn{background:var(--warn)}
.prov-bar i.bad,.prov-legend i.bad{background:var(--bad)}
.prov-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.prov-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.prov-more summary{cursor:pointer;color:var(--accent);font-size:14px;padding:4px 0}
.prov-more .kv{margin-top:8px}
/* admin vouchers and coupons */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.promo{display:grid;gap:10px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);position:relative;overflow:hidden}
.promo::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--ok)}
.promo.ended::before,.promo.off::before{background:var(--line)}
.promo.ended,.promo.off{opacity:.82}
.promo-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.promo-code{font:700 16px var(--f-mono,monospace);letter-spacing:.04em;padding:5px 10px;border:1px dashed var(--gold);border-radius:8px;background:var(--gold-soft);color:var(--gold-hi);cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-code span{opacity:.7;font-size:13px}
.promo-v{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.promo-v b{font:800 26px var(--f-display);color:var(--gold);font-variant-numeric:tabular-nums}
.share.wide{max-width:none;height:6px}
.promo-who summary{cursor:pointer;color:var(--accent);font-size:13.5px}
.chips.wrap{flex-wrap:wrap;overflow:visible;margin-top:8px}
.promo.live.warn::before{background:var(--warn)}

/* admin settings */
.set-nav{margin-bottom:14px;flex-wrap:wrap;overflow:visible}
.set-form{display:grid;gap:14px}
.set-sec{scroll-margin-top:calc(var(--hh,64px) + 12px);gap:14px}
.set-h{display:flex;gap:12px;align-items:flex-start}
.set-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);font-size:19px;flex:none}
.set-h h3{margin:0 0 2px}
.set-sub{font:700 15px var(--f-display);margin:6px 0 0;color:var(--gold)}
.set-prev{display:grid;gap:6px}
.ann-prev{padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--gold-soft),var(--accent-soft));border:1px solid var(--gold);color:var(--ink);font-size:14px}
.ann-prev.off{background:var(--bg);border-style:dashed;border-color:var(--line)}
.pay-prev{padding:12px 14px;border-radius:10px;background:var(--bg);border:1px solid var(--line);display:grid;gap:8px;white-space:pre-line}
.pay-ex{font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.pay-ex b{color:var(--gold)}
.set-check{font-size:13.5px;margin-top:-6px}
.okc{color:var(--ok)}
.badc{color:var(--bad);font-size:13.5px}
.vip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.vip-t{padding:10px 12px;border-radius:10px;border:1px solid var(--gold);background:var(--gold-soft);display:grid;gap:2px}
.vip-t small{color:var(--muted)}
.vip-t b{font:800 20px var(--f-display);color:var(--gold)}
.tg-state{padding:8px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-weight:700;width:fit-content}
.tg-state.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.tg-steps{margin:0;padding-inline-start:20px;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.savebar{position:sticky;bottom:12px;z-index:12;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--gold);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.savebar span{margin-inline-end:auto;color:var(--gold);font-weight:700}
.savebar[hidden]{display:none}
/* admin audit log */
.au-list{gap:0;padding:6px 16px}
.au-day{font:700 13px var(--f-display);color:var(--gold);padding:14px 0 6px;border-bottom:1px solid var(--line);position:sticky;top:var(--hh,64px);background:var(--surface);z-index:2}
.au-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.au-row:last-child{border-bottom:0}
.au-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent);font-size:15px}
.au-row.money .au-i{background:var(--gold-soft);color:var(--gold)}
.au-row.bad .au-i{background:var(--bad-soft);color:var(--bad)}
.au-b{flex:1;min-width:0}
.au-b .hint{overflow-wrap:anywhere}
.au-m{display:grid;justify-items:end;gap:2px;font-size:13px;flex:none}
/* store product details */
.t-open{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.t-open:hover{color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px}
.pd-more{color:var(--accent);text-decoration:none;font-size:13px;margin-top:6px;display:inline-block}
.pd-more:hover{text-decoration:underline}
.sheet.pd{max-width:640px}
.pd-top{display:flex;gap:14px;align-items:center}
.pd-top .tile{width:64px;height:64px;font-size:26px;border-radius:16px}
.pd-dl span{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}
.pd-desc{color:var(--muted);line-height:1.8;margin:0}
.pd-h{font:700 16px var(--f-display);margin:4px 0 0;color:var(--gold)}
.pd-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pd-opt{display:grid;gap:3px;justify-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.pd-opt:hover{border-color:var(--accent)}
.pd-opt[aria-checked="true"]{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 1px var(--gold)}
.pd-opt.is-out{opacity:.6}
.pd-opt .pd-price{font:800 16px var(--f-display);color:var(--gold);font-variant-numeric:tabular-nums}
.pd-opt s{color:var(--muted);font-weight:400;font-size:12px}
.pd-opt small{font-size:12px}
.o-ok{color:var(--ok)}.o-low{color:var(--warn)}.o-out{color:var(--bad)}
.pd-buy{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.pd-qty,.pd-total{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pd-total .price{font-size:24px}
.pd-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qty button:disabled{opacity:.4;cursor:not-allowed}
.pd-info{display:grid;gap:12px}
.pd-info>div{padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.pd-info p{margin:6px 0 0;color:var(--muted);font-size:14px}
.pd-info ol{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:4px;color:var(--muted);font-size:14px}
.pd-sim{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pd-sim-i{display:grid;justify-items:center;gap:6px;padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px;text-align:center;cursor:pointer}
.pd-sim-i:hover{border-color:var(--accent)}
.pd-sim-i .tile{width:40px;height:40px;font-size:17px}
.pd-sim-i small{color:var(--gold)}
/* store: my orders */
.my-stats{margin-bottom:14px}
.ohead .o-total{margin-inline-start:auto;font:800 17px var(--f-display);font-variant-numeric:tabular-nums}
.o-acts{justify-content:flex-start;border-top:1px solid var(--line);padding-top:12px}
.codes{display:grid;gap:6px}
.osteps{list-style:none;margin:2px 0;padding:0;display:flex;gap:0;font-size:12.5px;color:var(--muted)}
.osteps li{flex:1;display:grid;justify-items:center;gap:6px;text-align:center;position:relative}
.osteps li::before{content:"";position:absolute;top:6px;inset-inline-start:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.osteps li:first-child::before{display:none}
.osteps li span{width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line);position:relative;z-index:1}
.osteps li.done{color:var(--ink)}
.osteps li.done span{background:var(--ok);border-color:var(--ok)}
.osteps li.done::before{background:var(--ok)}
.osteps li.now{color:var(--gold);font-weight:700}
.osteps li.now span{border-color:var(--gold);background:var(--gold-soft);animation:pulse 1.4s ease-in-out infinite}
.osteps li.now::before{background:linear-gradient(90deg,var(--gold),var(--ok))}
.osteps.failed li.end span{background:var(--bad);border-color:var(--bad)}
.osteps.failed li.end{color:var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 0 5px var(--gold-soft)}}
@media (prefers-reduced-motion:reduce){.osteps li.now span{animation:none}}
.osteps.failed li.end::before{background:var(--bad)}

/* store: wallet and top-ups */
.w-month{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13px;color:var(--muted)}
.w-month .plus,.tp-calc .plus,.tx-i.plus{color:var(--ok)}
.w-month .minus,.tx-i.minus{color:var(--bad)}
.need{padding:12px 14px;margin-bottom:14px;border:1px solid var(--gold);border-radius:12px;background:var(--gold-soft);color:var(--ink)}
.need b{color:var(--gold-hi)}
.tp-guide{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:13px;color:var(--muted)}
.tp-guide li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.tp-guide b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent);font-size:13px}
.tp-calc{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px dashed var(--line)}
.tp-calc>div{display:flex;justify-content:space-between;gap:10px}
.tp-calc b{font-variant-numeric:tabular-nums}
.tp-check{font-size:13.5px;margin-top:-6px;min-height:0}
.okc{color:var(--ok)}
.badc{color:var(--bad);font-size:13.5px}
.tp-wait{border-color:var(--gold)}
.tp-send{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.tp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tp-row small{color:var(--muted);min-width:120px}
.tp-row b{font:800 17px var(--f-display);font-variant-numeric:tabular-nums;margin-inline-end:auto}
.tp-row .btn{min-height:30px;padding:0 10px;font-size:12.5px}
.tp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.tp-past summary{cursor:pointer;list-style:none}
.tp-past summary::-webkit-details-marker{display:none}
.tp-past summary h3{display:inline}
.tp-past summary::after{content:" ▾";color:var(--muted)}
.tp-past[open] summary::after{content:" ▴"}
.tp-done .o-total,.tp-wait .o-total{margin-inline-start:auto}
.tx-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.tx-head .chips{flex:0 0 auto}
.tx-day{font:700 13px var(--f-display);color:var(--gold);padding:10px 0 2px}
.tx{align-items:center}
.tx-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--bg);border:1px solid var(--line);font-weight:700}
.tx>div{flex:1;min-width:0}
@media (max-width:520px){.tp-guide{grid-template-columns:1fr}.tp-row small{min-width:0;width:100%}}
/* phone-credit top-up: our numbers as big copy buttons, then the numbered steps, then the customer's number and the sum they sent */
.tp2{display:grid;gap:14px;animation:rise .35s ease-out both}
.tp2-step{display:flex;align-items:center;gap:12px;margin-top:4px}
.tp2-step b{display:block;font-size:15.5px}.tp2-step small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6}
.tp2-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--f-display);background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.tp-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.tp-num{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid transparent;border-radius:14px;background:linear-gradient(135deg,#1F9D4E,#2BBF66);color:#fff;cursor:pointer;font:inherit;box-shadow:0 10px 22px -14px rgba(31,157,78,.9);transition:transform .15s ease,box-shadow .2s ease,filter .2s ease,opacity .2s ease}
.tp-num b{flex:1;text-align:center;font:800 23px var(--f-display);letter-spacing:.6px;font-variant-numeric:tabular-nums}
.tp-net{font-size:12px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.18);white-space:nowrap}
.tp-cp{position:relative;width:22px;height:22px;display:grid;place-items:center;font-style:normal;font-size:18px}
.tp-cp i{position:absolute;font-style:normal;transition:opacity .2s,transform .25s}
.tp-cp .ic-ok{opacity:0;transform:scale(.4);font-weight:800}
.tp-num.copied .ic-copy{opacity:0;transform:scale(.4)}.tp-num.copied .ic-ok{opacity:1;transform:none}
.tp-num.copied{filter:brightness(1.12)}
.tp-num:hover{transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(31,157,78,1)}.tp-num:active{transform:scale(.98)}
.tp-mine{position:absolute;top:-9px;inset-inline-start:14px;font-size:11px;font-weight:700;padding:1px 9px;border-radius:10px;background:var(--gold);color:#1a1300;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.tp-num.match{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft),0 12px 24px -14px rgba(31,157,78,1)}
.tp-num.match .tp-mine{opacity:1;transform:none}
.tp-nums:has(.match) .tp-num:not(.match){opacity:.55}
.tp2-fields{display:grid;gap:10px}
.tp2-in{position:relative;display:block;margin-top:6px}
.tp2-in .in{width:100%;margin:0}
.tp2-badge{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%) scale(.8);font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--ok-soft);color:var(--ok);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.tp2-badge.on{opacity:1;transform:translateY(-50%)}
.tp2-in.amt .in{font:800 26px var(--f-display);text-align:center;padding-inline:56px;min-height:58px;font-variant-numeric:tabular-nums}
.tp2-cur{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
.tp2-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tp2-quick .chip{justify-content:center;min-width:0;padding-inline:4px}
.tp2-quick .chip[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent-ink);border-color:var(--accent-bg)}
.tp2-big{align-items:baseline}.tp2-big b{font:800 24px var(--f-display)}
.tp-warn{color:var(--muted);font-size:13px;line-height:1.8;text-align:center}.tp-warn b{color:var(--warn)}.tp-warn a{color:var(--accent);text-decoration:underline}
.tp-pay{width:100%;min-height:54px;font-size:17px;border-radius:14px;transition:transform .15s ease,filter .2s}
.tp-pay:not(:disabled):hover{filter:brightness(1.08)}.tp-pay:not(:disabled):active{transform:scale(.99)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;vertical-align:-3px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* after «دفع»: added / checking / not yet */
.tp-res{display:grid;justify-items:center;gap:8px;text-align:center;padding:26px 12px 8px;animation:rise .35s ease-out both}
.tp-res b{font:800 20px var(--f-display)}.tp-res small{color:var(--muted);line-height:1.7;max-width:340px}
.tp-res-i{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:800}
.tp-res.ok .tp-res-i{background:var(--ok-soft);color:var(--ok);box-shadow:0 0 0 8px color-mix(in srgb,var(--ok-soft) 50%,transparent);animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
.tp-res.late .tp-res-i{background:var(--warn-soft);color:var(--warn)}
.tp-ring{width:64px;height:64px;border-radius:50%;border:5px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .9s linear infinite}
.tp-res-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.tp-chk{border-color:var(--accent)}
.tp-chk-row{display:flex;align-items:center;gap:12px}.tp-chk-row>div{flex:1}.tp-chk-row b{display:block}.tp-chk-row small{color:var(--muted)}
.tp-chk .spin{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.tp2,.tp-num,.tp-cp i,.tp-mine,.tp2-badge,.tp-res,.tp-res-i{animation:none;transition:none}}
/* store home sections */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0 8px}
.cat-tile{display:grid;gap:4px;justify-items:start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,transform .15s}
.cat-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.cat-i{font-size:24px;line-height:1}
.cat-tile b{font:700 15px var(--f-display)}
.cat-tile small{color:var(--muted);font-size:12.5px}
.hrow{margin:22px 0 6px}
.hrow-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.hrow-h h2{font:800 19px var(--f-display);color:var(--gold-hi);margin:0}
.hrow-s{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,190px);gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.mini{position:relative;display:grid;justify-items:center;gap:6px;padding:16px 10px 12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--card-a,var(--surface)),var(--card-b,var(--surface)));color:var(--ink);font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start}
.mini:hover{border-color:var(--gold)}
.mini .tile{width:48px;height:48px}
.mini-n{font-weight:700;font-size:14px;line-height:1.35}
.mini-p{color:var(--gold);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.mini-p s{color:var(--muted);font-weight:400;font-size:12px}
.mini-t{font-size:12px;color:#7CE3A6;font-variant-numeric:tabular-nums}
.mini-b{position:absolute;top:8px;inset-inline-start:8px;padding:1px 8px;border-radius:9px;background:var(--gold-soft);color:var(--gold-hi);font-size:12px;font-weight:700}
.mini-b.sale{background:var(--bad-soft);color:var(--bad)}
.all-h{font:800 19px var(--f-display);color:var(--gold-hi);margin:24px 0 10px}
@media (prefers-reduced-motion:reduce){.cat-tile{transition:none}.cat-tile:hover{transform:none}}
@media (max-width:620px){.cat-tiles{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:44%;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.cat-tile{padding:10px 12px;scroll-snap-align:start}.cat-i{font-size:20px}}

/* store cart and checkout */
.sh-head h2 .cnt{display:inline-block;min-width:22px;padding:0 7px;border-radius:11px;background:var(--gold);color:#1A1400;font-size:13px;line-height:22px;text-align:center;vertical-align:middle}
.cline{display:grid;gap:10px}
.cline.bad{border-color:var(--bad)}
.cl-top{display:flex;align-items:center;gap:10px}
.cl-top .tile{width:40px;height:40px;font-size:17px}
.cl-main{flex:1;min-width:0}
.x.sm{width:30px;height:30px;font-size:13px}
.cl-bot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-sum{margin-inline-start:auto;font:800 16px var(--f-display);font-variant-numeric:tabular-nums}
.in.bad{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.csum{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.csum>div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.csum .off{color:var(--ok)}
.csum .total{border-top:1px dashed var(--line);padding-top:8px;margin:0}
.cbal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cbal>div{display:grid;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.cbal span{font-size:12.5px;color:var(--muted)}
.cbal b{font-variant-numeric:tabular-nums}
.cbal.ok>div:last-child b{color:var(--ok)}
.cbal.short>div:last-child{border-color:var(--bad);background:var(--bad-soft)}
.cbal.short>div:last-child b{color:var(--bad)}
.cwhen{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.link.cont{color:var(--accent);text-decoration:none;justify-self:center}
.paid{display:grid;justify-items:center;gap:10px;text-align:center;padding:10px 0}
.paid-i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:var(--ok-soft);color:var(--ok);border:2px solid var(--ok);animation:pop .35s ease-out}
.paid h2{font:800 22px var(--f-display);margin:0}
.paid-msg{padding:10px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:14px}
.paid .pd-btns{width:100%}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.paid-i{animation:none}}
/* store: account */
.prof{display:flex;align-items:center;gap:14px;grid-template-columns:none}
.avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;flex:none;font:800 26px var(--f-display);background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#1A1400}
.prof-b{flex:1;min-width:0;display:grid;gap:4px}
.prof-b h2{font:800 20px var(--f-display);margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.acc-stats{margin-bottom:14px}
.acc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.acc-l{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:start}
.acc-l:hover{border-color:var(--gold)}
.acc-l span{font-size:18px}
.badge-i{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--gold);color:#1A1400;font-size:12px;line-height:20px;text-align:center}
.pw-wrap{position:relative;display:block}
.pw-wrap .in{padding-inline-end:44px}
.pw-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:none;cursor:pointer;font-size:16px}
.pw-meter{display:block;height:6px;border-radius:3px;background:var(--bg);border:1px solid var(--line);overflow:hidden;margin-top:6px}
.pw-meter i{display:block;height:100%;width:0;transition:width .2s}
.pw-meter i.bad{background:var(--bad)}.pw-meter i.warn{background:var(--warn)}.pw-meter i.ok{background:var(--ok)}
@media (prefers-reduced-motion:reduce){.pw-meter i{transition:none}}
/* login and sign-up */
.a-hint{display:block;min-height:0;font-size:12.5px;margin-top:4px}
.a-hint:empty{display:none}
.a-forgot{font-size:13px;color:var(--muted);margin-top:-4px}
.a-forgot a{color:var(--accent)}
.gate-why{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.gate-why li{display:flex;align-items:center;gap:12px}
.gate-why li>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--accent-soft);font-size:18px}
.gate-why b{display:block;font-size:14.5px}
.gate-why small{color:var(--muted);font-size:13px}
@media (min-width:900px){.gate:has(.intro){max-width:980px;grid-template-columns:minmax(0,1fr) 420px;column-gap:44px;align-items:center}.gate:has(.intro) .hero-v,.gate:has(.intro) .intro{grid-column:1}.gate:has(.intro) .gate-card{grid-column:2;grid-row:1 / span 2}}

.pw-wrap .in{padding-inline-end:12px;padding-left:46px}

/* ---------- color cleanup: gold marks money and attention only, blue marks selection and navigation ---------- */
:root{--muted:#A7B1CC}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--muted:#525E7B}}
/* titles: solid ink instead of gold foil; the ornament stays only under the main page title */
.page-h{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
.page-h.sm::after{display:none}
.page-h::after{opacity:.55}
/* the decorative Kufi face is kept for big titles and numbers; small labels use the body face so they read easily */
.page-h.sm,.panel h3,.sh-head h2,.t-top h3,.cat-tile b,.mini-n,.hrow-h h2,.all-h,.pd-h,.set-sub,.prof-h,.prod-t h3,.prov-h h3,.set-h h3,.prof-b h2{font-family:var(--f-body);font-weight:800;letter-spacing:0}
.hrow-h h2,.all-h,.pd-h,.set-sub,.prof-h{color:var(--ink)}
.tx-day,.au-day{color:var(--muted)}
/* stat cards: neutral edge; gold only when the card needs attention */
.stat{border-top:2px solid var(--line)}
.stat.alert{border-top-color:var(--gold)}
/* selection and current page in blue, everywhere */
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.opt[aria-pressed="true"],.pd-opt[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);color:var(--ink)}
.nav button[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent-bg)}
.side-nav button[aria-current="page"]{color:var(--ink);box-shadow:inset -3px 0 0 var(--accent-bg)}
.cat-tile:hover,.mini:hover,.acc-l:hover,.stat-btn:hover{border-color:var(--accent)}/* countdowns follow the theme's green so they stay readable on light backgrounds */
.sale,.mini-t{color:var(--ok)}

/* admin edit windows */
.sheet.lg:has(.pm){max-width:960px}
.pm{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.pm-form{display:grid;gap:12px;min-width:0}
.pm-prev{position:sticky;top:0;display:grid;gap:8px}
.pm-card{position:relative;display:grid;gap:10px;padding:16px;border-radius:18px;border:1px solid var(--gold);background:linear-gradient(160deg,var(--card-a),var(--card-b))}
.pm-card .tagb{position:static;justify-self:start}
.pm-top{display:flex;align-items:center;gap:10px}
.pm-top b{display:block;font-size:16px}
.pm-top small{color:var(--muted)}
.pm-card p{margin:0;font-size:13.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pm-opts{display:flex;flex-wrap:wrap;gap:6px}
.pm-opts .opt{min-height:32px;display:inline-flex;align-items:center}
.pm-price{font:800 20px var(--f-display);color:var(--gold);font-variant-numeric:tabular-nums}
.pm-price s{font-size:14px;color:var(--muted);font-weight:400}
.pm-how{padding:12px;border-radius:12px;border:1px dashed var(--line);display:grid;gap:6px;font-size:13.5px}
.pm-how ol{margin:0;padding-inline-start:20px;display:grid;gap:3px;color:var(--muted)}
.type-info{font-size:13.5px;padding:8px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink);margin-top:-4px}
.type-info:empty{display:none}
.gw-box{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:6px}
.gw-box[hidden]{display:none}
.gw-h{margin:6px 0 0;font-size:14px}
.vm-prev,.sm-prev{display:grid;gap:6px;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.vm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.vm-row .mini-b{position:static}
.sm-prev{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px}
.sm-now{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sm-now b{font-size:18px}
@media (max-width:820px){.pm{grid-template-columns:1fr}.pm-prev{position:static;order:-1}}@media (max-width:820px){.pm-prev{order:0}}

/* store notifications panel */
.notes{gap:6px}
.note-day{font-size:12.5px;font-weight:700;color:var(--muted);padding:8px 2px 2px}
.note-item{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font:inherit;position:relative}
.note-item:hover{border-color:var(--accent)}
.note-item.new{border-color:var(--gold)}
.note-i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:17px;background:var(--accent-soft)}
.note-i.ok{background:var(--ok-soft)}.note-i.gold{background:var(--gold-soft)}.note-i.warn{background:var(--warn-soft)}.note-i.bad{background:var(--bad-soft)}
.note-b{flex:1;min-width:0;display:grid;gap:2px}
.note-b b{font-size:13px;color:var(--muted)}
.note-b>span{font-size:14.5px}
.note-go{color:var(--accent);font-weight:700}
.note-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;margin-top:6px}
.empty-i{font-size:34px;line-height:1}
/* info pages: about, terms, refund, FAQ */
.info-pg{max-width:820px;margin-inline:auto;display:grid;gap:14px;padding-block:6px}
.info-top{display:flex}
.info-tabs{flex-wrap:wrap;overflow:visible}
.info-body{gap:10px;line-height:1.9}
.info-body .page-h{margin-bottom:0}
.info-date{margin-top:-4px}
.info-body h2{font:800 17px var(--f-body);margin:14px 0 2px;color:var(--ink)}
.info-body p{margin:0;color:var(--ink)}
.info-body .lead{font-size:16.5px;color:var(--muted)}
.info-body ul,.info-body ol{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.info-body a{color:var(--accent)}
.steps3{list-style:none;padding:0!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.steps3 li{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);counter-increment:st}
.steps3 li b::before{content:counter(st) ". ";color:var(--gold)}
.steps3 span{font-size:14px;color:var(--muted);line-height:1.7}
.pol{padding:12px 14px;border-radius:12px;border:1px solid var(--line);display:grid;gap:8px}
.pol.ok{border-color:var(--ok);background:var(--ok-soft)}
.pol.warn{border-color:var(--warn);background:var(--warn-soft)}
.pol.bad{border-color:var(--bad);background:var(--bad-soft)}
.faq{border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-top:8px}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:18px;line-height:1}
.faq[open] summary::after{content:"−"}
.faq p{padding:0 14px 12px;color:var(--muted)}
.info-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.info-help .btn{margin-inline-start:auto}
/* mobile network tag next to a phone number */
.net{display:inline-block;padding:1px 8px;border-radius:9px;font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent);margin-inline-start:6px;vertical-align:middle}
.net:empty{display:none}

/* search result line */
.q-info{font-size:13.5px;color:var(--muted);margin:-6px 0 10px}
.q-info:empty{display:none}

/* VIP levels in the store */
.vipp{font-size:13px;font-weight:700;color:var(--gold-hi);margin-top:2px;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.vipp .vip{font-size:11px;line-height:17px;padding:0 7px}
.vip-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}
.vip-s{display:grid;gap:1px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.vip-s b{font-size:14px}
.vip-s span{font-size:13px;color:var(--gold)}
.vip-s small{font-size:12px;color:var(--muted)}
.vip-s.done{opacity:.7}
.vip-s.cur{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 1px var(--gold)}
/* data export */
.ex-btns{display:inline-flex;align-items:center;gap:10px;margin-inline-start:auto}
.ex-list{display:grid;gap:8px}
.ex-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ex-row .sortsel{max-width:160px;min-height:38px}
/* reseller program */
.rs-teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;grid-template-columns:none}
.rs-teaser h3{margin:0 0 2px}
.rs-teaser.on{border-color:var(--gold)}
.rs-apply{gap:12px}
.rs-link{margin-top:6px;overflow-wrap:anywhere}
.rs-money{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.rs-money small{display:block;color:var(--muted);font-size:12px}
.rs-money b{font-variant-numeric:tabular-nums}
.rs-tbl tr.off td{opacity:.5}
.rs-name{font-size:16px;margin-inline-end:auto}
/* reseller shop */
.shop-hdr{padding-bottom:10px}
.shop-brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-align:start;font:inherit}
.shop-brand b{display:block;font:800 18px var(--f-body)}
.shop-brand small{color:var(--muted);font-size:12.5px}
.shop-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:800 20px var(--f-display);background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#1A1400;flex:none}
.shop-hero{padding:22px 0 8px;display:grid;gap:8px}
.shop-hero h1{font:800 clamp(24px,5vw,32px)/1.3 var(--f-body);margin:0}
.shop-hero p{color:var(--muted);margin:0}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:10px;margin-bottom:24px}
.shop-card{display:grid;justify-items:center;gap:6px;padding:16px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.shop-card:hover{border-color:var(--accent)}
.shop-card.out{opacity:.55}
.shop-card b{font-size:14.5px;line-height:1.4}
.shop-foot{margin-top:24px}
.acct{display:grid;gap:6px;margin-top:6px}
.acct .codebox small{min-width:90px;color:var(--muted)}
/* automatic top-up confirmation (settings) */
.sms-url{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.sms-url code{flex:1 1 260px;min-width:0;overflow-wrap:anywhere;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.sms-log{display:grid;gap:8px}.sms-row{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}.sms-text{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}

/* a brand's products (regions, editions) opened from its card */
.brand-h{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:4px 2px 2px}.brand-h h2{margin:0;font-size:20px}

/* storefront cards, compact: narrower, smaller type, at most two rows of options (all of them are in the product page) */
#grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
#grid .ticket{border-radius:16px}
#grid .t-top{gap:10px;padding:10px 12px 4px}
#grid .ticket .t-top{padding-top:22px}
#grid .tile{width:38px;height:38px;font-size:16px;border-radius:10px}
#grid h3{font-size:15px;line-height:1.35;margin:0}
#grid .meta{font-size:12px}
#grid .t-mid{padding:2px 12px 10px;gap:8px}
#grid .desc{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#grid .pd-more{font-size:12px;margin-top:0}
#grid .opts{gap:6px;max-height:70px;overflow:hidden}
#grid .opt{min-height:31px;padding:0 9px;font-size:12.5px;border-radius:8px}
#grid .t-bot{padding:8px 12px 12px;gap:8px}
#grid .price{font-size:18px}
#grid .stock{font-size:11.5px}
#grid .t-bot .btn{min-height:36px;padding:0 12px;font-size:13.5px}
#grid .tagb{font-size:11px;padding:2px 9px 4px;inset-inline-start:14px}
#grid .bestb,#grid .saleb{font-size:11px;padding:2px 8px}
/* phones: two cards side by side */
@media (max-width:520px){
  #grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #grid .t-top{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 10px 2px}
  #grid .ticket .t-top{padding-top:22px}
  #grid h3{font-size:13.5px}
  #grid .t-mid{padding:2px 10px 8px}
  #grid .desc,#grid .pd-more{display:none}
  #grid .opts{max-height:66px}
  #grid .opt{min-height:29px;padding:0 7px;font-size:12px}
  #grid .t-bot{flex-direction:column;align-items:stretch;padding:6px 10px 10px}
  #grid .t-bot .btn{width:100%}
  #grid .price{font-size:16px}
  #grid .bestb,#grid .saleb{display:none}
}
/* storefront: each service is its picture and name; the offers open on tap */
#grid.apps{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.app-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:8px 8px 12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,var(--card-a),var(--card-b));color:inherit;font:inherit;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.app-t:hover,.app-t:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.app-t.is-out{opacity:.6}
.app-img{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--accent-soft);font:800 30px/1 var(--f-display);color:var(--gold)}
.app-img img{width:100%;height:100%;object-fit:cover;display:block}
.app-n{width:100%;font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-c{position:absolute;z-index:1;top:12px;inset-inline-start:12px;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--gold);color:#1A1400;font-size:11px;font-weight:800}
@media (max-width:520px){#grid.apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.app-t{padding:6px 6px 10px;border-radius:14px}.app-n{font-size:12px}}
@media (prefers-reduced-motion:reduce){.app-t{transition:none}}
/* home rows use the same picture-and-name cards */
.hrow-s{grid-auto-columns:118px}.hrow-s .app-t{scroll-snap-align:start}
@media (max-width:520px){.hrow-s{grid-auto-columns:104px}}

/* home banners (set in the admin panel) */
.banners{position:relative;margin:4px 0 16px}
.bn-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;scrollbar-width:none;gap:0}
.bn-track::-webkit-scrollbar{display:none}
.bn{position:relative;flex:0 0 100%;scroll-snap-align:start;aspect-ratio:3/1;min-height:120px;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;padding:0;font:inherit;color:var(--ink);text-align:start;background:linear-gradient(135deg,var(--card-a),var(--card-b))}
.bn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-t{position:absolute;inset-inline:0;bottom:0;display:grid;gap:2px;padding:14px 16px}
.bn.has-img .bn-t{background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);color:#fff}
.bn:not(.has-img) .bn-t{inset:0;align-content:center}
.bn-t b{font:700 clamp(17px,4vw,26px)/1.3 var(--f-display)}
.bn-t small{font-size:14px;opacity:.9}
.bn-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.bn-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:width .2s,background .2s}
.bn-dots i.on{width:18px;border-radius:4px;background:var(--gold)}
@media (max-width:600px){.bn{aspect-ratio:2/1}}
.qty-deal{color:var(--ok)}
.pts-card{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
/* monthly report: on screen inside the admin panel, printed alone (print or save as PDF) */
.mrep{display:grid;gap:14px}
.mrep table{width:100%;border-collapse:collapse}
.mrep td,.mrep th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:start}
@media print{
  body{background:#fff!important;color:#000!important;padding:0}
  body.printing>*:not(#overlay){display:none!important}
  body.printing #overlay .scrim{position:static;background:none;padding:0}
  body.printing #overlay .sheet{max-width:none;max-height:none;overflow:visible;border:0;box-shadow:none;background:#fff;color:#000;animation:none}
  body.printing .no-print{display:none!important}
  body::before{display:none!important}
}
.bn-adm{border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:3/1;display:grid;place-items:center;background:var(--bg)}
.bn-adm img{width:100%;height:100%;object-fit:cover}
.bn-adm:not(:has(img)){aspect-ratio:auto;min-height:44px}
@media print{body.printing #overlay .x{display:none!important}}

/* brand tiles: products without a picture take their brand's colours and name (see BRANDS in common) */
.tile.brand,#grid .tile.brand{background:linear-gradient(145deg,var(--b1),var(--b2));color:var(--bf);border-color:transparent;font:800 13px/1 'Segoe UI',system-ui,sans-serif;letter-spacing:.02em;text-align:center;padding:2px}
.tile.brand.sm,#grid .tile.brand.sm{font-size:10px}
.tile.brand.xs,#grid .tile.brand.xs{font-size:8px}
.pd-top .tile.brand{font-size:16px}.pd-top .tile.brand.sm{font-size:12px}
.app-img.brand{background:linear-gradient(145deg,var(--b1),var(--b2));color:var(--bf);font:800 clamp(16px,4.6vw,22px)/1.1 'Segoe UI',system-ui,sans-serif;letter-spacing:.03em;padding:8px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.app-img.brand.sm{font-size:clamp(13px,3.6vw,18px)}
.app-img.brand.xs{font-size:clamp(11px,3vw,15px)}
.app-img.brand span{text-shadow:0 1px 2px rgba(0,0,0,.25);overflow-wrap:normal;word-break:keep-all}
/* phones: the products start on the first screen; the decorative card and the long line go, the trust points stay as small chips */
@media (max-width:600px){
  .hero{margin-bottom:12px}
  .hero-v,.hero p,.ticker{display:none}
  .hero h1{font-size:21px;margin-bottom:4px}
  .banners ~ .hero h1{display:none}
  .trust{margin-top:6px;gap:6px}
  .trust li{font-size:12px;padding:4px 10px}
}
/* gold is for prices and VIP; deals and savings are green, the trust points neutral */
.trust li{background:var(--surface);border-color:var(--line);color:var(--ink)}
.trust li::before{content:"✓ ";color:var(--ok);font-weight:800}
.sale{color:var(--ok)}
:root[data-theme="light"] .wallet .hint{color:var(--muted)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .wallet .hint{color:var(--muted)}}.hero .trust{background:none;padding:0;border-radius:0}

/* sign-up page: the form comes right after the welcome; on phones the decorative card and the long line go */
.gate .gate-why{margin:0;padding:4px 4px 0}
@media (max-width:600px){.gate .hero-v,.gate .intro p{display:none}.gate .intro{margin-bottom:0}.gate .intro h1{font-size:24px}}
/* getting-started guide for a new customer */
.guide{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface))}
.guide h3{margin:0;font-size:16px}
.gd-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.gd-steps li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--bg);border:1px solid var(--line);min-width:0}
.gd-steps li>div{flex:1;min-width:0}
.gd-steps b{display:block;font-size:14px}
.gd-steps small{color:var(--muted);font-size:12.5px;line-height:1.5}
.gd-n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--accent-soft);color:var(--accent)}
.gd-steps li.done .gd-n{background:var(--ok-soft);color:var(--ok)}
.gd-steps li.done b{color:var(--ok)}
@media (max-width:700px){.gd-steps{grid-template-columns:1fr}}
/* the cart button hops when something goes in */
.cartbtn.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.25) rotate(-6deg)}70%{transform:scale(.95)}100%{transform:scale(1)}}
/* loading: grey card-shaped boxes that shimmer, instead of a line of text (the text stays for screen readers) */
.loading{position:relative;min-height:190px;padding:0;color:transparent;user-select:none;border-radius:14px;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 80%) 0 0/200% 100%,
  linear-gradient(var(--surface),var(--surface)) 0 0/100% 56px no-repeat,linear-gradient(var(--surface),var(--surface)) 0 68px/100% 56px no-repeat,linear-gradient(var(--surface),var(--surface)) 0 136px/72% 56px no-repeat;
  animation:skel 1.3s linear infinite}
@keyframes skel{from{background-position:120% 0,0 0,0 68px,0 136px}to{background-position:-120% 0,0 0,0 68px,0 136px}}
@media (prefers-reduced-motion:reduce){.loading,.cartbtn.bump{animation:none}}
/* empty pages: a soft circle behind the icon */
.empty-i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);font-size:30px}/* the sign-in page header has room: keep the store name on phones too */
@media (max-width:620px){.gate-hdr .brand-n{font-size:21px;gap:9px}}

/* two wallets: the "pay from" switch next to every pay button, and the two wallet cards side by side */
.wsw{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.wsw button{display:grid;gap:2px;text-align:start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.wsw button span{font-size:13px;color:var(--muted)}
.wsw button b{font-variant-numeric:tabular-nums}
.wsw button[aria-checked="true"]{border-color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.wsw button[aria-checked="true"] span{color:var(--ink)}
.wsw button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.w2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.w2 .wallet{min-height:170px;padding:56px 18px 18px;margin-bottom:0;align-content:end}
.w2 .wallet b{font-size:clamp(26px,6vw,36px)}
.w2 .wallet:not(.on){opacity:.82}
.w2 .wallet .btn{justify-self:start;margin-top:8px}
.w2-on{justify-self:start;margin-top:8px;font-size:13px;font-weight:700;color:#F6DD8C}
.w2-month{margin:0 0 14px}
@media (max-width:520px){.w2{grid-template-columns:1fr}.w2 .wallet{min-height:0;padding:22px 18px 18px}}
.sec-sw{max-width:520px;margin:0 0 6px}

/* order extras: the promised time on a manual order, a subscription running out, a gift */
.o-due{font-size:13px;color:var(--muted);margin:6px 0}.o-due.late{color:var(--warn)}
.o-renew{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.o-renew.soon{border-color:var(--warn)}.o-renew.soon span{color:var(--warn)}
.o-gift{margin:8px 0;padding:10px 12px;border:1px dashed var(--gold);border-radius:12px;font-size:14px}
.o-gift-m{margin-top:4px;color:var(--muted);font-style:italic}
.gift-box{display:grid;gap:8px;margin:10px 0}.gift-box .chip{justify-self:start}
.pd-more{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13px}.pd-more .link{color:var(--accent)}

/* an offer the supplier balance doesn't cover right now: listed, not buyable */
.opt.is-off{opacity:.45;text-decoration:line-through}