/*
 * Design system — PAYUNIT visual identity (navy ink, one gold accent,
 * IBM Plex Sans Arabic), adapted for the P2P platform.
 * ===========================================================================
 * One stylesheet for every surface: public site, sign-in screens, the
 * customer console and the administration panel. Right-to-left first, written
 * with logical properties. Light only, like PAYUNIT: calm and consistent.
 *
 * Rules that keep every screen from 280px to 2560px:
 *   - every content track is minmax(0,1fr); every flex child holding text
 *     has min-width:0, so a long name, IBAN or hash can never push the page
 *     sideways;
 *   - the shells change shape instead of stretching: a phone gets a top bar
 *     and a bottom tab bar, a laptop gets a persistent side rail;
 *   - no inline styles anywhere (strict CSP): every state is a class.
 */

/* ---------- Fonts (Arabic subset; Latin uses the system stack) ----------- */
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --ink:#0d1526;--ink-soft:#344054;--muted:#667085;--faint:#8a94a6;
  --paper:#ffffff;--paper-2:#fbfbfd;--page:#f4f5f8;--page-2:#eceef3;
  --line:#e6e8ee;--line-soft:#eff1f5;--line-strong:#d3d7e0;
  --gold:#c39a4e;--gold-deep:#8a6b30;--gold-soft:#f3e9d5;--gold-line:#e8d5ac;--gold-bright:#d6b370;
  --navy:#1a2842;--navy-deep:#0d1526;
  --ok:#067647;--ok-bg:#ecfdf3;--ok-line:#abefc6;
  --warn:#b54708;--warn-bg:#fffaeb;--warn-line:#fedf89;
  --bad:#b42318;--bad-bg:#fef3f2;--bad-line:#fecdca;
  --info:#175cd3;--info-bg:#eff8ff;--info-line:#b2ddff;
  --btn-bg:linear-gradient(180deg,#1a2842,#0d1526);--btn-fg:#fff;
  --btn-shadow:0 1px 2px rgba(13,21,38,.16),0 10px 22px -14px rgba(13,21,38,.6);
  --nav-on-bg:#0d1526;--nav-on-fg:#fff;--nav-on-ic:#d6b370;
  --bar-bg:rgba(244,245,248,.88);--tab-bg:rgba(255,255,255,.95);--scrim:rgba(13,21,38,.45);
  --hero-bg:linear-gradient(125deg,#24334b,#0d1526);--hero-line:#2c3a50;
  --r-xl:24px;--r-lg:20px;--r-md:14px;--r-sm:10px;
  --shadow-sm:0 1px 2px rgba(13,21,38,.05);
  --shadow:0 1px 2px rgba(13,21,38,.04),0 14px 34px -18px rgba(13,21,38,.24);
  --shadow-lg:0 2px 4px rgba(13,21,38,.04),0 24px 56px -24px rgba(13,21,38,.3);
  --focus:0 0 0 3px rgba(195,154,78,.35);
  --sans:"PU Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--page);scroll-behavior:smooth}
body{margin:0;min-height:100dvh;font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
h1,h2,h3,h4{line-height:1.3;letter-spacing:-.01em}
h1{font-size:clamp(20px,4.6vw,26px);font-weight:700}
h2{font-size:17px;font-weight:700}
h3{font-size:15px;font-weight:700}
p+p{margin-block-start:.6em}
img,svg,video{max-width:100%}
img{display:block;height:auto}
a{color:var(--gold-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:rgba(195,154,78,.28)}
.ic{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle}
html[dir="rtl"] .ic-dir{transform:scaleX(-1)}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;z-index:200}
.skip:focus{width:auto;height:auto;clip-path:none;inset-block-start:0;inset-inline-start:12px;padding:12px 18px;background:var(--navy-deep);color:#fff;border-radius:0 0 var(--r-md) var(--r-md);font-weight:600}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Utilities (shared vocabulary of the views) ------------------- */
small,.muted{color:var(--muted)}
small{font-size:.86em}
code,.mono{font-family:var(--mono);font-size:.92em;direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num,.tnum{font-variant-numeric:tabular-nums}
.break{word-break:break-all}
.wrap-any{overflow-wrap:anywhere}
.block{display:block}
.pre-wrap{white-space:pre-wrap;word-break:break-word}
.hash{font-family:var(--mono);font-size:12px;direction:ltr;word-break:break-all;color:var(--muted)}
.center{text-align:center}
.text-start{text-align:start}
.mt{margin-block-start:16px}
.mb0{margin-block-end:0!important}
.mb-16{margin-block-end:16px}
.row{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;min-width:0}
.row>*{min-width:0}
.spread{justify-content:space-between}
.justify-center{justify-content:center}
.stack{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.stack>*{margin:0}
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.pos{color:var(--ok)}
.neg{color:var(--ink)}
.state-ok{color:var(--ok)}
.state-bad{color:var(--bad)}
.narrow{max-width:480px;margin-inline:auto;width:100%}
.narrow-lg{max-width:680px;margin-inline:auto;width:100%}
.form-narrow{max-width:480px}
.page-center{margin:40px auto}
.nowrap{white-space:nowrap}

/* ---------- Brand -------------------------------------------------------- */
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:var(--gold-bright);box-shadow:0 4px 10px -5px rgba(13,21,38,.55),inset 0 1px rgba(255,255,255,.1)}
.logo .brand-glyph{width:54%;height:54%;display:block}
.logo-lg{width:44px;height:44px;border-radius:13px}
.logo-sm{width:28px;height:28px;border-radius:8px}
.brand-name{display:block;font-size:16px;font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--ink);white-space:nowrap}
.brand-sub{display:block;font-size:11.5px;font-weight:500;color:var(--faint);line-height:1.3;margin-block-start:2px}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;
  padding:0 18px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none!important;
  box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s,filter .14s,background .14s,border-color .14s,color .14s;
}
.btn:hover{border-color:var(--line-strong);background:var(--paper-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.btn .ic{width:17px;height:17px}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--btn-bg);border-color:transparent;filter:brightness(1.12);transform:translateY(-1px)}
.btn-gold{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;box-shadow:var(--btn-shadow)}
.btn-gold:hover{background:var(--btn-bg);border-color:transparent;filter:brightness(1.12);transform:translateY(-1px)}
.btn-buy{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;box-shadow:var(--btn-shadow)}
.btn-buy:hover{background:var(--btn-bg);border-color:transparent;filter:brightness(1.12);transform:translateY(-1px)}
.btn-sell{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;box-shadow:var(--btn-shadow)}
.btn-sell:hover{background:var(--btn-bg);border-color:transparent;filter:brightness(1.12);transform:translateY(-1px)}
.btn-danger{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line);box-shadow:none}
.btn-danger:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--page-2);border-color:transparent;color:var(--ink)}
.btn-soft{background:var(--page-2);border-color:transparent;box-shadow:none}
.btn-soft:hover{background:var(--line);border-color:transparent}
.btn-sm{min-height:36px;padding:0 13px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{min-height:52px;padding:0 26px;font-size:15.5px}
.btn-block{width:100%}
.btn-link{background:none;border:0;padding:0;color:var(--gold-deep);font:inherit;font-weight:600;cursor:pointer}
.btn-link:hover{text-decoration:underline}
@media(pointer:coarse){.btn-sm{min-height:40px}}
@media(max-width:380px){.btn{white-space:normal;text-align:center;padding-block:8px}}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-md);border:0;background:transparent;color:var(--ink-soft);cursor:pointer;text-decoration:none!important;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--page-2);color:var(--ink)}
.icon-btn .ic{width:19px;height:19px}
@media(pointer:coarse){.icon-btn{width:44px;height:44px}}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px;font-weight:600;margin:4px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Forms -------------------------------------------------------- */
.field{display:grid;gap:6px;margin-block-end:14px;min-width:0}
.field>label,.field>.label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.field .hint,.hint{font-size:12.5px;color:var(--muted);line-height:1.6}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=url],input[type=date],select,textarea{
  width:100%;min-width:0;min-height:46px;padding:10px 13px;border-radius:var(--r-md);border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:.8}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--focus)}
input[aria-invalid="true"]{border-color:var(--bad)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:left 12px center}
html[dir="ltr"] select{background-position:right 12px center}
textarea{min-height:96px;resize:vertical;line-height:1.6}
input[type=email],input[type=tel],input.ltr-input,input.mono-input,input[inputmode=decimal],input[inputmode=numeric]{direction:ltr;text-align:right}
.mono-input{font-family:var(--mono);font-size:14px!important}
input[type=file]{width:100%;min-width:0;font:inherit;font-size:13px;color:var(--muted);padding:8px;border:1.5px dashed var(--line-strong);border-radius:var(--r-md);background:var(--paper-2);cursor:pointer}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13px;margin-inline-end:10px;padding:8px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--navy);width:18px;height:18px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:var(--ink-soft);cursor:pointer}
.check input{margin-block-start:3px;flex:0 0 auto}
.phone-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:8px}
@media(max-width:360px){.phone-row{grid-template-columns:minmax(0,1fr)}}
.code-input{height:62px;font-family:var(--mono)!important;font-size:26px!important;font-weight:700;letter-spacing:.42em;text-indent:.42em;text-align:center!important;direction:ltr}
@media(max-width:360px){.code-input{font-size:22px!important;letter-spacing:.3em;text-indent:.3em}}
.input-row{display:flex;gap:8px;align-items:stretch;min-width:0}
.input-row>input{flex:1;min-width:0}
.input-row>.btn{flex:0 0 auto}
.input-row>.amount-field{flex:1;min-width:0}
fieldset{border:0;padding:0;margin:0 0 14px;min-width:0}
legend{font-size:13px;font-weight:600;color:var(--ink-soft);margin-block-end:8px;padding:0}
.choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.choice{position:relative;display:flex;gap:11px;align-items:center;min-width:0;padding:13px 14px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.choice:hover{border-color:var(--line-strong)}
.choice>span{min-width:0}
.choice b,.choice strong{display:block;font-size:14px}
.choice small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.choice input{margin:0;flex:0 0 auto}
.choice:has(input:checked){border-color:var(--gold);box-shadow:var(--focus);background:var(--paper-2)}
.choice.disabled{opacity:.5;cursor:not-allowed}
.choice-logo{width:30px;height:30px;flex:0 0 auto}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-block-start:4px}
.form-actions .btn{flex:0 1 auto}
@media(max-width:520px){.form-actions .btn{flex:1 1 auto}}
.amount-field{position:relative}
.amount-field input{font-size:22px;font-weight:700;min-height:60px;padding-left:74px;font-variant-numeric:tabular-nums}
.amount-field .unit{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--muted);pointer-events:none;direction:ltr}

/* ---------- Surfaces ----------------------------------------------------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(16px,3vw,22px);min-width:0;margin-block-end:0}
.card>*+*{margin-block-start:12px}
.card>.card-head+*{margin-block-start:0}
.card>h2:first-child,.card>h3:first-child{margin-block-start:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-end:14px;min-width:0}
.card-head>*{min-width:0}
.card-head h2,.card-head h3{margin:0}
.card-head p{font-size:13px;color:var(--muted);margin-block-start:3px}
.card-title{display:flex;align-items:center;gap:11px;min-width:0}
.card-title>span{min-width:0}
.card-ic{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:var(--page-2);color:var(--ink-soft)}
.card-ic.is-gold{background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--gold-line)}
.card-ic.is-ok{background:var(--page-2);color:var(--ink-soft)}
.card-ic.is-warn{background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--gold-line)}
.card-ic.is-bad{background:var(--bad-bg);color:var(--bad)}
.card-ic .ic{width:18px;height:18px}
.card.highlight{border:1.5px solid var(--gold);box-shadow:var(--focus)}
.card.highlight-danger{border:1.5px solid var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.card.is-flat{box-shadow:none}
details.card>summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;gap:10px}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"";margin-inline-start:auto;width:8px;height:8px;border:2px solid var(--faint);border-top:0;border-left:0;transform:rotate(45deg);transition:transform .2s}
details.card[open]>summary::after{transform:rotate(-135deg)}
details.card[open]>summary{margin-block-end:12px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;min-width:0}
.page-head>*{min-width:0}
.page-head h1{margin:0}
.page-head p{color:var(--muted);font-size:14px;line-height:1.7;margin:0;max-width:70ch}
.page-head .row{flex:0 0 auto}
.lede{font-size:14px;color:var(--muted);line-height:1.75;max-width:72ch}
.section{display:grid;gap:10px;min-width:0;grid-template-columns:minmax(0,1fr)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.section-head h2{font-size:15.5px;margin:0}
.section-head a{font-size:13px;font-weight:600;color:var(--muted)}
.section-head a:hover{color:var(--ink);text-decoration:none}

/* Balance card (dashboard, wallet) */
.balance-card{position:relative;overflow:hidden;container-type:inline-size;border-radius:22px;background:var(--hero-bg);border:1px solid var(--hero-line);box-shadow:0 14px 30px rgba(23,36,58,.14);color:#fff;padding:clamp(18px,4vw,26px)}

.balance-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.balance-label{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#d6dce6}
.balance-label .ic{width:17px;height:17px;color:#dfc690}
.balance-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-size:12px;font-weight:600;color:#f5f7fb;white-space:nowrap}
.balance-chip .ic{width:14px;height:14px;color:#dfc690}
.balance-chip.is-warn{border-color:rgba(245,180,84,.4);color:#ffd9a0}
.balance-chip.is-warn .ic{color:#ffd9a0}
.balance-amount{position:relative;z-index:1;display:flex;align-items:baseline;gap:8px;margin-block:10px 4px;direction:ltr;justify-content:flex-end;flex-wrap:wrap;font-variant-numeric:tabular-nums}
html[dir="ltr"] .balance-amount{justify-content:flex-start}
.balance-amount b{font-size:clamp(34px,11cqi,46px);font-weight:700;line-height:1.05;letter-spacing:-.035em;color:#fff}
.balance-amount span{font-size:13px;font-weight:700;color:#dfc690}
.balance-sub{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid rgba(255,255,255,.14)}
.balance-sub>*{min-width:0;display:grid;gap:2px;color:#d6dce6;text-decoration:none!important}
.balance-sub small{font-size:12px;color:#aeb8c7}
.balance-sub b{font-size:15px;font-weight:700;color:#fff;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
html[dir="ltr"] .balance-sub b{text-align:left}
.balance-sub b em{font-style:normal;font-size:11px;color:#dfc690;margin-inline-start:4px}
.balance-actions{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-block-start:16px}
.balance-actions .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.balance-actions .btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.balance-actions .btn-gold{background:#fff;color:var(--ink);border-color:transparent}

/* Quick actions */
.quick-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media(max-width:760px){.quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qa{position:relative;display:grid;justify-items:center;gap:8px;padding:14px 6px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:13px;font-weight:600;color:var(--ink);text-align:center;min-width:0;text-decoration:none!important;transition:transform .15s,box-shadow .15s,border-color .15s}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.qa i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--page-2);color:var(--ink-soft)}
.qa i .ic{width:19px;height:19px}
.qa.is-gold i{background:var(--gold-soft);color:var(--gold-deep)}
.qa span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa.is-off{opacity:.45;pointer-events:none;box-shadow:none}

/* Stat & KPI tiles */
.stat,.kpi{display:grid;gap:3px;min-width:0;padding:15px 16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none!important}
a.stat:hover,a.kpi:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.stat .label,.kpi>span{font-size:12.5px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.stat .value,.kpi>b{font-size:clamp(20px,5vw,25px);font-weight:700;letter-spacing:-.02em;line-height:1.25;direction:ltr;text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi>b{text-align:start;direction:inherit}
.stat .value small,.kpi>b small{font-size:12px;font-weight:600;color:var(--muted)}
.kpi>small{font-size:12px;color:var(--faint);line-height:1.5}
.stat .value.state-bad,.kpi.is-alert>b{color:var(--bad)}
.kpi.is-hold>b{color:var(--warn)}
.kpi.is-ok>b{color:var(--ok)}
.kpi>b.kpi-sm{font-size:16px;font-weight:600;letter-spacing:0;direction:ltr;text-align:end}
.stat.primary{background:var(--hero-bg);border-color:var(--hero-line);color:#fff}
.stat.primary .label{color:#d6dce6}
.stat.primary .value small{color:#dfc690}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
@media(max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kpis>:last-child:nth-child(odd){grid-column:1/-1}.kpi,.stat{padding:12px 13px}}
.wallet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:12px}

/* Attention queue (admin) */
.queue{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.queue a{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 14px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--line-strong);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none!important;transition:transform .15s,border-color .15s}
.queue a:hover{transform:translateY(-1px)}
.queue a.tone-danger{border-inline-start-color:var(--bad)}
.queue a.tone-warning{border-inline-start-color:var(--warn)}
.queue a.tone-ok{border-inline-start-color:var(--ok)}
.queue b{font-size:22px;font-weight:700;line-height:1;flex:0 0 auto;font-variant-numeric:tabular-nums}
.queue a.tone-danger b{color:var(--bad)}
.queue a.tone-warning b{color:var(--warn)}
.queue a.tone-ok b{color:var(--ok)}
.queue span{font-size:13px;font-weight:600;color:var(--ink-soft);min-width:0;line-height:1.5}
.queue .ic{margin-inline-start:auto;color:var(--faint)}

/* ---------- Notices, alerts, badges -------------------------------------- */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--page-2);color:var(--ink-soft);font-size:13.5px;line-height:1.65;min-width:0;margin-block-end:0}
.alert>.ic{width:17px;height:17px;margin-block-start:2px}
.alert>span,.alert>div{min-width:0;flex:1}
.alert strong{display:block;margin-block-end:2px;color:inherit}
.alert a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.alert-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.alert-error{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.alert-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
.alert-warning{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.alert-success{color:#05603a}.alert-error{color:#912018}.alert-info{color:#1849a9}.alert-warning{color:#93370d}
.alert-close{margin-inline-start:auto;flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.6;cursor:pointer}
.alert-close:hover{opacity:1;background:rgba(0,0,0,.05)}
.alert-close .ic{width:14px;height:14px}
.notice{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-sm);min-width:0}
.notice>.card-ic{margin-block-start:2px}
.notice-copy{flex:1 1 220px;min-width:0}
.notice-copy b{display:block;font-size:14.5px}
.notice-copy p{font-size:13px;color:var(--muted);line-height:1.65;margin-block-start:3px}
.notice>.btn{flex:0 0 auto;align-self:center}
.notice.is-warn{border-color:var(--gold-line);background:var(--paper)}
.notice.is-bad{border-color:var(--bad-line)}
.notice.is-gold{border-color:var(--gold-line);background:var(--paper)}
@media(max-width:520px){.notice>.btn{flex:1 1 100%}}
.badge{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.4;border:1px solid var(--line);background:var(--page-2);color:var(--muted);white-space:nowrap;vertical-align:middle}
.badge .ic{width:12px;height:12px}
.badge-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.badge-danger{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.badge-warning{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.badge-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
.badge-gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-deep)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--page-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.chip .ic{width:13px;height:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pulse{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block;vertical-align:middle;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ---------- Lists and rows ----------------------------------------------- */
.tx-list,.list{display:grid;gap:1px;list-style:none;margin:0;padding:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--line-soft);grid-template-columns:minmax(0,1fr)}
.tx,.list-item{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--paper);min-width:0;color:var(--ink);text-decoration:none!important;transition:background .15s}
.list-item{display:block}
a.tx:hover,.list-item:has(>a.order-row):hover{background:var(--paper-2)}
.tx-ic{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:var(--page-2);color:var(--ink-soft)}
.tx-ic .ic{width:17px;height:17px}
.tx-ic.is-in{background:var(--ok-bg);color:var(--ok)}
.tx-ic.is-out{background:var(--page-2);color:var(--ink-soft)}
.tx-ic.is-wait{background:var(--warn-bg);color:var(--warn)}
.tx-ic.is-gold{background:var(--gold-soft);color:var(--gold-deep)}
.tx-ic.is-info{background:var(--info-bg);color:var(--info)}
.tx-copy{flex:1;min-width:0}
.tx-copy b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-copy small{display:block;font-size:12px;color:var(--faint);margin-block-start:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-copy.is-wrap b,.tx-copy.is-wrap small{white-space:normal;overflow-wrap:anywhere}
.tx-end{flex:0 0 auto;display:grid;justify-items:end;gap:4px;text-align:end;min-width:0}
.tx-end b{font-size:14px;font-weight:700;white-space:nowrap;direction:ltr;font-variant-numeric:tabular-nums}
.tx-end small{font-size:11.5px;color:var(--faint)}
.tx-go{flex:0 0 auto;color:var(--line-strong)}
.tx-go .ic{width:16px;height:16px}
.tx.is-unread{background:#fdfbf6}

@media(max-width:360px){.tx{gap:9px;padding:12px 11px}.tx-ic{width:34px;height:34px}.tx-go{display:none}}
.list-item .title{font-weight:600;font-size:14px}
.list-item .meta{color:var(--faint);font-size:12.5px;margin-block-start:2px}
.list-item details{margin-block-start:8px}
.list-item summary{cursor:pointer;color:var(--bad);font-size:13px;font-weight:600;width:fit-content}
.list-item details form{margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap}
.list-item details input{flex:1 1 180px}
.order-row{color:var(--ink);text-decoration:none!important}
.card-list{background:var(--paper)}
.destination{display:block;font-weight:600;color:var(--ink);margin-block-start:2px;text-align:right}

/* Menu list ("More", settings) */
.menu-list{display:grid;gap:1px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--line-soft);grid-template-columns:minmax(0,1fr)}
.menu-list>*{display:flex;align-items:center;gap:12px;padding:14px;background:var(--paper);min-width:0;color:var(--ink);text-decoration:none!important;transition:background .15s;border:0;width:100%;font:inherit;text-align:start;cursor:pointer}
.menu-list>*:hover{background:var(--paper-2)}
.menu-list form{padding:0}
.menu-list form>button{display:flex;align-items:center;gap:12px;padding:14px;width:100%;border:0;background:transparent;font:inherit;color:var(--bad);text-align:start;cursor:pointer}
.menu-list i{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:var(--page-2);color:var(--ink-soft)}
.menu-list i .ic{width:18px;height:18px}
.menu-list form>button i{background:var(--bad-bg);color:var(--bad)}
.menu-list span{flex:1;min-width:0}
.menu-list b{display:block;font-size:14px;font-weight:600}
.menu-list small{display:block;font-size:12.5px;color:var(--faint);line-height:1.5}
.menu-list .tx-go{margin-inline-start:auto}

/* Definition rows */
dl.facts{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);gap:0;margin:0;border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:var(--paper)}
dl.facts>dt,dl.facts>dd{padding:10px 13px;border-block-end:1px solid var(--line-soft);min-width:0}
dl.facts>dt{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--paper-2)}
dl.facts>dd{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
dl.facts>dd.ltr,dl.facts>dd.mono{display:block;text-align:right}
html[dir="ltr"] dl.facts>dd.ltr,html[dir="ltr"] dl.facts>dd.mono{text-align:left}
dl.facts>dt:nth-last-child(2),dl.facts>dd:last-child{border-block-end:0}
@media(max-width:420px){dl.facts{grid-template-columns:minmax(0,1fr)}dl.facts>dt{border-block-end:0;padding-block-end:2px}dl.facts>dd{padding-block-start:2px;background:var(--paper-2)}dl.facts>dt{background:var(--paper-2)}}
.card>dl.facts{margin-block-start:0}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:var(--line-soft)}
.check-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;background:var(--paper);font-size:13.5px;min-width:0;flex-wrap:wrap}
.check-list li>span:first-child{min-width:0;flex:1 1 160px;color:var(--ink-soft);font-weight:500}
.check-list li small{display:block;margin-block-start:3px;font-weight:400}
.check-list li .badge .ic{width:12px;height:12px}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checklist li{position:relative;padding-inline-start:30px;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.checklist li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:2px;width:20px;height:20px;border-radius:50%;background:var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6b30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.3L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid var(--gold-line)}
ol.steps-list{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
ol.steps-list li{position:relative;padding-inline-start:32px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
ol.steps-list li::before{counter-increment:st;content:counter(st);position:absolute;inset-inline-start:0;inset-block-start:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--page-2);color:var(--ink);font-size:12px;font-weight:700}
.settings-grid{display:grid;gap:2px 18px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));align-items:start}
.settings-grid>.field{margin:0;padding-block:7px}
.settings-grid>.field.is-wide{grid-column:1/-1}
.settings-grid .check b{font-weight:600;color:var(--ink)}
.sticky-actions{position:sticky;inset-block-end:calc(10px + env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:flex-end;gap:10px;padding:10px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
@media(max-width:520px){.sticky-actions .btn{flex:1}}
.item-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.item{display:grid;gap:10px;min-width:0;padding:14px 16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.item>*{margin:0;min-width:0}
.item.is-attention{border-inline-start:3px solid var(--warn)}
.item.is-danger{border-inline-start:3px solid var(--bad)}
.item-head{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;min-width:0}
.item-head b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.item-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);min-width:0}
.item-meta a{font-weight:600}
.item .address-box{margin:4px 0 0}
.item .hint .ic{width:14px;height:14px;vertical-align:-2px}
.item-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.inline-details{min-width:0}
.inline-details>summary{list-style:none}
.inline-details>summary::-webkit-details-marker{display:none}
.inline-details[open]{flex:1 1 100%}
.inline-details[open]>summary{margin-block-end:8px}
.note-list{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.note-list li::marker{color:var(--gold-deep)}
.sub-card{display:grid;gap:12px;align-content:start;min-width:0;padding:14px;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line)}
.sub-card-head{display:flex;align-items:center;gap:10px;font-size:15px;min-width:0}
.sub-card dl.facts{background:var(--paper)}
.sub-card>*{margin:0}
.cmd{display:flex;align-items:center;gap:8px;min-width:0;margin-block-start:6px;padding:5px;padding-inline-start:12px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line)}
.cmd code{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;text-align:left;font-size:13px;padding-block:5px;scrollbar-width:thin;color:var(--ink)}
.cmd .btn{flex:0 0 auto}
.cmd-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.cmd-list li,ol.steps-list li{min-width:0}
.cmd-list p{font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.steps{display:flex;gap:6px;margin-block-end:14px}
.steps span{flex:1;height:5px;border-radius:5px;background:var(--line)}
.steps span.done{background:var(--gold)}

/* Order progress */
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:sp}
.stepper li{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;font-size:11.5px;font-weight:600;color:var(--faint);min-width:0}
.stepper li::before{counter-increment:sp;content:counter(sp);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--page-2);border:1.5px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;position:relative;z-index:1}
.stepper li::after{content:"";position:absolute;inset-block-start:14px;inset-inline-start:calc(50% + 16px);width:calc(100% - 26px);height:2px;background:var(--line)}
.stepper li:last-child::after{display:none}
.stepper li.is-done{color:var(--ink-soft)}
.stepper li.is-done::before{content:"✓";background:var(--ok);border-color:var(--ok);color:#fff}
.stepper li.is-done::after{background:var(--ok)}
.stepper li.is-current{color:var(--ink)}
.stepper li.is-current::before{background:var(--btn-bg);border-color:transparent;color:var(--btn-fg);box-shadow:var(--focus)}
.stepper li.is-bad::before{content:"!";background:var(--bad);border-color:var(--bad);color:#fff}
.stepper li span{max-width:100%;overflow-wrap:anywhere;line-height:1.35}

/* ---------- Tabs, segmented controls, filters ---------------------------- */
.tabs{display:flex;gap:4px;padding:4px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none!important;transition:background .15s,color .15s}
.tabs a .ic{width:16px;height:16px}
.tabs a:hover{color:var(--ink)}
.tabs a.active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}
@media(max-width:480px){.tabs a{padding:8px 10px;font-size:13px;gap:5px}}
@media(max-width:370px){.tabs a .ic{display:none}}
.tabs .count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700}
.segmented{display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line);max-width:100%;min-width:0}
.segmented a,.segmented label{position:relative;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;text-decoration:none!important;transition:background .15s,color .15s}
.segmented a:hover,.segmented label:hover{color:var(--ink)}
.segmented a.active,.segmented label.active,.segmented label:has(input:checked){background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}
.segmented a.active.buy{background:var(--ink);color:#fff}
.segmented a.active.sell{background:var(--ink);color:#fff}
.segmented.small label{padding:6px 12px;font-size:13px}
.segmented.is-block{display:flex;width:100%}
.segmented input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;padding:10px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.filters>input,.filters>select{flex:1 1 140px;width:auto;min-height:42px}
.filters>.btn{flex:0 0 auto;min-height:42px}
@media(max-width:520px){.filters>.btn{flex:1 1 100%}}
.status-filter{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line)}
.status-filter a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none!important}
.status-filter a:hover{color:var(--ink)}
.status-filter a.active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}

/* ---------- Tables (cards below 820px, labelled by app.js) --------------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);min-width:0;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:start;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);padding:11px 13px;background:var(--paper-2);white-space:nowrap;border-block-end:1px solid var(--line)}
td{padding:11px 13px;border-block-start:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-soft);text-align:start}
tbody tr:first-child td{border-block-start:0}
tbody tr:hover td{background:var(--paper-2)}
td a{font-weight:600}
td.num{direction:ltr;text-align:end;font-family:var(--mono);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
td.empty{padding:28px 14px}
td .btn{white-space:nowrap}
td form{display:inline}
@media(max-width:820px){
  .table-wrap:has(table.is-cards){border:0;background:transparent;overflow:visible;box-shadow:none;border-radius:0}
  table.is-cards,table.is-cards tbody,table.is-cards tr,table.is-cards td{display:block;width:100%}
  table.is-cards thead{display:none}
  table.is-cards tr{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);margin-block-end:10px;padding:4px 0;box-shadow:var(--shadow-sm)}
  table.is-cards tbody tr:hover td{background:transparent}
  table.is-cards td{display:flex;align-items:baseline;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;padding:8px 13px;border:0;overflow-wrap:anywhere;text-align:end}
  table.is-cards td+td{border-block-start:1px solid var(--line-soft)}
  table.is-cards td::before{content:attr(data-label);flex:0 0 auto;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted);text-align:start;direction:rtl}
  html[dir="ltr"] table.is-cards td::before{direction:ltr}
  table.is-cards td[data-label=""]::before{content:none}
  table.is-cards td.num{white-space:normal;flex-direction:row-reverse}
  html[dir="ltr"] table.is-cards td.num{flex-direction:row}
  table.is-cards td>*{min-width:0}
  table.is-cards td.empty{display:block;text-align:center}
}

/* ---------- Empty states ------------------------------------------------- */
.empty{text-align:center;color:var(--muted);padding:26px 16px;font-size:13.5px;line-height:1.7}
.empty-state{display:grid;justify-items:center;gap:8px;padding:32px 20px;border-radius:var(--r-lg);background:var(--paper);border:1px dashed var(--line-strong);text-align:center}
.empty-state i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--page-2);color:var(--faint)}
.empty-state i .ic{width:21px;height:21px}
.empty-state b{font-size:14.5px}
.empty-state p{font-size:13px;color:var(--muted);line-height:1.65;max-width:40ch}
.empty-state .row{justify-content:center;margin-block-start:4px}
.card.empty{padding:30px 16px}

/* ==========================================================================
 * Customer console shell: rail ≥ 1000px, top bar + bottom tabs below.
 * ========================================================================== */
.shell{display:flex;min-height:100dvh}
.shell-col{flex:1;min-width:0;display:flex;flex-direction:column}
.main{flex:1;padding-block:18px 28px}
.wrap{width:100%;max-width:980px;margin-inline:auto;padding-inline:18px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-content:start}
.wrap>*{min-width:0}
.wrap-wide{max-width:1380px}
@media(max-width:600px){.wrap{padding-inline:14px}}
@media(max-width:360px){.wrap{padding-inline:11px}}

.rail{display:none}
.rail-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 12px;min-width:0;color:var(--ink);text-decoration:none!important}
.rail-brand>span:last-child{min-width:0}
.rail-nav{flex:1;padding:4px 12px 12px;display:grid;gap:2px;align-content:start}
.rail-nav h2{font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.08em;padding:16px 10px 6px}
.rail-nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--ink-soft);min-width:0;text-decoration:none!important;transition:background .15s,color .15s}
.rail-nav a .ic{width:18px;height:18px;opacity:.8}
.rail-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-nav a:hover{background:var(--page-2);color:var(--ink)}
.rail-nav a.is-current{background:var(--nav-on-bg);color:var(--nav-on-fg);font-weight:600}
.rail-nav a.is-current .ic{opacity:1;color:var(--nav-on-ic)}
.nav-badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--bad);color:#fff;font-size:11px;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums}
.nav-tag{margin-inline-start:auto;padding:1px 8px;border-radius:999px;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-deep);font-size:10.5px;font-weight:700;font-style:normal;white-space:nowrap}
.rail-foot{padding:12px;border-block-start:1px solid var(--line-soft);display:grid;gap:10px}
.rail-user{display:flex;align-items:center;gap:10px;padding:4px 2px;min-width:0;color:var(--ink);text-decoration:none!important}
.rail-user>span:last-child{min-width:0}
.rail-user b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-user small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--faint)}
.rail-user small .ic{width:13px;height:13px;color:var(--ok)}
.avatar{width:36px;height:36px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-deep);font-size:15px;font-weight:700}
.avatar-lg{width:54px;height:54px;border-radius:16px;font-size:22px}
@media(min-width:1000px){
  .rail{display:flex;flex-direction:column;flex:0 0 262px;width:262px;background:var(--paper);border-inline-end:1px solid var(--line);position:sticky;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .main{padding-block:26px 36px}
}
@media(min-width:1400px){.rail{flex-basis:280px;width:280px}.wrap{max-width:1040px}.wrap-wide{max-width:1480px}}

.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 12px;padding-block-start:max(8px,env(safe-area-inset-top));background:var(--bar-bg);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-block-end:1px solid var(--line)}
@media(min-width:1000px){.topbar{min-height:66px;padding-inline:26px}}
.topbar-brand{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;text-decoration:none!important}
.topbar-title{flex:1;min-width:0;font-size:clamp(15px,4.2vw,17px);font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.topbar-title small{display:block;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}
.topbar-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.dot-badge{position:absolute;inset-block-start:4px;inset-inline-end:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;font-style:normal;border:2px solid var(--page);font-variant-numeric:tabular-nums}
@media(min-width:1000px){.topbar-brand{display:none}}

.tabbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:35;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--tab-bg);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-block-start:1px solid var(--line);padding-block-end:env(safe-area-inset-bottom)}
.tabbar a{position:relative;display:grid;justify-items:center;gap:3px;padding:9px 2px 8px;font-size:10.5px;font-weight:600;color:var(--faint);min-width:0;text-decoration:none!important;transition:color .15s}
.tabbar a .ic{width:21px;height:21px}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar a.is-current{color:var(--ink)}
.tabbar a.is-current::before{content:"";position:absolute;inset-block-start:0;inset-inline:24%;height:2.5px;border-radius:0 0 3px 3px;background:var(--gold)}
.tabbar .dot-badge{inset-block-start:4px;inset-inline-end:calc(50% - 22px);border-color:var(--paper)}
@media(max-width:999px){.app-body .main{padding-block-end:calc(84px + env(safe-area-inset-bottom))}}
@media(max-width:340px){.tabbar a{font-size:9.5px}.tabbar a .ic{width:19px;height:19px}}
@media(min-width:1000px){.tabbar{display:none}}

.profile-head{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0}
.profile-head>span:last-child{min-width:0;flex:1}
.profile-head b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-head small{display:block;font-size:12.5px;color:var(--muted);margin-block-start:2px}
.profile-head .chips{margin-block-start:8px}

/* ==========================================================================
 * Administration shell: permanent rail ≥ 1100px, drawer below.
 * ========================================================================== */
.drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;width:min(292px,86vw);display:flex;flex-direction:column;gap:12px;padding:16px 14px;padding-block-start:max(16px,env(safe-area-inset-top));background:var(--paper);border-inline-end:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);visibility:hidden;transition:transform .24s cubic-bezier(.3,.9,.4,1),visibility .24s}
html[dir="rtl"] .drawer{transform:translateX(105%)}
.drawer.is-open,html[dir="rtl"] .drawer.is-open{transform:none;visibility:visible;box-shadow:var(--shadow-lg)}
.scrim{position:fixed;inset:0;z-index:55;background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.drawer-head a{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none!important}
.drawer-head a>span:last-child{min-width:0}
.nav-search{position:relative;display:block}
.nav-search .ic{position:absolute;inset-block-start:50%;inset-inline-start:12px;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none}
.nav-search input{min-height:40px;font-size:13.5px;padding-inline-start:38px}
.adm-nav{display:flex;flex-direction:column;gap:14px;flex:1 0 auto}
.adm-nav section{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-nav h2{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--faint);padding-inline:10px;margin-block-end:4px}
.adm-nav a{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none!important;transition:background .15s,color .15s}
.adm-nav a .ic{width:17px;height:17px;color:var(--faint)}
.adm-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-nav a:hover{background:var(--page-2);color:var(--ink)}
.adm-nav a.is-current{background:var(--nav-on-bg);color:var(--nav-on-fg)}
.adm-nav a.is-current .ic{color:var(--nav-on-ic)}
.adm-nav .nav-badge{margin-inline-start:auto}
.nav-empty{font-size:13px;color:var(--muted);padding:10px}
.drawer-foot{display:grid;gap:8px;padding-block-start:12px;border-block-start:1px solid var(--line)}
.burger{display:inline-grid}
@media(min-width:1100px){
  .adm-body .drawer,html[dir="rtl"] .adm-body .drawer{position:sticky;top:0;height:100dvh;flex:0 0 280px;width:280px;transform:none;visibility:visible;box-shadow:none;z-index:1}
  .adm-body .drawer-close,.adm-body .burger{display:none}
  .adm-body .scrim{display:none!important}
  .adm-body .topbar{padding-inline:26px;min-height:62px}
}
.halt-banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad)}
.halt-banner .ic{width:22px;height:22px;flex:0 0 auto;margin-block-start:2px}
.halt-banner b{display:block;font-size:15px}
.halt-banner span{font-size:13px;opacity:.9}
.halt-banner a{color:#fff;font-weight:700;text-decoration:underline}
.purpose{font-size:13.5px;color:var(--muted);line-height:1.65;padding-inline-start:11px;border-inline-start:3px solid var(--gold)}

/* ==========================================================================
 * Public site
 * ========================================================================== */
.site-body{background:var(--page)}
.site-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
@media(max-width:640px){.site-wrap{padding-inline:16px}}
.site-header{position:sticky;top:0;z-index:40;background:var(--bar-bg);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-block-end:1px solid transparent;transition:border-color .2s}
.site-header.is-stuck{border-block-end-color:var(--line)}
.site-header-in{display:flex;align-items:center;gap:14px;min-height:70px}
.site-brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:var(--ink);text-decoration:none!important;flex:0 1 auto}
.site-brand>span:last-child{min-width:0}
.site-nav{display:flex;align-items:center;justify-content:center;gap:2px;flex:1 1 auto;min-width:0}
.site-nav a{padding:8px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink-soft);white-space:nowrap;text-decoration:none!important;transition:background .15s,color .15s}
.site-nav a:hover{background:var(--page-2);color:var(--ink)}
.site-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-inline-start:auto}
.site-burger{display:none}
@media(max-width:1020px){.site-nav{display:none}.site-actions .is-desktop{display:none}.site-burger{display:inline-grid;border:1.5px solid var(--line);background:var(--paper)}}
@media(max-width:420px){.site-brand .brand-sub{display:none}.site-header-in{min-height:62px;gap:8px}}
.site-drawer{padding:0;gap:0}
.site-drawer .drawer-head{padding:16px 18px;border-block-end:1px solid var(--line-soft)}
.site-drawer nav{flex:1 1 auto;display:grid;gap:2px;align-content:start;padding:12px}
.site-drawer nav a{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:var(--r-md);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none!important}
.site-drawer nav a:hover{background:var(--page-2)}
.site-drawer nav a i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--page-2);color:var(--gold-deep)}
.site-drawer-actions{display:grid;gap:9px;padding:16px 18px calc(20px + env(safe-area-inset-bottom));border-block-start:1px solid var(--line-soft)}
.site-main{display:block}
.site-section{padding-block:clamp(44px,7vw,80px)}
.site-section[id]{scroll-margin-block-start:80px}
.site-section.is-paper{background:var(--paper);border-block:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--gold-deep);letter-spacing:.04em}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--gold)}
.site-h2{font-size:clamp(24px,3.6vw,36px);font-weight:700;letter-spacing:-.025em;line-height:1.25;margin-block-start:12px}
.site-lede{font-size:clamp(15px,1.6vw,16.5px);color:var(--muted);line-height:1.85;max-width:64ch;margin-block-start:12px}
.site-head{max-width:760px;margin-block-end:34px}
.site-head.is-center{margin-inline:auto;text-align:center}
.site-head.is-center .site-lede{margin-inline:auto}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(36px,7vw,84px) clamp(40px,7vw,80px)}

.hero-in{position:relative;display:grid;gap:clamp(32px,5vw,56px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero h1{font-size:clamp(30px,5.4vw,54px);font-weight:700;line-height:1.18;letter-spacing:-.03em;margin-block-start:16px;overflow-wrap:anywhere}
.hero h1 em{font-style:normal;color:var(--gold-deep)}
.hero-lede{font-size:clamp(15.5px,1.8vw,18px);color:var(--muted);line-height:1.85;margin-block-start:18px;max-width:58ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:26px}
.hero-facts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px}
.hero-facts li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.hero-facts .ic{width:16px;height:16px;color:var(--ok)}
@media(max-width:520px){.hero-cta .btn{flex:1 1 100%}}

/* Hero product mock (pure markup + CSS) */
.mock{position:relative;justify-self:center;width:min(100%,380px);margin-block:18px}
.mock-phone{position:relative;border-radius:34px;padding:12px;background:linear-gradient(160deg,#1f2d46,#0b1426);box-shadow:0 40px 80px -30px rgba(13,21,38,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.mock-screen{border-radius:24px;background:var(--page);padding:14px;display:grid;gap:10px;overflow:hidden}
.mock-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink)}
.mock-bar>span{display:inline-flex;align-items:center;gap:8px;min-width:0}
.mock-card{border-radius:16px;background:var(--paper);border:1px solid var(--line);padding:12px;display:grid;gap:8px;box-shadow:var(--shadow-sm)}
.mock-amount{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mock-amount small{font-size:11.5px;color:var(--muted)}
.mock-amount b{font-size:24px;font-weight:700;direction:ltr;letter-spacing:-.02em}
.mock-amount b span{font-size:11px;color:var(--gold-deep);margin-inline-start:4px}
.mock-rows{display:grid;gap:6px;font-size:12px}
.mock-rows div{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.mock-rows b{color:var(--ink);font-weight:600}
.mock-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mock-steps li{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-soft);opacity:.35;transform:translateY(4px);animation:mock-in .5s ease forwards}
.mock-steps li i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;flex:0 0 auto}
.mock-steps li i .ic{width:12px;height:12px}
.mock-steps li:nth-child(1){animation-delay:.3s}.mock-steps li:nth-child(2){animation-delay:1.1s}.mock-steps li:nth-child(3){animation-delay:1.9s}.mock-steps li:nth-child(4){animation-delay:2.7s}
.mock-steps li.is-final i{background:var(--gold)}
@keyframes mock-in{to{opacity:1;transform:none}}
.mock-verified{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);font-size:11.5px;font-weight:700}
.mock-verified .ic{width:15px;height:15px}
.mock-float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-lg);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;animation:mock-float 5s ease-in-out infinite}
.mock-float .ic{width:16px;height:16px;color:var(--gold-deep)}
.mock-float.is-a{inset-block-start:-18px;inset-inline-end:-16px}
.mock-float.is-b{inset-block-end:-18px;inset-inline-start:-16px;animation-delay:1.6s}
.mock-float img{width:18px;height:18px}
@keyframes mock-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:520px){.mock-float.is-a{inset-inline-end:-4px}.mock-float.is-b{inset-inline-start:-4px}}

/* Trust band */
.trust{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:860px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust>div{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0}
.trust>div>i{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-deep)}
.trust>div>i img{width:24px;height:24px}
.trust>div>span{min-width:0}
.trust b{display:block;font-size:15px;font-weight:700;direction:ltr;text-align:right}
html[dir="ltr"] .trust b{text-align:left}
.trust small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:420px){.trust>div{padding:12px;gap:9px}.trust>div>i{width:36px;height:36px}}

/* Feature cards & how-it-works */
.features{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.feature{position:relative;padding:22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0;transition:transform .18s,box-shadow .18s,border-color .18s}
.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.feature-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:14px}
.feature-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--gold-deep);box-shadow:var(--shadow-sm)}
.feature-ic .ic{width:21px;height:21px}
.feature-num{font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.06em;font-variant-numeric:tabular-nums;direction:ltr}
.feature h3{font-size:16px}
.feature p{font-size:13.5px;color:var(--muted);line-height:1.8;margin-block-start:8px}

/* Dark band: anti-triangulation & security */
.band-dark{position:relative;overflow:hidden;background:linear-gradient(160deg,#111c30,#0a1222);color:#fff}

.band-dark .eyebrow{color:#e7cf9c}
.band-dark .site-h2{color:#fff}
.band-dark .site-lede{color:rgba(255,255,255,.68)}
.band-layout{position:relative;z-index:1;display:grid;gap:30px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.band-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.band-stack{display:grid;gap:10px}
.band-stack>div{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}
.band-stack>div>i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:rgba(214,179,112,.14);color:#e7cf9c}
.band-stack>div>span{min-width:0}
.band-stack b{display:block;font-size:14.5px;color:#fff}
.band-stack small{display:block;font-size:13px;color:rgba(255,255,255,.62);line-height:1.7;margin-block-start:3px}
.scam-flow{display:grid;gap:10px;margin-block-start:24px}
.scam-flow>div{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-md);border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.scam-flow>div>b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(249,112,102,.18);color:#ffb4ab;font-size:12px}
.scam-flow p{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.75}
.scam-flow strong{color:#fff}

/* Fees */
.fee-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.fee-card{padding:22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0}
.fee-card h3{display:flex;align-items:center;gap:10px;font-size:16px;padding-block-end:14px;border-block-end:1px solid var(--line-soft)}
.fee-card h3 .ic{color:var(--gold-deep)}
.fee-card dl{display:grid}
.fee-card dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-block:11px;border-block-end:1px solid var(--line-soft);flex-wrap:wrap}
.fee-card dl>div:last-child{border-block-end:0}
.fee-card dt{font-size:13.5px;color:var(--muted);min-width:0}
.fee-card dd{font-size:14.5px;font-weight:700;direction:ltr;font-variant-numeric:tabular-nums}
.fee-note{margin-block-start:14px;padding:12px 14px;border-radius:var(--r-md);background:var(--page-2);font-size:13px;color:var(--ink-soft);line-height:1.7}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);overflow:hidden}
.faq summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;line-height:1.6;transition:background .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;margin-inline-start:auto;width:9px;height:9px;border:2px solid var(--faint);border-top:0;border-left:0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{background:var(--page-2)}
.faq p{padding:0 18px 18px;font-size:14px;color:var(--muted);line-height:1.9}

/* CTA band */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(150deg,#111c30,#0d1526);color:#fff;padding:clamp(26px,5vw,48px);display:grid;gap:22px;align-items:center;box-shadow:var(--shadow-lg);grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.cta{grid-template-columns:minmax(0,1fr) auto}}

.cta>*{position:relative;z-index:1;min-width:0}
.cta h2{font-size:clamp(22px,3vw,30px);color:#fff}
.cta p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-block-start:10px;max-width:56ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:520px){.cta-actions .btn{flex:1 1 100%}}

/* Long-form pages (terms) */
.doc{max-width:780px;margin-inline:auto}
.doc h1{font-size:clamp(26px,4vw,38px);margin-block-end:8px}
.doc h2{font-size:18px;margin-block:26px 8px}
.doc p,.doc li{font-size:15px;color:var(--ink-soft);line-height:1.9}
.doc ul,.doc ol{padding-inline-start:22px}
.doc .card{margin-block-start:18px}

/* Footer */
.site-footer{border-block-start:1px solid var(--line);background:var(--paper);margin-block-start:clamp(40px,6vw,64px)}
.site-footer-main{display:grid;gap:30px;padding-block:44px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.site-footer-main{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:48px}}
.site-footer-brand p{font-size:13.5px;color:var(--muted);line-height:1.8;margin-block-start:12px;max-width:40ch}
.site-footer-cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.site-footer-cols b{display:block;font-size:13px;font-weight:700;margin-block-end:10px;color:var(--ink)}
.site-footer-cols a{display:block;font-size:13.5px;color:var(--muted);padding-block:5px;text-decoration:none!important}
.site-footer-cols a:hover{color:var(--ink)}
.site-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-block:18px calc(18px + env(safe-area-inset-bottom));border-block-start:1px solid var(--line-soft);font-size:12.5px;color:var(--faint)}
.networks{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:16px}
.networks span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--page);font-size:12px;font-weight:700;color:var(--ink-soft);direction:ltr}
.networks img{width:18px;height:18px}
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
html.js .reveal.is-shown{opacity:1;transform:none}

/* ==========================================================================
 * Sign-in screens
 * ========================================================================== */
.auth-body{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;background:var(--page)}
.auth-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(14px,4vw,28px);max-width:1180px;width:100%;margin-inline:auto;min-width:0}
.auth-main{width:100%;max-width:480px;margin-inline:auto;padding:8px clamp(14px,4vw,24px) 32px;display:grid;gap:14px;align-content:start;grid-template-columns:minmax(0,1fr)}
.auth-main.is-wide{max-width:640px}
.auth-main>.narrow{max-width:none}
.auth-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,5vw,30px);box-shadow:var(--shadow);display:grid;gap:18px;min-width:0;grid-template-columns:minmax(0,1fr)}
.auth-card>*{min-width:0}
.auth-card form{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.auth-card form .field{margin:0}
.auth-head{display:grid;gap:8px;min-width:0}
.auth-head h1{font-size:clamp(21px,5.2vw,25px)}
.auth-head p{font-size:14px;color:var(--muted);line-height:1.75}
.auth-head p b,.auth-head p strong{color:var(--ink)}
.auth-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-deep)}
.auth-ic .ic{width:22px;height:22px}
.auth-alt{text-align:center;font-size:14px;color:var(--muted)}
.auth-alt a{font-weight:700}
.auth-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:12px;color:var(--faint);font-weight:600}
.auth-trust span{display:inline-flex;align-items:center;gap:6px}
.auth-trust .ic{width:14px;height:14px;color:var(--gold-deep)}
.auth-foot{padding:16px;text-align:center;font-size:12px;color:var(--faint)}
.auth-foot a{color:var(--muted)}

/* ==========================================================================
 * Wallet
 * ========================================================================== */
.deposit-card{text-align:center}
.deposit-step{padding-block:4px 16px;border-block-end:1px dashed var(--line);margin-block-end:16px}
.deposit-amount{font-size:clamp(30px,8vw,40px);font-weight:700;font-family:var(--mono);margin:6px 0 10px;direction:ltr;line-height:1.2;word-break:break-all;letter-spacing:-.02em}
.deposit-amount small{font-size:15px;font-weight:700;color:var(--gold-deep)}
.qr{display:grid;place-items:center;width:212px;height:212px;margin:12px auto;background:#fff;padding:14px;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.qr img,.qr canvas{display:block;max-width:100%;height:auto}
.address-box{display:block;font-family:var(--mono);direction:ltr;text-align:center;word-break:break-all;background:var(--page-2);border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:11px 13px;margin:8px 0;font-size:13.5px;color:var(--ink);line-height:1.6}
.address-box.inline{display:inline-block;margin:0;padding:4px 8px;text-align:left;font-size:12.5px;border-style:solid;border-width:1px}
.deposit-status{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;border-radius:var(--r-md);background:var(--info-bg);border:1px solid var(--info-line);color:var(--info);margin-block-start:4px}
.countdown{font-family:var(--mono);font-weight:700;direction:ltr;display:inline-block;font-variant-numeric:tabular-nums}
.countdown.urgent{color:var(--bad)}
.summary-title{cursor:pointer;font-weight:600}
.summary-box{display:grid;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.summary-box div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
.summary-box div>span:first-child{color:var(--muted)}
.lead-amount{font-size:1.08rem;font-weight:700}
.net-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--page-2);font-size:11.5px;font-weight:700;color:var(--ink-soft);direction:ltr;white-space:nowrap}
.net-badge img{width:14px;height:14px}

/* ==========================================================================
 * P2P market
 * ========================================================================== */
.market-bar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.market-bar{grid-template-columns:auto minmax(0,1fr);align-items:center}}
.market-bar .filters{box-shadow:none}
.ad-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.ad-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.5fr) auto;gap:12px 18px;align-items:center;padding:16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.ad-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.ad-trader{display:flex;align-items:center;gap:10px;min-width:0}
.ad-trader>span:last-child{min-width:0}
.ad-trader strong{display:flex;align-items:center;gap:6px;font-size:14.5px;min-width:0}
.ad-trader strong .ic{width:15px;height:15px;color:var(--ok);flex:0 0 auto}
.trader-stats{display:block;color:var(--faint);font-size:12px;line-height:1.5}
.ad-price{font-size:clamp(19px,4vw,23px);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.ad-price small{font-size:12.5px;font-weight:600;color:var(--muted)}
.ad-price.big{font-size:clamp(28px,7vw,36px)}
.ad-price-label{display:block;font-size:11.5px;font-weight:600;color:var(--faint);letter-spacing:0}
.ad-meta{font-size:12.5px;color:var(--muted);display:grid;gap:3px;min-width:0}
.ad-meta b{color:var(--ink-soft);font-weight:600}
.ad-meta .methods{display:flex;flex-wrap:wrap;gap:5px;margin-block-start:4px}
.ad-action{text-align:end}
.ad-action .btn{min-width:124px}
@media(max-width:760px){
  .ad-card{grid-template-columns:minmax(0,1fr) auto;padding:14px}
  .ad-meta{grid-column:1/-1;padding-block-start:10px;border-block-start:1px solid var(--line-soft)}
  .ad-action{grid-column:1/-1}
  .ad-action .btn{width:100%}
}
/* Ratings, levels and featured ads: quiet accents, no loud colours */
.trader-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trader-rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-block:2px}
.stars{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;color:var(--ink-soft)}
.stars .ic{width:14px;height:14px;color:var(--gold);fill:var(--gold)}
.stars b{font-weight:700}
.level{display:inline-flex;align-items:center;min-height:21px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--line);background:var(--page-2);color:var(--ink-soft)}
.level-2{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-deep)}
.level-3{background:var(--ink);border-color:var(--ink);color:var(--gold-bright)}
.featured-tag{display:inline-flex;align-items:center;gap:4px;margin-block-start:6px;font-size:11.5px;font-weight:700;color:var(--gold-deep)}
.featured-tag .ic{width:14px;height:14px}
.ad-card.is-featured,.card.is-featured{border-color:var(--gold-line)}
.ad-cond{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.ad-cond .ic{width:14px;height:14px}
.market-where{font-weight:700;color:var(--ink);margin-block-end:2px}
.market-ref{display:flex;align-items:center;gap:6px;margin:-4px 0 12px}
.market-ref .ic{width:15px;height:15px}
.readonly-value{padding:11px 14px;border-radius:var(--r-sm);background:var(--page-2);border:1px solid var(--line);font-weight:600}
.order-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.order-layout>div{display:grid;gap:16px;min-width:0;align-content:start}
.order-layout>div>.card{margin:0}
@media(max-width:920px){.order-layout{grid-template-columns:minmax(0,1fr)}}
.order-amounts{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.order-amounts>div{min-width:0}
.order-amounts small{display:block;color:var(--muted);font-size:12px}
.order-amounts strong{font-size:clamp(18px,4.6vw,22px);letter-spacing:-.01em}
.order-amounts .arrow{color:var(--faint);font-size:20px}
.order-summary{display:grid;gap:8px}
.pay-details dd{font-size:14.5px}
.compare{font-size:1.05rem}
.chat{display:flex;flex-direction:column;gap:10px}
.chat>*{margin:0}
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:460px;min-height:200px;overflow-y:auto;padding:12px;background:var(--page);border-radius:var(--r-md);border:1px solid var(--line);overscroll-behavior:contain}
.chat-log.tall{max-height:640px}
.msg{max-width:84%;padding:9px 12px;border-radius:16px;background:var(--paper);border:1px solid var(--line);overflow-wrap:anywhere;box-shadow:var(--shadow-sm);font-size:14px}
.msg-mine{align-self:flex-start;background:var(--navy);border-color:transparent;color:#fff;border-end-start-radius:6px}
.msg-mine .msg-at{color:rgba(255,255,255,.6)}
.msg-theirs{align-self:flex-end;border-end-end-radius:6px}
.msg-system{align-self:center;max-width:95%;background:transparent;border:0;box-shadow:none;color:var(--muted);font-size:12.5px;text-align:center;padding:4px}
.msg-admin{align-self:center;max-width:95%;background:var(--warn-bg);border-color:var(--warn-line)}
.msg-who{font-size:11.5px;font-weight:700;color:var(--warn)}
.msg-text{white-space:pre-wrap}
.msg-at{font-size:11px;color:var(--faint);margin-block-start:3px;direction:ltr;text-align:end}
.chat-photo{display:block;width:fit-content;max-width:100%;margin-block:2px 6px;border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--page-2);border:1px solid var(--line);line-height:0}
.msg-mine .chat-photo{border-color:rgba(255,255,255,.18)}
.chat-photo:focus-visible{box-shadow:var(--focus);outline:0}
/* Thumbnail: the top of a tall receipt (amount, status) is what shows first. */
.chat-img{display:block;width:232px;max-width:100%;height:auto;max-height:300px;object-fit:cover;object-position:top}
.chat-file{display:inline-flex;align-items:center;gap:6px;margin-block:2px 6px;padding:6px 10px;border-radius:10px;background:var(--page-2);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600}
.chat-file .ic{width:16px;height:16px;color:var(--muted)}
.msg-mine .chat-file{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.msg-mine .chat-file .ic{color:rgba(255,255,255,.75)}
.chat-form{display:flex;gap:8px;align-items:center;min-width:0}
.chat-form input[type=text]{flex:1;min-width:0}
.chat-form .attach{flex:0 0 auto;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer}
.chat-form .attach:hover{border-color:var(--line-strong)}
.chat-form .attach input{position:absolute;width:1px;height:1px;opacity:0}
.chat-form .btn{flex:0 0 auto}
.proof-img{max-width:100%;max-height:640px;border-radius:var(--r-md);border:1px solid var(--line);display:block}
.trade-side{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.trade-side.is-buy{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.trade-side.is-sell{background:var(--page-2);color:var(--ink-soft);border:1px solid var(--line)}

/* ---------- Motion & print ----------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js .reveal{opacity:1;transform:none}
  .mock-steps li{opacity:1;transform:none}
}
@media print{
  .rail,.topbar,.tabbar,.drawer,.scrim,.site-header,.site-footer{display:none!important}
  body{background:#fff}
  .card,.table-wrap{box-shadow:none}
}

/* Receive: account number and QR */
.receive-card{display:grid;justify-items:center;gap:10px}
.account-no{font-size:clamp(28px,8vw,38px);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Level line on the home screen */
a.notice.standing{color:inherit;text-decoration:none}
a.notice.standing:hover{border-color:var(--line-strong)}
.notice.standing .notice-copy b{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.standing-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-end:8px}
tr.is-current td{background:var(--paper-2);font-weight:600}
.express{display:grid;gap:8px;margin-block-end:14px}
.express label{display:flex;align-items:center;gap:6px;font-size:14px}
.express label .ic{width:16px;height:16px;color:var(--gold-deep)}
.express-row{display:flex;gap:8px;align-items:stretch}
.express-row input{flex:1;min-width:0}
.express-row .btn{flex:0 0 auto}
.compact-table td,.compact-table th{padding:8px 10px}
.compact-table td:not(:first-child),.compact-table th:not(:first-child){text-align:center;white-space:nowrap}
.compact-table .check{justify-content:center}

/* ==========================================================================
 * 5.1: transactions, receipts, full details, tidy forms
 * ======================================================================== */
/* Lists grouped by day (transactions, notifications, menus) */
.feed{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.feed-day{font-size:12.5px;font-weight:700;color:var(--muted);margin:8px 4px 0;letter-spacing:.01em}
.feed>.feed-day:first-child,.section>.feed-day:first-child{margin-block-start:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.tx-end b.is-void,.receipt-amount.is-void{text-decoration:line-through;color:var(--faint)}
.tx-copy b .ltr,.tx-copy b.ltr{direction:ltr}

/* Receipt (one transaction) */
.receipt-head{display:grid;justify-items:center;gap:6px;text-align:center;padding-block:6px 4px}
.receipt-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--page-2);color:var(--ink-soft)}
.receipt-ic.is-in{background:var(--ok-bg);color:var(--ok)}
.receipt-ic .ic{width:24px;height:24px}
.receipt-amount{font-size:clamp(26px,8vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.receipt-amount small{font-size:13px;font-weight:700;color:var(--muted)}
.receipt-amount.pos{color:var(--ok)}
.receipt-title{font-size:14.5px;font-weight:600;color:var(--ink-soft);max-width:100%;overflow-wrap:anywhere}

/* Values that can be copied: a full address, an account number, a reference */
dl.facts>dd.copy-line{display:flex;align-items:center;justify-content:space-between;gap:8px}
dl.facts>dd.copy-line .mono{min-width:0;text-align:start}
dl.facts>dd.copy-line .btn{flex:0 0 auto;padding:4px 8px;min-height:30px}
.copy-box{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 8px 8px 12px;padding-inline-start:12px;border-radius:var(--r-md);background:var(--page-2);border:1px solid var(--line)}
.copy-box>.mono{flex:1;min-width:0;word-break:break-all;font-size:13px;line-height:1.55;color:var(--ink);text-align:start}
.copy-box>.btn{flex:0 0 auto}
.address-line{display:block;font-size:12.5px;color:var(--ink-soft);word-break:break-all;margin-block-start:3px;text-align:start}

/* "Available" line at the top of a money form */
.avail-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line)}
.avail-line>span{font-size:13px;font-weight:600;color:var(--muted)}
.avail-line>b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.avail-line>b small{font-size:12px;color:var(--muted)}

/* Confirming with the fingerprint or a code; a password asked on its own */
.confirm-box{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.confirm-box>*{margin:0}
.confirm-step{display:grid;gap:6px;padding:14px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line)}
.confirm-step>label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.confirm-step>label .ic{width:15px;height:15px;color:var(--gold-deep)}

/* One link row (security page) */
.menu-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none!important}
.menu-row:hover{background:var(--paper-2)}

/* Menus: badges keep their size */
.menu-list em.badge{font-style:normal;flex:0 0 auto}
.badge-count{background:var(--bad);border-color:var(--bad);color:#fff;min-width:24px;justify-content:center}

/* Profile on "More" */
.profile-card .profile-head{padding:0;border:0;box-shadow:none;background:transparent}
.profile-card .profile-head b{white-space:normal}
.profile-card .profile-head .badge{margin-block-start:6px}

/* Levels and invitations */
.level-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.level-hero>div{display:grid;gap:4px}
.level-hero small{font-size:12.5px;color:var(--muted)}
.level-hero .level{font-size:13px;min-height:26px;padding:2px 12px}
.level-hero-side{justify-items:end;text-align:end}
progress.progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:999px;background:var(--page-2);overflow:hidden;color:var(--gold)}
progress.progress::-webkit-progress-bar{background:var(--page-2);border-radius:999px}
progress.progress::-webkit-progress-value{background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:999px}
progress.progress::-moz-progress-bar{background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:999px}
.level-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:var(--line-soft)}
.level-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:11px 13px;background:var(--paper);font-size:13px;color:var(--ink-soft)}
.level-list li b{font-size:13px;color:var(--ink);white-space:nowrap}
.level-list li .ic{width:16px;height:16px;color:var(--ok)}
.level-list li.is-reached{background:var(--paper-2)}
.qr-toggle>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);list-style:none}
.qr-toggle>summary::-webkit-details-marker{display:none}
.qr-toggle>summary .ic{width:16px;height:16px}
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mini-stats>div{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line);min-width:0}
.mini-stats b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.mini-stats small{font-size:11.5px;color:var(--muted);line-height:1.4}

/* Wallet actions: four even buttons */
.balance-actions.is-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.balance-actions.is-grid .btn{padding-inline:8px;min-width:0}
.balance-actions.is-grid .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.balance-actions.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Address cards to choose from (withdrawal) */
.choices.is-list{grid-template-columns:minmax(0,1fr)}
.choices.is-list .choice{align-items:flex-start}
.choices.is-list .choice input{margin-block-start:3px}
.choices.is-list .choice strong .badge{margin-inline-start:4px;vertical-align:1px}
.add-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;width:fit-content}
.add-link .ic{width:15px;height:15px}

/* Choosing a file: our own Arabic button over the browser's */
.file-pick{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;padding:12px 14px;border-radius:var(--r-md);border:1.5px dashed var(--line-strong);background:var(--paper-2);cursor:pointer;color:var(--ink);font-size:13.5px;font-weight:600}
.file-pick:hover{border-color:var(--gold)}
.file-pick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.file-pick .ic{width:18px;height:18px;color:var(--gold-deep)}
.file-pick small{flex:1 1 100%;font-size:12px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.file-pick.has-file{border-style:solid;border-color:var(--gold)}
.file-pick:focus-within{box-shadow:var(--focus)}

/* Items with a name and a status (addresses, bank accounts) */
.item-head b{font-size:15px;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.item-head b .ic{width:17px;height:17px;color:var(--muted)}
.item-meta .ic{width:13px;height:13px;vertical-align:-2px}
/* Visually hidden fields (e.g. the username password managers need) must never take room. */
input.sr-only,.sr-only{position:absolute!important;inset-inline-start:0!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.confirm-step,.card{position:relative}
.menu-list span.tx-go{flex:0 0 auto;margin-inline-start:auto}

/* ---------- 5.2: chat pictures, closed chat, picture viewer, motion ------- */
.chat-closed{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:12px;border-radius:var(--r-md);background:var(--page-2);border:1px dashed var(--line-strong);color:var(--muted);font-size:13px;text-align:center}
.chat-closed .ic{width:16px;height:16px;flex:0 0 auto}
.chat-pending{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);background:var(--gold-soft);border:1px solid var(--gold-line);animation:rise .22s ease-out}
.chat-pending img{width:44px;height:44px;flex:0 0 auto;object-fit:cover;border-radius:8px;background:var(--paper)}
.chat-pending span{display:grid;flex:1;min-width:0;font-size:13px;line-height:1.4}
.chat-pending small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-form .attach{position:relative}
.chat-form .attach:has(input:focus-visible){box-shadow:var(--focus)}

html.has-viewer{overflow:hidden}
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(9,13,24,.97);color:#fff;overflow:hidden}
.viewer::backdrop{background:rgba(9,13,24,.6);backdrop-filter:blur(6px)}
.viewer[open]{display:flex;flex-direction:column;animation:fade .2s ease-out}
.viewer-bar{display:flex;justify-content:space-between;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 10px}
.viewer-bar .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.viewer-bar .btn:hover{background:rgba(255,255,255,.2);text-decoration:none}
.viewer-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:0 12px max(12px,env(safe-area-inset-bottom));overscroll-behavior:contain}
.viewer-body img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;cursor:zoom-in;animation:zoom-in .22s ease-out;background:#fff}
.viewer-body.is-zoomed{display:block}
.viewer-body.is-zoomed img{max-width:none;max-height:none;margin-inline:auto;cursor:zoom-out}

/* Motion: short and calm; the reduced-motion rule above turns it off. */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes zoom-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.msg.is-new{animation:rise .25s ease-out}


/* Order form: quick amounts and clear warnings */
.limit-fill{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-block-start:8px}
.limit-fill .hint{margin:0;margin-inline-start:auto}
.chip-btn{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s,transform .1s}
.chip-btn:hover{border-color:var(--gold);background:var(--gold-soft)}
.chip-btn:active{transform:scale(.97)}
.chip-btn:focus-visible{outline:0;box-shadow:var(--focus)}
.sum-warn,.summary-box .sum-warn{display:flex!important;justify-content:flex-start;align-items:flex-start;gap:6px;color:var(--warn);font-size:13px;font-weight:600}
.sum-warn[hidden]{display:none!important}
.sum-warn .ic{width:16px;height:16px;flex:0 0 auto;margin-block-start:2px}
.summary-box{transition:border-color .2s,background-color .2s}
.summary-box.is-bad{border-color:var(--warn-line);background:var(--warn-bg)}
.summary-box:not([hidden]){animation:rise .2s ease-out}

/* On/off switches (admin: deposits and withdrawals per network) */
.switches{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-block-end:14px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--paper-2);min-width:0}
.switch-copy{display:grid;gap:1px;min-width:0}
.switch-copy b{font-size:14px}
.switch-copy small{font-size:12px;color:var(--muted)}
.switch{position:relative;flex:0 0 auto;width:46px;height:28px;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:background-color .2s}
.switch span{position:absolute;inset-block-start:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,21,38,.25);transition:transform .2s ease}
.switch.is-on{background:var(--ok)}
.switch.is-on span{transform:translateX(18px)}
[dir=rtl] .switch.is-on span{transform:translateX(-18px)}
.switch:focus-visible{outline:0;box-shadow:var(--focus)}
ol.steps-list.compact{gap:6px;margin-block-end:12px}
ol.steps-list.compact li{font-size:13px}
.plain-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:12.5px;overflow-wrap:anywhere}

/* ---------- Motion (5.2) -------------------------------------------------- *
 * Short and calm, only transform/opacity. Turned off for people who ask
 * their phone for less motion (see the rule at the end of this file). */
:root{--ease:cubic-bezier(.2,.8,.2,1)}

/* Moving between pages: a quick cross-fade; the bars stay in place. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.tabbar{view-transition-name:tabbar}
.rail{view-transition-name:rail}

/* A page's blocks come in one after another. */
.app-body .wrap>:not(.narrow):not(.narrow-lg),.app-body .wrap>.narrow>*,.app-body .wrap>.narrow-lg>*{animation:rise .26s var(--ease) both}
.app-body .wrap>:nth-child(2),.app-body .wrap>.narrow>:nth-child(2),.app-body .wrap>.narrow-lg>:nth-child(2){animation-delay:.03s}
.app-body .wrap>:nth-child(3),.app-body .wrap>.narrow>:nth-child(3),.app-body .wrap>.narrow-lg>:nth-child(3){animation-delay:.06s}
.app-body .wrap>:nth-child(4),.app-body .wrap>.narrow>:nth-child(4),.app-body .wrap>.narrow-lg>:nth-child(4){animation-delay:.09s}
.app-body .wrap>:nth-child(5),.app-body .wrap>.narrow>:nth-child(5),.app-body .wrap>.narrow-lg>:nth-child(5){animation-delay:.12s}
.app-body .wrap>:nth-child(n+6),.app-body .wrap>.narrow>:nth-child(n+6),.app-body .wrap>.narrow-lg>:nth-child(n+6){animation-delay:.15s}

/* Pressing things */
.btn:active:not(:disabled){transform:scale(.98)}
.btn.is-loading::after{content:"";flex:0 0 auto;width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
a.tx,.menu-list a,.menu-list button{transition:background-color .15s}
a.tx:active,.menu-list a:active,.menu-list button:active{background:var(--page-2)}
.tabbar a .ic{transition:transform .2s var(--ease)}
.tabbar a:active .ic{transform:scale(.88)}
.tabbar a.is-current::before{animation:grow .32s var(--ease) both}
.tabbar a.is-current .ic{animation:tab-pop .38s var(--ease)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tab-pop{45%{transform:translateY(-2px) scale(1.08)}}

/* Counters and badges pop in */
.dot-badge,.nav-badge{animation:pop .42s var(--ease) .2s both}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
[data-copy].is-done .ic{animation:pop .35s var(--ease)}

/* The balance card: a soft light passes once */
.balance-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 1.5s var(--ease) .35s both}
[dir=rtl] .balance-card::after{animation-name:sheen-rtl}
@keyframes sheen{to{transform:translateX(120%)}}
@keyframes sheen-rtl{from{transform:translateX(120%)}to{transform:translateX(-120%)}}

/* Order progress: the line fills, the current step breathes */
.stepper li.is-done::after{transform-origin:left center;animation:grow .45s var(--ease) both}
[dir=rtl] .stepper li.is-done::after{transform-origin:right center}
.stepper li:nth-child(2)::after{animation-delay:.12s}
.stepper li:nth-child(3)::after{animation-delay:.24s}
.stepper li.is-current::before{animation:ring 2s ease-out .4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(195,154,78,.5)}70%,100%{box-shadow:0 0 0 9px rgba(195,154,78,0)}}
.countdown.urgent{animation:beat 1s ease-in-out infinite}
@keyframes beat{50%{opacity:.55}}

/* Receipts: the icon arrives with a small bounce */
.receipt-ic{position:relative;animation:pop-in .45s var(--ease) both}
.receipt-ic.is-in::after{content:"";position:absolute;inset:-5px;border-radius:20px;border:2px solid var(--ok-line);animation:ring-out 1s ease-out .25s both}
@keyframes pop-in{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes ring-out{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}

/* Market: cards lift under the pointer */
.ad-card{transition:border-color .15s,box-shadow .2s,transform .2s var(--ease)}
@media(hover:hover){.ad-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}

/* Empty lists: the icon floats */
.empty-state i{animation:float 3.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4px)}}

/* Messages leave as gently as they came */
.alert.is-leaving{animation:leave .2s ease-in forwards}
@keyframes leave{to{opacity:0;transform:translateY(-6px)}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .balance-card::after{display:none}
}

/* ---------- Installer (5.3) ---------------------------------------------- */
.install{width:min(680px,100%);margin-inline:auto}
.install-head{display:grid;justify-items:center;gap:6px;text-align:center;padding-block:4px 2px}
.install-head h1{font-size:clamp(22px,5vw,28px)}
.install-head p{color:var(--muted)}
.install-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--btn-bg);color:var(--gold-bright);box-shadow:var(--btn-shadow);animation:pop-in .45s var(--ease) both}
.install-ic .ic{width:26px;height:26px}
.stepper.is-install{grid-template-columns:repeat(3,minmax(0,1fr));margin-block:2px}
.check-list.is-install li{justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap}
.check-list.is-install li>span:nth-child(2){flex:1;min-width:0;display:grid;gap:2px}
.check-list.is-install li b{font-weight:600;color:var(--ink)}
.check-list.is-install li small{color:var(--muted);line-height:1.6}
.check-list.is-install li em{font-style:normal;font-size:12px;color:var(--muted);flex:0 1 auto;text-align:end;max-width:40%;overflow-wrap:anywhere}
.check-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok)}
.check-ic .ic{width:14px;height:14px}
.check-list li.is-bad .check-ic{background:var(--bad-bg);color:var(--bad)}
.check-list li.is-warn .check-ic{background:var(--warn-bg);color:var(--warn)}
.install-checks>summary{list-style:none}
.install-checks>summary::-webkit-details-marker{display:none}
.install-checks[open]>summary{margin-block-end:12px}
.input-prefix{display:flex;align-items:stretch;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);overflow:hidden;direction:ltr}
.input-prefix>span{display:flex;align-items:center;padding-inline:10px;background:var(--paper-2);color:var(--muted);font-size:13px;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis;border-inline-end:1px solid var(--line)}
.input-prefix>input{border:0;border-radius:0;min-width:0;flex:1}
.input-prefix:focus-within{border-color:var(--gold);box-shadow:var(--focus)}
.copy-line{display:flex;align-items:center;gap:8px;min-width:0}
.copy-line .address-box{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.copy-line .btn{flex:0 0 auto}

/* The success mark: a circle draws itself, then the tick */
.success-mark{width:68px;height:68px;display:block}
.success-mark svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.success-mark circle{stroke:var(--ok);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease) .1s forwards;fill:var(--ok-bg)}
.success-mark path{stroke:var(--ok);stroke-width:4;stroke-dasharray:36;stroke-dashoffset:36;animation:draw .35s var(--ease) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.install-ic.is-spin .ic{animation:spin 1.6s linear infinite}

/* ---------- Public site pages (5.3) -------------------------------------- */
.site-nav a.is-current{background:var(--gold-soft);color:var(--gold-deep);font-weight:600}
.page-hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,78px) clamp(28px,5vw,48px);background:radial-gradient(1200px 380px at 50% -120px,rgba(195,154,78,.16),transparent 70%)}
.page-hero-in{display:grid;justify-items:center;text-align:center;gap:10px}
.page-hero h1{font-size:clamp(28px,5vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.page-hero .site-lede{margin-inline:auto;margin-block-start:4px;max-width:62ch}
.page-hero+.site-section:not(.band-dark):not(.is-paper){padding-block-start:clamp(8px,2vw,20px)}
.page-hero-ic{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:var(--btn-bg);color:var(--gold-bright);box-shadow:var(--btn-shadow);margin-block-end:4px}
.page-hero-ic .ic{width:28px;height:28px}
.page-hero-in>*{animation:rise .5s var(--ease) both}
.page-hero-in>:nth-child(2){animation-delay:.06s}
.page-hero-in>:nth-child(3){animation-delay:.12s}
.page-hero-in>:nth-child(4){animation-delay:.18s}
.page-hero-ic{animation:pop-in .55s var(--ease) both!important}

.more-link{display:inline-flex;align-items:center;gap:4px;margin-block-start:14px;font-weight:600;font-size:14.5px;color:var(--gold-deep)}
.more-link .ic{width:16px;height:16px;transform:scaleX(-1);transition:transform .2s var(--ease)}
[dir=ltr] .more-link .ic{transform:none}
.more-link:hover .ic{transform:scaleX(-1) translateX(3px)}
.more-link.is-light{color:#e7cf9c}

/* A vertical path of steps; the line grows as the steps appear */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:820px;position:relative}
.timeline li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:18px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.timeline li::after{content:"";position:absolute;inset-inline-start:41px;inset-block-start:66px;width:2px;height:calc(100% - 52px);background:linear-gradient(var(--gold-line),transparent);transform-origin:top;transform:scaleY(0);transition:transform .7s var(--ease) .2s}
.timeline li:last-child::after{display:none}
.timeline li.is-shown::after{transform:scaleY(1)}
.timeline-dot{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-deep)}
.timeline-dot .ic{width:22px;height:22px}
.timeline-num{font-size:12px;font-weight:700;color:var(--faint);letter-spacing:.06em}
.timeline h3{font-size:16.5px;margin-block:2px 6px}
.timeline p{color:var(--muted);line-height:1.8}
.site-section.is-paper .timeline li{background:var(--paper-2)}

.tips{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.tip{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);min-width:0}
.tip-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft)}
.tip-ic .ic{width:19px;height:19px}
.tip span:last-child{display:grid;gap:3px;min-width:0}
.tip small{color:var(--muted);font-size:13.5px;line-height:1.75}
.reserve-link{display:flex;align-items:center;gap:12px;margin-block-start:18px;padding:16px 18px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--gold-line);color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s}
.reserve-link:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.reserve-link>.ic:first-child{width:22px;height:22px;color:var(--gold-deep)}
.reserve-link>span{flex:1;display:grid;gap:2px;min-width:0}
.reserve-link small{color:var(--muted)}
.reserve-link>.ic:last-child{width:18px;height:18px;color:var(--faint);transform:scaleX(-1)}

.levels{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.level-card{display:grid;justify-items:center;gap:6px;padding:20px 14px;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);text-align:center;transition:transform .2s var(--ease),box-shadow .2s}
.level-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.level-card b{font-size:30px;font-weight:700;letter-spacing:-.03em;direction:ltr}
.level-card small{color:var(--muted)}
.level-badge{padding:3px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--page-2);color:var(--ink-soft)}
.level-card.is-silver .level-badge{background:#eef1f5;color:#4a5568}
.level-card.is-gold .level-badge{background:var(--gold-soft);color:var(--gold-deep)}
.level-card.is-diamond .level-badge{background:#e8f1ff;color:#1d4ed8}
.limits{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.limit{display:grid;gap:4px;padding:16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0}
.limit>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--page-2);color:var(--ink-soft);margin-block-end:4px}
.limit>span .ic{width:18px;height:18px}
.limit small{color:var(--muted);line-height:1.7}

.faq-layout{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:960px){.faq-layout{grid-template-columns:230px minmax(0,1fr)}.faq-index{position:sticky;inset-block-start:88px}}
.faq-index{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:960px){.faq-index{display:grid;gap:4px}}
.faq-index a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);font-size:14px;font-weight:600;text-decoration:none!important;transition:border-color .15s,background .15s}
.faq-index a:hover{border-color:var(--gold-line);background:var(--gold-soft)}
.faq-index .ic{width:16px;height:16px}
.faq-group{scroll-margin-top:90px}
.faq-topic{display:flex;align-items:center;gap:10px;font-size:19px;margin-block-end:12px}
.faq-topic .feature-ic{width:36px;height:36px}
.stack-lg{display:grid;gap:30px;min-width:0}
.faq details p{animation:fade .25s ease-out}

.contact-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.contact-mail{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-start:16px;padding:18px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--gold-line);box-shadow:var(--shadow-sm)}
.contact-mail>span:nth-child(2){flex:1 1 240px;display:grid;gap:3px;min-width:0}
.contact-mail small{color:var(--muted)}

.policy{display:grid;gap:16px;max-width:860px}
.policy-part{padding:20px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.policy-part h2{display:flex;align-items:center;gap:10px;font-size:18px;margin-block-end:10px}
.policy-part .feature-ic{width:36px;height:36px}
.policy-part ul{margin:0;padding-inline-start:20px;display:grid;gap:8px;color:var(--ink-soft);line-height:1.85}

/* The home page: the hero arrives line by line */
.hero-copy>*{animation:rise .6s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
.hero-copy>:nth-child(5){animation-delay:.32s}
.feature:hover{transform:translateY(-3px)}

/* ---------- Success moments, receipts and progress (5.3) ------------------ *
 * A finished transaction gets a moment: the tick draws itself and, the first
 * time this device sees it while still new, a short burst, the amount counts
 * up and the "+1" toward the next level fills in (app.js adds .is-celebrating;
 * already seen: .is-quiet). Receipt pages put the receipt first and, beside it
 * on wide screens (below it on phones), where it stands and what to do next. */
.receipt-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start;width:100%;max-width:640px;margin-inline:auto}
@media(min-width:900px){.receipt-layout{max-width:960px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.receipt-side .next-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.receipt-side{display:grid;gap:16px;min-width:0}
.receipt,.moment-card{overflow:hidden}
.side-title{display:flex;align-items:center;gap:8px;font-size:15px;margin-block-end:14px}
.side-title .ic{width:18px;height:18px;color:var(--gold-deep)}
.side-link{display:flex;align-items:center;justify-content:center;gap:6px;margin-block-start:12px;font-size:14px;font-weight:600}
.side-link .ic{width:16px;height:16px}
.next-actions{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.next-actions .btn{width:100%;justify-content:center}
.moment-card .next-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));max-width:560px;margin-inline:auto;margin-block-start:16px}

.moment{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;padding-block:4px 2px}
.receipt .moment{margin-block-end:14px}
.moment-mark{position:relative;width:72px;height:72px;margin-block-end:4px}
.moment-mark .success-mark{width:72px;height:72px}
.moment.is-quiet .success-mark circle,.moment.is-quiet .success-mark path{animation:none;stroke-dashoffset:0}
.moment-title{font-size:clamp(18px,4.4vw,21px);font-weight:700;color:var(--ink)}
.moment .receipt-amount{margin-block-start:2px}
.moment-lede{color:var(--muted);font-size:14px;max-width:46ch;line-height:1.75}
.moment-burst{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:0;height:0;pointer-events:none}
.moment-burst i{position:absolute;inset-block-start:-5px;inset-inline-start:-3px;width:6px;height:11px;border-radius:2px;background:var(--c,var(--gold));opacity:0}
.moment.is-celebrating .moment-burst i{animation:confetti 1.3s cubic-bezier(.15,.7,.3,1) .55s both}
.moment.is-celebrating .moment-burst i:nth-child(even){animation-delay:.62s}
@keyframes confetti{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}12%{opacity:1}62%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(calc(var(--x)*1.12),calc(var(--y) + 48px)) rotate(calc(var(--r)*1.5)) scale(.9)}}
.moment-burst i:nth-child(1){--x:77px;--y:-18px;--r:160deg;--c:var(--gold)}
.moment-burst i:nth-child(2){--x:97px;--y:15px;--r:-220deg;--c:var(--ok)}
.moment-burst i:nth-child(3){--x:57px;--y:28px;--r:300deg;--c:var(--navy);border-radius:50%;width:7px;height:7px}
.moment-burst i:nth-child(4){--x:32px;--y:63px;--r:-140deg;--c:var(--gold-bright)}
.moment-burst i:nth-child(5){--x:-11px;--y:30px;--r:250deg;--c:var(--info)}
.moment-burst i:nth-child(6){--x:-57px;--y:43px;--r:-320deg;--c:#e8a33d;border-radius:50%;width:7px;height:7px}
.moment-burst i:nth-child(7){--x:-75px;--y:15px;--r:160deg;--c:var(--gold)}
.moment-burst i:nth-child(8){--x:-124px;--y:-3px;--r:-220deg;--c:var(--ok)}
.moment-burst i:nth-child(9){--x:-77px;--y:-34px;--r:300deg;--c:var(--navy);border-radius:50%;width:7px;height:7px}
.moment-burst i:nth-child(10){--x:-97px;--y:-67px;--r:-140deg;--c:var(--gold-bright)}
.moment-burst i:nth-child(11){--x:-57px;--y:-80px;--r:250deg;--c:var(--info)}
.moment-burst i:nth-child(12){--x:-32px;--y:-115px;--r:-320deg;--c:#e8a33d;border-radius:50%;width:7px;height:7px}
.moment-burst i:nth-child(13){--x:11px;--y:-82px;--r:160deg;--c:var(--gold)}
.moment-burst i:nth-child(14){--x:57px;--y:-95px;--r:-220deg;--c:var(--ok)}
.moment-burst i:nth-child(15){--x:75px;--y:-67px;--r:300deg;--c:var(--navy);border-radius:50%;width:7px;height:7px}
.moment-burst i:nth-child(16){--x:124px;--y:-49px;--r:-140deg;--c:var(--gold-bright)}
.moment.is-celebrating .moment-mark::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ok-line);animation:ring-out 1s ease-out .6s both}
.moment.is-celebrating .moment-title,.moment.is-celebrating .receipt-amount,.moment.is-celebrating .moment-lede{animation:rise .4s var(--ease) both}
.moment.is-celebrating .moment-title{animation-delay:.35s}
.moment.is-celebrating .receipt-amount{animation-delay:.45s}
.moment.is-celebrating .moment-lede{animation-delay:.55s}

/* "+1": one more completed trade toward the next level */
.moment-points{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;margin-block-start:10px;padding:12px 14px;border-radius:var(--r-md);background:linear-gradient(180deg,var(--gold-soft),#fbf7ee);border:1px solid var(--gold-line);text-align:start}
.moment-plus{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);color:var(--gold-bright);font-weight:700;font-size:17px;box-shadow:var(--btn-shadow);direction:ltr}
.moment-points-copy{flex:1;min-width:0;display:grid;gap:4px}
.moment-points-copy b{font-size:14.5px;color:var(--ink);line-height:1.5}
.moment-points-copy small{font-size:12.5px;color:var(--muted);line-height:1.6}
.moment-points-copy .moment-points-kicker{color:var(--gold-deep);font-weight:600}
.moment-points progress.progress{height:7px;margin-block:2px}
.moment-points.is-up{border-color:var(--gold);background:linear-gradient(180deg,#fff1cf,var(--gold-soft))}
.moment.is-celebrating .moment-points{animation:rise .45s var(--ease) .8s both}
.moment.is-celebrating .moment-plus{animation:pop-in .5s var(--ease) 1.05s both}
.moment.is-celebrating .moment-plus::after{content:"+1";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-deep);font-weight:700;animation:float-off 1.1s ease-out 1.4s both}
.moment.is-celebrating .moment-points.is-up .moment-plus{animation:pop-in .5s var(--ease) 1.05s both,ring 1.6s ease-out 1.6s 2}
@keyframes float-off{0%{opacity:0;transform:none}20%{opacity:1}100%{opacity:0;transform:translateY(-34px) scale(1.15)}}

/* Where a transaction stands */
.track{list-style:none;margin:0;padding:0;display:grid}
.track li{position:relative;display:flex;gap:12px;padding-block-end:18px;min-width:0}
.track li:last-child{padding-block-end:0}
.track li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:12px;inset-block:28px 2px;width:2px;border-radius:2px;background:var(--line)}
.track li>i{position:relative;z-index:1;flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--line-strong);color:#fff}
.track li>i .ic{width:14px;height:14px}
.track li.is-done>i{background:var(--ok);border-color:var(--ok);animation:pop-in .4s var(--ease) both}
.track li.is-done:not(:last-child)::before{background:var(--ok-line)}
.track li:nth-child(2)>i{animation-delay:.08s}
.track li:nth-child(3)>i{animation-delay:.16s}
.track li:nth-child(4)>i{animation-delay:.24s}
.track li.is-now>i{border-color:var(--gold);background:var(--gold-soft);animation:ring 2s ease-out .4s infinite}
.track li.is-now>i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.track li.is-bad>i{background:var(--bad);border-color:var(--bad)}
.track li>span{display:grid;gap:1px;min-width:0;padding-block-start:2px}
.track b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.5}
.track li.is-todo b{color:var(--faint);font-weight:500}
.track small{font-size:12.5px;color:var(--muted);line-height:1.6}
.track li.is-now small{color:var(--gold-deep)}
.track li.is-bad small{color:var(--bad)}
.live-hint{display:flex;align-items:center;gap:8px;margin-block-start:16px;margin-block-end:0;color:var(--muted)}
.live-hint .pulse{width:8px;height:8px;color:var(--gold)}
.moment-points-copy small a{font-weight:600;white-space:nowrap}
@media(max-width:380px){.moment-points{gap:10px;padding:12px}.moment-plus{width:40px;height:40px;font-size:15px}}
.check-list li>span.check-ic{flex:0 0 auto}
.standing .standing-bar{height:6px;margin-block-start:8px;max-width:420px}