/*!
 * ResellersHub — shared foundation. Account workspaces also load workspace.css; shops load storefront.css.
 * Sections, in cascade order:
 *   1. Base layout & public site
 *   2. Design tokens, components & responsive/dark-mode overrides
 */

/* ==========================================================================
   1. Base layout & public site
   ========================================================================== */
:root { --ink:#17233d; --muted:#697286; --brand:#7c3aed; --brand-dark:#9333ea; --line:#e6e9ef; --bg:#fafbfdfc; --header:76px; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:14px/1.55 "Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
img,svg { max-width:100%; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.wrap,.header-shell { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.035em; line-height:1.2; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:-80px; left:12px; padding:10px 18px; background:var(--ink); color:white; z-index:99; }
.skip:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:30; background:#ffffffef; backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.header-shell { min-height:var(--header); display:flex; justify-content:space-between; align-items:center; gap:24px; position:relative; }
.logo { display:inline-flex; gap:9px; align-items:center; white-space:nowrap; font-size:17px; font-weight:750; letter-spacing:-.045em; }
.logo-mark { display:grid; place-items:center; width:34px; height:36px; border-radius:11px 11px 11px 3px; color:white; background:var(--logo-bg); font-size:18px; }
.nav-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; border:1px solid var(--line); background:white; border-radius:10px; cursor:pointer; }
.nav-toggle span:not(.sr-only) { height:2px; width:17px; background:var(--ink); }
.nav-panel { display:none; position:absolute; inset:100% 0 auto; background:white; padding:12px; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 15px 24px #19233d15; max-height:calc(100dvh - 90px); overflow:auto; }
.nav-panel.is-open { display:block; }
.nav-links,.nav-actions { display:grid; gap:3px; }
.nav-links a,.nav-actions a { padding:10px 9px; font-size:12px; font-weight:600; border-radius:8px; min-height:44px; }
.nav-links a:hover,.nav-links a[aria-current] { color:var(--brand); background:#f2f4fb; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; border:1px solid transparent; border-radius:9px; padding:10px 19px; font-size:13px; font-weight:650; cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:var(--brand); box-shadow:0 5px 10px #3d50d914; }
.btn-primary:hover { background:var(--brand-dark); box-shadow:0 8px 16px #3d50d928; }
.btn-ghost { background:white; border-color:#dce1eb; color:var(--ink); }
.btn-light { background:#fff; color:var(--brand-deep); }
.btn-block { width:100%; }
button:disabled { color:#697286; background:#edf0f6; box-shadow:none; cursor:not-allowed; }
button:disabled:hover { transform:none; }
.text-link { display:inline-flex; gap:12px; align-items:center; color:var(--brand); font-size:12px; font-weight:650; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:.13em; color:#7b8394; margin-bottom:13px; }
.hero { background:radial-gradient(ellipse at 20% 50%,#f5f7ff 0,transparent 60%),#fafbfe; padding:44px 0 40px; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:68px; }
.hero-copy { padding:15px 0; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:9px; color:#596785; }
.ghana-flag { display:grid; place-items:center; width:22px; height:16px; font-size:10px; line-height:1; color:#182033; background:linear-gradient(#db3b3b 33%,#f7ce4c 33% 66%,#3e9366 66%); border-radius:3px; }
.hero h1 { font-size:clamp(32px,4.1vw,50px); line-height:1.13; letter-spacing:-.055em; margin:21px 0; font-weight:750; }
.hero h1 > span { color:var(--brand); display:inline-block; position:relative; }
.hero h1 > span::after { content:""; position:absolute; bottom:-7px; left:0; right:-8px; height:9px; border-top:3px solid var(--brand-highlight); border-radius:50%; transform:rotate(-3deg); }
.lede { font-size:14px; max-width:420px; color:var(--muted); line-height:1.85; margin:25px 0; }
.hero-actions,.split-actions { display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.trust { display:flex; flex-wrap:wrap; gap:8px 15px; padding:0; list-style:none; font-size:10px; color:#626f86; margin:23px 0; }
.trust li { display:flex; gap:5px; align-items:center; }
.trust li span { color:var(--brand); }
.hero-networks { display:flex; align-items:center; gap:16px; border-top:1px solid var(--border); padding-top:20px; max-width:415px; }
.hero-networks > span { font-size:8px; letter-spacing:.08em; color:var(--text-muted); max-width:90px; }
.hero-networks b { font-size:14px; letter-spacing:-.03em; }
.mini-mtn { color:#886915; }.mini-telecel { color:#c0344f; }.mini-at { color:#285dbe; }
.purchase-stage { position:relative; isolation:isolate; background:var(--feature-bg); border-radius:24px; padding:21px 25px 12px; overflow:hidden; }
.purchase-stage::before,.purchase-stage::after { content:""; position:absolute; z-index:-1; width:350px; height:350px; border:1px solid #ffffff17; border-radius:50%; right:-155px; top:-165px; }
.purchase-stage::after { width:420px; height:420px; right:-190px; top:-200px; }
.stage-caption,.stage-bottom { display:flex; align-items:center; justify-content:space-between; color:var(--feature-muted); font-size:8px; letter-spacing:.13em; }
.stage-caption { justify-content:flex-start; gap:9px; margin-bottom:17px; }
.signal-bars { display:inline-flex; gap:3px; align-items:flex-end; height:18px; }
.signal-bars i { width:4px; background:currentColor; height:5px; border-radius:2px; }
.signal-bars i:nth-child(2) { height:9px; }.signal-bars i:nth-child(3) { height:13px; }.signal-bars i:nth-child(4) { height:18px; }
.stage-bottom { padding-top:8px; }.stage-bottom > span:last-child { font-size:24px; }
.buy-card { padding:23px; background:white; border:1px solid #e3e7ef; border-radius:16px; box-shadow:0 12px 25px #1a234514; }
.purchase-stage .buy-card { border:0; box-shadow:0 12px 25px #14245144; }
.purchase-heading { display:flex; align-items:center; justify-content:space-between; }
.purchase-heading .eyebrow { font-size:8px; margin-bottom:4px; }
.purchase-heading h2 { font-size:21px; margin:0; }
.purchase-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:var(--brand); background:var(--primary-soft); font-size:22px; }
.purchase-intro { font-size:11px; color:#7a8394; margin:7px 0 18px; }
.network-picks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; margin:0 0 17px; border:0; }
.network-picks legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.network-picks label { position:relative; display:flex; align-items:center; justify-content:center; min-height:46px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#fff; }
.network-picks input { position:absolute; width:1px; height:1px; opacity:0; padding:0; margin:0; }
.network-picks label:has(input:checked) { background:var(--primary-soft); border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.network-picks label:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:3px; }
.net-mark { font-size:12px; font-weight:750; }
.net-mark.mtn { color:#886719; }.net-mark.telecel { color:#c0364c; }.net-mark.at { color:#2c5bc3; }
.field,.page form.card label { display:block; font-size:11px; font-weight:600; color:#58637a; margin:0 0 13px; }
.field input,.field select,.page input:not([type="radio"]),.page select { display:block; width:100%; min-width:0; height:44px; padding:0 12px; margin-top:5px; font-size:16px; color:var(--ink); background:#fafbfd; border:1px solid #e4e8f0; border-radius:8px; }
input::placeholder { color:#919aac; font-size:12px; }
.bundle-hint,.purchase-footnote { color:#7c8596; font-size:10px; line-height:1.5; }
.bundle-hint { min-height:30px; margin:0 0 12px; }
.purchase-footnote { text-align:center; margin:10px 0 0; }
.form-error { display:none; color:#b32627; font-size:12px; }.form-error.is-visible { display:block; }
.network-strip { border-block:1px solid var(--line); scroll-margin-top:var(--header); background:#fff; }
.status-layout { display:flex; align-items:center; gap:25px; padding-block:17px; }
.status-label { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.status-label h2 { font-size:11px; margin:0; letter-spacing:0; }
.status-symbol { color:#657193; font-size:24px; }
.status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:1; gap:16px; }
.status-card { display:flex; gap:10px; align-items:center; justify-content:center; border-left:1px solid var(--line); }
.pill { font-size:9px; color:#737e92; white-space:nowrap; }
.dot { width:5px; height:5px; border-radius:50%; background:#a8b1c1; display:inline-block; margin-right:4px; }
.section { padding:35px 0; scroll-margin-top:var(--header); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.section-head .eyebrow { margin-bottom:8px; }
.section-head h2 { font-size:25px; margin:0; font-weight:700; }
.section-head > p { color:#7a8496; font-size:12px; margin:0; }
.network-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.network-card { position:relative; isolation:isolate; overflow:hidden; min-height:242px; padding:22px; border:1px solid #00000006; border-radius:15px; transition:transform .2s,box-shadow .2s; color:var(--network-ink); background:var(--network-bg); display:flex; flex-direction:column; justify-content:space-between; }
.network-card:hover { transform:translateY(-4px); box-shadow:0 15px 25px #18233d14; }
.network-mtn { --network-bg:#ffdb53; --network-ink:#3d341b; --art:#c79b15; }
.network-telecel { --network-bg:#fcedef; --network-ink:#a6223e; --art:#d97c8b; }
.network-at { --network-bg:#e9f0ff; --network-ink:#254daf; --art:#7b9ce5; }
.network-card-top { display:flex; align-items:center; justify-content:space-between; }
.network-emblem { font-size:22px; font-weight:800; letter-spacing:-.065em; }
.network-mtn .network-emblem { border:2px solid currentColor; border-radius:50%; padding:0 10px; font-size:18px; font-style:italic; }
.round-arrow { display:grid; place-items:center; width:31px; height:31px; border:1px solid #00000013; border-radius:50%; font-size:20px; }
.network-art { position:absolute; z-index:-1; right:-6px; top:60px; display:flex; gap:9px; align-items:end; transform:rotate(-17deg); opacity:.27; }
.network-art span { width:22px; height:32px; background:var(--art); border-radius:9px; }
.network-art span:nth-child(2) { height:58px; }.network-art span:nth-child(3) { height:88px; }.network-art span:nth-child(4) { height:120px; }
.network-card h3 { font-size:16px; margin:20px 0 4px; }
.network-card p { font-size:11px; margin:0 0 17px; }
.network-link { display:flex; justify-content:space-between; border-top:1px solid #00000013; padding-top:11px; font-size:11px; font-weight:650; }
.popular-section { background:#fafbfe; border-block:1px solid #f0f2f6; }
.empty { display:flex; align-items:center; gap:17px; padding:22px; border:1px dashed #cfd7e7; border-radius:12px; background:#fff; }
.empty h3 { font-size:15px; margin:0 0 5px; }.empty p { font-size:12px; color:var(--muted); margin:0; }
.empty > .text-link { margin-left:auto; white-space:nowrap; }
.empty-icon { display:grid; place-items:center; width:45px; height:45px; background:#edf1fb; color:#8594bf; border-radius:12px; flex-shrink:0; }
.bundle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bundle-card { padding:22px; border:1px solid var(--line); border-radius:14px; background:white; }
.bundle-card h3 { font-size:25px; margin:13px 0 6px; }.price { font-weight:750; }
.delivery-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; background:#f0f3fa; border-radius:16px; padding:25px; }
.delivery-copy { display:flex; align-items:center; gap:16px; }
.delivery-copy .eyebrow { margin-bottom:6px; }.delivery-copy h2 { font-size:23px; margin:0 0 8px; }.delivery-copy p:last-child { font-size:11px; color:var(--muted); margin:0; }
.delivery-icon { flex-shrink:0; width:49px; height:49px; color:var(--primary); }.delivery-icon svg { stroke:currentColor; stroke-width:1.7; }
.track-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; }.track-form .field { margin:0; }
.delivery-controls > .text-link { font-size:10px; margin-top:7px; font-weight:500; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.step { border-top:1px solid #dce2ef; padding-top:17px; }
.step-number { display:inline-block; font-size:27px; color:#acb7d0; font-weight:300; margin-bottom:16px; letter-spacing:-.05em; }
.step h3 { font-size:15px; margin-bottom:8px; }.step p { font-size:12px; color:var(--muted); max-width:260px; margin:0; }
.reseller-panel { display:grid; grid-template-columns:1.2fr .8fr; gap:65px; align-items:center; padding:40px; background:var(--feature-bg); border-radius:20px; overflow:hidden; color:white; }
.reseller-copy .eyebrow { color:var(--feature-muted); }.reseller-copy h2 { font-size:30px; line-height:1.2; margin-bottom:17px; }.reseller-copy h2 span { color:var(--brand-highlight); }
.reseller-copy > p:not(.eyebrow) { font-size:12px; color:var(--feature-muted); max-width:390px; }
.reseller-more { font-size:12px; margin-left:8px; color:var(--feature-muted); }
.store-illustration { background:white; color:var(--ink); border-radius:12px; transform:rotate(-5deg); box-shadow:0 15px 30px #0b183040; position:relative; margin:8px 12px 18px; }
.store-browser { display:flex; gap:4px; align-items:center; padding:12px; background:#f1f3f9; border-radius:12px 12px 0 0; }
.store-browser > span { width:5px; height:5px; border-radius:50%; background:#c5cde0; }.store-browser small { font-size:7px; margin-left:12px; color:var(--text-muted); letter-spacing:.12em; }
.store-awning { height:25px; margin:0 15px; background:repeating-linear-gradient(90deg,var(--brand-solid) 0 22px,var(--primary-soft) 22px 44px); border-radius:0 0 7px 7px; }
.store-content { text-align:center; padding:16px 21px 23px; }.store-avatar { display:grid; place-items:center; width:33px; height:33px; margin:0 auto 7px; border-radius:50%; color:var(--primary); background:var(--primary-soft); font-size:26px; }.store-content strong { display:block; font-size:14px; }.store-content p { font-size:9px; color:var(--text-muted); }
.store-networks { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:15px; }.store-networks b { padding:9px 3px; font-size:9px; background:#edf2ff; border-radius:5px; color:#3f62ad; }.store-networks b:first-child { background:#fff2b4; color:#8a6b20; }.store-networks b:nth-child(2) { background:#fce7ec; color:#b44159; }
.store-button { padding:8px; border-radius:5px; background:var(--brand-solid); color:#fff; font-size:10px; }
.store-caption { position:absolute; bottom:-14px; right:-17px; background:var(--primary-soft); color:var(--primary); padding:7px 14px; font-size:10px; border-radius:6px; transform:rotate(8deg); }
.benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; }.benefit > span { font-size:28px; color:var(--primary); }.benefit h3 { font-size:13px; margin:11px 0 7px; }.benefit p { font-size:11px; color:var(--muted); margin:0; }
.site-footer { margin-top:20px; padding:35px 0 20px; background:#f8f9fc; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:25px; }.site-footer h2 { font-size:12px; margin-bottom:12px; }.site-footer .footer-grid > :first-child h2 { font-size:18px; }.site-footer p { font-size:11px; color:#8590a3; max-width:230px; }.site-footer a { display:block; font-size:11px; color:#727e92; min-height:30px; }.site-footer a:hover { color:var(--brand); }.legal { border-top:1px solid var(--line); margin-top:24px; padding-top:17px; font-size:10px; color:#8993a5; }
.page { width:min(560px,calc(100% - 40px)); margin:35px auto 50px; min-height:45vh; }.page h1 { font-size:26px; }.page .muted,.muted { color:var(--muted); }.page .buy-card { margin-top:22px; }.page form.card { display:grid; gap:10px; }.card { padding:23px; border:1px solid var(--line); border-radius:13px; margin-top:20px; }.card h2 { font-size:18px; }.card p { font-size:13px; }.page .network-picks label { margin:0; }
.mobile-cta { display:none; }
.shop-hero { padding:28px 0 8px; }.shop-hero h1 { font-size:28px; margin-bottom:6px; }.shop-hero p { max-width:460px; color:var(--muted); }
.shop-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }.shop-filters a { min-height:36px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.shop-filters a[aria-current] { background:var(--primary-soft); border-color:var(--primary); }
.shop-grid { display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 28px; }
.shop-card { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; }
a.shop-card:hover,a.shop-card:focus-visible { border-color:var(--primary); transform:translateY(-2px); }
.seller-main { padding:24px 0 40px; }.seller-main h1 { font-size:26px; }
@media (min-width:640px) { .shop-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) { .shop-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.btn.is-loading { opacity:.7; pointer-events:none; }.btn.is-loading::after { content:""; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:1180px) {
    .header-shell { gap:25px; }.nav-toggle { display:none; }.nav-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; position:static; padding:0; box-shadow:none; border:0; flex:1; background:none; overflow:visible; }.nav-links,.nav-actions { display:flex; align-items:center; gap:3px; }.nav-links a,.nav-actions a { white-space:nowrap; font-size:11px; }.nav-actions .btn { padding:9px 14px; }
}
@media(max-width:1000px) {
    .hero-grid { gap:30px; }.purchase-stage { padding:18px 17px 9px; }.status-layout { flex-direction:column; gap:8px; align-items:stretch; }.status-label { justify-content:center; }.status-card:first-child { border:0; }.reseller-panel { gap:30px; padding:30px; }.delivery-panel { grid-template-columns:1fr; gap:20px; }
}
@media(max-width:719px) {
    :root { --header:64px; }.wrap,.header-shell { width:calc(100% - 36px); }.hero { padding:23px 0 25px; }.hero-grid { grid-template-columns:1fr; gap:25px; }.hero-copy { padding:0; }.hero h1 { font-size:36px; margin:16px 0; }.hero .lede { font-size:13px; margin:22px 0; max-width:360px; }.hero-networks { display:none; }.trust { margin-bottom:0; font-size:9px; gap:10px; }.purchase-stage { padding:17px 16px 8px; border-radius:17px; }.buy-card { padding:20px; }.stage-caption { font-size:7px; }.stage-bottom { font-size:7px; }.status-layout { padding-block:14px; }.status-grid { gap:6px; }.status-card { flex-direction:column; gap:2px; }.pill { font-size:8px; }.section { padding:25px 0; }.section-head { gap:12px; margin-bottom:17px; }.section-head h2 { font-size:22px; }.section-head > p { display:none; }.section-head .eyebrow { font-size:8px; }.section-head > .text-link { font-size:10px; max-width:100px; }.network-grid { grid-template-columns:1fr; gap:12px; }.network-card { min-height:174px; padding:19px; }.network-card h3 { margin-top:16px; }.network-card p { margin-bottom:9px; }.network-art { right:40px; top:24px; }.network-card-bottom { display:flex; justify-content:space-between; align-items:end; gap:10px; }.network-link { border:0; font-size:10px; gap:10px; padding-bottom:9px; }.network-card h3 { font-size:15px; }.empty { flex-wrap:wrap; padding:20px; gap:12px; }.empty > div { flex:1; }.empty > .text-link { margin-left:57px; }.empty h3 { font-size:14px; }.empty p { font-size:11px; }.delivery-panel { padding:20px; }.delivery-copy { gap:10px; }.delivery-copy h2 { font-size:20px; }.delivery-icon { width:36px; }.track-form { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; gap:19px; }.step { position:relative; padding:17px 0 0 49px; }.step-number { position:absolute; top:14px; left:0; }.step h3 { font-size:15px; }.step p { max-width:none; }.reseller-panel { grid-template-columns:1fr; gap:30px; padding:25px; }.reseller-copy h2 { font-size:27px; }.store-illustration { max-width:270px; width:85%; margin:0 auto 15px; }.benefits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }.footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.footer-grid > :first-child { grid-column:1/-1; }.bundle-grid { grid-template-columns:1fr; }.mobile-cta { display:flex; position:fixed; bottom:max(10px,env(safe-area-inset-bottom)); left:12px; right:12px; width:auto; z-index:20; box-shadow:0 6px 20px #26399038; }.has-mobile-cta { padding-bottom:65px; }
}
@media(max-width:359px) { .wrap,.header-shell { width:calc(100% - 28px); }.hero h1 { font-size:31px; }.hero-actions .btn { padding-inline:13px; }.network-card-bottom { display:block; }.network-link { padding:0; justify-content:space-between; }.buy-card { padding:16px; }.stage-caption { letter-spacing:.06em; }.trust { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; } }
/* Shared secondary-page states. */
.availability-note { margin:20px 0 0; padding:15px 17px; border:1px solid #dbe3f4; border-left:3px solid #7184d2; background:#f4f6fc; border-radius:9px; color:#39496c; }
.buy-card .availability-note { margin:4px 0 12px; }
.availability-note strong { display:block; font-size:13px; }
.availability-note p { margin:5px 0 0; font-size:12px; line-height:1.7; }
.page > .muted { line-height:1.8; }
.page > .muted a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.page > form + .muted { margin-top:20px; }
.page > .btn { margin-top:18px; }
.page input:disabled { color:#8c96a9; background:#f2f4f8; cursor:not-allowed; }
#storefronts { scroll-margin-top:calc(var(--header) + 20px); }
/* Customer account forms. */
.auth-page { padding-top:42px; padding-bottom:48px; }
.auth-page h1 { font-size:28px; margin:10px 0; overflow-wrap:anywhere; }
.auth-form { box-shadow:0 12px 40px rgba(34,45,95,.05); }
.auth-form input { min-width:0; }
.auth-error,.auth-success { padding:14px 16px; margin:0 0 20px; border-radius:10px; font-size:13px; line-height:1.6; }
.auth-error { color:#9b283c; background:#fff1f3; border:1px solid #f3cbd3; }
.auth-error ul { margin:6px 0 0; padding-left:18px; }
.auth-success { color:#17543e; background:#effaf4; border:1px solid #bfdfcd; margin-top:20px; }
.page form.auth-form label.remember-row { display:flex; align-items:center; gap:10px; font-weight:400; }
.page .auth-form input[type="checkbox"] { width:18px; height:18px; min-height:18px; padding:0; margin:0; accent-color:var(--brand); flex-shrink:0; }
.auth-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.auth-form-row label { margin-bottom:0; }
@media(max-width:520px) { .auth-form-row { grid-template-columns:1fr; } }
.auth-legal,.auth-switch { text-align:center; font-size:13px; line-height:1.7; }
.auth-legal { margin:16px 0 0; color:#596579; }
.auth-legal a { color:var(--brand); text-decoration:underline; }
.nav-logout { margin:0; }
.nav-logout button { background:none; border:0; color:inherit; font:inherit; padding:10px; cursor:pointer; }
.account-card dd { margin:4px 0 18px; overflow-wrap:anywhere; }
.account-card dt { color:#596579; font-size:12px; }
.account-actions { display:flex; flex-wrap:wrap; gap:10px; }
@media(max-width:430px) { .auth-page { padding-top:28px; }.auth-page h1 { font-size:25px; } }
.auth-shell { display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; width:min(1040px,calc(100% - 40px)); min-height:calc(100dvh - 170px); margin:36px auto 56px; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 20px 50px #17233d12; background:var(--surface,#fff); }
.auth-shell .page.auth-page { width:auto; min-height:auto; margin:0; padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.auth-shell .card.auth-form { box-shadow:none; border:0; padding:0; margin-top:20px; }
.auth-visual { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:52px 44px; color:#fff; background:var(--feature-bg); }
.auth-visual::before,.auth-visual::after { content:""; position:absolute; z-index:-1; border:1px solid #ffffff17; border-radius:50%; }
.auth-visual::before { width:380px; height:380px; right:-160px; top:-170px; }
.auth-visual::after { width:460px; height:460px; right:-210px; top:-220px; }
.auth-visual-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:15px 15px 15px 4px; font-size:24px; font-weight:750; background:var(--logo-bg); }
.auth-visual h2 { font-size:28px; line-height:1.28; margin:0; max-width:380px; letter-spacing:-.03em; }
.auth-visual > p { font-size:13px; color:var(--feature-muted); max-width:340px; margin:0; line-height:1.75; }
.auth-visual-list { list-style:none; display:grid; gap:13px; padding:0; margin:6px 0 0; }
.auth-visual-list li { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--feature-muted); }
.auth-visual-list li span { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:9px; background:#ffffff17; font-size:14px; }
.auth-options { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 2px; }
.auth-options .remember-row { margin:0; }
.auth-options > a { font-size:12px; font-weight:650; color:var(--brand); white-space:nowrap; }
.auth-options > a:hover { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:900px) {
    .auth-shell { grid-template-columns:1fr; width:min(560px,calc(100% - 40px)); min-height:0; border:0; box-shadow:none; border-radius:0; margin:24px auto 40px; background:none; }
    .auth-visual { display:none; }
    .auth-shell .page.auth-page { padding:0; }
}
#account-profile,#account-orders { scroll-margin-top:calc(var(--header) + 12px); }
.public-header { background:#fff; border-bottom:1px solid rgba(23,35,61,.08); box-shadow:none; backdrop-filter:saturate(1.2) blur(14px); }
.public-header.is-scrolled { border-bottom-color:transparent; box-shadow:0 1px 0 rgba(23,35,61,.06), 0 8px 20px rgba(23,35,61,.05); }
.public-header .header-shell { width:min(1440px,calc(100% - 48px)); min-height:76px; gap:20px; flex-wrap:nowrap; }
.public-header .logo { gap:10px; font-size:19px; font-weight:700; letter-spacing:-.03em; min-width:0; }
.public-header .logo-mark { width:40px; height:40px; border-radius:12px; font-size:18px; background:var(--logo-bg); }
.public-header .logo-word { overflow:hidden; text-overflow:ellipsis; }
.public-header .header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.public-header .nav-buy { height:43px; min-height:43px; gap:8px; padding:0 22px; border-radius:11px; font-size:14px; font-weight:650; background:var(--primary); box-shadow:none; }
.public-header .nav-buy:hover { background:var(--primary-hover); box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 22%,transparent); transform:translateY(-1px); }
.public-header .nav-buy-bar { height:40px; min-height:40px; padding:0 14px; }
.public-header .nav-links a,.public-header .nav-login { background:none; }
.public-header a.nav-buy { color:var(--on-primary); background:var(--primary); }
.public-header a.nav-buy:hover { color:var(--on-primary); background:var(--primary-hover); }
.public-header a.nav-register { background:#fff; }
.public-header .nav-links { gap:4px; }
.public-header .nav-links a { position:relative; min-height:44px; padding:10px 4px; border-radius:0; font-size:15px; font-weight:600; color:var(--ink); }
.public-header .nav-links a::after { content:""; position:absolute; left:4px; bottom:8px; width:0; height:2px; border-radius:99px; background:var(--primary); transition:width .18s ease; }
.public-header .nav-links a:hover,.public-header .nav-links a[aria-current] { color:var(--primary); background:none; }
.public-header .nav-links a:hover::after,.public-header .nav-links a[aria-current]::after { width:28px; }
.public-header .nav-actions { gap:8px; margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.public-header .nav-actions .nav-buy { display:none; }
.public-header .nav-login { min-height:44px; padding:10px 4px; font-size:15px; font-weight:600; }
.public-header .nav-login:hover { color:var(--primary); background:none; }
.public-header .nav-register { min-height:44px; justify-content:center; padding:0 16px; border-radius:11px; border:1px solid rgba(23,35,61,.16); background:#fff; color:var(--ink); font-size:14px; font-weight:600; }
.public-header .nav-register:hover { background:#f6f7fb; color:var(--primary); transform:none; }
.public-header .nav-account { position:relative; }
.public-header .account-trigger { display:none; }
.public-header .account-drawer-label { margin:2px 4px 6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7b8394; }
.public-header .account-dropdown { display:grid; }
.public-header .account-dropdown a,.public-header .account-dropdown button { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 4px; border:0; border-radius:8px; background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; }
.public-header .account-dropdown a:hover,.public-header .account-dropdown button:hover { color:var(--primary); background:#f5f7fb; }
.public-header .account-dropdown form { margin:0; }
.public-header .menu-sep { height:1px; margin:6px 0; background:var(--line); }
@media (min-width:1100px) {
    .public-header .header-tools { display:none; }
    .public-header .nav-panel,.public-header .nav-panel.is-open { display:flex; align-items:center; position:static; flex:1; gap:28px; padding:0; border:0; border-radius:0; box-shadow:none; background:none; overflow:visible; max-height:none; }
    .public-header .nav-links,.public-header .nav-actions { display:flex; align-items:center; }
    .public-header .nav-links { gap:30px; }
    .public-header .nav-links a { min-height:0; padding:8px 0; font-size:14.5px; font-weight:600; white-space:nowrap; }
    .public-header .nav-links a::after { left:0; right:0; bottom:-7px; width:0; }
    .public-header .nav-links a:hover::after,.public-header .nav-links a[aria-current]::after { width:100%; }
    .public-header .nav-actions { margin:0 0 0 auto; padding:0; border:0; gap:12px; }
    .public-header .nav-actions .nav-buy { display:inline-flex; }
    .public-header .nav-login { min-height:0; padding:8px 2px; font-size:14.5px; white-space:nowrap; }
    .public-header .nav-register { height:42px; min-height:42px; }
    .public-header .account-trigger { display:inline-flex; align-items:center; gap:8px; height:42px; max-width:210px; padding:4px 12px 4px 4px; border:1px solid rgba(23,35,61,.14); border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
    .public-header .account-trigger:hover,.public-header .nav-account.is-open .account-trigger { background:#f6f7fb; border-color:color-mix(in srgb,var(--primary) 28%,transparent); }
    .public-header .account-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef1fb; color:var(--primary); font-size:13px; font-weight:700; flex-shrink:0; }
    .public-header .account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .public-header .account-chevron { flex-shrink:0; color:#697286; transition:transform .18s ease; }
    .public-header .nav-account.is-open .account-chevron { transform:rotate(180deg); }
    .public-header .account-drawer-label { display:none; }
    .public-header .account-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:5; min-width:220px; padding:6px; background:#fff; border:1px solid rgba(23,35,61,.08); border-radius:12px; box-shadow:0 12px 32px rgba(23,35,61,.1); }
    .public-header .nav-account.is-open .account-dropdown { display:grid; }
    .public-header .account-dropdown a,.public-header .account-dropdown button { min-height:40px; padding:8px 12px; font-size:14px; }
}
@media (max-width:420px) {
    .public-header .header-shell { width:calc(100% - 28px); }
    .public-header .logo { font-size:16px; gap:8px; }
    .public-header .logo-mark { width:34px; height:34px; }
    .public-header .nav-buy-arrow { display:none; }
    .public-header .nav-buy-bar { padding:0 12px; }
}

/* ==========================================================================
   2. Design tokens, components & responsive/dark-mode overrides
   ========================================================================== */
/* Shared ResellersHub foundation. Public shop accents are scoped in storefront.css. */
:root {
 --brand-indigo:#4f46e5;--brand-violet:#7c3aed;--brand-purple:#9333ea;--brand-bright:#a855f7;
 --brand-soft:#f5f3ff;--brand-gradient:linear-gradient(135deg,var(--brand-indigo) 0%,var(--brand-violet) 50%,var(--brand-bright) 100%);
 --bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--surface:#ffffff;--surface-elevated:#ffffff;
 --text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border:#e2e8f0;
 --primary:var(--brand-violet);--primary-hover:var(--brand-purple);--primary-soft:#f5f3ff;--on-primary:#ffffff;
 --brand-solid:var(--brand-violet);--brand-deep:#5b21b6;--brand-highlight:#d8b4fe;
 --feature-bg:linear-gradient(135deg,#0d1730,#312e81 58%,#6d28d9);--feature-ink:#ffffff;--feature-muted:#ede9fe;
 --welcome-gradient:linear-gradient(115deg,#171c46 0%,#4338ca 54%,#7c3aed 100%);
 --promo-gradient:linear-gradient(110deg,#4f46e5,#7c3aed 65%,#9333ea);
 --banner-line:#ffffff24;--banner-glow:#ffffff09;--logo-bg:var(--brand-gradient);
 --nav-bg:#080f21;--nav-surface:#131b34;--nav-active:var(--brand-gradient);--nav-text:#cbd5e1;--nav-muted:#94a3b8;--nav-border:#ffffff12;
 --success:#166534;--success-soft:#ecfdf3;--warning:#92400e;--warning-soft:#fffbeb;--danger:#b91c1c;--danger-soft:#fef2f2;--info:#1d4ed8;--info-soft:#eff6ff;
 --indigo-ink:#4f46e5;--indigo-soft:#eef2ff;
 --shadow-sm:0 2px 8px #0f172a05;--shadow-md:0 12px 32px #0f172a0c;
 --radius-sm:8px;--radius-md:14px;--radius-lg:20px;--focus:var(--brand-violet);
 --mtn-ink:#856000;--telecel-ink:#b91c1c;--at-ink:#1d4ed8;
 --ink:var(--text-primary);--muted:var(--text-secondary);--line:var(--border);--bg:var(--bg-primary);
 --brand:var(--primary);--brand-dark:var(--primary-hover);color-scheme:light;
}
:root[data-theme="dark"] {
 --bg-primary:#070a14;--bg-secondary:#171b2e;--surface:#111827;--surface-elevated:#171b2e;
 --text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border:#ffffff12;
 --primary:#a78bfa;--primary-hover:#d8b4fe;--primary-soft:#26203f;--on-primary:#ffffff;
 --welcome-gradient:linear-gradient(115deg,#111a37,#312e81 54%,#5b21b6);--promo-gradient:linear-gradient(110deg,#3730a3,#6d28d9 65%,#7e22ce);
 --success:#86efac;--success-soft:#132a25;--warning:#fcd34d;--warning-soft:#332818;--danger:#fca5a5;--danger-soft:#33202b;--info:#93c5fd;--info-soft:#192b47;
 --indigo-ink:#a5b4fc;--indigo-soft:#242445;
 --shadow-sm:0 2px 8px #00000018;--shadow-md:0 12px 32px #00000030;--focus:#a78bfa;
 --mtn-ink:#facc15;--telecel-ink:#fca5a5;--at-ink:#93c5fd;color-scheme:dark;
}
body:not(.admin-body){background:var(--bg-primary);color:var(--text-primary)}
body:not(.admin-body) :is(.site-header,.public-header,.nav-panel,.buy-card,.card,.bundle-card,.shop-card,.empty,.store-illustration,.account-dropdown){background:var(--surface);border-color:var(--border);color:var(--text-primary)}
body:not(.admin-body) :is(.site-footer,.popular-section,.store-browser,.delivery-panel){background:var(--bg-secondary);border-color:var(--border)}
body:not(.admin-body) :is(.nav-toggle,.btn-ghost,.public-header a.nav-register){background:var(--surface);border-color:var(--border);color:var(--text-primary)}
body:not(.admin-body) .btn-primary{background:var(--brand);color:var(--on-primary);box-shadow:var(--shadow-sm)}
body:not(.admin-body):not(.sf-body) .btn-primary{background:linear-gradient(#00000012,#00000012),var(--brand-gradient);color:#fff}
body:not(.admin-body) .btn-primary:hover{background:var(--brand-dark)}
body:not(.admin-body):not(.sf-body) .btn-primary:hover{background:linear-gradient(#00000024,#00000024),var(--brand-gradient)}
body:not(.admin-body) :is(.muted,.lede,.eyebrow,.trust,.purchase-intro,.bundle-hint,.purchase-footnote,.auth-legal,.site-footer p,.site-footer a,.legal,.section-head>p,.hero-copy .eyebrow,.public-header .account-drawer-label,.account-card dt){color:var(--text-secondary)}
body:not(.admin-body) :is(.bundle-hint,.purchase-footnote,.purchase-intro,.trust,.benefit p,.step p,.site-footer p,.site-footer a){font-size:12px;line-height:1.7}
body:not(.admin-body) .hero{background:linear-gradient(125deg,var(--bg-secondary),var(--bg-primary))}
body:not(.admin-body) :is(.purchase-icon,.empty-icon,.store-avatar,.public-header .account-avatar){background:var(--primary-soft);color:var(--primary)}
body:not(.admin-body) :is(.nav-links a:hover,.nav-links a[aria-current],.public-header .account-dropdown a:hover,.public-header .account-dropdown button:hover,.account-trigger:hover){background:var(--primary-soft);color:var(--primary)}
body:not(.admin-body) .network-picks label{background:var(--surface);border-color:var(--border)}
body:not(.admin-body) .network-picks label:has(input:checked){background:var(--primary-soft);border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
body:not(.admin-body) :is(.field,.page form.card label){color:var(--text-secondary);font-size:13px}
body:not(.admin-body) :is(input,select,textarea):not([type=hidden]):not([type=radio]):not([type=checkbox]){
 display:block;width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font:inherit;font-size:16px;margin-top:6px;box-shadow:none;
}
body:not(.admin-body) textarea{min-height:100px;resize:vertical}
body:not(.admin-body) input::placeholder{color:var(--text-muted);font-size:13px}
body:not(.admin-body) :is(input,select,textarea):focus{border-color:var(--primary)}
body:not(.admin-body) :is(input[type=checkbox],input[type=radio]){accent-color:var(--primary)}
body:not(.admin-body) input[type=checkbox]{width:18px;height:18px;flex-shrink:0}
body:not(.admin-body) :is(input,select,button):disabled{background:var(--bg-secondary);color:var(--text-muted);cursor:not-allowed}
body:not(.admin-body) :is(.auth-success){background:var(--success-soft);border-color:var(--success);color:var(--success)}
body:not(.admin-body) :is(.auth-error){background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
body:not(.admin-body) .availability-note{background:var(--primary-soft);color:var(--text-secondary);border-color:var(--border);border-left-color:var(--primary)}
body:not(.admin-body) .form-error{color:var(--danger)}
body:not(.admin-body) :is(.mini-mtn,.net-mark.mtn){color:var(--mtn-ink)}
body:not(.admin-body) :is(.mini-telecel,.net-mark.telecel){color:var(--telecel-ink)}
body:not(.admin-body) :is(.mini-at,.net-mark.at){color:var(--at-ink)}
body:not(.admin-body) :is(.card,.buy-card,.shop-card,.bundle-card){box-shadow:var(--shadow-sm)}
body:not(.admin-body) :is(.page,.wrap){overflow-wrap:anywhere}
body:not(.admin-body) .page{margin-block:30px 42px;min-height:0}
body:not(.admin-body) .auth-page{padding-block:12px 20px}
body:not(.admin-body) .page>h1{margin-bottom:12px}
body:not(.admin-body) :is(.page,.seller-main) h2{font-size:20px}
body:not(.admin-body) :is(.card,.shop-card) p:last-child{margin-bottom:0}
body:not(.admin-body) .account-trigger{border-color:var(--border)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:target{scroll-margin-top:100px}
.theme-menu{display:flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;padding:9px;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);font:inherit;font-size:12px;cursor:pointer}
.theme-menu:hover{border-color:var(--primary);color:var(--primary)}
.theme-menu svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;flex-shrink:0}
.account-topbar .theme-menu{width:38px;height:38px;min-height:38px;padding:0;border-radius:10px}
.account-topbar .theme-menu span{display:none}
.account-topbar .theme-menu svg{width:17px;height:17px}
.public-header .account-dropdown{min-width:250px}
.public-header .nav-panel .theme-menu span{display:none}
.flow-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.flow-header h1{font-size:28px;margin:6px 0 10px}
.flow-header p{margin:0;color:var(--text-secondary)}
.flow-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.account-page{padding-block:22px 40px}
.account-body{background:var(--bg-primary);color:var(--text-primary)}
.account-shell{display:flex;align-items:stretch;min-height:100dvh}
.account-sidebar{display:flex;flex-direction:column;gap:2px;width:244px;flex-shrink:0;padding:18px 14px;background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100dvh;overflow-y:auto;overflow-x:hidden;transition:width .18s ease}
.account-sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 18px}
.account-sidebar-logo{padding:0;min-width:0}
.sidebar-collapse-btn{display:grid;place-items:center;width:30px;height:32px;flex-shrink:0;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:transform .18s ease}
.sidebar-collapse-btn:hover{color:var(--primary);border-color:var(--primary)}
.sidebar-collapse-btn svg{width:13px;height:13px}
.account-sidebar-user{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:6px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary)}
.account-sidebar-user .account-avatar{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:700}
.account-sidebar-user-info{min-width:0;display:grid;gap:1px}
.account-sidebar-user-info strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-sidebar-user-info small{font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-sidebar-section{margin:14px 8px 6px;font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
:root[data-sidebar-collapsed="true"] .account-sidebar-nav+.account-sidebar-section{margin-top:14px}
.account-sidebar-nav{display:grid;gap:1px}
.account-sidebar-nav a{position:relative;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--text-secondary);min-height:40px;display:flex;align-items:center;gap:10px}
.account-sidebar-nav a svg{width:18px;height:18px;flex-shrink:0;color:var(--text-muted)}
.account-sidebar-nav a .nav-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-sidebar-nav a:hover{background:var(--bg-secondary);color:var(--text-primary)}
.account-sidebar-nav a:hover svg{color:var(--text-primary)}
.account-sidebar-nav a[aria-current]{background:var(--primary-soft);color:var(--primary);font-weight:700}
.account-sidebar-nav a[aria-current] svg{color:var(--primary)}
.account-sidebar-nav a[aria-current]::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:var(--primary)}
.account-sidebar-nav .nav-soon{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--text-muted);min-height:40px;cursor:default}
.account-sidebar-nav .nav-soon svg{width:18px;height:18px;flex-shrink:0;color:var(--text-muted)}
.account-sidebar-nav .soon-tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-secondary);border-radius:99px;padding:2px 7px;flex-shrink:0}
.account-sidebar-logout{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
.account-sidebar-logout button{position:relative;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--danger);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px}
.account-sidebar-logout button svg{width:18px;height:18px;flex-shrink:0;color:var(--danger)}
.account-sidebar-logout button:hover{background:var(--danger-soft)}
.account-workspace{flex:1;min-width:0;display:flex;flex-direction:column}
.account-topbar{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:20}
.account-topbar-logo{display:none}
.topbar-title{font-size:17px;font-weight:750;margin:0;letter-spacing:-.01em}
.account-topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.account-topbar .theme-menu{margin-left:0}
.topbar-account-chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--text-primary);font-size:13px;font-weight:600;min-height:38px}
.topbar-account-chip .account-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700;flex-shrink:0}
.topbar-account-chip:hover{border-color:var(--primary);color:var(--primary)}
#account-content{flex:1}
@media(max-width:1023px){
    .account-sidebar{position:fixed;top:0;left:0;z-index:50;visibility:hidden;transform:translateX(-100%);transition:transform .2s ease,visibility .2s;box-shadow:0 20px 50px #17233d1f}
    .account-sidebar.is-open{visibility:visible;transform:translateX(0)}
    .account-topbar .nav-toggle{display:flex}
    .account-topbar-logo{display:inline-flex}
    .sidebar-collapse-btn{display:none}
}
@media(min-width:1024px){
    .account-topbar .nav-toggle{display:none}
    :root[data-sidebar-collapsed="true"] .account-sidebar{width:76px}
    :root[data-sidebar-collapsed="true"] .account-sidebar-top{flex-direction:column;justify-content:center;gap:10px}
    :root[data-sidebar-collapsed="true"] .account-sidebar-logo .logo-word,
    :root[data-sidebar-collapsed="true"] .account-sidebar-user-info,
    :root[data-sidebar-collapsed="true"] .account-sidebar-section,
    :root[data-sidebar-collapsed="true"] .account-sidebar-nav a .nav-text,
    :root[data-sidebar-collapsed="true"] .account-sidebar-logout .nav-text{display:none}
    :root[data-sidebar-collapsed="true"] .sidebar-collapse-btn svg{transform:rotate(180deg)}
    :root[data-sidebar-collapsed="true"] .account-sidebar-user{justify-content:center;padding:5px;border:0;background:transparent}
    :root[data-sidebar-collapsed="true"] .account-sidebar-nav a,
    :root[data-sidebar-collapsed="true"] .account-sidebar-logout button{justify-content:center}
    :root[data-sidebar-collapsed="true"] .account-sidebar-nav a[aria-current]::before{left:-14px}
    :root[data-sidebar-collapsed="true"] .account-sidebar-nav a[data-tip]:hover::after,
    :root[data-sidebar-collapsed="true"] .account-sidebar-logout button[data-tip]:hover::after{
        content:attr(data-tip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:12px;
        padding:6px 10px;border-radius:8px;background:var(--text-primary);color:var(--surface);font-size:12px;
        font-weight:600;white-space:nowrap;z-index:40;box-shadow:var(--shadow-md);pointer-events:none;
    }
}
.account-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.account-grid .card{margin:0;min-width:0}
.account-stack{display:grid;gap:20px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}
.stat-card{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm)}
.stat-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px}
.stat-icon svg{width:20px;height:20px;stroke-width:1.8;fill:none}
.stat-icon-wallet{background:var(--bg-secondary);color:var(--text-primary)}
.stat-icon-spent{background:var(--primary-soft);color:var(--primary)}
.stat-icon-delivered{background:var(--success-soft);color:var(--success)}
.stat-icon-pending{background:var(--warning-soft);color:var(--warning)}
.stat-value{font-size:24px;font-weight:750;letter-spacing:-.03em;overflow-wrap:anywhere}
.stat-label{font-size:12px;color:var(--text-secondary)}
.dash-welcome{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 18px;margin-bottom:0}
.dash-welcome h1{font-size:22px;margin:0 0 5px;letter-spacing:-.01em}
.dash-welcome p{margin:0;font-size:13px;color:var(--text-secondary)}
.dash-hero-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:stretch}
.wallet-hero{position:relative;isolation:isolate;overflow:hidden;padding:20px 22px;border-radius:var(--radius-md);color:#fff;background:linear-gradient(115deg,#344dc5,#5947c5 80%,#6850cd);display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.wallet-hero::after{content:"";position:absolute;z-index:-1;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.wallet-hero-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.wallet-hero-label svg{width:15px;height:15px}
.wallet-hero-actions .btn svg{width:16px;height:16px}
.wallet-hero-value{display:block;font-size:30px;line-height:1.3;font-weight:750;letter-spacing:-.02em;margin:2px 0}
.wallet-hero-sub{font-size:12.5px;color:rgba(255,255,255,.75);margin:0}
.wallet-hero-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wallet-hero .btn-light{background:#fff;color:var(--brand-deep);border:0}
.wallet-hero-link{font-size:12.5px;font-weight:650;color:#fff;display:inline-flex;align-items:center;gap:6px}
.wallet-hero-link svg{width:14px;height:14px}
.quick-actions{padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.quick-actions h2{font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 12px}
.quick-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
.quick-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:1px solid var(--border);border-radius:10px;background:var(--bg-primary);color:var(--text-primary);font-size:12px;font-weight:650;text-align:center;min-height:58px}
.quick-action svg{width:19px;height:19px;color:var(--primary)}
.quick-action:hover{border-color:var(--primary);background:var(--primary-soft)}
.quick-action[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.quick-action[aria-disabled="true"]:hover{border-color:var(--border);background:var(--bg-primary)}
.quick-action-tag{font-size:9px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.metric-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm)}
.metric-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary)}
.metric-icon svg{width:18px;height:18px}
.metric-body{min-width:0}
.metric-value{display:block;font-size:18px;font-weight:750;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric-label{display:block;font-size:11.5px;color:var(--text-secondary)}
.section-card{padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);margin:0}
.section-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.section-card-head h2{font-size:16px;margin:0}
.section-card-link{font-size:12.5px;font-weight:650;color:var(--primary);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.section-card-sub{margin:2px 0 14px;font-size:12.5px;color:var(--text-secondary)}
.dash-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:20px}
.delivery-tracker{margin-bottom:20px}
.track-group{margin:0 0 10px;font-size:15px}
.track-group:not(:first-child){margin-top:18px}
.track-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.track-rows li{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-primary)}
.track-who{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.track-who strong{font-size:14px}
.track-who span{font-size:12.5px;color:var(--text-secondary)}
.track-facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:13px;color:var(--text-secondary)}
.track-facts b{font-weight:700;color:var(--text-primary)}
.status-badge.status-hold{background:var(--warning-soft);color:var(--warning)}
.live-delivery{margin-bottom:20px}
.live-head,.live-order-top,.live-network,.section-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.live-head h2,.live-details summary,.live-pace h3,.live-more h3{margin:0;font-size:16px}
.live-updated{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}
.live-refresh{min-height:36px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--primary);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.live-banner{margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--warning-soft);color:var(--warning)}
.live-banner strong{display:block;margin-bottom:4px}
.live-banner p{margin:0 0 8px;color:var(--text-primary);font-size:13.5px}
.live-banner a{font-weight:700;color:var(--warning)}
.live-network{margin-top:14px}
.live-network p{margin:4px 0 0;font-size:13px;color:var(--text-secondary)}
.live-state{flex-shrink:0;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;background:var(--bg-secondary);color:var(--text-secondary)}
.live-state.is-fast,.live-state.is-normal{background:var(--success-soft);color:var(--success)}
.live-state.is-busy,.live-state.is-delayed{background:var(--warning-soft);color:var(--warning)}
.live-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 0}
.live-stats div{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-primary)}
.live-stats dt{font-size:11px;color:var(--text-muted)}
.live-stats dd{margin:2px 0 0;font-weight:750}
.live-order{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-primary)}
.live-order.is-hold{background:var(--warning-soft)}
.live-order-kicker{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.live-order-top{margin-top:4px}
.live-order-phone,.live-order-ref,.live-check,.live-hold{margin:4px 0 0;font-size:13px;color:var(--text-secondary)}
.live-order-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:13px}
.live-timeline{list-style:none;margin:12px 0;padding:0}
.live-timeline li{display:flex;justify-content:space-between;gap:12px;padding:7px 0 7px 16px;border-left:2px solid var(--border);font-size:13px;color:var(--text-muted)}
.live-timeline .is-done{color:var(--text-primary);border-left-color:var(--success)}
.live-timeline .is-now{color:var(--text-primary);font-weight:750;border-left-color:var(--primary)}
.live-pace{margin-top:14px}
.live-pace h3{margin-bottom:8px}
.live-pace p{display:grid;gap:2px;margin:0 0 8px;font-size:13px;color:var(--text-secondary)}
.live-pace strong{font-size:16px;color:var(--text-primary)}
.live-more{margin-top:16px}
.live-details{margin-top:14px}
.live-details summary{cursor:pointer;color:var(--primary);padding:10px 0;font-size:13px;font-weight:600}
.live-queue{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.live-queue li{display:flex;flex-wrap:wrap;gap:6px 12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-primary);font-size:12.5px;color:var(--text-secondary)}
.live-queue strong{color:var(--text-primary)}
@media(max-width:600px){.live-stats{grid-template-columns:1fr}.live-head,.live-network,.live-order-top{flex-direction:column}}
.network-status-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.network-status-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--border)}
.network-status-list li:last-child{border-bottom:0}
.network-status-name{font-size:13px;font-weight:650}
.network-status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.network-status-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0}
.network-status-dot.is-available{color:var(--success)}
.network-status-dot.is-available::before{background:var(--success)}
.network-status-dot.is-unavailable{color:var(--danger)}
.network-status-dot.is-unavailable::before{background:var(--danger)}
.status-badge[class*="status-"]{font-weight:650}
.status-badge.status-pending{background:var(--warning-soft);color:var(--warning)}
.status-badge.status-paid{background:var(--primary-soft);color:var(--primary)}
.status-badge.status-processing{background:var(--info-soft);color:var(--info)}
.status-badge.status-refunded{background:var(--primary-soft);color:var(--primary)}
.status-badge.status-completed{background:var(--success-soft);color:var(--success)}
.status-badge.status-failed,.status-badge.status-cancelled{background:var(--danger-soft);color:var(--danger)}
.txn-icon{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:10px}
.txn-icon.is-credit{background:var(--success-soft);color:var(--success)}
.txn-icon.is-debit{background:var(--bg-secondary);color:var(--text-secondary)}
.txn-icon svg{width:16px;height:16px}
.txn-row{display:flex;align-items:center;gap:12px}
.small-empty{padding:22px 16px;text-align:center}
.small-empty-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background:var(--bg-secondary);color:var(--text-muted)}
.small-empty-icon svg{width:20px;height:20px}
.small-empty h3{font-size:14px;margin:0 0 4px}
.small-empty p{font-size:12.5px;color:var(--text-secondary);margin:0 0 14px}
.dash-profile-footnote{margin:18px 4px 0;font-size:12.5px}
@media(max-width:1023px){.dash-hero-row{grid-template-columns:1fr}.dash-split{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dash-welcome{flex-direction:column;align-items:flex-start}.quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.topbar-account-chip .nav-text{display:none}.topbar-account-chip{padding:4px}.topbar-title{display:none}}
@media(max-width:360px){.metric-value{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip}.metric-card{padding:12px}}
.orders-table-wrap{overflow-x:auto;margin-top:16px}
.orders-table{width:100%;border-collapse:collapse;font-size:13px}
.orders-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);padding:0 12px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.orders-table td{padding:12px;border-bottom:1px solid var(--border);white-space:nowrap}
.orders-table tbody tr:last-child td{border-bottom:0}
.order-network{display:inline-flex;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;background:var(--bg-secondary);color:var(--text-primary)}
.order-network.net-mtn{background:#ffdb53;color:#3d341b}
.order-network.net-telecel{background:#fcedef;color:#a6223e}
.order-network.net-at-ishare{background:#e9f0ff;color:#254daf}
.txn-list{list-style:none;margin:16px 0 0;padding:0}
.txn-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.txn-list li:last-child{border-bottom:0}
.txn-list strong{display:block;font-size:13px}
.txn-list small{color:var(--text-secondary)}
.txn-amount{font-weight:700;font-size:13px;white-space:nowrap}
.txn-debit{color:var(--danger)}
.txn-credit{color:var(--success)}
.admin-inline-form{margin:0}
.admin-inline-form select{display:inline-block;width:auto;min-width:0;min-height:32px;padding:4px 8px;margin:0;font-size:12px}
.admin-filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 18px}
.admin-filter-bar label{font-size:11px;font-weight:600;color:var(--text-secondary)}
.admin-filter-bar select,.admin-filter-bar input{margin-top:5px}
.table-toggle-form{margin:0}
.badge-active{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:650;background:var(--success-soft);color:var(--success)}
.badge-inactive{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:650;background:var(--bg-secondary);color:var(--text-secondary)}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr}}
.wallet-amount{font-size:28px;font-weight:750;letter-spacing:-.04em;margin:10px 0}
.detail-list{margin:0}
.detail-list dt{font-size:12px;color:var(--text-secondary);margin-top:14px}
.detail-list dd{margin:4px 0;font-weight:600}
.activity-list{list-style:none;margin:0;padding:0}
.activity-list li{padding:16px 0;border-bottom:1px solid var(--border);display:grid;gap:5px}
.activity-list li:last-child{border-bottom:0}
.activity-list small{color:var(--text-secondary)}
.status-badge{display:inline-block;width:fit-content;border-radius:99px;padding:4px 9px;background:var(--primary-soft);color:var(--primary);font-size:11px}
.empty-state{padding:24px 18px;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-primary);margin:16px 0;text-align:center}
.empty-state h2,.empty-state h3{font-size:17px;margin:0 0 8px}
.empty-state p{font-size:13px;color:var(--text-secondary);margin:8px auto 16px;max-width:440px}
.seller-body .header-shell{gap:16px}
.seller-brand small{display:block;font-size:10px;letter-spacing:.06em;color:var(--text-muted)}
.seller-main{padding-block:28px 48px}
.seller-nav{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:0 0 14px;margin-bottom:25px}
.seller-nav a{padding:9px 13px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);min-height:44px}
.seller-nav a[aria-current=page]{background:var(--primary-soft);color:var(--primary);font-weight:650}
.seller-main form.card{max-width:740px;display:grid;gap:16px}
.seller-main form.card label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--text-secondary)}
.seller-main .shop-card{margin-bottom:12px;padding:20px}
.seller-main .shop-grid .shop-card{margin:0}
.seller-main .shop-card>strong{font-size:21px}
.seller-main .shop-card>span{font-size:13px;color:var(--text-secondary)}
.share-panel{margin-block:24px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.share-panel h2{margin-bottom:10px}
.share-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.share-controls input{flex:1;min-width:140px!important;margin:0!important}
.copy-feedback{font-size:12px;color:var(--text-secondary);min-height:22px;margin:8px 0 0}
.seller-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seller-price-grid .shop-card{margin:0}
.seller-price-grid label{font-size:13px}
.seller-price-grid label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px}
.seller-filter{display:flex!important;max-width:none!important;align-items:end;flex-wrap:wrap}
.seller-filter label{flex:1;min-width:160px}
.seller-order-list{display:grid;gap:12px;margin-top:20px}
.seller-order-list .shop-card{margin:0}
.seller-order-list .shop-card>strong{font-size:16px}
.form-section{border:0;padding:0;margin:0}
.form-section legend{font-size:17px;font-weight:700;margin-bottom:16px}
.form-section label{margin-bottom:16px}
.storefront-body .logo{white-space:normal;max-width:55%;line-height:1.3;overflow-wrap:anywhere}
.storefront-body .logo-mark{flex-shrink:0}
.storefront-body .shop-grid .shop-card{padding:23px;gap:12px}
.storefront-body .shop-grid .shop-card>strong{font-size:25px}
.storefront-body .shop-grid .shop-card .price{font-size:18px}
.storefront-body .shop-filters a{background:var(--surface);min-height:44px;padding:10px 16px}
.storefront-body .shop-filters a[aria-current=page]{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
.storefront-body .shop-hero{padding:32px 0 16px}
.notice-card{background:var(--warning-soft);color:var(--warning);padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-md);margin:18px 0;font-size:13px}
.password-field{position:relative;display:block}
.password-field input{padding-right:44px}
.password-toggle{position:absolute;top:50%;right:5px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-secondary);width:32px;height:32px;padding:0;border-radius:7px;cursor:pointer}
.password-toggle:hover{background:var(--primary-soft);color:var(--primary)}
.password-toggle svg{width:18px;height:18px}
@media(min-width:1100px){.public-header .nav-links{gap:18px}.public-header .nav-panel{gap:16px}.public-header .nav-actions{gap:8px}.public-header .nav-links a{font-size:13px}}
@media(max-width:1099px){.public-header .nav-panel .theme-menu span{display:inline}.theme-menu{justify-content:flex-start}}
@media(max-width:760px){.account-grid{grid-template-columns:1fr}.flow-header{align-items:flex-start;flex-direction:column;gap:14px}.seller-price-grid{grid-template-columns:1fr 1fr}.theme-menu span{display:none}.seller-main .theme-menu span{display:inline}}
@media(max-width:430px){.seller-price-grid{grid-template-columns:1fr}.flow-header h1{font-size:25px}.account-page,.seller-main{padding-top:20px}.card,.share-panel{padding:18px}.seller-nav{gap:2px}.seller-nav a{padding:8px 10px}.trust{gap:8px}.public-header .account-dropdown{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.storefront-body .logo-mark{background:var(--surface);color:var(--text-primary);border:2px solid var(--store-accent,var(--primary))}
.storefront-body .shop-hero{border-bottom:3px solid var(--store-accent,var(--primary))}
body:not(.admin-body) .shop-card .status-badge{color:var(--primary)}
@media(min-width:1180px){.seller-body .nav-panel{justify-content:flex-end}.seller-body .nav-links{margin-right:16px}}
body:not(.admin-body) .logo-mark{color:var(--feature-ink)}
.storefront-body .logo-mark{color:var(--text-primary)!important}
.admin-top .theme-menu{width:36px;min-height:36px;height:36px;padding:8px}
.admin-top .theme-menu span{display:none}
@media(max-width:767px){
 .admin-top{gap:8px}.admin-top>.nav-toggle{flex-shrink:0}
 .admin-top-actions{gap:6px}.admin-top-actions>a[aria-label="Sync"],.admin-top-actions>a[aria-label="Announcement"]{display:none}
}
@media(max-width:430px){.admin-top .mobile-brand>span{display:none}.admin-top .mobile-brand{flex-shrink:0}.admin-top .admin-top-actions{margin-left:0}.admin-top>.admin-search{margin-left:auto;flex:none}}
.admin-table-wrap{position:relative}
/* ---- Account page polish: hero header, two-column layouts, buy picker, top-up, support, API ---- */
.page-hero{display:flex;align-items:center;gap:16px;padding:22px 24px;margin-bottom:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary-soft),var(--surface) 70%);box-shadow:var(--shadow-sm)}
.page-hero-icon{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:16px;background:var(--primary);color:var(--on-primary)}
.page-hero-icon svg{width:24px;height:24px}
.page-hero h1{font-size:24px;margin:0 0 4px;letter-spacing:-.02em}
.page-hero p{margin:0;font-size:14px;line-height:1.55;color:var(--text-secondary);max-width:62ch}
.topup-layout,.buy-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.topup-main,.topup-side,.buy-form,.buy-side{display:grid;gap:16px;min-width:0;align-content:start}
.section-card h2{font-size:16px;margin:0 0 4px}
.section-card .field{margin-bottom:14px}
.check-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.check-list li{position:relative;padding-left:26px;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--success-soft);color:var(--success);font-size:11px;font-weight:800}
.side-links{display:grid;gap:6px;margin-top:10px}
.side-links a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-weight:650;color:var(--text-primary);background:var(--bg-primary)}
.side-links a:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.side-links svg{width:17px;height:17px;color:var(--primary)}
.amount-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.amount-chip{padding:14px 8px;border:1px solid var(--border);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);font:inherit;font-size:15px;font-weight:750;cursor:pointer;transition:border-color .15s,background .15s}
.amount-chip:hover{border-color:var(--primary);background:var(--primary-soft)}
.amount-chip.is-active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.topup-main .wallet-hero{min-height:130px}

/* Support tickets */
.ticket-list{display:grid;gap:12px;margin-top:14px}
.ticket{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--bg-primary)}
.ticket.card{margin:0;background:var(--surface)}
.ticket header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.ticket-body{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--text-primary)}
.ticket-reply{margin-top:12px;padding:12px 14px;border-left:3px solid var(--primary);border-radius:0 10px 10px 0;background:var(--primary-soft)}
.ticket-reply strong{font-size:12px;color:var(--primary)}
.ticket-reply p{margin:4px 0 0;font-size:13.5px;line-height:1.6}
.ticket-reply-form{display:grid;gap:10px;margin-top:14px}

/* API access */
.key-reveal{margin-bottom:20px;border-color:var(--warning);background:var(--warning-soft)}
.key-reveal-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.key-reveal-row code{flex:1;min-width:220px;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:13px;word-break:break-all;user-select:all;color:var(--text-primary)}
.code-block{margin-top:14px}
.code-label{display:block;margin-bottom:6px;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.code-block pre{margin:0;padding:14px 16px;overflow-x:auto;border-radius:12px;background:#0f1729;color:#dfe8ff;font-size:12.5px;line-height:1.65}

/* Checkout payment method */
.pay-options{display:grid;gap:10px;margin:6px 0 16px}
.pay-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg-primary);cursor:pointer}
.pay-option:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}
.pay-option.is-disabled{opacity:.55;cursor:not-allowed}
.pay-option input{width:18px;height:18px;flex-shrink:0;accent-color:var(--primary)}
.pay-option strong{display:block;font-size:14px}
.pay-option small{display:block;margin-top:2px;font-size:12px;color:var(--text-secondary)}

@media(max-width:1023px){.topup-layout,.buy-layout{grid-template-columns:1fr}}
@media(max-width:600px){.page-hero{padding:18px;align-items:flex-start}.page-hero-icon{width:44px;height:44px;border-radius:13px}.page-hero h1{font-size:20px}.net-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.net-choice{padding:12px 4px}.net-choice-badge{width:38px;height:38px;font-size:12px}.bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.amount-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==== v2: compact Buy Data, Wallet, API access, payment results, modals, account menu ==== */
body:not(.admin-body) :is(input,select,textarea):not([type=hidden]):not([type=radio]):not([type=checkbox]){border-radius:11px;min-height:46px;transition:border-color .15s,box-shadow .15s}
body:not(.admin-body) :is(input,select,textarea):focus-visible{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 24%,transparent)}
body:not(.admin-body) :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 16%,transparent)}
.helper{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
.helper.center{text-align:center}
.helper.is-error,.field-error{color:var(--danger)}
.field-error{margin:6px 0 0;font-size:12.5px}
.field-error[hidden]{display:none}
.small{font-size:12.5px}
.input-prefix{display:flex;align-items:stretch;margin-top:6px}
.input-prefix>span{display:grid;place-items:center;padding:0 14px;border:1px solid var(--border);border-right:0;border-radius:11px 0 0 11px;background:var(--bg-secondary);color:var(--text-secondary);font-size:14px;font-weight:700}
.input-prefix input{margin-top:0!important;border-radius:0 11px 11px 0!important;font-size:20px!important;font-weight:700;min-height:52px!important}
.btn.is-disabled,.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn-danger{background:var(--danger);color:#fff;border:0}
.btn-danger:hover{filter:brightness(.92)}
.btn-danger-text{color:var(--danger)}
.link-btn{padding:0;border:0;background:none;color:var(--primary);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Page heads */
.page-head{margin-bottom:18px}
.page-head h1{font-size:24px;margin:0 0 4px;letter-spacing:-.02em}
.page-head p{margin:0;font-size:14px;color:var(--text-secondary)}
.page-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-head-side strong{font-size:18px}
.page-head-side .btn svg{width:16px;height:16px;margin-right:4px}

/* Wallet */
.wallet-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.wallet-stat{display:grid;gap:3px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm)}
.wallet-stat.is-primary{background:var(--feature-bg);border-color:transparent;color:#fff}
.wallet-stat-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.wallet-stat.is-primary .wallet-stat-label{color:rgba(255,255,255,.8)}
.wallet-stat-label svg{width:15px;height:15px}
.wallet-stat strong{font-size:26px;letter-spacing:-.02em}
.wallet-stat strong.is-muted{color:var(--text-muted)}
.wallet-stat small{font-size:12.5px;color:var(--text-secondary)}
.wallet-layout{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.topup-card h2{margin-bottom:12px}
.quick-amounts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 16px}
.quick-amounts .amount-chip{padding:10px 4px;font-size:13.5px}
.pay-summary{margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-primary);display:grid;gap:8px}
.pay-summary>div{display:flex;justify-content:space-between;font-size:13.5px}
.pay-summary dt{color:var(--text-secondary)}
.pay-summary dd{margin:0;font-weight:650}
.pay-summary .is-total{padding-top:8px;border-top:1px dashed var(--border);font-size:15px}
.pay-summary .is-total dt{color:var(--text-primary);font-weight:700}
.txn-credit{color:var(--success)}
.txn-debit{color:var(--text-primary)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}

/* Payment / order result */
.result-card{max-width:520px;margin:24px auto;padding:32px 28px;text-align:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md)}
.result-card h1{font-size:22px;margin:14px 0 6px}
.result-card p{margin:0 0 6px}
.result-icon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto;border-radius:50%;background:var(--bg-secondary);color:var(--text-secondary);font-size:26px;font-weight:800}
.is-paid .result-icon{background:var(--success-soft);color:var(--success)}
.is-failed .result-icon{background:var(--danger-soft);color:var(--danger)}
.is-cancelled .result-icon,.is-notfound .result-icon{background:var(--warning-soft);color:var(--warning)}
.is-notfound .result-icon{font-size:18px;width:72px}
.result-icon.is-spinner{border:4px solid var(--border);border-top-color:var(--primary);background:none;animation:spin .9s linear infinite}
.result-facts{margin:18px 0;display:grid;gap:0;text-align:left;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.result-facts>div{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--border)}
.result-facts>div:last-child{border-bottom:0}
.result-facts dt{color:var(--text-secondary)}
.result-facts dd{margin:0;font-weight:700;overflow-wrap:anywhere;text-align:right}
.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.result-ref{margin-top:14px!important;font-size:12px;color:var(--text-muted)}

/* API access */
.api-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.api-side{display:grid;gap:14px}
.notice-card{background:var(--warning-soft);border-color:transparent}
.notice-card h2{display:flex;align-items:center;gap:8px;color:var(--warning)}
.notice-card svg{width:18px;height:18px}
.notice-card p{margin:6px 0 0}
.key-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.key-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:var(--bg-primary)}
.key-row.is-revoked{opacity:.65}
.key-row-main{display:grid;gap:3px;flex:1;min-width:200px}
.key-row-main code{font-size:13px;color:var(--text-secondary)}
.key-row-actions{display:flex;gap:8px}
.key-row-actions .btn{padding:7px 12px;min-height:36px;font-size:12.5px}
.key-reveal-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.key-reveal-row code{flex:1;min-width:200px;padding:12px 14px;border-radius:10px;background:var(--bg-primary);border:1px solid var(--border);font-size:13px;word-break:break-all;user-select:all;color:var(--text-primary)}
.check-row{display:flex;align-items:center;gap:10px;font-size:13.5px;margin:6px 0 4px;cursor:pointer}
.check-row input{width:18px;height:18px;accent-color:var(--primary)}
.ok-mark{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:6px;border-radius:50%;background:var(--success-soft);color:var(--success);font-size:13px}

/* Modals */
dialog.modal{width:min(460px,calc(100% - 28px));padding:22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-primary);box-shadow:0 24px 70px #0006}
dialog.modal::backdrop{background:rgba(9,13,24,.6);backdrop-filter:blur(2px)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.modal-head h2{font-size:18px;margin:0}
.modal-close{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:var(--bg-secondary);color:var(--text-secondary);font-size:20px;cursor:pointer}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* Docs */
.docs-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
.docs-nav{position:sticky;top:84px;display:grid;gap:2px;padding:12px}
.docs-nav a{padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-secondary)}
.docs-nav a:hover{background:var(--primary-soft);color:var(--primary)}
.docs-main{display:grid;gap:16px;min-width:0}
.endpoint-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.endpoint-head code{font-size:13px;color:var(--text-primary);overflow-wrap:anywhere}
.method{padding:3px 9px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.05em}
.method-get{background:var(--info-soft);color:var(--info)}
.method-post{background:var(--success-soft);color:var(--success)}
.code-block{margin-top:14px}
.code-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.code-head .code-label{margin:0}
.code-head em{text-transform:none;letter-spacing:0;font-weight:500}
.copy-btn{padding:4px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.copy-btn:hover{border-color:var(--primary);color:var(--primary)}
.code-block pre{margin:0;padding:14px 16px;overflow-x:auto;border-radius:12px;background:#0f1729;color:#dfe8ff;font-size:12.5px;line-height:1.65;white-space:pre}

/* Account menu (header) */
.account-menu{position:relative}
.account-menu>summary{list-style:none;cursor:pointer}
.account-menu>summary::-webkit-details-marker{display:none}
.chip-caret{font-size:10px;color:var(--text-muted);margin-left:2px}
.account-menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-md);display:grid;gap:2px}
.account-menu-who{display:grid;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.account-menu-who strong{font-size:13px}
.account-menu-who small{font-size:11.5px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}
.account-menu-panel a,.account-menu-panel button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--text-primary);font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.account-menu-panel a:hover,.account-menu-panel button:hover{background:var(--bg-secondary)}
.account-menu-panel svg{width:17px;height:17px;color:var(--text-muted)}
.account-menu-panel form button{color:var(--danger)}
.account-menu-panel form button svg{color:var(--danger)}

/* Sidebar: pinned logo + user card, one quietly-scrolling nav */
.account-sidebar:has(.account-sidebar-scroll){overflow:hidden}
.account-sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:-8px;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.account-sidebar-scroll::-webkit-scrollbar{width:5px}
.account-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.account-sidebar-nav a{min-height:40px}
.account-sidebar-section{margin-top:12px}

@media(max-width:1023px){
.buy-grid{grid-template-columns:1fr}
.buy-summary-card{position:static}
.wallet-layout,.api-layout,.docs-layout{grid-template-columns:1fr}
.docs-nav{position:static;display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
.docs-nav a{white-space:nowrap;background:var(--bg-primary);border:1px solid var(--border)}
}
@media(max-width:600px){
.wallet-summary{grid-template-columns:1fr}
.quick-amounts{grid-template-columns:repeat(3,minmax(0,1fr))}
.pay-options{grid-template-columns:1fr}
.net-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-card{padding:24px 18px}
.page-head.split{align-items:flex-start}
.modal-actions{flex-direction:column-reverse}
.modal-actions .btn{width:100%}
.key-row-actions{width:100%}
.key-row-actions .btn{flex:1}
.account-menu-panel{position:fixed;left:12px;right:12px;top:64px;min-width:0}
}
@media(max-width:360px){
.buy-block{padding:14px}
.quick-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
.net-card{padding:10px 12px}
}

/* overflow fixes found in the responsive audit */
.docs-main>*,.docs-layout>*,.dash-split>*,.api-layout>*,.wallet-layout>*,.buy-grid>*{min-width:0}
.docs-main{grid-template-columns:minmax(0,1fr)}
@media(max-width:1023px){.dash-split,.wallet-layout,.api-layout,.docs-layout,.buy-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:380px){.account-topbar .logo-word,.chip-caret{display:none}}
.input-prefix>span{white-space:nowrap;flex-shrink:0;min-width:56px}

/* ==== Buy Data workspace (bx-*) ==== */
.buy-page{padding-top:20px}
.bx-shell{max-width:1120px;margin-inline:auto}
.bx-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bx-head h1{font-size:22px;margin:0 0 2px;letter-spacing:-.02em}
.bx-head p{margin:0;font-size:13.5px;color:var(--text-secondary)}
.bx-wallet{display:flex;align-items:center;gap:14px;padding:7px 7px 7px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.bx-wallet>div{display:grid;line-height:1.2}
.bx-wallet span{font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.bx-wallet strong{font-size:17px;letter-spacing:-.01em}
.bx-wallet .btn{min-height:38px;padding:0 14px;font-size:13px;gap:6px}
.bx-wallet .btn svg{width:15px;height:15px}
.bx-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr);gap:16px;align-items:start}
.bx-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}
.bx-sec{padding:18px 22px;border-bottom:1px solid var(--border)}
.bx-sec:last-child{border-bottom:0}
.bx-sec h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.bx-idx{color:var(--primary);font-weight:800}
.bx-sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bx-sec-head h2{margin:0}

.bx-nets{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.bx-net{position:relative;display:grid;gap:3px;padding:12px 36px 12px 14px;border:1.5px solid var(--border);border-radius:13px;background:var(--bg-primary);cursor:pointer;transition:border-color .15s,background .15s}
.bx-net:hover{border-color:var(--primary)}
.bx-net input{position:absolute;opacity:0;width:1px;height:1px}
.bx-net-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:750;color:var(--text-primary)}
.bx-net-name::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent,var(--primary));flex-shrink:0}
.bx-net-status{font-size:12px;font-weight:600;color:var(--text-muted);padding-left:16px}
.bx-net-status.is-on{color:var(--success)}
.bx-net:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}
.bx-net:has(input:focus-visible),.bx-bundle:has(input:focus-visible),.bx-pay-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.bx-net.is-off{opacity:.55;cursor:not-allowed}
.bx-check{position:absolute;top:8px;right:9px;display:none;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:10.5px;font-weight:800}
.bx-net:has(input:checked) .bx-check,.bx-bundle:has(input:checked) .bx-check{display:grid}

.bx-label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:650;color:var(--text-secondary)}
.bx-input{position:relative;display:flex;align-items:center;margin-bottom:8px}
.bx-input svg{position:absolute;left:15px;width:18px;height:18px;color:var(--text-muted);pointer-events:none}
.bx-input input{margin:0!important;padding-left:44px!important;min-height:50px!important;font-size:17px!important;font-weight:600;letter-spacing:.02em}
.bx-input:not(:has(svg)) input{padding-left:14px!important;font-size:15px!important;font-weight:500;letter-spacing:0}
.bx-sec .helper{margin:0 0 4px}
.bx-sec .helper[hidden]{display:none}
.bx-valid{margin:2px 0 10px;font-size:13px;font-weight:650;color:var(--success)}
.bx-valid[hidden]{display:none}

.bx-filter{display:flex;gap:6px}
.bx-filter[hidden]{display:none}
.bx-filter button{padding:5px 12px;border:1px solid var(--border);border-radius:99px;background:var(--bg-primary);color:var(--text-secondary);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.bx-filter button.is-active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.bx-bundles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bx-bundle{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border:1.5px solid var(--border);border-radius:13px;background:var(--bg-primary);cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.bx-bundle:hover{border-color:var(--primary)}
.bx-bundle input{position:absolute;opacity:0;width:1px;height:1px}
.bx-bundle:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}
.bx-bundle-size{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.bx-bundle-price{font-size:13px;font-weight:650;color:var(--text-secondary)}
.bx-bundle:has(input:checked) .bx-bundle-price{color:var(--primary)}
.bx-bundle .bx-check{top:6px;right:7px;width:17px;height:17px;font-size:9.5px}

.bx-summary{position:sticky;top:84px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md);min-width:0}
.bx-summary h2{margin:0 0 12px;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.bx-empty{margin:0;padding:18px 14px;border:1px dashed var(--border);border-radius:12px;font-size:13.5px;line-height:1.55;color:var(--text-secondary);text-align:center}
.bx-rows{margin:0;display:grid;gap:9px}
.bx-rows>div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.bx-rows dt{color:var(--text-secondary)}
.bx-rows dd{margin:0;font-weight:650;text-align:right;overflow-wrap:anywhere}
.bx-rows .is-need dd{color:var(--danger)}
.bx-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0;padding-top:12px;border-top:1px dashed var(--border);font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.bx-total strong{font-size:24px;letter-spacing:-.02em;color:var(--text-primary);text-transform:none}
.bx-pay{margin:0 0 12px;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bx-pay legend{grid-column:1/-1;padding:0;margin-bottom:8px;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.bx-pay-opt{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg-primary);cursor:pointer}
.bx-pay-opt input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--primary)}
.bx-pay-opt strong{display:block;font-size:13.5px}
.bx-pay-opt small{display:block;margin-top:1px;font-size:11.5px;color:var(--text-secondary)}
.bx-pay-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}
.bx-pay-opt.is-off{opacity:.55;cursor:not-allowed}
.bx-low{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--warning-soft);display:grid;gap:12px}
.bx-note{margin:0 0 12px;font-size:12.5px;color:var(--text-secondary);text-align:center}
.bx-summary .form-error{margin:0 0 10px}
.bx-cta{min-height:50px;font-size:15px;font-weight:750;justify-content:center}
.bx-cta-bar{display:none}

.bx-review{width:min(440px,calc(100% - 28px))}
.bx-sendto{display:grid;gap:2px;margin-bottom:14px;padding:14px 16px;border-left:3px solid var(--primary);border-radius:0 12px 12px 0;background:var(--primary-soft)}
.bx-sendto span{font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.bx-sendto strong{font-size:24px;letter-spacing:.01em}
.bx-sendto .link-btn{justify-self:start;margin-top:2px}
.bx-review .helper{margin-top:0}

@media(max-width:1100px){.bx-bundles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1023px){
.bx-grid{grid-template-columns:minmax(0,1fr)}
.bx-summary{position:static}
.bx-cta-inline{display:none}
.bx-cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -10px 28px #0000001c}
.buy-page{padding-bottom:104px}
.bx-head{align-items:flex-start}
}
@media(max-width:600px){
.bx-sec{padding:16px}
.bx-bundles{grid-template-columns:repeat(2,minmax(0,1fr))}
.bx-nets{grid-template-columns:repeat(2,minmax(0,1fr))}
.bx-wallet{width:100%;justify-content:space-between}
.bx-pay{grid-template-columns:1fr}
}
@media(max-width:360px){
.bx-sec{padding:14px}
.bx-bundle{padding:12px 6px}
.bx-bundle-size{font-size:17px}
}

/* ==== Roles & permissions ==== */
.role-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border)}
.role-badge.role-platform_owner{background:var(--primary);color:var(--on-primary);border-color:transparent}
.role-badge.role-super_admin{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.role-badge.role-operations_admin{background:var(--info-soft);color:var(--info);border-color:transparent}
.role-badge.role-finance_admin{background:var(--success-soft);color:var(--success);border-color:transparent}
.role-badge.role-support_admin{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.role-badge.role-store_owner{background:var(--bg-secondary);color:var(--text-primary)}
.role-badge.role-sub_agent{background:var(--bg-secondary);color:var(--text-secondary)}
.role-badge.role-customer{background:transparent;color:var(--text-muted)}
.role-badges{display:flex;flex-wrap:wrap;gap:6px}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:20px}
.role-card{display:grid;gap:10px;align-content:start}
.role-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.role-card p{margin:0;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.role-card .role-highlight{font-weight:650;color:var(--text-primary)}
.role-card .btn{justify-self:start}
.risk-tag{display:inline-flex;align-items:center;padding:1px 8px;border-radius:99px;background:var(--danger-soft);color:var(--danger);font-size:10.5px;font-weight:750;letter-spacing:.02em;text-transform:none}
.risk-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-size:13.5px}
.risk-list code{color:var(--text-muted);font-size:12px}
.notice-line{margin:0 0 16px;padding:10px 14px;border-radius:11px;background:var(--warning-soft);color:var(--warning);font-size:13px;font-weight:600}
.perm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;margin-bottom:16px;align-items:start}
.perm-group{margin:0}
.perm-group h2{font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.perm-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border);cursor:pointer}
.perm-item:first-of-type{border-top:0}
.perm-item input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--primary)}
.perm-item.is-locked{opacity:.55;cursor:not-allowed}
.perm-item.is-danger{background:linear-gradient(90deg,var(--danger-soft),transparent 60%)}
.perm-text{display:grid;gap:2px;min-width:0}
.perm-text strong{font-size:13.5px}
.perm-text small{font-size:12px;color:var(--text-secondary);line-height:1.45}
.perm-text code{font-size:11px;color:var(--text-muted)}
.perm-actions{position:sticky;bottom:0;padding:14px 0;background:linear-gradient(transparent,var(--bg-primary) 40%);display:flex;justify-content:flex-end}

.page-intro{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-intro p{margin:0;font-size:14px;color:var(--text-secondary)}
.ledger-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.ledger-toolbar span{display:block;font-size:12px;color:var(--text-secondary)}
.ledger-toolbar strong{font-size:22px;letter-spacing:-.02em}
.ledger-toolbar .btn{flex-shrink:0}
.orders-table .cell-wrap{white-space:normal;min-width:140px;max-width:320px}
.order-rows{list-style:none;margin:8px 0 0;padding:0;display:grid}
.order-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.order-rows li:last-child{border-bottom:0;padding-bottom:0}
.order-row-copy{min-width:0;display:grid;gap:2px}
.order-row-copy strong{font-size:13.5px;overflow-wrap:anywhere}
.order-row-copy small{font-size:12px;color:var(--text-secondary)}
.order-row-amount{font-weight:750;font-size:13.5px;white-space:nowrap}
.filter-bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filter-bar .field{margin:0;min-width:160px}
.filter-search{flex:1}
.profile-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.profile-layout h2{font-size:16px;margin:0 0 14px}
.profile-layout .btn{margin-top:4px}
.profile-layout .field input[readonly]{background:var(--bg-secondary);color:var(--text-secondary)}
.docs-nav a{display:block}
.account-page{padding-bottom:36px}
@media(max-width:800px){
.profile-layout{grid-template-columns:1fr}
.order-rows li{grid-template-columns:auto minmax(0,1fr);gap:8px 12px}
.order-rows .status-badge{justify-self:start}
.order-row-amount{justify-self:end}
}

/* Shared finishing rules: compact workspace, readable controls and responsive delivery. */
.theme-picker{position:relative;flex-shrink:0}
.theme-picker:not([open])>.theme-picker-panel{display:none}
.theme-picker>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.theme-picker>summary::-webkit-details-marker{display:none}
.theme-picker-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:90;width:170px;max-width:calc(100vw - 24px);padding:7px;background:var(--surface);color:var(--text-primary);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md)}
.theme-picker-panel>p{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:7px 10px}
.theme-picker-panel>button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:10px;border:0;border-radius:7px;font:inherit;font-size:12px;text-align:left;background:transparent;color:var(--text-secondary);cursor:pointer}
.theme-picker-panel>button svg{width:16px;height:16px;flex-shrink:0}
.theme-picker-panel>button:hover,.theme-picker-panel>button[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary)}
.theme-picker-panel>button[aria-pressed="true"]::after{content:'';margin-left:auto;width:6px;height:6px;border-radius:50%;background:currentColor}
:root { --workspace-width:1280px; --workspace-gutter:24px; }
html { scrollbar-gutter:stable; }
body { -webkit-text-size-adjust:100%; }
button,summary,a { touch-action:manipulation; }
button,summary { -webkit-user-select:none; user-select:none; }
button,select,textarea,input { max-width:100%; }
input,select,textarea { transition:border-color .15s,box-shadow .15s; }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.btn { gap:8px; }
.btn:hover { transform:translateY(-1px); }
.btn svg { width:18px; height:18px; flex-shrink:0; }
.account-workspace>.account-topbar { box-shadow:0 1px 0 var(--border); }
.account-workspace .account-page { width:calc(100% - var(--workspace-gutter) * 2); max-width:var(--workspace-width); }
.account-workspace :is(.dash-hero-row,.metric-grid,.section-card,.stat-card,.profile-layout)>* { min-width:0; }
.account-topbar :is(.theme-menu,.topbar-account-chip) { min-height:40px; }
.account-topbar .theme-menu { width:40px; }
.account-sidebar-scroll { scrollbar-color:transparent transparent; }
.account-sidebar-scroll:hover,.account-sidebar-scroll:focus-within { scrollbar-color:var(--border) transparent; }
.account-sidebar-nav a,.quick-action { transition:background .15s,border-color .15s,color .15s; }
.account-sidebar-nav a[aria-current]::before { left:0; top:12px; bottom:12px; width:3px; border-radius:4px; }
.account-sidebar-nav a[aria-current] { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 9%,transparent); }
.wallet-hero { min-height:180px; }
.wallet-hero .btn { min-height:40px; padding:8px 14px; }
.wallet-hero-value,.metric-value,.txn-amount,.order-row-amount,.stat-value { font-variant-numeric:tabular-nums; }
.metric-label { font-size:12px; }
.metric-value { white-space:normal; overflow-wrap:anywhere; }
.metric-card { box-shadow:none; }
.metric-card:nth-child(3) .metric-icon { background:var(--success-soft); color:var(--success); }
.metric-card:nth-child(4) .metric-icon { background:var(--info-soft); color:var(--info); }
.section-card-head { align-items:center; flex-wrap:wrap; }
.section-card-link { min-height:32px; }
.live-delivery { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); grid-template-rows:auto auto min-content 1fr auto auto auto; column-gap:24px; align-items:start; }
.live-head { grid-column:1/-1; grid-row:1; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--border); }
.live-banner { grid-column:1/-1; grid-row:2; }
.live-network { grid-column:1; grid-row:3; flex-wrap:wrap; gap:8px; }
.live-network>div { flex:1 1 170px; }
.live-state { white-space:normal; max-width:100%; letter-spacing:.02em; font-size:10px; }
.live-stats { grid-column:1; grid-row:4; align-self:start; margin-bottom:14px; }
.live-stats div { padding:12px; }
.live-stats dd { font-size:14px; line-height:1.4; }
.live-order { grid-column:2; grid-row:3 / 5; padding:16px; }
.live-order-top { align-items:center; }
.live-order-ref { font-size:12px; overflow-wrap:anywhere; }
.live-order-meta { padding-top:10px; border-top:1px solid var(--border); }
.live-order-kicker { font-size:10px; }
.live-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:16px 0 4px; }
.live-timeline li { position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:3px; padding:14px 8px 4px 0; border-left:0; border-top:2px solid var(--border); font-size:12px; line-height:1.45; }
.live-timeline li::before { content:""; position:absolute; top:-5px; left:0; width:8px; height:8px; border-radius:50%; background:var(--border); }
.live-timeline .is-done { border-top-color:var(--success); }
.live-timeline .is-now { border-top-color:var(--primary); }
.live-timeline .is-done::before { background:var(--success); }
.live-timeline .is-now::before { background:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.live-pace { grid-column:1/-1; grid-row:5; }
.live-pace>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.live-more { grid-column:1/-1; grid-row:6; }
.live-details { grid-column:1/-1; grid-row:7; border-top:1px solid var(--border); }
.live-delivery>.small-empty { grid-column:1/-1; }
.live-updated { flex-wrap:wrap; justify-content:flex-end; }
.live-refresh:hover { background:var(--primary-soft); border-color:var(--primary); }
.txn-row { min-width:0; }
.txn-row>div { min-width:0; overflow-wrap:anywhere; }
.orders-table-wrap { border:1px solid var(--border); border-radius:10px; }
.orders-table th { padding:11px 12px; background:var(--bg-secondary); }
.orders-table tbody tr:hover { background:var(--bg-primary); }
.status-badge { font-weight:650; line-height:1.5; }
.field>small { font-weight:400; line-height:1.5; }
.account-menu-panel { max-width:calc(100vw - 24px); }
.account-menu-who small { white-space:normal; overflow-wrap:anywhere; }
@media(min-width:1024px) {
 :root[data-sidebar-collapsed="true"] .account-sidebar { padding-inline:12px; }
 /* Keep icon-only navigation names available to screen readers. */
 :root[data-sidebar-collapsed="true"] .account-sidebar-logo .logo-word,
 :root[data-sidebar-collapsed="true"] .account-sidebar-nav a .nav-text,
 :root[data-sidebar-collapsed="true"] .account-sidebar-logout .nav-text {
  display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
 }
 :root[data-sidebar-collapsed="true"] .account-sidebar-nav a[aria-current]::before { left:0; }
}
@media(min-width:761px) and (max-width:1023px) {
 .dash-hero-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
 .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .metric-card { gap:8px; padding:12px; }
}
@media(max-width:1100px) {
 .live-delivery { column-gap:16px; }
 .live-stats { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:760px) {
 :root { --workspace-gutter:16px; }
 .account-topbar { padding:10px 16px; gap:8px; }
 .account-topbar .topbar-title { display:none; }
 .account-topbar-logo { min-width:0; font-size:16px; }
 .account-topbar-logo .logo-word { overflow:hidden; text-overflow:ellipsis; }
 .account-topbar-right { gap:8px; }
 .dash-welcome h1 { font-size:20px; }
 .dash-hero-row { gap:12px; }
 .quick-actions { padding:14px; }
 .quick-actions-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
 .quick-action { min-height:64px; padding:8px 4px; font-size:11px; }
 .live-delivery { display:block; }
 .live-head,.live-network,.live-order-top { flex-direction:row; flex-wrap:wrap; }
 .live-head { gap:6px 12px; }
 .live-head h2 { font-size:15px; }
 .live-updated { margin-left:auto; font-size:11px; }
 .live-stats { grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); }
 .live-order { margin-top:12px; }
 .section-card { padding:16px; }
 .filter-bar .field { min-width:0; flex:1 1 140px; }
}
@media(max-width:430px) {
 :root { --workspace-gutter:12px; }
 .account-topbar { padding-inline:12px; }
 .account-topbar-logo { font-size:14px; gap:6px; }
 .account-topbar-logo .logo-mark { width:30px; height:32px; }
 .account-page { padding-top:18px; }
 .wallet-hero { padding:18px; min-height:172px; }
 .metric-card { padding:12px; gap:8px; }
 .metric-icon { width:30px; height:32px; }
 .metric-value { font-size:17px; }
 .metric-label { font-size:11px; }
 .live-order { padding:12px; }
 .live-stats dd { font-size:13px; }
 .live-head .live-updated { margin-left:0; }
 .txn-list li { align-items:flex-start; gap:8px; }
 .txn-row { gap:8px; }
 .txn-icon { width:28px; height:28px; }
}
@media(pointer:coarse) {
 .sidebar-collapse-btn,.account-topbar .theme-menu,.topbar-account-chip,.live-refresh,.section-card-link { min-height:44px; }
 .account-topbar .theme-menu { width:44px; }
}

/* ResellersHub Sunlight — approved 2026-10-27. Presentation only. */
:root{
 --brand-indigo:#27282b;--brand-violet:#27282b;--brand-purple:#161719;--brand-bright:#ffcc00;
 --brand-soft:#ffe58a;--brand-gradient:#ffcc00;--bg-primary:#fff;--bg-secondary:#fff;--surface:#fff;--surface-elevated:#fff;
 --text-primary:#242528;--text-secondary:#575a60;--text-muted:#6b6e73;--border:#e5e5e5;
 --primary:#27282b;--primary-hover:#101113;--primary-soft:#ffe58a;--on-primary:#242528;
 --brand-solid:#27282b;--brand-deep:#27282b;--brand-highlight:#ffcc00;
 --feature-bg:#242528;--feature-ink:#fff;--feature-muted:#d6d6d8;
 --welcome-gradient:#fff;--promo-gradient:#ffe58a;--logo-bg:#ffcc00;
 --nav-bg:#fff;--nav-surface:#fff;--nav-active:#ffcc00;--nav-text:#55585d;--nav-muted:#74767b;--nav-border:#e5e5e5;
 --indigo-ink:#615321;--indigo-soft:#ffe58a;--focus:#937200;
 --shadow-sm:0 2px 8px #24252804;--shadow-md:0 12px 32px #2425280b;
 --ink:var(--text-primary);--muted:var(--text-secondary);--line:var(--border);--bg:var(--bg-primary);--brand:var(--primary);--brand-dark:var(--primary-hover)
}
/* Keep the existing appearance switch functional. */
:root[data-theme=dark]{--bg-primary:#17181a;--bg-secondary:#202124;--surface:#222326;--surface-elevated:#2c2d30;--text-primary:#f6f6f6;--text-secondary:#d0d0d2;--text-muted:#b1b1b5;--border:#3c3d40;--primary:#ffe079;--primary-hover:#ffedaf;--primary-soft:#39331d;--on-primary:#242528;--nav-bg:#222326;--nav-text:#d0d0d2;--nav-muted:#a8a8ad;--nav-border:#3c3d40;--nav-active:#39331d;--welcome-gradient:#222326;--promo-gradient:#39331d;--indigo-ink:#ffe079;--indigo-soft:#39331d;--focus:#ffda4b}
body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;-webkit-font-smoothing:antialiased}
body h1,body h2,body h3{font-family:inherit;letter-spacing:-.03em}
html:not([data-theme=dark]) body,html:not([data-theme=dark]) body:is(.account-body,.auth-screen,.sf-body,.admin-body),html:not([data-theme=dark]) :is(.account-workspace,.account-topbar,.account-sidebar,.site-header,.site-footer,.hero,.popular-section,.store-browser){background:#fff!important;color:#242528}
body .logo-mark{background:#ffcc00!important;color:#242528!important;box-shadow:none!important}
body .btn-primary,body:not(.admin-body):not(.sf-body) .btn-primary,body .bp-continue{background:#ffcc00!important;color:#242528!important;border-color:#d9aa00!important;box-shadow:0 2px 3px #24252805!important}
body .btn-primary:hover,body:not(.admin-body):not(.sf-body) .btn-primary:hover,body .bp-continue:hover{background:#eabb00!important;color:#242528!important;transform:none}
body .btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none!important}
body .btn{min-height:44px;border-radius:9px;font-size:13px;gap:9px;transition:background .15s,border-color .15s}
body .btn-ghost{background:var(--surface)!important;color:var(--text-primary)!important;border-color:var(--border)!important}
.account-body .account-sidebar-nav a{font-size:13px;min-height:44px;border-radius:9px;color:var(--nav-text);font-weight:550}
.account-body .account-sidebar-nav a[aria-current]{background:var(--nav-active)!important;color:var(--text-primary)!important;font-weight:650;box-shadow:none!important}
.account-body .account-sidebar-nav a[aria-current]::before{display:none}
.account-body .account-sidebar-section{color:var(--text-muted);font-size:10px;letter-spacing:.12em}
.account-body .account-sidebar-user{background:var(--bg-secondary)!important;border:1px solid var(--border);border-radius:12px}
.account-body .account-sidebar-user-info strong{font-size:13px}.account-body .account-sidebar-user-info small{font-size:11px}
body .account-avatar{background:#ffdf66!important;color:#242528!important}
.account-body .topbar-title{font-size:16px;letter-spacing:-.025em}
.account-body .account-topbar{min-height:72px;border-color:var(--border)}
.account-body .section-card{border-radius:14px;box-shadow:var(--shadow-sm)}
.account-body :is(.section-card h2,.section-card-head h2){font-size:16px}
body .field{font-size:13px;line-height:1.5;color:var(--text-secondary)}
body :is(input,select,textarea):not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=color]){border-radius:9px;border-color:var(--border);color:var(--text-primary)}
html:not([data-theme=dark]) body :is(input,select,textarea):not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=color]){background:#fff!important}
input[type=checkbox],input[type=radio]{accent-color:#8c6e00}
body .auth-visual,body .purchase-stage{background:#242528!important;color:#fff}
body .auth-visual h2,body .auth-visual p,body .auth-visual li{color:#fff!important}
body .auth-visual .auth-kicker{color:#ffe382!important}
html:not([data-theme=dark]) .auth-screen .auth-shell{background:#fff;border-color:#e5e5e5;box-shadow:0 12px 40px #24252807}
body .dashboard-welcome{background:var(--surface)!important;color:var(--text-primary)!important;min-height:0;padding:0 0 6px!important;border-radius:0;box-shadow:none!important}
body .dashboard-welcome::before,body .dashboard-welcome::after{content:none}
body .dashboard-welcome h2{font-size:28px!important;line-height:1.25;font-weight:700}
body .dashboard-welcome-copy p,body .dashboard-eyebrow{color:var(--text-secondary)!important}
body .dashboard-welcome-tagline{color:var(--text-muted)!important;font-size:16px}
body .dashboard-footer-actions{background:#242528!important;color:#fff;padding:25px!important;border-radius:14px;min-height:154px;gap:24px}
body .dashboard-footer-actions>p,body .dashboard-footer-actions>p>svg{color:#d6d6d8!important;font-size:12px}
body .dashboard-footer-actions strong{color:#fff!important;font-size:34px!important;font-weight:600;letter-spacing:-1px;line-height:1.3}
body .dashboard-footer-actions .dashboard-text-link{color:#ffe382!important}
body .dashboard-metric{box-shadow:none}.dashboard-metric h3{font-size:12px!important}
body .dashboard-promo{background:var(--primary-soft)!important;border:1px solid var(--border);color:var(--text-primary)!important;box-shadow:none}
body .dashboard-promo h2,body .dashboard-promo p{color:var(--text-primary)!important}
body .dashboard-promo-button{background:#ffcc00!important;color:#242528!important;border-color:#d9aa00!important}
body .dashboard-feed{border-radius:14px;box-shadow:var(--shadow-sm)}
body .dashboard-feed-heading h2{font-size:16px}
body .metric-purple,body .metric-indigo{background:var(--primary-soft);color:#746123}
body .network-picks label:has(input:checked){background:var(--primary-soft);border-color:#d8b52a;box-shadow:none}
body .public-menu-icon,body .public-menu-account-icon{background:var(--primary-soft);color:var(--text-primary)}
body .public-menu-links a[aria-current]{background:var(--primary-soft);color:var(--text-primary)}
body .hero h1>span{color:var(--text-primary)}body .hero h1>span::after{border-color:#ffcc00}
body .sf-product{background:var(--surface)!important}body .sf-body{background:var(--bg-primary)!important}
/* Store owners' custom accent, price settings and service visibility remain intact. */
@media(max-width:680px){body .dashboard-welcome h2{font-size:25px!important}body .dashboard-footer-actions{padding:22px!important;min-height:170px}body .dashboard-footer-actions strong{font-size:32px!important}.account-body .account-sidebar-nav a{min-height:46px;font-size:14px}body input:not([type=checkbox]):not([type=radio]),body select,body textarea{font-size:16px}body .dashboard-footer-actions nav{flex-wrap:wrap;gap:10px}body .dashboard-welcome-tagline{display:none}}
@media(prefers-reduced-motion:reduce){body .btn{transition:none;transform:none}}
/* End ResellersHub Sunlight. */
/* The approved dashboard omits the delivery widget; its endpoints remain unchanged. */
.customer-dashboard #live-delivery-root{display:none}
html:not([data-theme=dark]) .account-sidebar :is(.logo-word,.account-sidebar-user-info strong){color:#242528!important}
html:not([data-theme=dark]) .account-sidebar :is(.account-sidebar-user-info small,.account-sidebar-section){color:#686b70!important}
html:not([data-theme=dark]) :is(.account-sidebar-top,.account-sidebar-scroll){background:#fff}
/* Solid selected states distinguish the active choice from the softer panels. */
.account-body .account-sidebar-nav a[aria-current]{background:var(--brand-bright)!important;color:var(--on-primary)!important}
body .bp-tabs a[aria-current],:is(.rh-workspace,.rh-public) :is(.rh-buy-networks,.rh-buy-bundles) button[aria-pressed=true]{background:var(--brand-bright);color:var(--on-primary);border-color:#d9aa00;box-shadow:none}
:is(.rh-workspace,.rh-public) .rh-buy-bundles button[aria-pressed=true] small{color:var(--on-primary)}
body .bp-wallet-icon{background:var(--brand-bright);color:var(--on-primary)}
/* One solid gold for every ResellersHub yellow surface, in either appearance. */
:root,:root[data-theme=dark]{
 --brand-ink:#242528;
 --brand-soft:var(--brand-bright);--primary-soft:var(--brand-bright);
 --nav-active:var(--brand-bright);--promo-gradient:var(--brand-bright);
 --indigo-soft:var(--brand-bright);--warning-soft:var(--brand-bright);
}
:root[data-theme=dark]{--primary:var(--brand-bright);--primary-hover:#eabb00;--warning:var(--brand-bright);--indigo-ink:var(--brand-bright)}
body .account-avatar{background:var(--brand-bright)!important;color:var(--brand-ink)!important}
body .order-network.net-mtn,body .store-networks b:first-child,body .commerce-network[data-network*="MTN" i]{background:var(--brand-bright);color:var(--brand-ink)}
body .network-mtn{--network-bg:var(--brand-bright);--network-ink:var(--brand-ink)}
body .sf-product.net-mtn{--bundle-accent:var(--brand-bright);--bundle-label-bg:var(--brand-bright);--bundle-label-ink:var(--brand-ink)}
body .as-pass.net-mtn{--pass-bg:var(--brand-bright);--pass-ink:var(--brand-ink)}
body .as-network-dot.net-mtn{background:var(--brand-bright)}
body .shop-guide-step-1{--guide-soft:var(--brand-bright);--guide-accent:var(--brand-ink)}
body .rh-network-dot:not(.rh-network-telecel):not(.rh-network-at):not(.rh-network-at_ishare):not(.rh-network-at_bigtime){background:var(--brand-bright)}
body :is(.rh-wallet-label>span:last-child,.rh-wallet-link,.dashboard-footer-actions .dashboard-text-link,.auth-visual .auth-kicker){color:var(--brand-bright)!important}
/* Keep text and nested labels readable on the now-solid yellow panels. */
body:not(.sf-body) :is(
 .purchase-icon,.empty-icon,.store-avatar,.store-awning,.store-caption,
 .availability-note,.stat-icon-spent,.stat-icon-pending,.metric-purple,.metric-indigo,
 .dashboard-transaction-icon.is-refund,.dashboard-empty>span,
 .live-banner,.live-state.is-busy,.live-state.is-delayed,.live-order.is-hold,
 .notice-card,.notice-line,.key-reveal,.ticket-reply,.is-cancelled .result-icon,.is-notfound .result-icon,
 .bp-heading-icon,.bp-selection,.bp-payment-option:has(input:checked),.bp-low,.bp-recipient,.bp-tabs a[aria-current],.bp-bulk-stats>div,
 .network-picks label:has(input:checked),.shop-filters a[aria-current],.seller-nav a[aria-current],
 .quick-action:hover,.side-links a:hover,.amount-chip:hover,.amount-chip.is-active,.pay-option:has(input:checked),
 .docs-nav a:hover,.password-toggle:hover,.theme-picker-panel>button:hover,.theme-picker-panel>button[aria-pressed=true],
 .bx-net:has(input:checked),.bx-filter button.is-active,.bx-bundle:has(input:checked),.bx-pay-opt:has(input:checked),.bx-low,.bx-sendto,
 .role-badge.role-super_admin,.role-badge.role-support_admin,.live-refresh:hover,
 .public-menu-icon,.public-menu-account-icon,.public-menu-links a[aria-current],.public-menu-toggle:hover,.public-menu-close:hover,
 .dashboard-promo,.page-hero,.shop-share-card,.shop-overview .metric-card,.shop-finances,.shop-earnings-summary,
 .shop-create-form .shop-link-preview,.shop-start-guide li>span,.shop-guide-help,.shop-guide-link:hover,
 .sf-price-changed,
 .wd-empty svg,.wd-txn-icon,.wd-notice,
 .rh-network-tabs button[aria-selected=true],.rh-bundle-row:hover,.rh-quick-buy .rh-bundle-row>svg,
 .rh-shop-tabs>a[aria-current],.rh-shop-tools[open]>summary,.rh-shop-tools a:hover,.rh-shop-monogram,
 .rh-mobile-nav [aria-current=page],.rh-mobile-nav button[aria-expanded=true],
 :where(#afa-history) [data-afa-status],.rh-buy-networks [aria-pressed=true],.rh-buy-bundles button[aria-pressed=true],
 .service-shortcut:hover,.service-shortcut-icon,.ao-date-filter a[aria-current],.ao-empty>span,.ao-provider-result,.bundle-table tr.is-selected,.bundle-health-warning
){
 --primary:var(--brand-ink);--primary-hover:#101113;--warning:var(--brand-ink);--indigo-ink:var(--brand-ink);
 --text-primary:var(--brand-ink);--text-secondary:#3f3b2a;--text-muted:#514a30;
 color:var(--brand-ink);
}
/* Semantic green/red/blue status variants retain their own colours. */
body:not(.sf-body) :is(.metric-icon,.status-badge,.wd-badge){--primary:var(--brand-ink);--warning:var(--brand-ink)}
body:not(.sf-body) :is(.page-hero,.shop-share-card,.shop-overview .metric-card,.shop-finances){background:var(--brand-bright)}
body.account-body .shop-withdrawal-summary .metric-card:first-child :is(.metric-value,.metric-label){color:var(--brand-ink)}
body:not(.sf-body) .sf-setting-grid input[type=file]::file-selector-button{background:var(--brand-bright);color:var(--brand-ink)}
body .rh-overview .dashboard-metric-icon:is(.metric-purple,.metric-indigo){background:var(--brand-bright);color:var(--brand-ink)}

/* Stronger ink: shared type weights, neutral outlines and line icons. */
:root:not([data-theme=dark]){
 --text-primary:#141517;--text-secondary:#36393e;--text-muted:#555960;
 --nav-text:#303338;--nav-muted:#555960;--brand-ink:#141517;
 --border:#b9bdc4;--nav-border:#b9bdc4;
}
body{font-weight:550!important}
body :is(p,li,dt,dd,td,caption,figcaption,small,input,select,textarea){font-weight:550!important}
body :is(label,legend,.nav-text,.field-label,.bp-label,.rh-channel-benefits li){font-weight:650!important}
body :is(a,button,summary){font-weight:700!important}
body :is(h1,h2){font-weight:800!important}
body :is(h3,h4,h5,h6,th){font-weight:700!important}
body :is(strong,b,.metric-value,.stat-value,.rh-wallet-balance,.order-amount,.sf-product small){font-weight:750!important}
body :is(.eyebrow,.rh-eyebrow,.dashboard-eyebrow,.rh-channel-kicker,.account-sidebar-section){font-weight:750!important}
body :is(.metric-label,.stat-label,.dashboard-transaction-meta,.account-sidebar-logo small){font-weight:600!important}
body.account-body.rh-workspace .account-sidebar-nav a{font-weight:700!important}
body.account-body.rh-workspace .account-sidebar-nav a[aria-current]{font-weight:750!important}
body :is(.logo-word,.sf-brand,.public-menu-brand-name){font-weight:800!important}

/* Filled logos retain their shapes; shared outline icons have a firmer stroke. */
body svg[stroke="currentColor"]{stroke-width:2.3px!important}
body .nav-toggle span:not(.sr-only){height:3px}

/* Set weights only on existing panel/control borders, leaving status accents intact. */
body :is(.dashboard-feed,.dashboard-metric,.section-card,.rh-panel,.rh-channel-popup,.ao-table-wrap){border-width:1.5px!important}
body .sf-product{border-inline-width:1.5px!important;border-bottom-width:1.5px!important}
body :is(.btn-ghost,.nav-toggle,.public-menu-toggle,.public-menu-close,.theme-menu,.sidebar-mobile-close){border-width:1.5px!important}
body :is(input,select,textarea):not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=color]):not([type=range]){border-width:1.5px!important}
body.rh-workspace .account-topbar{border-bottom-width:2px}
body.rh-workspace .account-sidebar{border-right-width:2px}
body :is(.rh-workspace-footer,.rh-sidebar-profile,.rh-shop-metrics){border-top-width:1.5px}
body :is(.dashboard-feed-heading,.rh-panel-heading,.rh-bundle-row,.sf-header){border-bottom-width:1.5px}
/* Sunlight finish: colour and surface treatment only. */
:root{--rh-gold-finish:linear-gradient(165deg,#fff0a1 0%,#ffdc38 30%,#ffcc00 66%,#edb900 100%);--rh-panel-finish:linear-gradient(155deg,#fff 0%,#fff 55%,#fffdf6 100%);--rh-panel-shadow:0 1px 2px #33260005,0 8px 28px #33260008;--rh-edge-light:#ffffffd9}
:root[data-theme=dark]{--rh-panel-finish:linear-gradient(155deg,#2b2c30 0%,#242528 55%,#222326 100%);--rh-panel-shadow:0 1px 0 #ffffff05,0 10px 30px #00000024;--rh-edge-light:#ffffff0d}
body .btn-primary:not(:disabled),body:not(.admin-body):not(.sf-body) .btn-primary:not(:disabled),body .bp-continue:not(:disabled){background:var(--rh-gold-finish)!important;border-color:#d6a800!important;box-shadow:inset 0 1px 0 #fff8c8,0 3px 7px #a77a001c,0 1px 2px #43300012!important;color:#242528!important}
@media(hover:hover){body .btn-primary:not(:disabled):hover,body:not(.admin-body):not(.sf-body) .btn-primary:not(:disabled):hover,body .bp-continue:not(:disabled):hover{background:linear-gradient(165deg,#fff3b5,#ffe05b 32%,#ffd326 70%,#f5c300)!important;box-shadow:inset 0 1px 0 #fffbd9,0 5px 12px #a77a0024!important}}
body .btn-primary:not(:disabled):active,body .bp-continue:not(:disabled):active{box-shadow:inset 0 2px 4px #8d680020!important}
body .logo-mark{background:var(--rh-gold-finish)!important;box-shadow:inset 0 1px 0 #fff5ba,0 2px 6px #a77a0018!important}
body :is(.dashboard-feed,.dashboard-metric,.section-card,.rh-panel,.card,.bundle-card,.buy-card,.shop-card){background:var(--rh-panel-finish)!important;box-shadow:inset 0 1px 0 var(--rh-edge-light),var(--rh-panel-shadow)!important;border-color:var(--border)}
body .btn-ghost{box-shadow:inset 0 1px 0 var(--rh-edge-light),0 2px 5px #00000004}
body.account-body .account-sidebar-nav a[aria-current]{background:var(--rh-gold-finish)!important;color:#242528!important;box-shadow:inset 0 1px 0 #fff5ba,0 2px 6px #a77a0012!important}
html[data-theme=dark] body :is(.account-topbar,.site-header){background:linear-gradient(180deg,#2a2b2e,#222326)!important;box-shadow:0 1px 0 #ffffff06,0 3px 14px #00000014}
html:not([data-theme=dark]) body :is(.account-topbar,.site-header){background:linear-gradient(180deg,#fff,#fffef9)!important;box-shadow:0 1px 0 #fff,0 3px 14px #33260006}
body :is(.btn,.bp-continue){transition:background .18s,box-shadow .18s,border-color .18s}
@media(prefers-reduced-motion:reduce){body :is(.btn,.bp-continue){transition:none}}
/* Keep the selected network readable on its gold surface in both themes. */
body .network-picks label:has(input:checked) .net-mark{color:#242528!important}