/* =====================================================================
   Fidato Trade — UI styles (mobile-first, dark trading theme)
   ===================================================================== */
:root{
  --bg:#120b16; --bg2:#1a1020; --card:#1e1424; --card2:#2b1d34; --line:#352541;
  --txt:#f8fafc; --mut:#948b9b; --mut2:#6b6272;
  --acc:#ec4899; --acc2:#3a1f3f; --acc3:#8b5cf6; --up:#10b981; --down:#ef4444; --orange:#f59e0b; --yellow:#eab308;
  --acc-grad:linear-gradient(135deg,#ec4899 0%,#8b5cf6 100%);
  --border-grad:linear-gradient(135deg,rgba(236,72,153,.35),rgba(139,92,246,.08));
  --radius:16px; --nav-h:64px; --top-h:60px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
:root[data-theme="light"]{
  --bg:#fbf6fa; --bg2:#ffffff; --card:#ffffff; --card2:#fdf0f8; --line:#f3d9ec;
  --txt:#1f1324; --mut:#7a6680; --mut2:#a393aa; --acc2:#fbe2f3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:15px}
body{background-image:radial-gradient(900px 560px at 85% -8%,rgba(236,72,153,.16),transparent),radial-gradient(760px 500px at -10% 30%,rgba(139,92,246,.12),transparent);background-attachment:fixed,fixed;background-repeat:no-repeat}
:root[data-theme="light"] body{background-image:radial-gradient(900px 560px at 85% -8%,rgba(236,72,153,.10),transparent),radial-gradient(760px 500px at -10% 30%,rgba(139,92,246,.08),transparent)}
a{color:var(--acc);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:var(--txt)}
img{max-width:100%}
.hidden{display:none!important}
.mut{color:var(--mut)} .small{font-size:12.5px} .up{color:var(--up)} .down{color:var(--down)} .orange{color:var(--orange)} .yellow{color:var(--yellow)}
.center{text-align:center} .row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .grow{flex:1}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}

/* ---------- Layout ---------- */
#app{min-height:100%;display:flex;flex-direction:column}
.topbar{height:var(--top-h);display:flex;align-items:center;gap:10px;padding:0 14px;background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{font-weight:800;letter-spacing:-.4px;font-size:18px;white-space:nowrap}
.brand b{color:var(--acc)}
.brand .dot{display:inline-block;width:26px;height:26px;border-radius:8px;vertical-align:-7px;margin-right:7px;filter:drop-shadow(0 4px 10px rgba(236,72,153,.45))}
.auth .brand .dot{width:40px;height:40px;border-radius:12px;vertical-align:-11px;margin-right:9px}
.view{flex:1;padding-bottom:calc(var(--nav-h) + 12px)}
.page{max-width:720px;margin:0 auto;padding:16px}
.page h1{font-size:22px;margin:4px 0 4px;letter-spacing:-.3px}
.page .sub{color:var(--mut);margin:0 0 16px;font-size:14px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:14px;margin-bottom:6px}

.bottomnav{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-top:1px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mut2);font-size:11px;font-weight:600}
.bottomnav a.active{color:var(--txt)} .bottomnav a.active svg{color:var(--acc);filter:drop-shadow(0 0 6px rgba(236,72,153,.6))}
.bottomnav svg{width:22px;height:22px}

/* ---------- Cards / lists ---------- */
.card{background:linear-gradient(165deg,color-mix(in srgb,var(--card) 100%,white 3%),var(--card)) padding-box,var(--border-grad) border-box;border:1px solid transparent;border-radius:var(--radius);padding:16px;box-shadow:0 10px 28px -14px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.03) inset}
.card + .card{margin-top:12px}
.card h3{margin:0 0 10px;font-size:15px}
.list{background:linear-gradient(165deg,color-mix(in srgb,var(--card) 100%,white 3%),var(--card)) padding-box,var(--border-grad) border-box;border:1px solid transparent;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 28px -14px rgba(0,0,0,.55)}
.li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
a.li,button.li{color:var(--txt);width:100%;text-align:left}
a.li:active,button.li:active{background:var(--card2)}
.li .ico{width:36px;height:36px;border-radius:10px;background:var(--card2);display:grid;place-items:center;flex:none}
.li .ico svg{width:19px;height:19px;color:var(--mut)}
.li .t{font-weight:600}.li .d{color:var(--mut);font-size:12.5px;margin-top:2px}
.chev{margin-left:auto;color:var(--mut2)}
.section-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);font-weight:700;margin:22px 4px 8px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--card2);color:var(--mut)}
.badge.green{background:rgba(34,197,94,.14);color:var(--up)} .badge.red{background:rgba(239,68,68,.14);color:var(--down)}
.badge.blue{background:rgba(139,92,246,.18);color:#c4b5fd} .badge.yellow{background:rgba(234,179,8,.14);color:var(--yellow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:linear-gradient(165deg,color-mix(in srgb,var(--card) 100%,white 3%),var(--card)) padding-box,var(--border-grad) border-box;border:1px solid transparent;border-radius:var(--radius);padding:14px;box-shadow:0 10px 28px -14px rgba(0,0,0,.5)}
.stat .k{color:var(--mut);font-size:12px}.stat .v{font-size:20px;font-weight:800;margin-top:4px;background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.empty{color:var(--mut);text-align:center;padding:32px 16px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{color:var(--mut2);font-weight:600;text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line)}

/* ---------- Forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px;font-weight:500}
.input,select.input,textarea.input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);outline:none;transition:border .15s}
.input:focus{border-color:var(--acc)}
textarea.input{min-height:110px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--mut);margin:10px 0}
.check input{width:18px;height:18px;accent-color:var(--acc);margin-top:1px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:12px;background:var(--acc-grad);color:#fff;font-weight:700;transition:transform .08s,opacity .15s,box-shadow .15s;box-shadow:0 8px 20px -6px rgba(236,72,153,.55)}
.btn:active{transform:scale(.97)} .btn[disabled]{opacity:.5;pointer-events:none;box-shadow:none}
.btn.block{width:100%} .btn.ghost{background:var(--card2);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.green{background:var(--up);box-shadow:0 8px 20px -6px rgba(34,197,94,.45)} .btn.red{background:var(--down);box-shadow:0 8px 20px -6px rgba(239,68,68,.45)} .btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;padding:10px;border-radius:9px;font-weight:700;color:var(--mut);font-size:13.5px}
.seg button.on{background:var(--acc-grad);color:#fff;box-shadow:0 4px 14px -4px rgba(236,72,153,.5)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);font-weight:600;font-size:13.5px}
.chip.on{border-color:transparent;background:var(--acc-grad);color:#fff;box-shadow:0 4px 14px -4px rgba(236,72,153,.5)}
:root[data-theme="light"] .chip.on{color:var(--acc)}
.divider{display:flex;align-items:center;gap:12px;color:var(--mut2);font-size:12px;margin:18px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);font-weight:600;margin-bottom:10px}
.social svg{width:20px;height:20px}

/* ---------- Auth ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(900px 500px at 80% -10%,rgba(236,72,153,.28),transparent),radial-gradient(700px 400px at -10% 110%,rgba(139,92,246,.18),transparent),var(--bg)}
.auth .box{width:100%;max-width:420px}
.auth .brand{font-size:26px;text-align:center;display:block;margin-bottom:6px}
.auth .tag{color:var(--mut);text-align:center;margin-bottom:22px;font-size:14px}
.auth .card{padding:22px}
.tabs2{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:18px}
.tabs2 a{flex:1;text-align:center;padding:10px;border-radius:999px;color:var(--mut);font-weight:700;font-size:14px;transition:background .15s,color .15s}
.tabs2 a.on{background:var(--acc-grad);color:#fff;box-shadow:0 4px 14px -4px rgba(236,72,153,.5)}
.risk-note{font-size:11.5px;color:var(--mut2);text-align:center;margin-top:16px;line-height:1.5}

/* ---------- Onboarding tips ---------- */
.tips{min-height:100vh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;padding:20px 18px}
.tips .progress{display:flex;gap:6px;margin-bottom:26px}
.tips .progress i{flex:1;height:4px;border-radius:4px;background:var(--line)} .tips .progress i.on{background:var(--acc)}
.tips .hero{width:84px;height:84px;border-radius:24px;background:var(--acc-grad);display:grid;place-items:center;margin-bottom:22px;box-shadow:0 14px 34px -10px rgba(236,72,153,.6)}
.tips .hero svg{width:42px;height:42px;color:#fff}
.tips h2{font-size:26px;margin:0 0 6px;letter-spacing:-.4px}
.tips .subt{color:var(--acc);font-weight:600;margin-bottom:14px}
.tips p{color:var(--mut);line-height:1.6}
.tips ul{list-style:none;padding:0;margin:14px 0}
.tips li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;line-height:1.5}
.tips li b{color:var(--txt)}
.tips .note{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.25);color:#facc15;border-radius:12px;padding:12px;font-size:13.5px;margin-top:14px}
.tips .foot{margin-top:auto;padding-top:20px}
.tips .step{color:var(--mut2);font-size:12.5px;text-align:center;margin-top:10px}

/* ---------- Trade screen ---------- */
.acct{display:flex;align-items:center;margin-left:auto;gap:8px}
.balance-btn{display:flex;flex-direction:column;align-items:flex-end;padding:5px 10px;border-radius:10px;background:var(--card2);border:1px solid var(--line);line-height:1.15}
.balance-btn .lbl{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--orange)}
.balance-btn .lbl.real{color:var(--up)}
.balance-btn .amt{font-weight:800;font-size:15px}
.acct .switch{width:34px;height:40px;border-radius:10px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center}
.finance-btn{padding:10px 12px;border-radius:10px;background:var(--acc-grad);color:#fff;font-weight:700;font-size:13px;box-shadow:0 6px 16px -5px rgba(236,72,153,.55)}

.trade-layout{display:grid;grid-template-columns:1fr;gap:0}
.chart-wrap{position:relative;background:var(--bg);border-bottom:1px solid var(--line)}
.chart-top{display:flex;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap}
.pair-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:700}
.pair-btn .pct{font-size:12px;font-weight:700}
.tf{margin-left:auto;display:flex;gap:4px}
.tf button,.ctype button{padding:6px 9px;border-radius:8px;font-size:12px;font-weight:700;color:var(--mut);background:var(--card)}
.tf button.on,.ctype button.on{background:var(--acc-grad);color:#fff;box-shadow:0 3px 10px -3px rgba(236,72,153,.55)}
.ctype{display:flex;gap:4px}
#chart{height:calc(100vh - 380px);min-height:280px}

.panel{padding:12px;background:var(--bg2)}
.panel .grid2{gap:10px}
.ctl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.ctl .k{font-size:11px;color:var(--mut);font-weight:600;text-align:center}
.ctl .v{display:flex;align-items:center;justify-content:space-between;margin-top:3px}
.ctl .v button{width:30px;height:30px;border-radius:8px;background:var(--card2);font-size:18px;font-weight:700;color:var(--mut)}
.ctl .v input,.ctl .v .val{width:100%;text-align:center;background:none;border:0;font-weight:800;font-size:17px;outline:none}
.payout{display:flex;justify-content:space-between;align-items:center;margin:10px 2px;font-size:13px}
.payout b{font-size:17px}
.updown{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.updown button{height:56px;border-radius:14px;font-weight:800;font-size:17px;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s}
.updown button:active{transform:scale(.97)}
.updown .u{background:linear-gradient(135deg,#34d679,var(--up));box-shadow:0 10px 24px -8px rgba(34,197,94,.55)} .updown .d{background:linear-gradient(135deg,#f66,var(--down));box-shadow:0 10px 24px -8px rgba(239,68,68,.55)}
.updown button svg{width:22px;height:22px}
.open-trades{padding:0 12px 12px;background:var(--bg2)}
.ot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-top:8px;font-size:13.5px;box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.ot .cd{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800}
.timer-ring{width:30px;height:30px}

@media (min-width:980px){
  .trade-layout{grid-template-columns:1fr 330px;height:calc(100vh - var(--top-h) - var(--nav-h))}
  .chart-wrap{border-bottom:0;border-right:1px solid var(--line)}
  #chart{height:calc(100vh - var(--top-h) - var(--nav-h) - 60px)}
  .side{overflow:auto;background:var(--bg2)}
  .panel .grid2{grid-template-columns:1fr}
}

/* ---------- Pair selector modal ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
.sheet{background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);width:100%;max-width:640px;max-height:92vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:slideup .2s ease-out;border:1px solid var(--line);box-shadow:0 -20px 60px -20px rgba(0,0,0,.6)}
@media (min-width:700px){.sheet-bg{align-items:center}.sheet{border-radius:20px;max-height:86vh}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 10px}
.sheet-h h2{margin:0;font-size:20px}
.xbtn{width:36px;height:36px;border-radius:10px;background:var(--card);display:grid;place-items:center;font-size:18px}
.sheet-body{overflow:auto;padding:0 16px 18px}
.cat-tabs{display:flex;gap:6px;padding:0 16px 12px;overflow-x:auto}
.cat-tabs button{padding:9px 14px;border-radius:10px;font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--mut);background:var(--card);white-space:nowrap}
.cat-tabs button.on{background:var(--acc-grad);color:#fff;box-shadow:0 4px 14px -4px rgba(236,72,153,.5)}
.pair-tools{display:flex;gap:8px;padding:0 16px 10px}
.fav-btn{display:flex;align-items:center;gap:6px;padding:0 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:700}
.fav-btn.on{border-color:var(--yellow);color:var(--yellow)}
.search{flex:1;position:relative}
.search input{width:100%;padding:12px 12px 12px 38px;border-radius:12px;border:1px solid var(--line);background:var(--card);outline:none}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--mut)}
.sortby{padding:0 16px 8px;font-size:13px;color:var(--mut)}
.sortby select{background:none;border:0;color:var(--txt);font-weight:700;outline:none}
.sortby select option{background:var(--card)}
.pair{display:flex;align-items:center;gap:10px;min-height:72px;padding:10px 12px;border-radius:12px;background:var(--card);margin-bottom:6px;border:1px solid transparent;width:100%;text-align:left;transition:background .15s}
.pair.sel{background:linear-gradient(165deg,rgba(236,72,153,.18),rgba(139,92,246,.1));border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.pair.closed{opacity:.5}
.star{width:30px;height:30px;display:grid;place-items:center;color:var(--mut2);flex:none;transition:transform .15s}
.star.on{color:var(--yellow)} .star:active{transform:scale(1.3)}
.star svg{width:19px;height:19px}
.icons{position:relative;width:42px;height:32px;flex:none}
.icons .i1,.icons .i2{position:absolute;width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--card2);display:grid;place-items:center;font-size:9px;font-weight:800;border:2px solid var(--card)}
.icons .i1{left:0;top:0;z-index:2}.icons .i2{left:15px;top:7px}
.icons img{width:100%;height:100%;object-fit:cover}
.pair .nm{font-weight:700}.pair .nm small{color:var(--mut);font-weight:600}
.pair .pf{font-size:12px;margin-top:3px;color:var(--mut)}
.pair .pf b.o{color:var(--orange)} .pair .pf b.y{color:var(--yellow)}
.chg{margin-left:auto;display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;flex:none}
.chg.up{background:rgba(34,197,94,.13)} .chg.down{background:rgba(239,68,68,.13)}
.selmark{width:24px;height:24px;border-radius:50%;background:var(--acc-grad);display:grid;place-items:center;color:#fff;font-size:13px;flex:none;box-shadow:0 4px 10px -2px rgba(236,72,153,.6)}

/* ---------- Toast / modal ---------- */
#toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px)}
.toast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--acc);padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:14px;animation:slidedown .2s}
.toast.ok{border-left-color:var(--up)} .toast.err{border-left-color:var(--down)}
.modal{background:linear-gradient(165deg,color-mix(in srgb,var(--card) 100%,white 4%),var(--card)) padding-box,var(--border-grad) border-box;border:1px solid transparent;border-radius:18px;padding:22px;width:min(92vw,400px);animation:pop .15s;box-shadow:0 30px 70px -20px rgba(0,0,0,.65)}
.modal h3{margin:0 0 8px}.modal p{color:var(--mut);margin:0 0 18px;line-height:1.5}
.result{font-size:34px;font-weight:800;text-align:center;margin:8px 0}

/* ---------- Profile ---------- */
.phead{display:flex;align-items:center;gap:14px}
.avatar{width:64px;height:64px;border-radius:20px;background:var(--acc-grad);display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;flex:none;overflow:hidden;box-shadow:0 10px 26px -8px rgba(236,72,153,.6)}
.avatar img{width:100%;height:100%;object-fit:cover}
.level{display:flex;gap:8px;margin-top:10px}
.lvl{flex:1;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);text-align:center}
.lvl.on{border-color:transparent;background:linear-gradient(165deg,rgba(236,72,153,.22),rgba(139,92,246,.14));box-shadow:0 0 0 1.5px var(--acc) inset}
.lvl b{display:block;font-size:14px}.lvl span{font-size:11.5px;color:var(--mut)}
.lvl svg{width:20px;height:20px;margin:0 auto 6px}
.prog{height:8px;border-radius:8px;background:var(--card2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--acc-grad);border-radius:8px}

/* ---------- Education / Help ---------- */
.course{display:flex;gap:12px;align-items:center}
.course .num{width:42px;height:42px;border-radius:12px;background:linear-gradient(165deg,rgba(236,72,153,.22),rgba(139,92,246,.18));color:#f0abfc;display:grid;place-items:center;font-weight:800;flex:none;box-shadow:0 0 0 1px rgba(236,72,153,.25) inset}
.lesson{border-left:3px solid var(--acc);padding:2px 0 2px 14px;margin:18px 0}
.lesson h4{margin:0 0 6px}.lesson p{color:var(--mut);line-height:1.65;margin:6px 0}
.lesson ul{color:var(--mut);line-height:1.8;margin:6px 0;padding-left:18px}
.important{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.25);border-radius:12px;padding:12px 14px;color:#facc15;font-size:13.5px;line-height:1.5;margin:14px 0}
.faq{border-bottom:1px solid var(--line)}
.faq summary{padding:15px 16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--mut)} .faq[open] summary:after{content:"–"}
.faq div{padding:0 16px 15px;color:var(--mut);line-height:1.6;white-space:pre-line}
.msg{padding:10px 12px;border-radius:12px;margin:8px 0;max-width:85%;line-height:1.5;font-size:14px;white-space:pre-wrap}
.msg.user{background:var(--acc2);margin-left:auto}.msg.admin{background:var(--card2)}

.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes slideup{from{transform:translateY(40px);opacity:0}}
@keyframes slidedown{from{transform:translateY(-14px);opacity:0}}
@keyframes pop{from{transform:scale(.95);opacity:0}}
@keyframes tabin{from{opacity:0;transform:translateX(10px)}}
.tabin{animation:tabin .18s ease-out}
@media (max-width:440px){.hide-sm{display:none}.finance-btn{padding:10px 9px}}
:where(.page,.topbar,.panel,.open-trades,.sheet,.chart-top,.modal,.tips,.list) svg{width:20px;height:20px;flex:none}
.sheet > *:not(.sheet-body){flex:none}
.pair-btn{white-space:nowrap}
.pair-btn .icons{transform:scale(.85)}
.lastp{font-variant-numeric:tabular-nums;font-size:16px}
.chart-top{row-gap:8px}
.pair .pf{white-space:nowrap;font-size:11.5px}
.updown button svg{width:22px;height:22px}
.tips .hero svg{width:42px;height:42px}
.brand{color:var(--txt)}
@media (max-width:979px){#chart{height:calc(100vh - 430px);min-height:260px}}

/* ---------- Stitch-design uplift: avatar nav, auth promo, inputs, chips ---------- */
.avatar-btn{width:38px;height:38px;border-radius:50%;background:var(--acc-grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none;box-shadow:0 6px 16px -4px rgba(236,72,153,.55);overflow:hidden}
.avatar-btn img{width:100%;height:100%;object-fit:cover}

.auth .dot{width:64px;height:64px;border-radius:20px;margin:0;box-shadow:0 0 0 0}
.auth .logo-badge{position:relative;display:inline-grid;place-items:center;margin-bottom:10px}
.auth .logo-badge:before{content:"";position:absolute;inset:-10px;border-radius:26px;background:var(--acc-grad);filter:blur(18px);opacity:.55}

.input-wrap{position:relative}
.input-wrap .input{padding-left:40px}
.input-wrap .ic-l{position:absolute;left:13px;top:50%;translate:0 -50%;color:var(--mut2);pointer-events:none}
.input-wrap .ic-l svg{width:18px;height:18px}
.input-wrap .ic-r{position:absolute;right:10px;top:50%;translate:0 -50%;padding:6px;color:var(--mut2)}
.input-wrap .ic-r svg{width:18px;height:18px}

.promo-card{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,rgba(236,72,153,.14),rgba(139,92,246,.1));border:1px solid rgba(236,72,153,.25);border-radius:var(--radius);padding:14px;margin-top:16px}
.promo-card .ico{width:38px;height:38px;border-radius:11px;background:var(--card2);display:grid;place-items:center;font-size:18px;flex:none;color:var(--acc)}
.promo-card .ico svg{width:19px;height:19px}
.promo-card b{color:var(--acc)}

.legal-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:14px;font-size:11.5px;color:var(--mut2)}
.legal-row a{color:var(--mut2)}
.legal-row span{opacity:.5}

.quick-amt{display:flex;gap:8px;margin-top:8px}
.quick-amt button{flex:1;padding:8px 0;border-radius:10px;background:var(--card2);border:1px solid var(--line);color:var(--mut);font-weight:700;font-size:12.5px;transition:background .15s,color .15s}
.quick-amt button.on{background:var(--acc-grad);color:#fff;border-color:transparent}

.expand-btn{width:30px;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--mut)}
.expand-btn svg{width:16px;height:16px}
.chart-wrap.expanded #chart{height:calc(100vh - var(--top-h) - 140px)!important;min-height:420px}

.updown button .sub{font-size:11px;font-weight:700;opacity:.85;display:block;margin-top:1px}
.ot{border-left:3px solid var(--line)}
.ot.dir-up{border-left-color:var(--up)} .ot.dir-down{border-left-color:var(--down)}
.ot .ret{margin-left:auto;text-align:right}
.ot .ret b{display:block;color:var(--up)} .ot .ret span{font-size:10.5px;color:var(--mut2);text-transform:uppercase;letter-spacing:.04em}

.wallet-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x proximity}
.wallet-scroll .stat{flex:0 0 150px;scroll-snap-align:start}
.wallet-scroll::-webkit-scrollbar{display:none}

.gw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.gw-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.gw-card .ico{width:34px;height:34px;border-radius:10px;background:var(--acc2);display:grid;place-items:center;margin:0 auto 6px}
.gw-card .ico svg{width:18px;height:18px}
.gw-card .t{font-weight:700;font-size:12.5px}.gw-card .d{color:var(--mut2);font-size:10.5px;margin-top:2px}

.hero-stat{background:linear-gradient(135deg,rgba(236,72,153,.16),rgba(139,92,246,.1));border:1px solid rgba(236,72,153,.25);border-radius:var(--radius);padding:16px}
.hero-stat .v{font-size:28px;font-weight:800;margin-top:2px}

/* ---- Phase A: trades/kyc/bonuses/education/help/support/settings/security/notifications ---- */
.li.dir-up{border-left:3px solid var(--up)}
.li.dir-down{border-left:3px solid var(--down)}

.steps3{display:flex;gap:6px;margin-bottom:16px}
.steps3 i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.steps3 i.on{background:var(--acc-grad)}

.dropzone{border:1.5px dashed rgba(139,92,246,.35);border-radius:12px;background:var(--card);padding:18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--acc);background:var(--acc2)}
.dropzone .ico{width:38px;height:38px;border-radius:11px;background:var(--acc2);display:grid;place-items:center;margin:0 auto 8px;color:var(--acc)}
.dropzone .ico svg{width:18px;height:18px}
.dropzone .t{font-weight:700;font-size:13.5px}
.dropzone .d{color:var(--mut2);font-size:11.5px;margin-top:2px}
.dropzone.has-file{border-style:solid;border-color:var(--up)}
.dropzone input[type=file]{display:none}

.msg{background:var(--card);border:1px solid var(--line)}
.msg.user{background:linear-gradient(135deg,rgba(236,72,153,.16),rgba(139,92,246,.1));border:1px solid rgba(236,72,153,.25)}

.topic-tile{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--txt)}
.topic-tile .ico{width:34px;height:34px;border-radius:10px;background:var(--acc2);display:grid;place-items:center;color:var(--acc)}
.topic-tile .ico svg{width:18px;height:18px}
.topic-tile .t{font-weight:700;font-size:13.5px}
.topic-tile .d{color:var(--mut2);font-size:11.5px}
.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.li.unread{border-left:3px solid var(--acc);background:linear-gradient(90deg,rgba(236,72,153,.08),transparent 40%)}
.li.session-current{border-left:3px solid var(--up);background:linear-gradient(90deg,rgba(16,185,129,.08),transparent 40%)}

.seg2{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.seg2 button{flex:1;padding:9px;border-radius:999px;font-weight:700;color:var(--mut);font-size:12.5px;white-space:nowrap}
.seg2 button.on{background:var(--acc-grad);color:#fff;box-shadow:0 4px 14px -4px rgba(236,72,153,.5)}