:root{
  --bg:#f3f6fb; --surface:#ffffff; --surface-2:#f7f9fc; --ink:#0f1a2e; --muted:#5f6f88; --line:#e1e8f2;
  --brand:#1a6dff; --brand-d:#0f56d6; --brand-tint:#e8f1ff; --brand-ink:#0f56d6;
  --ok:#12a150; --ok-tint:#e6f6ec; --ok-ink:#0b7d3c;
  --amber:#e39a0b; --amber-ink:#8a5a00; --amber-tint:#fdf1d9; --red:#dc3d43; --teal:#0d9488; --teal-tint:#dcf5f1;
  --blue:#229ed9; --blue-tint:#e2f3fb; --shadow:0 1px 2px rgba(15,26,46,.04),0 4px 14px rgba(15,26,46,.05);
  --sidebar:252px; --r:16px;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:#0b1220; --surface:#111a2e; --surface-2:#16213a; --ink:#e8eefb; --muted:#93a3c0; --line:#22304d;
  --brand:#2570f5; --brand-d:#1a5fe0; --brand-tint:#14284f; --brand-ink:#8ab8ff;
  --ok:#2ec26f; --ok-tint:#123324; --ok-ink:#4fd88b;
  --amber:#f2b13c; --amber-ink:#f2b13c; --amber-tint:#3a2d10; --red:#ff6b70; --teal:#2dd4bf; --teal-tint:#0f3330;
  --blue:#4cb8ea; --blue-tint:#10303f; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#111a2e; --surface-2:#16213a; --ink:#e8eefb; --muted:#93a3c0; --line:#22304d;
  --brand:#2570f5; --brand-d:#1a5fe0; --brand-tint:#14284f; --brand-ink:#8ab8ff;
  --ok:#2ec26f; --ok-tint:#123324; --ok-ink:#4fd88b;
  --amber:#f2b13c; --amber-ink:#f2b13c; --amber-tint:#3a2d10; --red:#ff6b70; --teal:#2dd4bf; --teal-tint:#0f3330;
  --blue:#4cb8ea; --blue-tint:#10303f; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3,.brand,.val,.bal{font-family:var(--font-head)}
button,input,select,textarea,table{font-family:var(--font-body)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-wallet{width:24px;height:24px}
.ic.sm{width:16px;height:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 16px 18px;background:var(--surface);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--brand);color:#fff}
.brand-mark .ic{width:21px;height:21px}
.brand span b{color:var(--brand)}
.nav{display:flex;flex-direction:column;gap:4px;margin-top:26px;flex:1;min-height:0;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:600}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brand-tint);color:var(--brand-ink)}
.nav hr{width:100%;border:0;border-top:1px solid var(--line);margin:10px 0}
.help{margin-top:auto;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.logout-form{margin-top:auto;padding-top:12px}
.logout-btn-main{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-weight:700;font-size:13.5px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.logout-btn-main:hover{background:rgba(220,61,67,.08);border-color:rgba(220,61,67,.3);color:var(--red)}
.logout-btn-main .ic{stroke:currentColor}

/* Back button: a real pill with an arrow icon rather than a bare "← Back" text link.
   The arrow nudges left on hover, which reads as "going back" without needing to say so. */
.btn-back{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:600;font-size:13px;
  font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-back:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand-ink)}
.btn-back .ic{width:16px;height:16px;transition:transform .15s}
.btn-back:hover .ic{transform:translateX(-2px)}
.help .tile{margin-bottom:10px}
.help h3{font-size:15px;font-weight:700}
.help p{color:var(--muted);font-size:13px;margin:4px 0 14px}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:13px}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-d)}
.btn-line{border-color:var(--brand);color:var(--brand-ink);background:transparent}
.btn-line:hover{background:var(--brand-tint)}
.help .btn{width:100%}
.help .btn+.btn{margin-top:8px}

/* form fields — inputs, selects, labels. Used by SMS Verification, Settings, Orders.
   select{} is a bare-element rule (not scoped to .field) so ANY dropdown anywhere is styled
   by default — same defensive pattern as the global button{cursor:pointer} reset above. */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),select,textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s;outline:none}
input[type]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
input::placeholder,textarea::placeholder{color:var(--muted)}
select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;width:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7385' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.field input,.field select{width:100%}
.field-hint{font-size:11.5px;color:var(--muted);margin-top:5px}
@media (max-width:719px){.field-row{grid-template-columns:1fr}}
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a3c0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a3c0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}}
.tile{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
.t-brand{background:var(--brand-tint);color:var(--brand-ink)}
.t-teal{background:var(--teal-tint);color:var(--teal)}
.t-blue{background:var(--blue-tint);color:var(--blue)}
.t-amber{background:var(--amber-tint);color:var(--amber)}

.main{min-width:0;padding:18px 28px 40px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.mobile-brand{display:none}
.search{flex:1;max-width:420px;position:relative}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
/* #site-search (an ID) deliberately outranks the global input[type]:not(...) rule added later
   for unstyled form fields — that rule's five :not() clauses give it higher specificity than a
   plain ".search input" ever could, which was silently overriding this padding/height and
   making the icon and the "/" hint overlap the typed text. An ID is the reliable fix, not a
   fragile specificity race. */
#site-search{width:100%;height:44px;padding:0 40px 0 42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit}
#site-search::placeholder{color:var(--muted)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.icon-btn:hover{color:var(--ink)}
.badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.profile{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:999px;border:0;background:transparent;text-align:left}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:14px}
.profile b{display:block;font-size:13.5px;line-height:1.2}
.profile small{color:var(--muted);font-size:12px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .moon{display:block}:root:not([data-theme="light"]) .theme .sun{display:none}}

.welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.welcome h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.welcome p{color:var(--muted);margin-top:4px}
.datecard{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap}
.sms-balance-card{display:flex;align-items:center;gap:14px;padding:14px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap}
.sms-balance-card b{font-size:22px;font-weight:800;display:block;line-height:1.2;transition:color .3s}
.sms-balance-card small{color:var(--muted);font-size:12.5px}
.sms-balance-card b.flash{color:var(--brand)}
@media (max-width:719px){.sms-balance-card{padding:12px 16px}.sms-balance-card b{font-size:19px}}

/* ---------- SMS purchase flow: processing / success / countdown / details / code digits ---------- */
.spinner{width:52px;height:52px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);
  margin:0 auto;animation:sms-spin 0.9s linear infinite}
@keyframes sms-spin{to{transform:rotate(360deg)}}
#processing-checklist li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
#processing-checklist li .stage-icon{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;position:relative}
#processing-checklist li.done{color:var(--ink);font-weight:600}
#processing-checklist li.done .stage-icon{border-color:var(--ok-ink);background:var(--ok-ink)}
#processing-checklist li.done .stage-icon::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#processing-checklist li.active{color:var(--ink);font-weight:600}
#processing-checklist li.active .stage-icon{border-color:var(--brand);border-top-color:transparent;animation:sms-spin 0.7s linear infinite}

.success-check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--ok-tint);border:2px solid var(--ok-ink)}

.countdown-badge{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--amber);
  background:var(--amber-tint);padding:4px 10px;border-radius:999px;white-space:nowrap}
.countdown-badge.urgent{color:var(--red);background:rgba(220,61,67,.12)}

.waiting-details summary{list-style:none;display:flex;align-items:center;gap:4px;user-select:none}
.waiting-details summary::-webkit-details-marker{display:none}
.waiting-details summary::after{content:'▾';font-size:10px;color:var(--muted)}
.waiting-details[open] summary::after{content:'▴'}
.details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;padding:12px;border-radius:10px;background:var(--surface-2)}
.details-grid small{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}
.details-grid b{font-size:13px}

/* The received-code block is injected into .awaiting, which is a space-between flex row (fine
   for the one-line "Waiting for SMS..." state, but it forced six digit boxes and the Copy
   button onto a single row that can't fit a phone). Switching to a wrapping column once a code
   has actually arrived, and letting the digits shrink on very narrow screens. */
.awaiting.has-code,.awaiting:has(.code-digits){flex-direction:column;align-items:flex-start;gap:8px}
.code-digits{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.code-digits span{width:38px;height:46px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;
  border-radius:10px;background:var(--ok-tint);color:var(--ok-ink);border:1.5px solid rgba(34,197,94,.3)}
@media (max-width:420px){
  .code-digits{gap:6px}
  .code-digits span{width:34px;height:42px;font-size:18px}
}

/* rich country/service pickers */
.pick-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;text-align:left}
.pick-row:hover{border-color:var(--brand);background:var(--brand-tint)}
.pick-row img.flag-img{width:28px;height:21px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--surface-2)}
.pick-row .pick-icon{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pick-row .pick-icon .ic{width:16px;height:16px}
.pick-row .pick-name{flex:1;font-weight:700;font-size:13.5px}
.pick-row .pick-price{font-weight:800;font-size:13.5px;color:var(--brand)}
.datecard .ic{color:var(--muted)}
.datecard b{display:block;font-size:13px}
.datecard small{color:var(--muted);font-size:12px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.card h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
.card .sub{color:var(--muted);font-size:13px;margin-top:2px}
.link{color:var(--brand-ink);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:4px}
.link:hover{text-decoration:underline}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stat{display:flex;align-items:center;gap:14px;padding:18px}
.stat .tile{width:48px;height:48px;border-radius:14px;align-self:flex-start}
.stat .label{color:var(--muted);font-weight:600;font-size:13px}
.stat .hint{color:var(--muted);font-size:12px;margin-top:4px}
.stat .val{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:2px}
.delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-weight:700;font-size:13px}
.delta.up{color:var(--ok-ink)}
.delta.down{color:var(--red)}
.delta .ic{width:14px;height:14px;stroke-width:2.2}
.wallet{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.wallet .btn{margin-top:10px;min-height:36px}
.wallet .bal{font-size:26px}

/* columns */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.panel{padding:20px}

/* server picker */
.servers{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.server{padding:14px;border-radius:14px;background:var(--brand-tint)}
.server-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.server-h h3{font-size:15px;font-weight:700}
.server-h .tile{background:var(--surface);width:38px;height:38px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:var(--surface);color:inherit;text-align:left;border:1px solid var(--line);border-radius:14px}
.opt:hover{border-color:var(--brand)}
.opt b{display:block;font-size:14px}
.opt small{color:var(--muted);font-size:12px}
.opt .go{margin-left:auto;color:var(--muted)}
.flag,.globe{width:44px;height:44px;flex:none;border-radius:50%}
.globe{display:grid;place-items:center;background:var(--brand);color:#fff}

/* recent orders */
.orders{list-style:none;margin:12px 0 0;padding:0}
.orders li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.orders li:first-child{border-top:0}
.o-name{font-weight:700;font-size:13.5px}
.o-meta{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.o-side time{color:var(--muted);font-size:11.5px}
.pill{padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.pill.done{background:var(--ok-tint);color:var(--ok-ink)}
.pill.wait{background:var(--amber-tint);color:var(--amber-ink)}
.pill.down{background:rgba(220,61,67,.12);color:var(--red)}
.plus{color:var(--ok-ink)}
.minus{color:var(--red)}
.brand-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;font-weight:800;font-size:18px}
.b-tg{background:#229ed9;border-radius:50%;color:#fff}.b-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}.b-ig .ic{stroke-width:2}.b-ph{background:#f5a524}.b-tt{background:#000}.b-nf{background:#000}
.logo{width:22px;height:22px;fill:currentColor;stroke:none}
.b-tt .logo,.b-nf .logo{width:20px;height:20px}

/* services */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.svc{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-align:left}
.svc:hover{border-color:var(--brand)}
.svc .tile{margin-bottom:6px}
.svc b{font-size:13.5px}
.svc>span:not(.tile){color:var(--muted);font-size:12px;flex:1}
.svc em{font-style:normal;color:var(--brand-ink);display:flex;justify-content:flex-end;align-items:center;margin-top:6px}

/* promo */
.promo{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-radius:var(--r);border:1px solid var(--line);background:var(--brand-tint)}
.promo .tile{width:44px;height:44px}
.promo-body{display:flex;align-items:center;gap:14px;min-width:0}
.promo b{display:block;font-size:14.5px}
.promo p{color:var(--muted);font-size:12.5px;margin-top:2px}
.promo svg.art{flex:none;width:96px;height:72px}

/* quick links */
.qlinks{list-style:none;margin:8px 0 0;padding:0}
.qlinks a{display:flex;align-items:center;gap:12px;padding:12px 0;font-weight:600}
.qlinks li+li a{border-top:1px solid var(--line)}
.qlinks .ic{color:var(--muted)}
.qlinks .go{margin-left:auto}
.qlinks a:hover{color:var(--brand-ink)}

/* bottom tabs (mobile) */
.tabbar{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}


/* ---------- interaction layer ---------- */
[hidden]{display:none!important}
body:has(dialog[open]){overflow:hidden}
.kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--muted);font:600 11px/20px var(--font-body);text-align:center}
.nav-label{margin:14px 12px 4px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nb{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;margin-left:auto}
.tabbar a{position:relative}
.tabbar .nb{position:absolute;top:0;left:calc(50% + 4px);margin:0;min-width:18px;height:18px;font-size:10px}
.status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ok-ink)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.status.down{color:var(--red)}.status.down::before{background:var(--red)}
.btn.sm{min-height:32px;padding:0 12px;font-size:12px}
.btn.wide{width:100%;min-height:46px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.link-btn{border:0;background:none;padding:0;color:var(--brand-ink);font-weight:600;font-size:12.5px}
.link-btn:hover{text-decoration:underline}

/* popovers */
.pop-wrap{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(15,26,46,.16);z-index:30;padding:8px}
.pop-h{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px}
.pop-h b{font-family:var(--font-head);font-size:14px}
.nt{display:flex;gap:12px;padding:10px;border-radius:10px}
.nt+.nt{margin-top:2px}
.nt.unread{background:var(--brand-tint)}
.nt .tile{width:34px;height:34px;border-radius:10px}
.nt p{font-size:13px;line-height:1.35}
.nt small{color:var(--muted);font-size:11.5px}
.menu a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-weight:600;font-size:13.5px}
.menu a:hover{background:var(--surface-2)}
.menu .ic{color:var(--muted)}
.menu form{margin:0}
.menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:10px;font-weight:600;font-size:13.5px;cursor:pointer}
.menu button:hover{background:var(--surface-2)}

/* active numbers */
.count{padding:4px 10px;border-radius:999px;background:var(--brand-tint);color:var(--brand-ink);font-size:12px;font-weight:700}
.an-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.an{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
/* The waiting card (SMS page) is a vertical stack, not the 3-column grid .an gives: its own
   markup nests a header row, a status line, a details panel and an actions row. Sharing .an's
   grid forced those four children into grid cells and overlapped them. It keeps .an only for
   the shared card chrome (padding, border, background). */
.an.waiting-card{display:block}
.an.waiting-card .brand-tile{flex:none}
.an.waiting-card .countdown-badge{flex:none;align-self:center}
.an-main{min-width:0}
.mut{color:var(--muted);font-weight:500}
.numline{display:flex;align-items:center;gap:6px;margin-top:2px}
.num{font-family:var(--font-head);font-size:16px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.copy{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--muted);vertical-align:middle}
.copy:hover{background:var(--brand-tint);color:var(--brand-ink)}
.awaiting{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12.5px;margin-top:8px}
.bar{height:4px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--brand)}
.cd{font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.an-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.code{font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.b-init{background:var(--brand-tint);color:var(--brand-ink);font-family:var(--font-head)}

/* sheets (dialogs) */
dialog.sheet{border:0;padding:0;margin:0;max-width:none;max-height:none;background:var(--surface);color:var(--ink);position:fixed;inset:0 0 0 auto;width:min(460px,100vw);height:100dvh;box-shadow:-16px 0 48px rgba(15,26,46,.2)}
dialog.sheet[open]{display:flex;flex-direction:column}
dialog.sheet::backdrop{background:rgba(9,16,30,.5)}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 12px}
.sh-head h2{font-size:18px}
.sh-body{padding:4px 20px 16px;overflow:auto;flex:1;min-height:0}
.sh-foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.step{font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 10px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-body)}
.fld input{width:100%;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface);color:var(--ink)}
.rows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;text-align:left}
.row:hover{border-color:var(--brand)}
.row[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
.row small{display:block;color:var(--muted);font-size:12px}
.row .price{margin-left:auto;font-family:var(--font-head);font-weight:700}
.row .go{margin-left:auto;color:var(--muted)}
.row .brand-tile{width:36px;height:36px;font-size:15px;border-radius:10px}
.row .b-tg{border-radius:50%}
.row .logo{width:18px;height:18px}
.cc{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);flex:none}
.chosen{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.chosen small{display:block;color:var(--muted);font-size:12px}
.chosen .link-btn{margin-left:auto}
.sum{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:12px}
.sum>div{display:flex;justify-content:space-between;gap:12px}
.sum span{color:var(--muted)}
.sum .tot{padding-top:8px;border-top:1px dashed var(--line)}
.note{color:var(--muted);font-size:12px;margin-top:10px}
.alert{padding:10px 12px;border-radius:10px;background:var(--amber-tint);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);font-size:12.5px;margin-bottom:10px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 0 6px}
.hero .tile{width:56px;height:56px;border-radius:50%;background:var(--ok-tint);color:var(--ok-ink)}
.hero h3{font-size:18px}
.numbox{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:14px 14px 14px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.numbox b{font-family:var(--font-head);font-size:20px;font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acct{padding:16px;border-radius:14px;background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line))}
.acct small{color:var(--muted);font-size:12px}
.acct .n{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.acct .n b{font-family:var(--font-head);font-size:26px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.acct .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acct .meta b{display:block;font-size:13.5px}
.steps{list-style:none;counter-reset:s;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;font-size:13.5px}
.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:700}
.steps small{display:block;color:var(--muted);font-size:12.5px}
@media (max-width:719px){
  .an{grid-template-columns:40px minmax(0,1fr)}
  .an-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  dialog.sheet{inset:auto 0 0 0;width:100%;height:auto;max-height:92dvh;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(15,26,46,.25)}
  .acct .n b{font-size:22px}
}

/* ---------- responsive ---------- */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
@media (max-width:1279px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats .wallet{grid-column:1/-1}
  .wallet>div{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;column-gap:16px}
  .wallet .btn{grid-column:2;grid-row:1/3;margin-top:0;min-height:40px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  .cols{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .app{display:block}
  .sidebar{display:none}
  .main{padding:14px 18px calc(92px + env(safe-area-inset-bottom,0px))}
  .mobile-brand{display:flex;font-size:19px}
  .mobile-brand .brand-mark{width:34px;height:34px;border-radius:10px}
  .search,.datecard{display:none}
  .profile{padding:4px;gap:0}
  .profile b,.profile small,.profile>.ic{display:none}
  .topbar{margin-bottom:18px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;font-weight:600;color:var(--muted)}
  .tabbar a[aria-current="page"]{color:var(--brand-ink)}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:720px) and (max-width:1023px){
  .services{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cols>.col:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
}
@media (max-width:719px){
  .welcome h1{font-size:22px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .stats .wallet{grid-column:1/-1;background:var(--brand-d);border-color:transparent;color:#fff;padding:18px}
  .wallet .label{color:rgba(255,255,255,.85)}
  .wallet .tile{background:rgba(255,255,255,.2);color:#fff}
  .wallet .bal{font-size:28px}
  .wallet .btn{background:#fff;color:#0f56d6;margin-top:0}
  .wallet>div{column-gap:10px}
  .hide-m{display:none}
  .cap{display:inline-block}
  .cap::first-letter{text-transform:uppercase}
  .promo{flex-direction:column;align-items:flex-start}
  .promo .btn{align-self:stretch}
  .stat:not(.wallet){flex-direction:column;align-items:flex-start;gap:6px;padding:14px}
  .stat:not(.wallet) .tile{display:none}
  .stat .val{font-size:22px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo svg.art{width:72px}
  .panel{padding:16px}
  .opts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- Telegram Stars & Premium page ----------
   Sections used to sit directly against each other: every other page adds margin-bottom by
   hand on each card, and this page never did. A stacking container makes the gap structural,
   so a card added later can't forget it. */
.tg-tabs{padding:6px;display:inline-flex;gap:4px;margin-bottom:22px}
.tg-stack{display:flex;flex-direction:column;gap:22px}
.tg-page .card-h{margin-bottom:18px}
.tg-page .field{margin-bottom:0}
.tg-page .field label{margin-bottom:8px}

.plan-list{display:flex;flex-direction:column;gap:12px}
.plan-opt{cursor:pointer;padding:16px 18px;gap:14px;font:inherit;transition:border-color .15s,background .15s}
.plan-opt:hover{border-color:var(--brand)}
.plan-opt.selected{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 1px var(--brand)}
.plan-opt .plan-text{flex:1;min-width:0}
.plan-opt .plan-text b{font-size:15px}
.plan-opt .plan-text small{display:block;margin-top:3px}
.plan-opt .plan-price{font-weight:800;font-size:15px;white-space:nowrap;color:var(--ink)}
.plan-opt.selected .plan-price{color:var(--brand-ink)}

.star-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.star-pkg{border:1.5px solid var(--line);border-radius:14px;padding:18px 8px;text-align:center;cursor:pointer;
  background:var(--surface);color:var(--ink);font:inherit;font-weight:800;font-size:15px;transition:border-color .15s,background .15s}
.star-pkg:hover{border-color:var(--brand)}
.star-pkg.selected{border-color:var(--brand);background:var(--brand-tint)}
@media (max-width:420px){
  .tg-stack{gap:18px}
  .plan-opt{padding:14px 14px;gap:12px}
  .star-grid{gap:10px}
  .star-pkg{padding:16px 4px;font-size:14px}
}

/* ---------- Unified Order History + order detail ---------- */
.orders-toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:16px}
.orders-tabs{display:flex;gap:6px;flex-wrap:wrap}
.soon-tag{font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;background:var(--amber-tint);color:var(--amber-ink);margin-left:2px}
.o-link{color:inherit;text-decoration:none}
.o-link:hover{color:var(--brand)}
.o-copyline{display:flex;align-items:center;gap:4px;flex-wrap:wrap;white-space:normal}
.o-copyline .copy{padding:2px}
.o-sep{margin:0 2px}
.o-amount{font-weight:700}
.otp-expired{opacity:.55;text-decoration:line-through}
.orders-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.od-card{max-width:680px}
.od-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.od-title{font-size:18px;margin:0}
.od-pill{margin-left:auto}
.od-grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 16px;margin:0}
.od-grid dt{color:var(--muted);font-size:13px}
.od-grid dd{margin:0;font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;word-break:break-word}
.otp-box{border-radius:14px;background:var(--ok-tint);padding:16px 18px;margin-bottom:20px;border:1.5px solid rgba(34,197,94,.25)}
.otp-box small{color:var(--muted);font-size:12px}
.otp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0;flex-wrap:wrap}
.otp-big{font-size:30px;font-weight:800;letter-spacing:3px;color:var(--ok-ink);word-break:break-all}
.otp-box.is-expired{background:var(--surface-2);border-color:var(--line)}
.otp-box.is-expired .otp-big{color:var(--muted);text-decoration:line-through}
@media (max-width:560px){.od-grid{grid-template-columns:1fr;gap:2px 0}.od-grid dd{margin-bottom:10px}.otp-big{font-size:26px}}
.code-digits.otp-expired span{opacity:.45;text-decoration:line-through}
a.nt{color:inherit;text-decoration:none}
a.nt:hover{background:var(--surface-2)}
.nt p b{font-weight:700}
.tg-sum-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;margin-bottom:10px}
.tg-sum-row b{text-align:right}
.tg-sum-total{display:flex;justify-content:space-between;font-size:17px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tg-sum-total b{color:var(--brand)}
.btn-soon{cursor:default;opacity:.7;pointer-events:none}
.svc-soon{cursor:default;opacity:.75}
.svc-soon .soon-tag{vertical-align:middle}
.otp-label{display:block;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:10.5px;color:var(--muted);margin-top:6px}
.otp-num{font-size:22px;font-weight:800;letter-spacing:.5px;word-break:break-all}

/* ---------- Active Numbers: purchase notice + received-code card ---------- */
.active-notice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border-radius:14px;
  background:var(--ok-tint);border:1.5px solid rgba(34,197,94,.25)}
.active-notice .success-check{width:32px;height:32px;flex:none}
.active-notice-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:160px}
.active-notice-actions{display:flex;align-items:center;gap:8px}
.notice-close{background:none;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 6px}
.waiting-card.is-received{background:var(--ok-tint);border-color:rgba(34,197,94,.3)}
.waiting-card.is-received .otp-row{margin:4px 0 10px}
.waiting-card.is-received .code-meta{margin-top:6px}
.code-timer{margin-top:10px;font-weight:700;font-size:13px;color:var(--ok-ink)}

/* ---------- Popovers (notifications, profile menu) on phones ----------
   Anchored to the button's right edge, a near-full-width panel spilled off the LEFT of the screen
   whenever the button wasn't the right-most one (the bell sits left of the avatar). On phones it is
   fixed to the screen instead; chrissms-common.js sets its top to just below the button. */
@media (max-width:640px){
  .pop{position:fixed;left:12px;right:12px;top:72px;width:auto;max-width:none;max-height:min(70vh,520px);overflow-y:auto;z-index:60}
}

/* ---------- Funding account: name / number / bank, readable on phones ---------- */
.fund-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.acct-title{display:block;margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.acct-rows{margin:0;display:flex;flex-direction:column}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--brand) 18%,var(--line))}
.acct-row:first-child{border-top:0;padding-top:4px}
.acct-row dt{color:var(--muted);font-size:13px;flex:none}
.acct-row dd{margin:0;font-weight:700;font-size:15px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;min-width:0;word-break:break-word}
.acct-num{font-family:var(--font-head);font-size:22px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
@media (max-width:480px){
  .fund-methods{grid-template-columns:1fr}
  .acct-row-num{flex-direction:column;align-items:flex-start;gap:6px}
  .acct-row-num dd{width:100%;justify-content:space-between}
}

/* centred modal (post-login community pop-up) */
dialog.modal{border:0;padding:0;margin:auto;width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 64px rgba(15,26,46,.28)}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal::backdrop{background:rgba(9,16,30,.55)}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 18px 0 22px}
.md-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--brand-tint);color:var(--brand-ink)}
.md-body{padding:12px 22px 6px}
.md-body h2{font-size:20px;letter-spacing:-.01em}
.md-body .sub{color:var(--muted);margin-top:6px}
.md-body .rows{margin-top:16px}
.md-foot{padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px))}
.md-foot .btn.wide{width:100%}
.row .b-wa{background:#25d366;color:#fff;border-radius:50%}
.row .b-tg{background:#229ed9;color:#fff}
.row .logo{fill:currentColor}

/* ===== Fund dialog: no funding account yet ===== */
.fund-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 4px 4px}
.fund-empty .tile{width:52px;height:52px;border-radius:16px}
.fund-empty b{font-size:16px;font-family:var(--font-head)}
.fund-empty .sub{max-width:360px}
.sh-foot a.btn{text-decoration:none}
/* Arriving from "Go to Wallet to generate it": make the spot obvious */
#fund-account{scroll-margin-top:16px}
#fund-account:target{animation:fund-flash 1.6s ease-out 1}
@keyframes fund-flash{0%,40%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:var(--shadow)}}

/* ===== Announcement pop-up (10 seconds) ===== */
.announce{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 16px);left:50%;width:min(440px,calc(100vw - 24px));
  display:flex;align-items:flex-start;gap:4px;padding:14px 10px 16px 14px;border-radius:18px;overflow:hidden;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px rgba(15,26,46,.22);
  transform:translate(-50%,-140%);opacity:0;transition:transform .32s cubic-bezier(.2,.9,.3,1.1),opacity .25s}
.announce.on{transform:translate(-50%,0);opacity:1}
.announce-main{display:flex;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}
.announce-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand-ink)}
.announce-txt{display:flex;flex-direction:column;min-width:0}
.announce-txt small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-ink)}
.announce-txt b{font-family:var(--font-head);font-size:15px;line-height:1.3;margin-top:1px}
.announce-txt span{color:var(--muted);font-size:13px;line-height:1.45;margin-top:3px;white-space:pre-line;overflow-wrap:anywhere}
a.announce-main .announce-txt b::after{content:" \203A";color:var(--brand)}
.announce-x{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-4px 0 0;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.announce-x:hover{background:var(--surface-2);color:var(--ink)}
.announce-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.announce.on .announce-bar{animation:announce-count var(--announce-ms,10s) linear forwards}
@keyframes announce-count{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.announce{transition:opacity .2s}.announce.on .announce-bar{animation:none}}

/* ===== Info pages: Terms, Privacy, Contact, How It Works ===== */
.doc-wrap{display:flex;flex-direction:column;gap:16px;max-width:820px}
.doc h2{font-size:17px;letter-spacing:-.01em;margin:26px 0 8px;scroll-margin-top:16px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--ink);line-height:1.7;font-size:14.5px}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 10px;padding-left:20px}
.doc li{margin:4px 0}
.doc li::marker{color:var(--brand)}
.doc a,.hiw a{color:var(--brand-ink);font-weight:600}
.doc .lead{font-size:15.5px;color:var(--muted)}
.doc-toc{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 18px;padding:12px;border-radius:14px;background:var(--surface-2)}
.doc-toc a{padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink)}
.doc-foot{margin-top:22px !important;padding-top:16px;border-top:1px solid var(--line);color:var(--muted) !important}
.doc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hiw{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hiw > li{display:flex;gap:16px;align-items:flex-start}
.hiw-n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--brand);color:#fff;font-family:var(--font-head);font-weight:800}
.hiw h2{font-size:16px;margin-bottom:4px}
.hiw p{color:var(--muted);line-height:1.65;margin:6px 0 0}
.contact-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.contact-list .opt{text-decoration:none}
.opt .b-wa{background:#25d366;color:#fff;border-radius:50%}
.opt .logo{width:20px;height:20px}

/* public frame (signed out) */
.public-page{min-height:100vh;display:flex;flex-direction:column}
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:868px;width:100%;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 24px 8px}
.pub-actions{display:flex;gap:8px}
.pub-main{flex:1;max-width:868px;width:100%;margin:0 auto;padding:16px 24px 32px}
.pub-foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;padding:20px 24px calc(20px + env(safe-area-inset-bottom,0px));
  color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.pub-foot a{color:var(--muted)}
@media (max-width:640px){
  .pub-top{padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 4px}
  .pub-top .brand > span:last-child{display:none}
  .pub-main{padding:12px 16px 24px}
  .doc p,.doc li{font-size:14px}
  .hiw > li{gap:12px}
  .hiw-n{width:32px;height:32px;border-radius:10px}
  .doc-cta .btn{flex:1}
}
.announce[hidden]{display:none}