:root{
  --bg:#07070a; --bg2:#0d0d12; --card:#121218; --card2:#17171f; --line:#2a2618;
  --gold:#e8b84a; --gold2:#ffd98a; --gold3:#a8781f; --txt:#f3ede0; --mute:#9a937f;
  --ok:#3ddc84; --bad:#ff5468;
  --grad:linear-gradient(135deg,#ffe29a 0%,#e8b84a 45%,#b8862b 100%);
  --glow:0 0 0 1px rgba(232,184,74,.18),0 10px 30px -12px rgba(232,184,74,.35);
  --r:16px; --side:250px;
  --font:"Vazirmatn",system-ui,sans-serif; --display:"Cinzel",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:var(--font);min-height:100%}
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(232,184,74,.08),transparent 60%),var(--bg)}
a{color:var(--gold);cursor:pointer;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
.brand{font-family:var(--display);letter-spacing:.06em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;direction:ltr}
.brand span{font-size:.7em}
.brand.xl{font-size:clamp(34px,5vw,58px);line-height:1}
.goldtxt{color:var(--gold)}

.btn{border:0;border-radius:12px;padding:11px 18px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.2s}
.btn.gold{background:var(--grad);color:#1a1205;box-shadow:0 6px 20px -8px rgba(232,184,74,.7)}
.btn.gold:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold3)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.w{width:100%}
.icon-btn{background:var(--card);border:1px solid var(--line);color:var(--gold);border-radius:12px;width:40px;height:40px;font-size:17px;position:relative}
.dot{position:absolute;top:7px;left:8px;width:8px;height:8px;border-radius:50%;background:var(--bad)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(rgba(7,7,10,.82),rgba(7,7,10,.95)),url(/static/img/hero.jpg) center/cover}
.login-card{width:min(420px,100%);background:rgba(18,18,24,.9);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:24px;padding:34px 28px;text-align:center;box-shadow:var(--glow)}
.login-logo{width:86px;height:86px;object-fit:contain}
.login-card h1{font-size:36px;margin-top:6px}
.tag{color:var(--mute);font-size:13px;margin:4px 0 24px;direction:ltr}
.login-card label{display:block;text-align:right;font-size:13px;color:var(--mute);margin-bottom:8px}
input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:13px 14px;font-family:inherit;font-size:15px;outline:none;margin-bottom:12px}
input:focus{border-color:var(--gold)}
#code{text-align:center;letter-spacing:.6em;font-size:22px}
.hint{font-size:12px;color:var(--mute);margin-top:12px;line-height:1.9}
.err{color:var(--bad);font-size:13px;margin-top:10px;min-height:18px}
#step2 .btn+.btn{margin-top:8px}

/* layout */
#app{display:flex;min-height:100vh}
.side{width:var(--side);flex-shrink:0;background:linear-gradient(180deg,#0e0d11,#09090c);border-left:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:18px;z-index:30}
.side-brand{display:flex;gap:10px;align-items:center;flex-direction:column;text-align:center}
.side-brand img{width:56px}
.side-brand b{font-family:var(--display);font-size:22px;background:var(--grad);-webkit-background-clip:text;color:transparent;display:block}
.side-brand small{color:var(--mute);font-size:11px;direction:ltr;display:block}
nav#nav{display:flex;flex-direction:column;gap:3px}
nav#nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--txt);font-size:14px;transition:.15s;border:1px solid transparent}
nav#nav a i{font-style:normal;width:22px;text-align:center}
nav#nav a:hover{background:var(--card)}
nav#nav a.on{background:linear-gradient(90deg,rgba(232,184,74,.05),rgba(232,184,74,.22));border-color:rgba(232,184,74,.35);color:var(--gold2)}
nav#nav .sep{height:1px;background:var(--line);margin:8px 4px}
.side-card{margin-top:auto;background:linear-gradient(160deg,#1a160c,#0d0c10);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.side-card img{width:40px}
.side-card small{color:var(--mute);font-size:12px;margin-bottom:6px}
.scrim{display:none}

.main{flex:1;min-width:0;padding:18px 22px 40px}
.top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.menu-btn{display:none}
.top-links{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.top-links a{padding:9px 13px;border-radius:12px;color:var(--mute);font-size:13px;white-space:nowrap;border-bottom:2px solid transparent}
.top-links a:hover{color:var(--txt)}
.top-links a.on{color:var(--gold2);border-color:var(--gold);background:var(--card)}
.top-right{display:flex;gap:10px;align-items:center}
.me{display:flex;gap:9px;align-items:center;background:var(--card);border:1px solid var(--line);padding:5px 12px 5px 6px;border-radius:14px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#1a1205;display:grid;place-items:center;font-weight:800}
.me b{font-size:13px;display:block;direction:ltr}
.online{color:var(--ok);font-size:11px}

.page{display:none;animation:fade .3s ease}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.hero{border-radius:20px;border:1px solid var(--line);min-height:210px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(270deg,rgba(7,7,10,0) 30%,rgba(7,7,10,.6) 70%),url(/static/img/hero.jpg) center/cover;box-shadow:var(--glow);overflow:hidden}
[dir=rtl] .hero{background:linear-gradient(90deg,rgba(7,7,10,.1) 30%,rgba(7,7,10,.85) 75%),url(/static/img/hero.jpg) left center/cover}
.hero-txt h2{font-size:clamp(18px,2.6vw,30px);font-weight:800;margin:10px 0 6px}
.hero-txt p{color:var(--txt);direction:ltr;text-align:right}
.hero-txt p i{color:var(--gold);font-style:normal}
.hero-txt p em{color:var(--gold);font-style:normal}
.hero-badge{display:flex;flex-direction:column;gap:8px;align-items:center;align-self:flex-end}
.hero-badge b{font-size:18px}
.hero-badge span{background:var(--grad);color:#1a1205;padding:7px 16px;border-radius:10px;font-weight:700;font-size:13px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.stat{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;gap:12px;align-items:center}
.stat>i{font-style:normal;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(232,184,74,.1);border:1px solid rgba(232,184,74,.3);font-size:20px;flex-shrink:0}
.stat small{color:var(--mute);font-size:11.5px;display:block}
.stat b{font-size:22px;display:block;direction:ltr;text-align:right;margin:3px 0}
.stat em{font-style:normal;color:var(--ok);font-size:12px}
.stats.mini .stat b{font-size:18px}

.panel{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:16px}
.panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;font-size:14px}
.panel-h a{font-size:12px}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;margin-top:14px}
.chips button{background:transparent;border:1px solid var(--line);color:var(--mute);border-radius:8px;padding:3px 10px;font-size:12px;margin-inline-start:4px}
.chips button.on{background:var(--grad);color:#1a1205;border-color:transparent}
#chart{width:100%;height:200px;direction:ltr}
.chart-x{display:flex;justify-content:space-between;color:var(--mute);font-size:11px;direction:ltr;padding:4px 2px 0}
.empty{color:var(--mute);font-size:13px;text-align:center;padding:30px 0}

.tx{list-style:none;display:flex;flex-direction:column;gap:6px}
.tx li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:rgba(255,255,255,.015)}
.tx li i{font-style:normal;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(232,184,74,.1);border:1px solid rgba(232,184,74,.3)}
.tx li div{flex:1;min-width:0}
.tx li b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx li small{color:var(--mute);font-size:11px;direction:ltr;display:block;text-align:right}
.tx .amt{font-weight:700;direction:ltr;font-size:14px}
.pos{color:var(--ok)}.neg{color:var(--bad)}

.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.q{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;gap:10px;align-items:center;cursor:pointer;transition:.2s;color:var(--txt);text-align:right}
.q:hover{border-color:var(--gold3);box-shadow:var(--glow);transform:translateY(-2px)}
.q i{font-style:normal;font-size:22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--grad);flex-shrink:0;filter:saturate(1.1)}
.q b{font-size:13px;display:block}
.q small{color:var(--mute);font-size:11px}
.q.vip{background:linear-gradient(110deg,rgba(7,7,10,.2),rgba(7,7,10,.9)),url(/static/img/vip.jpg) center/cover}

.promo{border-radius:var(--r);border:1px solid var(--line);min-height:150px;padding:22px;background:linear-gradient(90deg,rgba(7,7,10,0) 20%,rgba(7,7,10,.92) 65%),url(/static/img/vip.jpg) left center/cover;display:flex;align-items:center}
.promo h3{font-size:26px}
.promo p{color:var(--mute);font-size:13px;margin:4px 0 14px;direction:ltr;text-align:right}
.info ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:9px;font-size:13px}
.info li{display:flex;justify-content:space-between;gap:8px}
.info li span{color:var(--mute)}
.info li span::before{content:"✓ ";color:var(--gold)}
.invite{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.gift{font-size:34px}
.gift.big{font-size:60px}
.admin{margin-top:14px}

/* chat (bot panel) */
.chatwrap{display:flex;flex-direction:column;height:calc(100vh - 110px);min-height:480px;padding:0;overflow:hidden}
.chatwrap .panel-h{padding:14px 16px;margin:0;border-bottom:1px solid var(--line)}
.feed{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;background:radial-gradient(600px 300px at 50% 0,rgba(232,184,74,.05),transparent)}
.msg{width:min(640px,94%);align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;animation:fade .25s}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,#3a2c0c,#251c08);border-color:rgba(232,184,74,.4);border-radius:16px 16px 4px 16px}
.msg .body{white-space:pre-wrap;line-height:1.95;font-size:14px;word-break:break-word}
.msg .body b,.msg .body strong{color:var(--gold2)}
.msg .body code{background:#000;border:1px dashed var(--gold3);border-radius:6px;padding:1px 6px;cursor:copy;direction:ltr;unicode-bidi:embed;font-size:13px}
.msg .body pre{background:#000;border:1px solid var(--line);padding:10px;border-radius:10px;overflow-x:auto;direction:ltr;text-align:left}
.msg .body blockquote{border-inline-start:3px solid var(--gold);padding-inline-start:10px;color:var(--mute);margin:6px 0}
.msg .body .spoiler{background:var(--mute);color:transparent;border-radius:4px;cursor:pointer}
.msg .body .spoiler.open{background:none;color:inherit}
.msg img.media{max-width:100%;border-radius:12px;margin-bottom:8px;display:block}
.msg a.file{display:inline-block;margin-bottom:8px}
.kb{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.kb .row{display:flex;gap:6px}
.kb button,.kb a{flex:1;background:linear-gradient(180deg,#221c0e,#16130b);border:1px solid rgba(232,184,74,.35);color:var(--gold2);border-radius:10px;padding:10px 8px;font-size:13px;font-weight:600;line-height:1.5;transition:.15s;text-align:center;min-width:0}
.kb button:hover,.kb a:hover{background:var(--grad);color:#1a1205}
.kb button:disabled{opacity:.5}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--bg2)}
.composer input{margin:0}
.typing{align-self:flex-start;color:var(--mute);font-size:13px}

.invite-page{max-width:640px;margin:20px auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;padding:30px}
.invite-page p{color:var(--mute);line-height:1.9}
.copybox{display:flex;gap:8px;width:100%}
.copybox input{margin:0;direction:ltr}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--gold3);color:var(--txt);padding:12px 18px;border-radius:12px;z-index:100;max-width:90vw;box-shadow:var(--glow);font-size:14px;line-height:1.8}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:110;padding:20px}
.modal-card{background:var(--card2);border:1px solid var(--gold3);border-radius:18px;padding:22px;max-width:420px;width:100%;box-shadow:var(--glow)}
.modal-card p{white-space:pre-wrap;line-height:1.9;margin-bottom:16px}

.bottom{display:none}

@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (max-width:860px){
  .side{position:fixed;right:0;top:0;transform:translateX(105%);transition:.25s;box-shadow:-20px 0 60px #000}
  .side.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25}
  .menu-btn{display:block}
  .top-links{display:none}
  .me div:last-child{display:none}
  .me{padding:5px}
  .main{padding:12px 12px 96px}
  .hero{padding:20px;min-height:170px;flex-direction:column;align-items:flex-start}
  .hero-badge{align-self:flex-start}
  .stats{gap:10px}
  .stat{padding:12px;flex-direction:column;align-items:flex-start}
  .stat b{font-size:18px}
  .quick{grid-template-columns:repeat(3,1fr);gap:8px}
  .q{flex-direction:column;text-align:center;padding:12px 6px}
  .q small{display:none}
  .chatwrap{height:calc(100vh - 160px)}
  .bottom{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(13,13,18,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20;justify-content:space-around}
  .bottom a{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--mute);gap:2px;min-width:56px}
  .bottom a i{font-style:normal;font-size:20px}
  .bottom a.on{color:var(--gold)}
  .bottom a.mid i{background:var(--grad);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-top:-22px;box-shadow:0 6px 20px -6px rgba(232,184,74,.8)}
}

.iostip{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:12px;align-items:center;background:rgba(20,18,14,.97);border:1px solid var(--gold);border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.8)}
.iostip.hidden{display:none}
.iostip img{width:46px;height:46px;border-radius:12px}
.iostip b{display:block;color:var(--gold);font-size:14px}
.iostip small{display:block;color:var(--mute);font-size:12px;line-height:1.8}
.iostip .sh{color:var(--gold);font-weight:800}
.iostip #iosClose{position:absolute;top:6px;left:8px;background:none;border:0;color:var(--mute);font-size:14px;cursor:pointer}
@supports(-webkit-touch-callout:none){input,textarea,select{font-size:16px!important}}

/* ---- v10: login tabs, sign-up, security, plans, chart ---- */
.err,.toast,.okmsg{white-space:pre-line}
.okmsg{color:var(--ok);font-size:13px;margin-top:10px;line-height:1.8}
.en{color:var(--mute);font-size:.92em;direction:ltr;unicode-bidi:plaintext}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:5px;margin-bottom:18px}
.tabs button{background:transparent;border:0;color:var(--mute);border-radius:10px;padding:9px 4px;font-size:13px;font-weight:700;line-height:1.3}
.tabs button small{display:block;font-weight:400;font-size:10.5px;opacity:.8}
.tabs button.on{background:var(--grad);color:#1a1205}
.tabp .btn+.btn{margin-top:8px}
.otp{text-align:center;letter-spacing:.6em;font-size:22px}
.explain{text-align:right;background:rgba(232,184,74,.06);border:1px solid rgba(232,184,74,.25);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:12.5px;line-height:1.9}
.explain b{color:var(--gold2)}
.explain ol{padding-right:18px;margin:6px 0}
.explain p{margin-top:6px}
.regState{font-size:12.5px;color:var(--mute);margin:12px 0;line-height:1.8}
.regState.ok{color:var(--ok)}.regState.bad{color:var(--bad)}
.login-card{max-height:96vh;overflow-y:auto}
.top-links a small{font-size:10.5px;opacity:.75}
.credTip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;border-color:rgba(232,184,74,.4)}
.credTip small{display:block;color:var(--mute);font-size:12px;margin-top:4px}
.plans{margin-bottom:16px}
.mute{color:var(--mute);font-size:12px}
.planGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.plan{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.plan.vip{border-color:rgba(232,184,74,.35)}
.plan .pt{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.plan .st{font-size:11.5px}.plan .st.ok{color:var(--ok)}.plan .st.bad{color:var(--bad)}.plan .st.warn{color:var(--gold2)}
.plan .pd{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;border-top:1px dashed var(--line)}
.plan .pd span{color:var(--mute)}
.chart-x{display:grid!important}
.chart-x span{text-align:center;white-space:nowrap;overflow:visible}
.chart-sum{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--mute);margin-bottom:6px}
.chart-sum b{color:var(--gold2)}
#chart .bar{fill:rgba(232,184,74,.45)}
.sec-page{max-width:520px;margin:0 auto}
.sec-page h2{margin-bottom:8px}
.sec-page #secIntro{margin-bottom:16px;line-height:1.9}
.lbl{display:block;font-size:13px;color:var(--mute);margin:6px 0 8px}
.copybox button{white-space:nowrap;flex-shrink:0}
.copybox input{cursor:text;user-select:all;-webkit-user-select:all}

/* ---------------- Face ID / Touch ID / fingerprint ---------------- */
.bio-login{margin:2px 0 16px}
.bio-btn{width:100%;background:linear-gradient(180deg,rgba(232,184,74,.10),rgba(232,184,74,.02));border:1px solid rgba(232,184,74,.35);border-radius:20px;padding:20px 16px 16px;color:var(--txt);display:flex;flex-direction:column;align-items:center;gap:4px;transition:.25s;position:relative;overflow:hidden}
.bio-btn:hover{border-color:var(--gold);box-shadow:var(--glow)}
.bio-btn:active{transform:scale(.985)}
.bio-btn b{font-size:16px;margin-top:10px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bio-btn small{color:var(--mute);font-size:12px;direction:ltr}
.bio-btn:disabled{opacity:.85}
.bio-ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 35%,rgba(255,217,138,.16),rgba(18,18,24,.9) 70%);box-shadow:inset 0 0 0 1.5px rgba(232,184,74,.55),0 0 28px -6px rgba(232,184,74,.55)}
.bio-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(232,184,74,.22);animation:bioPulse 2.6s ease-out infinite}
.bio-ring.sm{width:52px;height:52px;flex:none}.bio-ring.sm .bio-ico{width:28px;height:28px}
.bio-ring.lg{width:96px;height:96px;margin:4px auto 14px}.bio-ring.lg .bio-ico{width:50px;height:50px}
.bio-ico{width:40px;height:40px;color:var(--gold2);display:block}
.bio-ico svg{width:100%;height:100%;display:block}
.bio-btn.scan .bio-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:linear-gradient(180deg,transparent 40%,rgba(255,217,138,.45) 50%,transparent 60%);background-size:100% 220%;animation:bioScan 1.1s linear infinite}
@keyframes bioPulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes bioScan{0%{background-position:0 100%}100%{background-position:0 -120%}}
.bio-or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px;margin:16px 0 2px}
.bio-or::before,.bio-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.bio-panel{margin-top:16px}
.bio-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.bio-head h2{font-size:18px;margin:0}
.bio-head small{direction:ltr;display:block;font-size:12px}
.bio-panel>p{line-height:1.9;font-size:13px}
.bio-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:14px 0 10px}
.bio-row b{display:block;font-size:14px}.bio-row small{color:var(--mute);font-size:12px}
.bio-switch{width:54px;height:30px;border-radius:30px;border:1px solid var(--line);background:var(--card2);position:relative;flex:none;transition:.25s;padding:0}
.bio-switch i{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--mute);transition:.25s}
.bio-switch.on{background:var(--grad);border-color:transparent;box-shadow:0 4px 16px -6px rgba(232,184,74,.8)}
.bio-switch.on i{right:27px;background:#1a1205}
.bio-switch:disabled{opacity:.4;cursor:not-allowed}
.bio-list{list-style:none;display:grid;gap:8px}
.bio-list li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(13,13,18,.6)}
.bio-list li.me{border-color:rgba(232,184,74,.45)}
.bio-list li>div{flex:1;min-width:0}
.bio-list b{font-size:13px;display:block}.bio-list b em{font-style:normal;font-size:11px;color:var(--gold);margin-inline-start:6px}
.bio-list small{font-size:11.5px;color:var(--mute)}
.bio-list li.empty{justify-content:center;color:var(--mute);font-size:13px}
.bio-del{background:transparent;border:1px solid var(--line);color:var(--mute);width:32px;height:32px;border-radius:10px;flex:none}
.bio-del:hover{color:var(--bad);border-color:var(--bad)}
.bio-offer{text-align:center}
.bio-offer h3{font-size:19px;margin-bottom:8px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bio-offer p{font-size:13.5px;color:var(--mute)}
.bio-offer .btn+.btn{margin-top:8px}
@media (prefers-reduced-motion:reduce){.bio-ring::after,.bio-btn.scan .bio-ring::before{animation:none}}

/* Password visibility + recovery */
.pw-wrap{position:relative;display:block}.pw-wrap input{padding-left:48px!important}.pw-eye{position:absolute;left:6px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:9px;background:transparent;color:#e8c878;cursor:pointer}.pw-eye:hover{background:rgba(232,200,120,.12)}
.link-btn{display:block;margin:12px auto 4px;border:0;background:transparent;color:#e8c878;text-decoration:underline;cursor:pointer;font:inherit}
.forgot-box{margin-top:12px;padding:14px;border:1px solid rgba(214,177,94,.35);border-radius:12px;background:rgba(20,17,11,.65)}
.forgot-box label{display:block;margin-top:10px}

/* =====================================================================
   v20 — THEME SWITCH: 🖤 Black Gold (default)  ⇄  🤍 White Gold Luxury
   Toggle: button next to "Sign out", on the sign-in card, and the bot's 🎨 button.
   Only colours change; layout and features are untouched.
   ===================================================================== */
.theme-btn{display:inline-grid;place-items:center;padding:0;transition:.25s}
.theme-btn .th-ico{width:20px;height:20px;display:block}
.theme-btn .th-ico svg{width:100%;height:100%;display:block}
.theme-btn:hover{border-color:var(--gold3);box-shadow:var(--glow)}
.theme-btn:active{transform:scale(.94)}
.login-card{position:relative}
.login-theme{position:absolute;top:14px;left:14px;z-index:2}
html.theme-anim,html.theme-anim *{transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s!important}

html[data-theme=light]{
  --bg:#fbf7ee; --bg2:#f5eedd; --card:#ffffff; --card2:#fffdf8; --line:#e8d9b5;
  --gold:#b8892b; --gold2:#94690f; --gold3:#d6b468; --txt:#2b2215; --mute:#85785c;
  --ok:#1f9d5c; --bad:#d23a4f;
  --grad:linear-gradient(135deg,#f7dc96 0%,#dcae4f 45%,#b8862b 100%);
  --glow:0 0 0 1px rgba(184,137,43,.16),0 14px 34px -16px rgba(150,108,25,.38);
  color-scheme:light;
}
html[data-theme=light],html[data-theme=light] body{background:var(--bg);color:var(--txt)}
html[data-theme=light] body{background:radial-gradient(1200px 600px at 80% -10%,rgba(220,174,79,.16),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(220,174,79,.10),transparent 60%),var(--bg)}
html[data-theme=light] .brand,html[data-theme=light] .side-brand b,html[data-theme=light] .bio-btn b,html[data-theme=light] .bio-offer h3{background:linear-gradient(135deg,#c99a35 0%,#8f6413 55%,#b8862b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* sign-in */
html[data-theme=light] .login{background:linear-gradient(rgba(251,247,238,.80),rgba(251,247,238,.94)),url(/static/img/hero.jpg) center/cover}
html[data-theme=light] .login-card{background:rgba(255,255,255,.92);border-color:var(--line);box-shadow:0 0 0 1px rgba(184,137,43,.18),0 30px 60px -28px rgba(120,86,20,.45)}
html[data-theme=light] input{background:#fffdf8;border-color:var(--line);color:var(--txt)}
html[data-theme=light] input::placeholder{color:#b4a684}
html[data-theme=light] input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(220,174,79,.18)}
html[data-theme=light] .tabs{background:var(--bg2)}
html[data-theme=light] .explain{background:rgba(220,174,79,.10);border-color:rgba(184,137,43,.30)}
html[data-theme=light] .forgot-box{background:#fffaf0;border-color:rgba(184,137,43,.35)}
html[data-theme=light] .pw-eye,html[data-theme=light] .link-btn{color:var(--gold)}
html[data-theme=light] .pw-eye:hover{background:rgba(184,137,43,.10)}

/* layout */
html[data-theme=light] .side{background:linear-gradient(180deg,#ffffff,#fbf5e7);border-left-color:var(--line)}
html[data-theme=light] .side-card{background:linear-gradient(160deg,#fbefd2,#fffdf8)}
html[data-theme=light] nav#nav a:hover{background:var(--bg2)}
html[data-theme=light] nav#nav a.on{background:linear-gradient(90deg,rgba(220,174,79,.06),rgba(220,174,79,.24));border-color:rgba(184,137,43,.40);color:var(--gold2)}
html[data-theme=light] .icon-btn,html[data-theme=light] .top-right .me{background:#fff;box-shadow:0 4px 14px -10px rgba(120,86,20,.5)}
html[data-theme=light] .top-links a.on{background:#fff}

/* hero / promo images: ivory veil keeps dark text readable */
html[data-theme=light] .hero{background:linear-gradient(270deg,rgba(251,247,238,0) 30%,rgba(251,247,238,.75) 70%),url(/static/img/hero.jpg) center/cover}
html[data-theme=light] [dir=rtl] .hero,html[data-theme=light][dir=rtl] .hero{background:linear-gradient(90deg,rgba(251,247,238,.05) 28%,rgba(251,247,238,.93) 72%),url(/static/img/hero.jpg) left center/cover}
html[data-theme=light] .hero-txt h2{color:var(--txt)}
html[data-theme=light] .hero-badge b{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55)}
html[data-theme=light] .promo{background:linear-gradient(90deg,rgba(251,247,238,0) 20%,rgba(251,247,238,.95) 65%),url(/static/img/vip.jpg) left center/cover}
html[data-theme=light] .q.vip{background:linear-gradient(110deg,rgba(255,253,248,.55),rgba(255,253,248,.97)),url(/static/img/vip.jpg) center/cover}

/* cards */
html[data-theme=light] .stat,html[data-theme=light] .panel,html[data-theme=light] .q{background:linear-gradient(160deg,#ffffff,#fffaf0);box-shadow:0 10px 30px -22px rgba(120,86,20,.45)}
html[data-theme=light] .stat>i,html[data-theme=light] .tx li i{background:rgba(220,174,79,.14);border-color:rgba(184,137,43,.35)}
html[data-theme=light] .tx li{background:rgba(184,137,43,.05)}
html[data-theme=light] .plan{background:#fffdf8}
html[data-theme=light] .credTip{border-color:rgba(184,137,43,.45)}

/* chart */
html[data-theme=light] #chart line{stroke:#eadcb9}
html[data-theme=light] #chart path[stroke]{stroke:#b8892b}
html[data-theme=light] #chart circle{fill:#b8892b}
html[data-theme=light] #chart text{fill:#8a7d62}
html[data-theme=light] #chart .bar{fill:rgba(220,174,79,.55)}
html[data-theme=light] #chart stop{stop-color:#dcae4f}

/* bot panel (chat) */
html[data-theme=light] .feed{background:radial-gradient(600px 300px at 50% 0,rgba(220,174,79,.10),transparent),#fdfaf3}
html[data-theme=light] .msg{background:#fff;box-shadow:0 6px 18px -14px rgba(120,86,20,.5)}
html[data-theme=light] .msg.user{background:linear-gradient(135deg,#fbecc6,#f6dea0);border-color:rgba(184,137,43,.45)}
html[data-theme=light] .msg .body code{background:#fbf3df;color:#5a420c}
html[data-theme=light] .msg .body pre{background:#fbf3df;color:#3a2c0c}
html[data-theme=light] .kb button,html[data-theme=light] .kb a{background:linear-gradient(180deg,#fffdf7,#f9eed3);border-color:rgba(184,137,43,.42);color:#7a560c}
html[data-theme=light] .kb button:hover,html[data-theme=light] .kb a:hover{background:var(--grad);color:#1a1205}
html[data-theme=light] .composer{background:#fbf5e7}

/* overlays */
html[data-theme=light] .modal{background:rgba(60,45,15,.35);backdrop-filter:blur(3px)}
html[data-theme=light] .modal-card,html[data-theme=light] .toast{background:#fff}
html[data-theme=light] .iostip{background:rgba(255,253,248,.98);box-shadow:0 10px 30px -10px rgba(120,86,20,.45)}

/* Face ID / fingerprint */
html[data-theme=light] .bio-btn{background:linear-gradient(180deg,rgba(220,174,79,.14),rgba(220,174,79,.03));border-color:rgba(184,137,43,.40)}
html[data-theme=light] .bio-ring{background:radial-gradient(circle at 50% 35%,rgba(255,236,190,.95),#fffaf0 70%);box-shadow:inset 0 0 0 1.5px rgba(184,137,43,.55),0 0 26px -8px rgba(184,137,43,.55)}
html[data-theme=light] .bio-ico{color:var(--gold)}
html[data-theme=light] .bio-switch.on i{background:#fff}
html[data-theme=light] .bio-list li{background:#fffdf8}

@media (max-width:860px){
  html[data-theme=light] .side{box-shadow:-20px 0 60px rgba(120,86,20,.25)}
  html[data-theme=light] .scrim.open{background:rgba(60,45,15,.35)}
  html[data-theme=light] .bottom{background:rgba(255,253,248,.96);box-shadow:0 -8px 24px -18px rgba(120,86,20,.5)}
  html[data-theme=light] .bottom a.mid i{box-shadow:0 6px 20px -6px rgba(184,137,43,.75)}
  .login-theme{top:10px;left:10px}
}