/* ═════════ tokens — palette sampled live from lbank.com futures dark UI ═════════
   bg #000 · panels #18191B/#222326/#2E3033 · brand green #00AD7F ·
   short rose #DB426B · hint #767980 · link #0B73DB                              */
/* brand yellow sampled from lbank.com itself: #FFDB00 (with #FFE100 as the
   lighter gradient stop). Yellow is a light colour, so anything sitting ON it
   uses --on-accent (near-black) — white would be unreadable. */
:root{
  --bg:#F2F4F5; --card:#FFFFFF; --card2:#F3F6F5;
  --text:#0B0C0E; --sub:#767980; --line:rgba(20,24,31,.065);
  --accent:#E5B800; --accent-solid:#FFDB00; --on-accent:#141416; --link:#0B73DB;
  --up:#00AD7F; --up-bg:rgba(0,173,127,.11);
  --down:#DB426B; --down-bg:rgba(219,66,107,.11);
  --warn:#EFA412; --warn-bg:rgba(239,164,18,.13);
  --hero1:#1F1E17; --hero2:#0C0B08;
  --sh-sm:0 1px 2px rgba(15,20,30,.05), 0 2px 8px rgba(15,20,30,.05);
  --sh-md:0 4px 20px rgba(15,20,30,.09);
  --r:18px;
  /* Type scale. Ratio ~1.2, rounded to whole pixels so text never lands on
     a half-pixel on a 1x screen. Every size in the app is one of these. */
  --fs-micro:10px; --fs-cap:11px; --fs-sm:12px; --fs-base:13px;
  --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-money:28px; --fs-hero:38px;

  /* Spacing, 4px base. Padding, gaps and margins pick from here. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;

  /* Radii, harmonised: an 18px card must not hold a 13px field and a
     15px button — the eye reads mismatched curvature as sloppiness. */
  --r:18px; --r-md:14px; --r-sm:10px; --r-xs:7px; --r-pill:100px;

  /* Elevation. Shadows are nearly invisible on a black background, so the
     dark theme swaps them for a hairline; --edge carries whichever applies. */
  --edge:1px solid transparent;

  --y-grad:linear-gradient(135deg,#FFE100,#FFDB00);
  --g-grad:linear-gradient(135deg,#00C795,#00AD7F);
  --r-grad:linear-gradient(135deg,#F0608B,#DB426B);
  --b-grad:linear-gradient(135deg,#3F94E8,#0B73DB);
  --k-grad:linear-gradient(135deg,#2E3033,#18191B);
}
html[data-dark="1"]{
  --bg:#000000; --card:#18191B; --card2:#222326;
  --text:#FFFFFF; --sub:#767980; --line:rgba(255,255,255,.07);
  --accent:#FFDB00; --link:#3F94E8;
  --hero1:#1C1B16; --hero2:#0A0A08;
  --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --sh-md:0 6px 24px rgba(0,0,0,.5);
  /* On black, a drop shadow does nothing. The surface is defined by its
     edge instead, which is how every dark exchange UI separates panels. */
  --edge:1px solid rgba(255,255,255,.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"Vazirmatn",-apple-system,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--text);
  overscroll-behavior:none;user-select:none;-webkit-font-smoothing:antialiased;transition:background .25s}
.num{font-family:"Inter","Vazirmatn",sans-serif;font-variant-numeric:tabular-nums lining-nums;
  direction:ltr;unicode-bidi:isolate;letter-spacing:-.01em;font-feature-settings:"ss01","cv01"}
/* Fractions carry less information than the integer part and should not
   compete with it for weight. Splitting them is what makes an exchange
   figure scannable at a glance instead of a wall of digits. */
.mny .dec{opacity:.55;font-weight:inherit}
.mny .cur{opacity:.5;font-size:.62em;font-weight:700;margin-inline-end:.12em;vertical-align:.06em}
#app{max-width:420px;margin:0 auto;min-height:100vh;position:relative}
.screen{display:none;padding:8px 16px 96px;animation:sIn .22s cubic-bezier(.3,.7,.4,1)}
.screen.active{display:block}
@keyframes sIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── top bar / brand ── */
.top{display:flex;align-items:center;gap:10px;padding:14px 2px 14px;position:relative}
.top .ttl{font-size:20px;font-weight:800;flex:1}
.top .ttl.center{text-align:center;position:absolute;left:0;right:0;pointer-events:none}
.ibtn{width:36px;height:36px;border-radius:12px;background:var(--card);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s;flex-shrink:0;z-index:1}
.ibtn:active{transform:scale(.9)}
.ibtn svg{width:19px;height:19px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand{display:flex;align-items:center;gap:8px;justify-content:center;flex:1}
.brand .wm{font-family:"Inter";font-weight:800;font-size:21px;letter-spacing:.5px;color:var(--text);font-style:italic;transform:skewX(-4deg)}
.brand .mini{background:var(--accent-solid);color:#141416;font-size:9.5px;font-weight:800;border-radius:6px;padding:3px 7px;letter-spacing:1.5px;font-family:"Inter"}
/* The brand mark is LBank's own artwork (design/Logo.png), never a redrawn
   wordmark — an approximated logo reads as a fake. */
.brand img.wordmark{height:22px;width:auto;display:block}
#splash img.wordmark{width:196px;height:auto;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}

/* ── hero ──
   The balance card is a CARD, on both themes. It used to be a near-black
   gradient regardless of theme, which on the light background read as a black
   box dropped onto the page — the one element that did not belong to the same
   surface system as everything below it. It now uses the same --card, --r,
   --sh-sm and text colours as .card, so the home screen is one material. The
   brand warmth stays as a faint yellow wash in the corners rather than as a
   different-coloured slab. */
.hero{position:relative;border-radius:var(--r);padding:var(--s6) var(--s5) var(--s5);text-align:center;color:var(--text);
  overflow:hidden;background:var(--card);box-shadow:var(--sh-sm);border:1px solid var(--line)}
.hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;top:-170px;right:-70px;
  background:radial-gradient(circle,rgba(255,219,0,.20),transparent 68%);pointer-events:none}
.hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;bottom:-160px;left:-80px;
  background:radial-gradient(circle,rgba(255,219,0,.08),transparent 68%);pointer-events:none}
.hero .lb{font-size:13px;color:var(--sub);font-weight:600;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:7px}
.hero .eye{cursor:pointer;display:flex;opacity:.75}
.hero .eye svg{width:16px;height:16px;stroke:var(--sub);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .amt{font-size:38px;font-weight:800;margin:6px 0 8px;position:relative;z-index:1;letter-spacing:-.02em;
  color:var(--text)}
.hero .amt small{font-size:23px;font-weight:700;color:var(--sub)}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--up-bg);color:var(--up);
  border-radius:100px;padding:5px 13px;font-size:13px;font-weight:700;position:relative;z-index:1}
.pill svg{width:12px;height:12px;fill:currentColor}

/* ── actions ── */
.acts{display:flex;gap:9px;margin:14px 0 6px}
.act{flex:1;background:var(--card);border-radius:var(--r);padding:14px 4px 11px;text-align:center;
  box-shadow:var(--sh-sm);cursor:pointer;transition:transform .12s}
.act:active{transform:scale(.94)}
.act .ic{width:42px;height:42px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;
  background:var(--y-grad);box-shadow:0 4px 10px rgba(255,219,0,.32)}
.act .ic svg{width:20px;height:20px;stroke:var(--on-accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.act .ic[style] svg{stroke:#fff}
.act span{font-size:12.5px;font-weight:700}
/* an action the exchange would reject is shown locked, not hidden: the user
   can still tap it and be told exactly which permission is missing */
.act.locked{opacity:.42}
.act.locked .ic{background:var(--card2)!important;box-shadow:none!important}
.act.locked .ic svg{stroke:var(--sub)!important}
.act.locked::after{content:"🔒";position:absolute;font-size:10px;margin:-46px 0 0 26px}
.act{position:relative}

/* ── cards & rows ── */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-sm);border:var(--edge);
  overflow:hidden;margin:var(--s3) 0}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s4) var(--s2)}
.card .hd b{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em}
.card .hd a{font-size:var(--fs-sm);color:var(--accent);font-weight:700;text-decoration:none;cursor:pointer;
  transition:opacity .12s}
.card .hd a:active{opacity:.6}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .12s;position:relative}
.row:active{background:var(--card2)}
.row+.row::before{content:"";position:absolute;top:0;right:68px;left:16px;height:1px;background:var(--line)}
.cico{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:inset 0 -2px 4px rgba(0,0,0,.12)}
.cico .lg{font-family:"Inter";font-weight:800;font-size:17px}
.cico svg{width:22px;height:22px}
.row .mid{flex:1;min-width:0}
.row .t1{font-size:15px;font-weight:700}
.row .t2{font-size:12px;color:var(--sub);margin-top:2px;font-weight:500}
.row .end{text-align:left;flex-shrink:0}
.row .end .t1{font-size:15px;font-weight:700}
.row .end .t2{font-size:12px;margin-top:2px;font-weight:600}
.cUp{color:var(--up)} .cDn{color:var(--down)}
.badge{font-size:var(--fs-cap);font-weight:700;border-radius:var(--r-xs);padding:3px 7px;
  display:inline-flex;align-items:center;line-height:1.45;white-space:nowrap}
.badge.up{background:var(--up-bg);color:var(--up)} .badge.dn{background:var(--down-bg);color:var(--down)}
.spark{width:60px;height:26px;flex-shrink:0}
.txic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.txic svg{width:18px;height:18px;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.grp{font-size:12px;color:var(--sub);font-weight:700;margin:16px 4px 6px}

/* ── notes/buttons/inputs ── */
.note{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 14px;font-size:12.5px;
  font-weight:600;line-height:1.7;margin:12px 0}
.note.blue{background:rgba(255,219,0,.12);color:var(--accent)}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.err{background:var(--down-bg);color:var(--down)}
.note svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;fill:currentColor}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;border:none;
  border-radius:var(--r-md);padding:15px;font-size:var(--fs-md);font-weight:800;cursor:pointer;
  font-family:inherit;color:var(--on-accent);background:var(--y-grad);letter-spacing:-.01em;
  box-shadow:0 2px 8px rgba(255,219,0,.22);transition:transform .1s cubic-bezier(.3,.7,.4,1),
    filter .12s,opacity .15s}
.btn:active{transform:scale(.975);filter:brightness(.96)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn svg{stroke:currentColor}
/* buy/sell keep green/red — that pairing is how every trader reads up/down */
.btn.up{background:var(--g-grad);color:#fff;box-shadow:0 2px 8px rgba(0,173,127,.24)}
.btn.dn{background:var(--r-grad);color:#fff;box-shadow:0 2px 8px rgba(219,66,107,.24)}
/* A ghost button needs an edge, or it dissolves into the card behind it. */
.btn.ghost{background:var(--card2);color:var(--text);box-shadow:none;border:1px solid var(--line)}
.btn.ghost:active{background:var(--line)}
.btn.sm{padding:10px var(--s4);width:auto;font-size:var(--fs-base);border-radius:var(--r-sm);box-shadow:none}
.btnrow{display:flex;gap:var(--s2)}
.srch{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:14px;padding:11px 14px;box-shadow:var(--sh-sm)}
.srch svg{width:17px;height:17px;stroke:var(--sub);fill:none;stroke-width:2.2;stroke-linecap:round}
.srch input{border:none;outline:none;background:transparent;flex:1;font-size:14px;font-family:inherit;color:var(--text);font-weight:500}
.srch input::placeholder{color:var(--sub)}
.chips{display:flex;gap:7px;margin:12px 0;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{background:var(--card);border-radius:100px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--sub);
  white-space:nowrap;cursor:pointer;box-shadow:var(--sh-sm);transition:all .15s}
.chip.on{background:var(--text);color:var(--bg)}
.fld{background:var(--card2);border-radius:var(--r-md);padding:10px var(--s4) 11px;margin-bottom:var(--s2);
  border:1.5px solid transparent;transition:border-color .15s,background .15s}
.fld:focus-within{border-color:var(--accent);background:var(--card)}
.fld.err{border-color:var(--down);animation:shake .3s}
@keyframes shake{25%{transform:translateX(4px)}50%{transform:translateX(-4px)}75%{transform:translateX(3px)}}
.fld .k{font-size:var(--fs-cap);color:var(--sub);font-weight:700;letter-spacing:.01em}
.fld input{border:none;outline:none;background:transparent;font-size:var(--fs-lg);font-weight:700;width:100%;
  font-family:"Inter","Vazirmatn";color:var(--text);direction:ltr;margin-top:2px;
  font-variant-numeric:tabular-nums}
.fld input::placeholder{color:var(--sub);font-weight:600;opacity:.7}
.ferr{font-size:11.5px;color:var(--down);font-weight:700;margin:-4px 4px 10px;display:none}
.ferr.show{display:block}

/* ── coin page / chart / trade ── */
.cph{display:flex;align-items:center;gap:12px;padding:2px 2px 12px}
.cph .p{font-size:30px;font-weight:800;letter-spacing:-.02em}
.tfs{display:flex;background:var(--card2);border-radius:12px;padding:3px;margin-top:12px}
.tfs div{flex:1;text-align:center;font-size:12px;font-weight:700;padding:7px 0;border-radius:9px;color:var(--sub);cursor:pointer;transition:all .15s}
.tfs div.on{background:var(--card);color:var(--text);box-shadow:var(--sh-sm)}
canvas{width:100%;display:block}
.stat4{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.stat4>div{background:var(--card);padding:11px 16px}
.stat4 .k{font-size:11px;color:var(--sub);font-weight:600}
.stat4 .v{font-size:14.5px;font-weight:700;margin-top:3px}
.cstrip{display:flex;gap:1px;background:var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh-sm);margin-top:2px}
.cstrip>div{flex:1;background:var(--card);padding:9px 6px;text-align:center}
.cstrip .k{display:block;font-size:10px;color:var(--sub);font-weight:600}
.cstrip .v{display:block;font-size:12.5px;font-weight:700;margin-top:3px}
.obh{display:flex;justify-content:space-between;padding:10px 16px 4px;font-size:10.5px;color:var(--sub);font-weight:700}
.obh span{flex:1}.obh span:last-child{text-align:left}.obh span:nth-child(2){text-align:center}
/* sits directly ABOVE the tab bar (which owns bottom:0), never behind it */
.cfoot{position:fixed;bottom:calc(56px + env(safe-area-inset-bottom));left:0;right:0;max-width:420px;margin:0 auto;display:flex;gap:10px;padding:10px 16px;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:45}
.cfoot .btn{padding:13px}
.pickrow{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:16px;padding:13px 16px;box-shadow:var(--sh-sm);cursor:pointer;margin:4px 0 12px;transition:transform .12s}
.pickrow:active{transform:scale(.98)}
.lbl3{font-size:12px;color:var(--sub);font-weight:700;margin:12px 4px 8px}
.ab{display:flex;align-items:center;gap:7px;color:var(--accent);font-size:12.5px;font-weight:700;padding:2px 4px;cursor:pointer}
.ob{padding:4px 16px 12px;font-size:12.5px}
.ob .lx{display:flex;justify-content:space-between;padding:4px 6px;position:relative;border-radius:7px;overflow:hidden;font-weight:600}
.ob .fill{position:absolute;top:0;bottom:0;left:0;opacity:.10;border-radius:7px}
.ob .last{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;margin:3px 0;font-weight:800;font-size:16px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.seg{display:flex;background:var(--card2);border-radius:var(--r-md);padding:3px;margin-bottom:var(--s3)}
.seg div{flex:1;text-align:center;padding:9px 0;font-size:var(--fs-base);font-weight:800;
  border-radius:var(--r-sm);color:var(--sub);cursor:pointer;
  transition:color .15s,background .18s cubic-bezier(.3,.7,.4,1)}
.seg div.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(15,20,30,.10)}
html[data-dark="1"] .seg div.on{box-shadow:none;background:var(--line)}
/* A locked segment: still readable, clearly not selectable, and it explains
   itself when tapped rather than silently refusing. */
.seg div.lock{opacity:.45;display:flex;align-items:center;justify-content:center;gap:5px}
.seg div.lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.seg div.lock:active{opacity:.7}
.pctrow{display:flex;gap:var(--s1);margin-bottom:var(--s3)}
.pctrow div{flex:1;text-align:center;font-size:var(--fs-cap);font-weight:800;color:var(--sub);
  background:var(--card2);border-radius:var(--r-sm);padding:8px 0;cursor:pointer;
  border:1px solid transparent;transition:all .14s}
.pctrow div:active{transform:scale(.96)}
/* Selected reads as a filled chip in the brand colour, not as a colour swap
   that leaves the row looking half-broken. */
.pctrow div.on{background:var(--accent-solid);color:var(--on-accent);border-color:var(--accent-solid)}
.tglrow{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px}
.tglrow .l{font-size:13px;font-weight:700}
.tglrow .l small{display:block;font-size:10.5px;color:var(--sub);font-weight:600;margin-top:2px}
.futbar{display:flex;gap:8px;margin-bottom:12px}
.futbar .seg{flex:1;margin:0}
.levchip{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:13px;padding:0 16px;
  font-family:"Inter";font-weight:800;font-size:14px;cursor:pointer;box-shadow:var(--sh-sm);color:var(--accent)}
.posbtns{display:flex;gap:8px;margin-top:12px}
.posbtns button{flex:1}
/* position detail */
.pdhero{text-align:center;padding:8px 0 14px}
.pdhero .pnl{font-family:"Inter";font-weight:800;font-size:40px;letter-spacing:-.02em}
.pdhero .roi{font-size:14px;font-weight:700;margin-top:2px}
.pdhero .sub{font-size:12px;color:var(--sub);font-weight:600;margin-top:6px}
.liqbar{position:relative;height:8px;border-radius:5px;background:var(--card2);margin:8px 0 6px;overflow:visible}
.liqbar .seg{position:absolute;top:0;bottom:0;border-radius:5px}
.liqbar .mk{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:var(--text);transform:translateX(-50%)}
.liqlbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--sub);font-weight:600}
.kv{display:flex;justify-content:space-between;padding:11px 16px;font-size:13.5px}
.kv+.kv{border-top:1px solid var(--line)}
.kv .k{color:var(--sub);font-weight:600}
.kv .v{font-weight:700}
.qchips{display:flex;gap:var(--s1);margin:2px 0 var(--s3)}
.qchips div{flex:1;text-align:center;font-size:var(--fs-cap);font-weight:800;color:var(--sub);
  background:var(--card2);border-radius:var(--r-sm);padding:8px 0;cursor:pointer;
  border:1px solid transparent;transition:all .14s}
.qchips div:active{transform:scale(.95)}
/* There was no rule for `.on` at all: the JS added the class and the CSS
   ignored it, so tapping «۵۰٪» on the close sheet or «+5%» on the TP row
   changed nothing on screen. A destructive action whose size selector gives
   no feedback is the worst place in the app to leave silent. */
.qchips div.on{background:var(--accent-solid);color:var(--on-accent);border-color:var(--accent-solid)}
#tp-q div.on{background:var(--up);color:#fff;border-color:var(--up)}
#sl-q div.on{background:var(--down);color:#fff;border-color:var(--down)}
/* What the chosen fraction actually comes to, under the row that chose it. */
.qres{font-size:var(--fs-sm);font-weight:700;color:var(--sub);text-align:center;
  margin:-6px 0 var(--s3);min-height:17px}
.qres b{color:var(--text)}
.levbig{text-align:center;font-family:"Inter";font-weight:800;font-size:44px;color:var(--accent);margin:6px 0 2px}
.meta{display:flex;justify-content:space-between;font-size:13px;padding:7px 6px;font-weight:600}
.meta .k2{color:var(--sub)}

/* ── exchange ── */
.xc{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--sh-sm)}
.xc .k{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);font-weight:600;margin-bottom:8px}
.xc .in{display:flex;align-items:center;gap:10px}
.xc input{border:none;outline:none;background:transparent;font-size:30px;font-weight:800;width:100%;
  font-family:"Inter","Vazirmatn";color:var(--text);direction:ltr;text-align:left;letter-spacing:-.02em}
.xcoin{display:flex;align-items:center;gap:7px;background:var(--card2);border-radius:100px;padding:6px 13px 6px 9px;
  font-weight:800;font-size:14.5px;cursor:pointer;white-space:nowrap;transition:transform .12s}
.xcoin:active{transform:scale(.95)}
.xcoin .cico{width:26px;height:26px}.xcoin .cico .lg{font-size:11px}.xcoin .cico svg{width:14px;height:14px}
.xcoin svg.ar{width:11px;height:11px;stroke:var(--sub);fill:none;stroke-width:2.5}
.swapfab{width:44px;height:44px;border-radius:50%;margin:-12px auto;position:relative;z-index:2;cursor:pointer;
  background:var(--y-grad);border:4px solid var(--bg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(255,219,0,.38);transition:transform .25s}
.swapfab:active{transform:rotate(180deg)}
.swapfab svg{width:19px;height:19px;stroke:var(--on-accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── futures / settings / switch ── */
.pos{padding:14px 16px}
.pos .h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pos .h b{font-size:15px}
.sideL,.sideS{border-radius:var(--r-xs);padding:3px 8px;font-size:var(--fs-cap);font-weight:800;
  display:inline-flex;align-items:center;line-height:1.45;letter-spacing:.01em}
.sideL{background:var(--up-bg);color:var(--up)}
.sideS{background:var(--down-bg);color:var(--down)}
.pos .pnl{margin-right:auto;font-size:16px;font-weight:800}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}
.pgrid .k{color:var(--sub);font-size:10.5px;font-weight:600}
.pgrid .v{font-weight:700;margin-top:2px;font-size:13px}
.srow{display:flex;align-items:center;gap:13px;padding:13.5px 16px;cursor:pointer;transition:background .12s;position:relative}
.srow:active{background:var(--card2)}
.srow+.srow::before{content:"";position:absolute;top:0;right:63px;left:16px;height:1px;background:var(--line)}
.sic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.chev{color:var(--sub);font-size:15px}
/* .chev was a text glyph; the assistant hub uses an SVG one, so give the SVG
   form its own sizing without disturbing the existing text rows. */
svg.chev{width:16px;height:16px;margin-inline-start:auto;flex-shrink:0;fill:none;
  stroke:var(--sub);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.sw{width:46px;height:27px;border-radius:100px;background:var(--card2);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.sw::after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;top:3px;right:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .2s}
.sw.on{background:var(--accent-solid)}
.sw.on::after{transform:translateX(-19px)}

/* ── tab bar ── */
#tabbar{position:fixed;bottom:0;left:0;right:0;max-width:420px;margin:0 auto;z-index:50;
  background:color-mix(in srgb, var(--card) 88%, transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);display:flex;padding:7px 4px max(9px,env(safe-area-inset-bottom))}
.tab{flex:1;text-align:center;color:var(--sub);cursor:pointer;font-size:10px;font-weight:700;transition:color .15s;padding-top:3px}
.tab svg{width:24px;height:24px;display:block;margin:0 auto 3px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.tab.on{color:var(--accent)}
.tab.on svg{transform:translateY(-1px)}
.tab:active svg{transform:scale(.88)}

/* ── overlays ── */
#ovl{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  z-index:90;opacity:0;pointer-events:none;transition:opacity .22s}
#ovl.show{opacity:1;pointer-events:auto}
#sheet{position:fixed;bottom:0;left:0;right:0;max-width:420px;margin:0 auto;background:var(--card);
  border-radius:26px 26px 0 0;padding:12px 20px max(22px,env(safe-area-inset-bottom));z-index:100;
  transform:translateY(105%);transition:transform .3s cubic-bezier(.3,.9,.3,1);max-height:82vh;overflow-y:auto}
#sheet.show{transform:none}
#sheet .grab{width:40px;height:4.5px;border-radius:3px;background:var(--sub);opacity:.35;margin:0 auto 16px}
#sheet h3{font-size:17px;font-weight:800;margin-bottom:14px}
#toast{position:fixed;bottom:92px;left:50%;transform:translate(-50%,16px);background:#111214;color:#fff;border:1px solid rgba(255,255,255,.08);
  border-radius:100px;padding:12px 20px;font-size:13.5px;font-weight:700;z-index:200;opacity:0;pointer-events:none;
  transition:all .25s;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
#offline{position:fixed;top:0;left:0;right:0;max-width:420px;margin:0 auto;background:var(--down);color:#fff;z-index:300;
  text-align:center;font-size:12px;font-weight:700;padding:7px;transform:translateY(-110%);transition:transform .3s}
#offline.show{transform:none}
.okwrap{text-align:center;padding:12px 0 6px}
.okring{width:74px;height:74px;margin:0 auto 14px}
.okring circle{fill:none;stroke:var(--up);stroke-width:4;stroke-dasharray:214;stroke-dashoffset:214;animation:ring .5s ease forwards}
.okring path{fill:none;stroke:var(--up);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:ring .35s .35s ease forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.sk{background:linear-gradient(90deg,var(--card2) 25%,color-mix(in srgb,var(--card2) 50%,var(--card)) 50%,var(--card2) 75%);
  background-size:200% 100%;animation:shm 1.3s infinite;border-radius:8px}
@keyframes shm{from{background-position:200% 0}to{background-position:-200% 0}}

.hero .split{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;
  font-size:12.5px;font-weight:700;color:var(--sub)}
.hero .split b{color:var(--text);font-weight:800;margin-inline-start:3px}
.hero .split i{width:3px;height:3px;border-radius:50%;background:var(--sub);opacity:.45}
/* `.note` already existed above with .blue/.warn/.err variants and an icon
   slot. Redefining it here quietly stripped its flex layout, which the
   Portfolio Doctor screens rely on for .note.warn. The status banners get
   their own tuning by id instead of hijacking the shared class. */
.note a{color:var(--link);font-weight:800;cursor:pointer}
#walletNote,#botNote{display:block;margin:10px 0 0;padding:11px 13px;border-radius:13px;
  background:var(--card2);color:var(--sub);font-size:12.3px;font-weight:600;line-height:1.95}
.lockcard{padding:16px 16px 14px}
.lockcard .lockhd{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:14.5px}
.lockcard .lockhd svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent-solid);stroke-width:1.9}
.lockcard p{margin:0 0 9px;font-size:12.8px;line-height:2;color:var(--sub)}
.lockcard b{color:var(--text)}
.lockcard .btn{margin-top:4px}
.empty{padding:34px 18px;text-align:center;color:var(--sub);font-weight:600;font-size:13px;line-height:1.9}
/* ── splash ── */
#splash{position:fixed;inset:0;background:#000;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;transition:opacity .4s}
#splash.hide{opacity:0;pointer-events:none}
#splash img{width:110px;height:110px;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
#splash .mini{background:#FFDB00;color:#141416;font-size:11px;font-weight:800;border-radius:7px;padding:4px 10px;letter-spacing:2px;font-family:"Inter"}
#splash .dot{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;position:relative;margin-top:8px}
#splash .dot::after{content:"";position:absolute;width:14px;height:100%;border-radius:2px;background:#FFDB00;animation:load 1s infinite}
@keyframes pop{from{opacity:0;transform:skewX(-4deg) scale(.85)}to{opacity:1;transform:skewX(-4deg) scale(1)}}
@keyframes load{0%{left:-14px}100%{left:36px}}

/* ── onboarding ── */
#onb{position:fixed;inset:0;background:var(--bg);z-index:400;display:none;flex-direction:column;max-width:420px;margin:0 auto;padding:20px}
#onb.show{display:flex}
#onb .art{flex:1;display:flex;align-items:center;justify-content:center}
#onb .art .bub{width:200px;height:200px;border-radius:50%;background:rgba(255,219,0,.14);display:flex;align-items:center;justify-content:center;animation:pop .5s}
#onb .art svg{width:92px;height:92px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#onb h2{font-size:22px;font-weight:800;text-align:center;margin-bottom:10px}
#onb p{font-size:14px;color:var(--sub);text-align:center;line-height:2;font-weight:500;margin-bottom:22px;padding:0 14px}
#onb .dots{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
#onb .dots div{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .2s}
#onb .dots div.on{width:22px;border-radius:4px;background:var(--accent-solid)}
#onb .skip{text-align:center;color:var(--sub);font-size:13px;font-weight:700;padding:14px;cursor:pointer}

/* ── connect wizard ── */
.steps{display:flex;align-items:center;gap:0;margin:6px 6px 18px}
.steps .st{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
.steps .st .c{width:30px;height:30px;border-radius:50%;background:var(--card2);color:var(--sub);font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;font-family:"Inter";transition:all .2s}
.steps .st span{font-size:10.5px;font-weight:700;color:var(--sub)}
.steps .st.on .c{background:var(--accent-solid);color:var(--on-accent)}
.steps .st.on span{color:var(--text)}
.steps .st.done .c{background:var(--up-bg);color:var(--accent)}
.steps .ln{flex:1;height:2px;background:var(--line);margin:0 6px 20px}
.gcard{display:flex;gap:12px;background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--sh-sm);margin-bottom:10px;align-items:flex-start}
.gcard .n{width:26px;height:26px;border-radius:50%;background:var(--up-bg);color:var(--accent);font-weight:800;font-family:"Inter";
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.gcard b{font-size:13.5px;display:block;margin-bottom:3px}
.gcard p{font-size:12px;color:var(--sub);line-height:1.9;font-weight:500}
.perm{display:flex;align-items:center;justify-content:space-between;padding:11px 4px;font-size:13.5px;font-weight:700}
.perm+.perm{border-top:1px solid var(--line)}
/* ── psychology test ── */
.psybar{height:5px;border-radius:3px;background:var(--card2);overflow:hidden;margin:2px 0 8px}
.psybar i{display:block;height:100%;background:var(--accent-solid);border-radius:3px;transition:width .25s}
.psycount{font-size:12px;color:var(--sub);font-weight:700;margin-bottom:10px;text-align:center}
.srow.psyopt{gap:11px}
.srow.psyopt .psydot{width:19px;height:19px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--line);transition:border-color .12s,background .12s}
.srow.psyopt.on .psydot{border-color:var(--accent-solid);background:var(--accent-solid);
  box-shadow:inset 0 0 0 3.5px var(--card)}
.srow.psyopt.on .t1{color:var(--text);font-weight:700}
.psymrow{display:flex;justify-content:space-between;align-items:baseline;font-size:12.8px;
  font-weight:600;color:var(--sub);margin:11px 0 5px}
.psymrow b{color:var(--text);font-weight:800}
.psym{height:7px;border-radius:4px;background:var(--card2);overflow:hidden}
.psym i{display:block;height:100%;border-radius:4px;transition:width .3s}

/* the plan form is the only screen with multi-line fields */
.fld textarea{width:100%;border:none;background:transparent;color:var(--text);font-family:inherit;
  font-size:14px;font-weight:600;line-height:1.9;resize:vertical;outline:none;padding:0}
.fld textarea::placeholder{color:var(--sub);font-weight:500}

/* ── signals ── */
/* .stat4 is a 2-column grid; entry/stop/target needs 3, so it gets its own
   class instead of redefining one other screens depend on. */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:12px;overflow:hidden;margin-top:2px}
.stat3>div{background:var(--card);padding:10px 8px;text-align:center}
.stat3 span{display:block;font-size:10.5px;color:var(--sub);font-weight:700;margin-bottom:3px}
.stat3 b{font-size:13px;font-weight:800}
.sigwhy{font-size:12.5px;line-height:2;color:var(--sub);margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sigfoot{font-size:11px;color:var(--sub);font-weight:600;line-height:1.8;padding-top:8px;text-align:center}

/* ── airdrops ── */
.airlogo{width:42px;height:42px;border-radius:12px;flex-shrink:0;object-fit:cover;background:var(--card2)}
.airlogo.lt{display:flex;align-items:center;justify-content:center;font-family:"Inter";
  font-weight:800;font-size:17px;color:var(--on-accent);background:var(--y-grad)}
/* `.steps` is already a HORIZONTAL stepper used elsewhere; a numbered vertical
   list needs its own class rather than redefining that one. Fourth time this
   has come up — see .note, .chev and .stat4. */
.reqs{margin:8px 0 4px}
.reqs>div{display:flex;gap:9px;align-items:flex-start;padding:6px 0}
.reqs i{width:20px;height:20px;border-radius:50%;background:var(--card2);color:var(--text);
  font-family:"Inter";font-style:normal;font-weight:800;font-size:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.reqs span{font-size:12.5px;line-height:1.9;color:var(--sub);font-weight:600}

/* The wallet is the app's home, so it sits in the middle of four tabs as a
   raised accent button rather than a fourth equal icon. */
.tab.mid{position:relative}
.tab.mid svg{width:46px;height:46px;padding:12px;border-radius:16px;margin-top:-16px;
  background:var(--y-grad);stroke:var(--on-accent);stroke-width:2.1;
  box-shadow:0 6px 16px rgba(255,219,0,.35)}
.tab.mid.on svg{stroke:var(--on-accent)}
.tab.mid.on{color:var(--accent)}

/* ── DCA bot card, laid out from the real Cornix card ──
   Round dark glyph · name truncated on one line, pair beneath · market badge
   on its own row · action button top-right · hairline divider · THREE
   BORDERLESS figures (Cornix uses whitespace between them, not a grid) ·
   full-bleed area chart · footer with a pill left and the age right. */
.bot{background:var(--card);border-radius:16px;box-shadow:var(--sh-sm);
  border:1px solid var(--line);padding:14px;margin-bottom:11px}
.botrow{display:flex;align-items:flex-start;gap:11px}
.botic{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-family:"Inter";font-weight:800;
  font-size:16px;background:var(--text);color:var(--card)}
.botnm{flex:1;min-width:0}
.botnm b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.35}
.botnm>span{font-size:12.5px;color:var(--sub);font-weight:600}
.botbadges{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
/* Cornix tints the market badge BLUE, not grey — measured at 4x. A grey chip
   reads as disabled next to a blue action button; the tint is what makes it
   look like a category rather than a dimmed state. */
.botbadges .badge{background:rgba(11,115,219,.11);color:var(--link)}
.botbadges .badge.up{background:var(--up-bg);color:var(--up)}
.botbadges .badge.warn{background:var(--warn-bg);color:var(--warn)}
.botcopy{border:none;background:var(--link);color:#fff;font-family:inherit;
  font-weight:800;font-size:12.5px;padding:8px 15px;border-radius:9px;
  cursor:pointer;flex-shrink:0}
.botcopy.ghost{background:var(--card2);color:var(--sub)}
.botcopy:disabled{opacity:.45}
.botdiv{height:1px;background:var(--line);margin:13px -14px 0}

/* No cell borders here on purpose — Cornix separates these with space alone,
   and a grid reads heavier than the numbers deserve. */
.perf{display:grid;grid-template-columns:repeat(3,1fr);padding:13px 0 2px}
.perf>div{text-align:center}
.perf .v{font-size:15px;font-weight:800;direction:ltr;line-height:1.3}
.perf .k{font-size:10.5px;color:var(--sub);font-weight:600;margin-top:3px}

.dcaspark{width:calc(100% + 28px);height:60px;display:block;margin:6px -14px 0}
.botfoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.pillo{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:7px;
  background:var(--warn-bg);color:var(--warn)}
.age{font-size:11px;color:var(--sub);font-weight:600}
.dcalim{font-size:11px;color:var(--warn);font-weight:600;line-height:1.9;margin-top:6px}

/* ═════════ trade history: one filled order per row ═════════
   Reads left-to-right in RTL as: what happened, when, what it cost, what it
   made. The direction glyph is the only saturated thing in the row so the
   eye can scan a column of them and see the pattern of buys and sells
   without reading a word. */
.fill{display:flex;align-items:flex-start;gap:var(--s3);padding:13px var(--s4);position:relative;
  transition:background .12s}
.fill:active{background:var(--card2)}
.fill+.fill::before{content:"";position:absolute;top:0;right:62px;left:var(--s4);height:1px;background:var(--line)}
.fill.dim{opacity:.45}
.fico{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px}
.fico svg{width:16px;height:16px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fico.buy{background:var(--up-bg)}.fico.buy svg{stroke:var(--up)}
.fico.sell{background:var(--down-bg)}.fico.sell svg{stroke:var(--down)}
.fill .fmid{flex:1;min-width:0}
.fill .f1{font-size:var(--fs-base);font-weight:800;display:flex;align-items:center;gap:5px;
  flex-wrap:wrap;letter-spacing:-.01em}
.fill .f2{font-size:var(--fs-sm);margin-top:4px;font-weight:600;color:var(--text)}
.fill .f3{font-size:var(--fs-cap);color:var(--sub);margin-top:2px;font-weight:600}
.fill .fend{text-align:left;flex-shrink:0;padding-top:1px}
.fill .fpnl{font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
.fill .ffee{font-size:var(--fs-micro);color:var(--sub);margin-top:3px;font-weight:600}
.fbadge{font-size:var(--fs-micro);font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:.02em;
  line-height:1.5;display:inline-flex;align-items:center}
.fbadge.open{background:var(--up-bg);color:var(--up)}
.fbadge.close{background:rgba(11,115,219,.12);color:var(--link)}
.fbadge.forced{background:var(--down-bg);color:var(--down)}
.fbadge.trig{background:var(--warn-bg);color:var(--warn)}
.fbadge.void{background:var(--card2);color:var(--sub)}
.fday{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-cap);color:var(--sub);
  font-weight:800;margin:var(--s4) var(--s4) var(--s1);letter-spacing:.01em}
.fday::after{content:"";flex:1;height:1px;background:var(--line)}

/* ═════════ open position ═════════
   Hierarchy, top to bottom: which market and which way, then the number the
   user actually came to see, then the facts behind it, then how protected it
   is, then what can be done about it. */
.pcard{cursor:pointer;transition:background .12s}
.pcard:active{background:var(--card2)}
.pcard .ph{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s4) var(--s3)}
.pcard .ph .sym{font-size:var(--fs-md);font-weight:800;letter-spacing:-.015em}
.pcard .ph .lv{font-size:var(--fs-micro);font-weight:800;color:var(--sub);background:var(--card2);
  padding:3px 7px;border-radius:var(--r-xs);line-height:1.5;display:inline-flex;align-items:center}
.pcard .ppnl{margin-right:auto;text-align:left}
.pcard .ppnl .v{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.pcard .ppnl .r{font-size:var(--fs-sm);font-weight:700;margin-top:2px}

/* Three columns of label-over-value. Row gap is larger than column gap so the
   grid reads as rows of facts, not as a block of text. */
.pcard .pgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s2);
  padding:0 var(--s4) var(--s3)}
.pcard .pgrid2 .k{font-size:var(--fs-micro);color:var(--sub);font-weight:700;margin-bottom:3px;
  letter-spacing:.01em}
.pcard .pgrid2 .v{font-size:var(--fs-base);font-weight:700;letter-spacing:-.01em}

/* Liquidation runway. A percentage is a number to interpret; a bar that is
   nearly full or nearly empty is understood before it is read. */
.pcard .liqrow{padding:0 var(--s4) var(--s3)}
.pcard .liqmeter{height:5px;border-radius:3px;background:var(--card2);overflow:hidden;position:relative}
.pcard .liqmeter i{display:block;height:100%;border-radius:3px;
  transition:width .4s cubic-bezier(.3,.7,.4,1),background .3s}
.pcard .liqlab{display:flex;justify-content:space-between;font-size:var(--fs-micro);
  color:var(--sub);font-weight:700;margin-top:5px}

/* Protection: two slots whose lit state mirrors what is armed on the venue. */
.pcard .prot{display:flex;gap:var(--s2);padding:0 var(--s4) var(--s3)}
.pcard .slot{flex:1;display:flex;align-items:center;gap:6px;background:var(--card2);
  border-radius:var(--r-sm);padding:9px 11px;font-size:var(--fs-cap);font-weight:700;
  border:1px solid transparent}
.pcard .slot .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pcard .slot .num{margin-right:auto;font-size:var(--fs-sm);font-weight:800}
.pcard .slot.tp{border-color:rgba(0,173,127,.18)}.pcard .slot.tp .dot{background:var(--up)}
.pcard .slot.sl{border-color:rgba(219,66,107,.18)}.pcard .slot.sl .dot{background:var(--down)}
/* An empty slot must look empty — not like a set value that happens to be —. */
.pcard .slot.off{opacity:.5;border-color:transparent;border-style:dashed;
  border-color:var(--line)}
.pcard .slot.off .dot{background:var(--sub)}
.pcard .pbtns{display:flex;gap:var(--s2);padding:0 var(--s4) var(--s4)}

/* ═════════ RTL label/number anchoring ═════════
   `.num` sets direction:ltr so «64,832.4» and «0.0043 BTC» keep their digits,
   commas and Latin units in the right order. But `text-align` defaults to
   `start`, and `start` resolves against each element's OWN direction — so a
   Persian label anchored to the RIGHT of its cell sat above a number anchored
   to the LEFT of the same cell, and the column read as broken.

   Anchoring is a property of the LAYOUT (RTL), not of the glyph run, so every
   number that a Persian label names is pinned right. Figures deliberately
   opposite the flow — a list row's trailing column — keep their own side. */
.pcard .pgrid2 .v, .pcard .pgrid2 .k,
.pgrid .v, .pgrid .k,
.fill .f2, .fill .f3{text-align:right}
.fld input, .fld input::placeholder{text-align:right}

/* Outlined destructive action: on a card whose whole point is the numbers, a
   solid rose block pulled the eye away from them and read as an alert. */
.btn.dnout{color:var(--down);border:1px solid var(--down);background:transparent;box-shadow:none}
.btn.dnout:active{background:var(--down-bg)}

/* Skeletons should breathe rather than blink — a shimmer reads as "loading",
   a hard pulse reads as "broken". */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk{background:linear-gradient(90deg,var(--card2) 25%,var(--line) 50%,var(--card2) 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm)}

/* Respect the OS setting. Motion-sensitive users get the same layout with
   nothing sliding, which is a correctness requirement, not a nicety. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ═════════ ledger (history screen) ═════════
   Same anatomy as a fill row: a categorical glyph, what happened, and the
   money with its time under it. Day headers are sticky so the date a row
   belongs to is on screen while that day is. */
.txsum{display:flex;justify-content:space-between;font-size:var(--fs-cap);color:var(--sub);
  font-weight:700;padding:2px 6px var(--s2)}
.txday{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-cap);color:var(--sub);font-weight:800;letter-spacing:.01em;
  padding:var(--s2) 6px var(--s1);
  background:linear-gradient(var(--bg) 65%,transparent)}
.txday::after{content:"";flex:1;height:1px;background:var(--line)}
.tx{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);position:relative;
  transition:background .12s}
.tx:active{background:var(--card2)}
.tx+.tx::before{content:"";position:absolute;top:0;right:62px;left:var(--s4);height:1px;background:var(--line)}
.tx .txic{width:34px;height:34px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.tx .txic svg{width:16px;height:16px;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.txic.tx-trade{background:var(--card2)}.txic.tx-trade svg{stroke:var(--text)}
.txic.tx-dep{background:var(--up-bg)}.txic.tx-dep svg{stroke:var(--up)}
.txic.tx-wd{background:var(--down-bg)}.txic.tx-wd svg{stroke:var(--down)}
.txic.tx-swap{background:rgba(11,115,219,.12)}.txic.tx-swap svg{stroke:var(--link)}
.tx .txmid{flex:1;min-width:0}
.tx .txmid .t1{font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
.tx .txmid .t2{font-size:var(--fs-cap);color:var(--sub);margin-top:3px;font-weight:600;
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .txend{text-align:left;flex-shrink:0}
.tx .txend .t1{font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
.tx .txend .t2{font-size:var(--fs-micro);color:var(--sub);margin-top:3px;font-weight:600}

/* ═════════ markets list ═════════
   A thousand rows have to stay legible and cheap: one icon, the pair, the
   figure that ranks it, and the change. No per-row chart — the one that used
   to be here was generated from a seeded PRNG, not from prices. */
.mktcount{display:flex;justify-content:space-between;font-size:var(--fs-cap);
  color:var(--sub);font-weight:700;padding:2px 6px 6px}
.mrow{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s4);
  position:relative;cursor:pointer;transition:background .12s}
.mrow:active{background:var(--card2)}
.mrow+.mrow::before{content:"";position:absolute;top:0;right:62px;left:var(--s4);
  height:1px;background:var(--line)}
.mrow .mmid{flex:1;min-width:0}
.mrow .mmid .t1{font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
.mrow .mmid .t1 .q{color:var(--sub);font-size:var(--fs-cap);font-weight:700;margin-inline-start:2px}
.mrow .mmid .t2{font-size:var(--fs-cap);color:var(--sub);margin-top:3px;font-weight:600;text-align:right}
.mrow .mend{text-align:left;flex-shrink:0;min-width:92px}
.mrow .mend .t1{font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
/* The change is the column the eye scans, so it gets the colour and a fixed
   box — ragged percentages are why a market list reads as noise. */
.mrow .chg{display:inline-block;margin-top:4px;font-size:var(--fs-cap);font-weight:800;
  border-radius:var(--r-xs);padding:2.5px 6px;min-width:60px;text-align:center}
.mrow .chg.up{background:var(--up-bg);color:var(--up)}
.mrow .chg.dn{background:var(--down-bg);color:var(--down)}
.srch #mkt-clr{font-size:15px;line-height:1}

/* ═════════ assistant hub ═════════
   A two-column grid of destinations rather than a stack of list rows: these
   are six peers, not a ranked list, and a grid says so. */
.asub{font-size:var(--fs-sm);color:var(--sub);font-weight:600;line-height:1.9;
  padding:0 6px var(--s3);text-align:center}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.acard{background:var(--card);border-radius:var(--r);border:var(--edge);box-shadow:var(--sh-sm);
  padding:var(--s4) var(--s3);cursor:pointer;transition:transform .12s;text-align:right}
.acard:active{transform:scale(.97)}
.acard .aic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:10px}
.acard .aic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.acard b{display:block;font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
.acard span{display:block;font-size:var(--fs-cap);color:var(--sub);font-weight:600;
  margin-top:3px;line-height:1.7}

/* ═════════ airdrop card ═════════ */
.aircard{background:var(--card);border-radius:var(--r);border:var(--edge);box-shadow:var(--sh-sm);
  padding:var(--s4);margin:var(--s2) 0}
.aircard.over{opacity:.6}
.airhd{display:flex;align-items:center;gap:11px}
.airlogo{width:42px;height:42px;border-radius:13px;object-fit:cover;flex-shrink:0;background:var(--card2)}
.airlogo.lt{display:flex;align-items:center;justify-content:center;font-family:"Inter";
  font-weight:800;font-size:17px;color:var(--sub)}
.airnm{flex:1;min-width:0}
.airnm .t1{font-size:var(--fs-md);font-weight:800;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;letter-spacing:-.01em}
.airnm .t2{font-size:var(--fs-cap);color:var(--sub);font-weight:600;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The score is the thing that ranks the list, so it gets a dial of its own
   rather than sitting in the badge row as one chip among several. */
.airscore{flex-shrink:0;text-align:center;border-radius:var(--r-sm);padding:6px 9px;
  background:var(--card2);min-width:46px}
.airscore b{display:block;font-size:var(--fs-md);font-weight:800;line-height:1.1}
.airscore i{display:block;font-size:9px;font-style:normal;color:var(--sub);font-weight:700;margin-top:1px}
.airscore.hi{background:var(--up-bg)}.airscore.hi b{color:var(--up)}
.airscore.mid{background:var(--warn-bg)}.airscore.mid b{color:var(--warn)}
.airscore.lo{background:var(--card2)}.airscore.lo b{color:var(--sub)}
.airfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.airfacts .k{display:block;font-size:var(--fs-micro);color:var(--sub);font-weight:700;margin-bottom:4px}
.airfacts .v{display:block;font-size:var(--fs-sm);font-weight:800}
.airmeta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:10px;
  font-size:var(--fs-cap);color:var(--sub);font-weight:600}
.airstatus{margin-top:10px;background:var(--card2);color:var(--sub);border-radius:var(--r-sm);
  padding:8px 11px;font-size:var(--fs-cap);font-weight:700}

/* ═════════ signal card ═════════
   Entry, stop and target were three bare numbers. The bar underneath is the
   same three numbers as a picture: how far the price has to fall against you
   versus how far it has to run for you. */
.sigcard{background:var(--card);border-radius:var(--r);border:var(--edge);box-shadow:var(--sh-sm);
  padding:var(--s4);margin:var(--s2) 0}
.sigcard.bad{opacity:.72}
.sighd{display:flex;align-items:center;gap:var(--s2)}
.signm{flex:1;min-width:0}
.signm .t1{font-size:var(--fs-md);font-weight:800;display:flex;align-items:center;gap:7px;letter-spacing:-.015em}
.signm .t2{font-size:var(--fs-cap);color:var(--sub);font-weight:600;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sside{font-size:var(--fs-micro);font-weight:800;border-radius:var(--r-xs);padding:3px 8px;line-height:1.5}
.sside.b{background:var(--up-bg);color:var(--up)}
.sside.s{background:var(--down-bg);color:var(--down)}
.sigprices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.sigprices .k{display:block;font-size:var(--fs-micro);color:var(--sub);font-weight:700;margin-bottom:4px}
.sigprices .v{display:block;font-size:var(--fs-base);font-weight:800}
.sigrr{margin-top:var(--s3)}
.rrbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--card2)}
.rrbar i.r{background:var(--down)}
.rrbar i.w{flex:1;background:var(--up)}
.rrlab{display:flex;justify-content:space-between;align-items:center;margin-top:6px;
  font-size:var(--fs-cap);color:var(--sub);font-weight:700}
.rrlab .rrx{font-weight:800;color:var(--text)}
.sigrec{margin-top:10px;font-size:var(--fs-cap);color:var(--sub);font-weight:600;line-height:1.9}
.sigrec b{color:var(--text)}
.sigexp{margin-top:9px;font-size:var(--fs-cap);color:var(--sub);font-weight:600}

/* ═════════ psychology test ═════════ */
.psyintro{padding:var(--s6) var(--s5);text-align:center}
.psyglyph{font-size:36px;margin-bottom:var(--s2)}
.psyttl{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--s2);letter-spacing:-.015em}
.psyintro p{font-size:var(--fs-base);color:var(--sub);line-height:2.1;margin-bottom:var(--s4)}
.psydraft{font-size:var(--fs-cap);color:var(--sub);font-weight:600;margin-top:10px}
.psycount{display:flex;justify-content:space-between;font-size:var(--fs-cap);
  color:var(--sub);font-weight:700;margin:8px 6px 10px}
.psyq{font-size:var(--fs-md);font-weight:800;line-height:1.95;margin-bottom:var(--s3);letter-spacing:-.01em}
.psyarchk{font-size:var(--fs-cap);color:var(--sub);font-weight:700;margin-bottom:5px}
.psyarch{font-size:var(--fs-xl);font-weight:800;margin-bottom:var(--s3);letter-spacing:-.02em}

/* ═════════ insight — the home doorway and the report ═════════ */
.inscta{background:var(--card);border-radius:var(--r);border:var(--edge);box-shadow:var(--sh-sm);
  padding:var(--s4);margin:var(--s3) 0;cursor:pointer;transition:transform .12s;position:relative;overflow:hidden}
.inscta::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  top:-120px;left:-50px;background:radial-gradient(circle,rgba(255,219,0,.18),transparent 68%);pointer-events:none}
.inscta:active{transform:scale(.985)}
.inscta.locked{cursor:default;opacity:.75}
.inscta.locked::before,.inscta.busy::before{opacity:.5}
.inshd{display:flex;align-items:flex-start;gap:11px;position:relative;z-index:1}
.insic{width:40px;height:40px;border-radius:13px;background:var(--card2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px}
.instx{flex:1;min-width:0}
.instx > b{display:block;font-size:var(--fs-md);font-weight:800;letter-spacing:-.015em}
.instx span b{font-weight:800;color:var(--text)}
.instx span{display:block;font-size:var(--fs-cap);color:var(--sub);font-weight:600;
  margin-top:4px;line-height:1.8}
.insmeta{display:flex!important;flex-wrap:wrap;gap:5px;margin-top:6px}
.cf{font-style:normal;font-size:var(--fs-micro);font-weight:800;border-radius:var(--r-xs);
  padding:3px 7px;line-height:1.5;display:inline-flex;align-items:center}
.cf-h{background:var(--up-bg);color:var(--up)}
.cf-m{background:rgba(11,115,219,.12);color:var(--link)}
.cf-l{background:var(--warn-bg);color:var(--warn)}
.cf-x{background:var(--card2);color:var(--sub)}
.cf-p{background:rgba(139,61,255,.13);color:#8B3DFF}
.cf-c{background:var(--down-bg);color:var(--down)}
.cf.big{font-size:var(--fs-cap);padding:5px 11px;margin-bottom:var(--s3)}
.inshead{font-size:var(--fs-base);font-weight:700;line-height:1.95;margin-top:var(--s3);
  position:relative;z-index:1}
.insbtn{margin-top:var(--s3);background:var(--y-grad);color:var(--on-accent);border-radius:var(--r-md);
  padding:12px;text-align:center;font-size:var(--fs-base);font-weight:800;position:relative;z-index:1}
.inserr{font-size:var(--fs-cap);color:var(--down);font-weight:700;margin-top:10px;position:relative;z-index:1}
.insfoot{display:flex;align-items:center;gap:5px;margin-top:var(--s3);color:var(--accent);
  font-size:var(--fs-cap);font-weight:800;position:relative;z-index:1}
.insfoot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.insspin{width:20px;height:20px;border-radius:50%;flex-shrink:0;align-self:center;
  border:2.5px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.inshero{padding:var(--s5) var(--s4);text-align:center}
.insheadbig{font-size:var(--fs-lg);font-weight:800;line-height:1.85;letter-spacing:-.015em}
.insreason{font-size:var(--fs-cap);color:var(--sub);font-weight:600;line-height:1.95;margin-top:var(--s3)}
.insrow{display:flex;justify-content:space-between;font-size:var(--fs-base);font-weight:700}
.insmech{font-size:var(--fs-sm);color:var(--sub);font-weight:600;line-height:2;margin-top:10px}
.insgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3) var(--s2)}
.insgrid .k{display:block;font-size:var(--fs-micro);color:var(--sub);font-weight:700;margin-bottom:4px}
.insgrid .v{display:block;font-size:var(--fs-base);font-weight:800}
/* Severity as a left edge, so scrolling a column of findings shows their
   weight before any of them is read. */
.insf{padding:var(--s4);border-right:3px solid var(--line)}
.insf.sev-c{border-right-color:var(--down)}
.insf.sev-s{border-right-color:var(--warn)}
.insf.sev-m{border-right-color:var(--sub)}
.insfhd{display:flex;align-items:center;gap:var(--s2);margin-bottom:10px}
.insfhd b{flex:1;font-size:var(--fs-base);font-weight:800;letter-spacing:-.01em}
.insev{display:flex;gap:8px;font-size:var(--fs-cap);font-weight:600;line-height:1.9;margin-top:5px}
.insev .k{color:var(--sub);flex-shrink:0;min-width:38px}
.insread{font-size:var(--fs-sm);line-height:2;margin-top:10px;font-weight:600}
.insrec{padding:var(--s4);display:flex;gap:11px}
.insrn{width:26px;height:26px;border-radius:50%;background:var(--accent-solid);color:var(--on-accent);
  font-weight:800;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.insrb{flex:1;min-width:0}
.insrb b{display:block;font-size:var(--fs-base);font-weight:800;line-height:1.7;margin-bottom:5px}
.insmiss{font-size:var(--fs-cap);color:var(--sub);font-weight:600;line-height:1.9;padding:4px 0}
.insmiss::before{content:"• "}
.psyalign{display:flex;gap:10px;padding:8px 0}
.psyalign+.psyalign{border-top:1px solid var(--line);margin-top:6px}
.psyalign .tag{flex-shrink:0;font-size:var(--fs-micro);font-weight:800;border-radius:var(--r-xs);
  padding:3px 8px;height:fit-content}
.psyalign .tag.ok{background:var(--up-bg);color:var(--up)}
.psyalign .tag.no{background:var(--warn-bg);color:var(--warn)}
.psyalign p{font-size:var(--fs-cap);font-weight:600;line-height:1.95}
.psyalign p+p{margin-top:5px}

/* ═════════ journal ═════════
   The snapshot is filled in for the trader; only the prose and the taps are
   theirs. Everything above the textarea is read-only fact. */
.jsub{font-size:var(--fs-sm);color:var(--sub);font-weight:600;line-height:1.95;margin-bottom:var(--s3)}
.jsnap{background:var(--card2);border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.jsnaphd{display:flex;align-items:center;gap:7px;font-size:var(--fs-base);font-weight:800;
  margin-bottom:10px;letter-spacing:-.01em}
.jfacts{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.jfact{display:flex;justify-content:space-between;font-size:var(--fs-cap);font-weight:600}
.jfact span{color:var(--sub)}
.jwarn{margin-top:10px;background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);
  padding:7px 10px;font-size:var(--fs-cap);font-weight:700}
.fld textarea{width:100%;border:none;outline:none;background:transparent;resize:none;
  font-family:inherit;font-size:var(--fs-base);font-weight:600;color:var(--text);
  line-height:1.9;margin-top:4px;text-align:right}
.fld textarea::placeholder{color:var(--sub);font-weight:500}
.jlab{font-size:var(--fs-cap);color:var(--sub);font-weight:700;margin:var(--s3) 2px 7px}
.jchips{display:flex;flex-wrap:wrap;gap:6px}
.jchips div{background:var(--card2);border:1px solid transparent;border-radius:var(--r-pill);
  padding:7px 13px;font-size:var(--fs-cap);font-weight:700;color:var(--sub);cursor:pointer;
  transition:all .14s}
.jchips div:active{transform:scale(.95)}
.jchips div.on{background:var(--accent-solid);color:var(--on-accent);border-color:var(--accent-solid)}
.jchips#j-conv div{min-width:44px;text-align:center}
.jplan{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s4);font-size:var(--fs-base);font-weight:700}
.jyn{display:flex;gap:6px;flex-shrink:0}
.jyn div{background:var(--card2);border:1px solid transparent;border-radius:var(--r-sm);
  padding:7px 16px;font-size:var(--fs-cap);font-weight:800;color:var(--sub);cursor:pointer;transition:all .14s}
.jyn div[data-v="1"].on{background:var(--up-bg);color:var(--up);border-color:var(--up)}
.jyn div[data-v="0"].on{background:var(--down-bg);color:var(--down);border-color:var(--down)}
.jfoot{font-size:var(--fs-cap);color:var(--sub);font-weight:600;text-align:center;
  margin-top:10px;line-height:1.8}

/* The gap, made visible — a count, not a nag. */
.jpend{display:flex;align-items:center;gap:11px;background:var(--warn-bg);border-radius:var(--r);
  padding:12px var(--s4);margin:var(--s3) 0;cursor:pointer;font-size:var(--fs-cap);
  color:var(--warn);font-weight:700;line-height:1.8}
.jpn{background:var(--warn);color:#fff;border-radius:var(--r-sm);min-width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
  font-size:var(--fs-base)}

/* ═════════ report freshness, delta and history ═════════ */
.insupd{margin-top:10px;font-size:var(--fs-cap);color:var(--accent);font-weight:700;
  position:relative;z-index:1}
.dltgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px var(--s3)}
.dlt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:var(--fs-cap);font-weight:600}
.dlt span{color:var(--sub)}
.dlt b{font-size:var(--fs-base);font-weight:800}
.hrow{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);
  position:relative;cursor:pointer;transition:background .12s}
.hrow:active{background:var(--card2)}
.hrow+.hrow::before{content:"";position:absolute;top:0;right:var(--s4);left:var(--s4);
  height:1px;background:var(--line)}
.hmid{flex:1;min-width:0}
.hmid .t1{font-size:var(--fs-sm);font-weight:700;line-height:1.7}
.hmid .t2{font-size:var(--fs-micro);color:var(--sub);font-weight:600;margin-top:3px}
.hend{font-size:var(--fs-base);font-weight:800;flex-shrink:0}

/* Progress toward the analysis threshold. A bar that fills is what keeps
   someone going; «داده کافی نیست» is what makes them close the app. */
.thmeter{height:7px;border-radius:4px;background:var(--card2);overflow:hidden;margin-top:var(--s3)}
.thmeter i{display:block;height:100%;border-radius:4px;background:var(--y-grad);
  transition:width .5s cubic-bezier(.3,.7,.4,1)}
.thlab{display:flex;justify-content:space-between;font-size:var(--fs-cap);
  color:var(--sub);font-weight:700;margin-top:7px}

/* The journal cue: a bar on the trade screen, not a sheet over it. A trader
   placing orders quickly must not have to dismiss a modal between them. */
.jcue{display:flex;align-items:center;gap:var(--s3);background:var(--up-bg);
  border-radius:var(--r);padding:11px var(--s4);margin-bottom:var(--s3)}
.jcuetx{flex:1;min-width:0}
.jcuetx b{display:block;font-size:var(--fs-base);font-weight:800;color:var(--up)}
.jcuetx span{display:block;font-size:var(--fs-cap);color:var(--sub);
  font-weight:600;margin-top:3px;line-height:1.7}
.jcuex{background:none;border:none;color:var(--sub);font-size:15px;
  cursor:pointer;padding:4px 2px;flex-shrink:0}

/* ── the English app ──────────────────────────────────────────────────────
 *
 * Nothing above this line changes. Everything here is scoped to
 * html[dir=ltr], which only the English reader ever gets, so the Persian app
 * that has been running for months cannot be affected by an edit down here.
 *
 * Two kinds of rule live in this block, and they are worth telling apart:
 *
 *   1. Mirrored anchoring. The RTL layout pins labels right and figures left.
 *      In LTR that reads backwards — the figure drifts away from the label it
 *      belongs to. These flip the pair. This is the whole bug the user caught
 *      in Persian with a screenshot («عدد ها زیر عنوان ها قرار ندارن»); it
 *      would come straight back in English if the block were missing.
 *
 *   2. Glyphs that encode a direction. A «‹» chevron pointing at the row it
 *      opens points the wrong way once the row is mirrored.
 *
 * Money is deliberately NOT mirrored. `$1,234.56` is LTR in both languages,
 * and it was already forced that way at line 298; leave it alone. */

html[dir=ltr] body { direction: ltr; }

/* 1. mirrored anchoring — label leads, figure trails.
      Derived by listing every direction-dependent rule in this file rather than
      by looking at screens and guessing which class was responsible; the first
      attempt named `.qcard`, which does not exist, so the assistant cards stayed
      right-aligned under a left-aligned icon. If a rule above sets text-align,
      it has a counterpart here. */
html[dir=ltr] .row .end,
html[dir=ltr] .fill .fend,
html[dir=ltr] .tx .txend,
html[dir=ltr] .mrow .mend,
html[dir=ltr] .pcard .ppnl,
html[dir=ltr] .xc input,
html[dir=ltr] .obh span:last-child { text-align: right; }

html[dir=ltr] .fill .f2,
html[dir=ltr] .fill .f3,
html[dir=ltr] .fld input,
html[dir=ltr] .fld input::placeholder,
html[dir=ltr] .fld textarea,
html[dir=ltr] .tx .txmid .t2,
html[dir=ltr] .mrow .mmid .t2,
html[dir=ltr] .acard { text-align: left; }

html[dir=ltr] .pcard .ppnl { margin-right: 0; margin-left: auto; }

/* 2. direction-bearing glyphs. The chevron is a character, not an icon, so it
      cannot be flipped with a transform without also flipping its optical
      weight; substituting the mirrored character is the honest fix. */
html[dir=ltr] .chev { transform: scaleX(-1); display: inline-block; }

/* The Latin face is already first in the stack; Vazirmatn only ever served the
   Persian glyphs. Dropping it in LTR stops it winning the digits, where its
   figures are a little narrower than Inter's and made columns fail to line up. */
html[dir=ltr] { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* The back chevron is drawn pointing the way "back" lies in Persian: right.
   In English that is forward, so every detail screen offered an arrow that
   pointed away from where it went. Selecting it by its path data is exact —
   the app draws this one shape only for back — and needs no markup change on
   the fifteen screens that use it. */
html[dir=ltr] .ibtn path[d="M9 6l6 6-6 6"] {
  transform-box: fill-box; transform-origin: center; transform: scaleX(-1);
}
/* Consent to let the signal bot trade with the same key (2026-09-14). */
.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 2px 4px;font-size:13.5px;font-weight:700;line-height:1.7;color:var(--text);cursor:pointer}
.consent input{width:20px;height:20px;margin-top:3px;flex-shrink:0;accent-color:#FFDB00}
.consent-sub{color:var(--sub);font-size:12px;line-height:1.8;margin:0 32px 12px 2px}