/* AlgoSubscribe — premium dark fintech theme */
/* ---------------------------------------------------------------
   OBSIDIAN & CHAMPAGNE — apni pehchaan, kisi ki copy nahi.
   Soch: har fintech dashboard navy-blue + violet gradient par chalta hai.
   Hum us bheed se bahar: gehra obsidian (halka warm, neela nahi) + champagne
   gold ka ishara. Gold kam use hota hai isliye keemti lagta hai — sirf brand,
   headline aur khaas numbers par. Cyan ab sirf INTERACTIVE cheezon ke liye
   (link, focus, button) — isse nazar wahi jaati hai jahan click karna hai.
   Green/red sirf P&L ke liye reserved — paisa jahan dikhta hai wahan rang ka
   matlab badalna nahi chahiye.
   --------------------------------------------------------------- */
:root{
  /* --- RANG: wahi purane (user ki pasand) --- */
  --bg:#070b14; --bg2:#0b1222; --card:#0e1628; --card2:#121c33;
  --line:#1e2c4b; --txt:#eaf0fb; --mut:#8fa0bd;
  --acc:#5b8cff; --acc2:#22d3ee; --grn:#34d399; --red:#f87171; --gold:#fbbf24;
  --r:16px; --sh:0 20px 60px -20px rgba(34,211,238,.25);

  /* --- naye tokens: sirf depth aur motion ke liye, rang nahi badalte --- */
  --line2:#2a3c63;
  --r-sm:10px;
  --sh-lift:0 30px 80px -26px rgba(0,0,0,.85), 0 0 0 1px var(--line2);
  --edge:inset 0 1px 0 rgba(255,255,255,.05);   /* parat ke upar patli roshni */
  --e:cubic-bezier(.22,.61,.36,1);              /* ek hi curve poore app me */
  --t:.22s var(--e); --t-slow:.42s var(--e);
}
/* Jinko motion se taklif hoti hai unke liye sab band — ye zaroori hai, optional nahi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:Sora,Inter,system-ui,sans-serif}
/* Title case: har word ka pehla akshar capital (headings, nav, buttons) */
h1,h2,h3,h4,.nav-links a,.btn,.tabs button,.tfbtns button,.mini{text-transform:capitalize}
a{color:inherit;text-decoration:none}
.grad{background:linear-gradient(92deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--mut)} .hidden{display:none!important}

/* background orbs */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35}
.o1{width:480px;height:480px;background:#2547ff;top:-160px;left:-120px}
.o2{width:420px;height:420px;background:#0e7490;top:20%;right:-140px}
.o3{width:500px;height:300px;background:#6d28d9;bottom:-160px;left:30%}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(7,11,20,.72);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:auto;display:flex;align-items:center;gap:26px;padding:13px 20px}
.brand{font-weight:800;font-size:19px;letter-spacing:-.3px;display:flex;align-items:center;gap:9px}
.brand-text{display:flex;flex-direction:column;line-height:1.15;background:linear-gradient(92deg,#fff,#9dbcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-text small{font-size:8.5px;letter-spacing:3.2px;font-weight:600;-webkit-text-fill-color:var(--mut)}
.brand-mark{background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:22px}
.nav-links{display:flex;gap:20px;color:var(--mut);font-size:14px;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.engine-dot{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.engine-dot i{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 10px var(--grn);animation:blink 2s infinite}
.engine-dot em{font-style:normal}
.lang-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);font-weight:700;font-size:13px;border-radius:99px;padding:6px 16px;cursor:pointer;transition:.18s}
.lang-btn:hover{border-color:var(--acc2);box-shadow:0 0 14px -4px var(--acc2)}
@keyframes blink{50%{opacity:.4}}

/* hero */
.hero{max-width:1180px;margin:auto;padding:56px 20px 10px}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#bfe9ff;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);border-radius:99px;padding:6px 14px;margin:0 0 18px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0 0 16px;letter-spacing:-1.5px}
.hero .sub{color:var(--mut);font-size:16.5px;line-height:1.65;max-width:520px;margin:0 0 26px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-stats{display:flex;gap:34px}
.hero-stats b{font-size:24px;font-family:Sora;display:block}
.hero-stats span{color:var(--mut);font-size:12.5px}
.hero-card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--sh)}
.hero-card-head{display:flex;justify-content:space-between;color:var(--mut);font-size:12px;letter-spacing:1px;margin-bottom:12px}
.hero-card-head em{font-style:normal;color:var(--grn);font-weight:700}
.hero-price{display:flex;align-items:baseline;gap:12px}
.hero-price b{font-size:32px;font-family:Sora;letter-spacing:-.5px}
.up{color:var(--grn);font-weight:700;font-size:14px}.down{color:var(--red);font-weight:700;font-size:14px}
#heroSpark{width:100%;height:110px;margin-top:8px}
.hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--mut);font-size:13px}
.hero-card{position:relative}
.hero-arrow{position:absolute;top:44%;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(10,19,34,.8);color:var(--txt);font-size:17px;line-height:1;cursor:pointer;opacity:0;transition:.18s}
.hero-card:hover .hero-arrow{opacity:1}
.hero-arrow.left{left:8px}.hero-arrow.right{right:8px}
.hero-arrow:hover{border-color:var(--acc2)}
.hero-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.hero-dots button{border:1px solid var(--line);background:transparent;color:var(--mut);font-size:10px;font-weight:700;border-radius:99px;padding:3px 9px;cursor:pointer}
.hero-dots button.on{background:linear-gradient(92deg,#3b82f6,#22d3ee);color:#04121f;border-color:transparent}
.tag{background:rgba(52,211,153,.12);color:var(--grn);border:1px solid rgba(52,211,153,.35);font-weight:700;font-size:12px;border-radius:99px;padding:4px 12px}
.trustbar{margin:26px 0 8px;color:var(--mut);font-size:13px;text-align:center;letter-spacing:.3px}
.trustbar i{color:var(--line);margin:0 8px;font-style:normal}

/* sections */
.section{max-width:1180px;margin:auto;padding:30px 20px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.sec-head h2,.section h2{margin:0 0 4px;font-size:26px;letter-spacing:-.5px}

/* buttons + inputs */
.btn{border:none;cursor:pointer;font-weight:700;font-size:14.5px;border-radius:12px;padding:12px 22px;transition:.18s;display:inline-block}
.btn.primary{background:linear-gradient(92deg,#3b82f6,#22d3ee);color:#04121f;box-shadow:0 10px 30px -10px rgba(56,150,255,.7)}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--acc)}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
.pager button{min-width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#0a1322;color:var(--txt);font-weight:700;font-size:13px;cursor:pointer;padding:0 10px}
.pager button.on{background:linear-gradient(92deg,#3b82f6,#22d3ee);color:#04121f;border-color:transparent}
.pager button:disabled{opacity:.35;cursor:default}
.pager .pg-gap{color:var(--mut);font-size:13px}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.block{width:100%;margin-top:10px}
.btn.sm-top{margin-top:8px;font-size:13px}
input,select{width:100%;background:#0a1322;border:1px solid var(--line);color:#fff;border-radius:11px;padding:12px 14px;margin:7px 0;font-size:14px;font-family:inherit}
input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
label{font-size:12.5px;color:var(--mut);font-weight:600;display:block;margin-top:10px}
label em{color:var(--red);font-style:normal}
.hint{display:block;font-size:11px;color:var(--mut);margin-top:4px;line-height:1.5}
.calcbox{background:#0a1322;border:1px dashed var(--acc);border-radius:11px;padding:12px 14px;margin:7px 0;font-size:13px;color:#bfe9ff;min-height:20px}
label.check{display:flex;align-items:center;gap:9px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.3);border-radius:11px;padding:10px 14px;margin:8px 0 2px;font-size:13px;color:#bfe9ff;cursor:pointer}
label.check input{width:auto;accent-color:#22d3ee;margin:0}
.msg{min-height:20px;font-size:13.5px;margin:8px 0 0;color:var(--gold)}
.msg.ok{color:var(--grn)} .msg.err{color:var(--red)}

/* strategy cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.skeleton{height:340px;border-radius:var(--r);background:linear-gradient(100deg,#0d1626 40%,#14203a 50%,#0d1626 60%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}
.strat{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));background-color:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:.2s;position:relative;overflow:hidden;cursor:pointer}
.strat:hover{transform:translateY(-4px);border-color:#33507e;box-shadow:var(--sh)}
.strat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.live-badge{font-size:11px;font-weight:800;color:var(--grn);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35);border-radius:99px;padding:3px 10px;letter-spacing:.6px}
.strat h3{margin:2px 0;font-size:19px}
.strat .desc{color:var(--mut);font-size:13.5px;line-height:1.55;min-height:42px;margin:6px 0 4px}
.strat svg{width:100%;height:74px;margin:6px 0 2px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.metrics div{background:#0a1322;border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.metrics b{display:block;font-size:15.5px;font-family:Sora}
.metrics span{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.metrics .pos{color:var(--grn)} .metrics .neg{color:var(--red)}
.strat-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.subs-n{font-size:12.5px;color:var(--mut)}
.strat-foot .btn{padding:10px 20px}

/* dashboard */
.dash{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-height:220px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel-head h3{margin:0;font-size:16px}
.count{background:rgba(91,140,255,.15);color:#9dbcff;border-radius:99px;font-size:12px;font-weight:700;padding:2px 12px}
.list{display:flex;flex-direction:column;gap:10px}
.empty{color:var(--mut);font-size:13.5px;border:1px dashed var(--line);border-radius:12px;padding:22px;text-align:center}
.subrow,.traderow{display:flex;align-items:center;gap:12px;background:#0a1322;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13.5px}
.subrow .dot{width:9px;height:9px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn)}
.subrow.off .dot{background:var(--mut);box-shadow:none}
.subrow b{font-size:13.5px}.subrow small{color:var(--mut);display:block;font-size:11.5px}
.subrow .grow{flex:1}
.badge{font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px;letter-spacing:.4px}
.badge.mock{background:rgba(251,191,36,.12);color:var(--gold);border:1px solid rgba(251,191,36,.35)}
.badge.delta{background:rgba(34,211,238,.12);color:#67e8f9;border:1px solid rgba(34,211,238,.35)}
.badge.coindcx{background:rgba(59,130,246,.14);color:#93c5fd;border:1px solid rgba(59,130,246,.4)}
.badge.coinswitch{background:rgba(167,139,250,.14);color:#c4b5fd;border:1px solid rgba(167,139,250,.4)}
.badge.binance{background:rgba(240,185,11,.12);color:#fcd34d;border:1px solid rgba(240,185,11,.4)}
.badge.zerodha,.badge.angel,.badge.upstox,.badge.dhan{background:rgba(91,140,255,.12);color:#9dbcff;border:1px solid rgba(91,140,255,.35)}
.badge.BUY{background:rgba(52,211,153,.12);color:var(--grn)}.badge.SELL{background:rgba(248,113,113,.12);color:var(--red)}.badge.CLOSE{background:rgba(91,140,255,.14);color:#9dbcff;border:1px solid rgba(91,140,255,.4)}
.mini{background:none;border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:6px 12px;font-size:12px;cursor:pointer}
.mini:hover{color:var(--red);border-color:var(--red)}
table.trades{width:100%;border-collapse:collapse;font-size:13px}
table.trades th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.6px;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.trades td{padding:9px 10px;border-bottom:1px solid #14203a}
.st-COMPLETE{color:var(--grn);font-weight:700}.st-PENDING_CONFIG,.st-NEEDS_REAL_KEYS{color:var(--gold);font-weight:700}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.step b{display:inline-flex;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04121f;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px}
.step h4{margin:0 0 6px}.step p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.6}
footer{text-align:center;color:var(--mut);font-size:12.5px;padding:30px 16px 44px}

/* modals */
.overlay{position:fixed;inset:0;background:rgba(3,6,12,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:400px;max-width:100%;max-height:92vh;overflow:auto;background:linear-gradient(180deg,#131d33,#0c1425);border:1px solid #2a3d63;border-radius:20px;padding:26px;position:relative;box-shadow:0 40px 100px -20px rgba(0,0,0,.8);animation:pop .22s}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}}
.modal h3{margin:0 0 4px;font-size:21px}
/* Form modal sirf isi se band hota hai (bahar click se nahi), to ye saaf dikhe
   aur ungli/mouse se aasani se lage — 34px ka hit area. */
.x{position:absolute;top:10px;right:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
   background:rgba(148,163,184,.12);border:1px solid var(--line);border-radius:9px;color:var(--txt);
   font-size:15px;line-height:1;cursor:pointer;transition:.15s}
.x:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.5);color:#fca5a5}
.x:hover{color:#fff}
.tabs{display:flex;background:#0a1322;border:1px solid var(--line);border-radius:12px;padding:4px;margin:12px 0}
.tabs button{flex:1;border:none;background:none;color:var(--mut);font-weight:700;font-size:13.5px;border-radius:9px;padding:9px;cursor:pointer}
.tabs button.on{background:linear-gradient(92deg,#3b82f6,#22d3ee);color:#04121f}
.divider{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:12px;margin:14px 0 8px}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.broker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 4px}
.broker-grid button{background:#0a1322;border:1px solid var(--line);border-radius:12px;color:var(--txt);font-size:20px;padding:9px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.broker-grid button span{font-size:10.5px;color:var(--mut);font-weight:600}
.broker-grid button.on{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal.wide{width:660px}
.sm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.sm-head h3{margin:0;font-size:22px}
.sm-head p{margin:2px 0 0}
.livepill{display:flex;align-items:center;gap:8px;background:#0a1322;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:12px;color:var(--mut);white-space:nowrap}
.livepill b{font-size:17px;font-family:Sora;color:#fff}
.livepill em{font-style:normal;font-weight:800;font-size:13px}
.livepill em.up{color:var(--grn)} .livepill em.down{color:var(--red)}
.modal h4{margin:16px 0 8px;font-size:14px}
ul.logic{margin:0;padding-left:20px;color:#cdd8ec;font-size:13.5px;line-height:1.7}
ul.logic li{margin:3px 0}
.curve-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.curve-bar h4{margin:16px 0 8px}
.tfbtns{display:flex;gap:6px}
.tfbtns button{background:#0a1322;border:1px solid var(--line);color:var(--mut);font-weight:700;font-size:12px;border-radius:9px;padding:6px 12px;cursor:pointer}
.tfbtns button.on{background:linear-gradient(92deg,#3b82f6,#22d3ee);color:#04121f;border-color:transparent}
#smCurveWrap{background:#0a1322;border:1px solid var(--line);border-radius:12px;padding:10px}
#pfWrap{background:#0a1322;border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:12px}
#pfCurve{width:100%;height:180px;display:block}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.pf-stats{grid-template-columns:repeat(2,1fr)}}
.pf-stats div{background:#0a1322;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pf-stats span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.pf-stats b{display:block;font-size:21px;font-family:Sora;margin-top:4px}
.pf-stats b.pos{color:var(--grn)} .pf-stats b.neg{color:var(--red)}
#smCurve{width:100%;height:220px;display:block}
#gsiBtn{display:flex;justify-content:center;margin-top:6px;min-height:40px}
#btnGoogleDemo em{display:block;font-style:normal;font-weight:400;font-size:11px;opacity:.7}

/* toasts */
#toasts{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{background:#101b31;border:1px solid #2a3d63;border-left:4px solid var(--acc2);border-radius:12px;padding:12px 18px;font-size:13.5px;font-weight:600;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:pop .25s;max-width:320px}
.toast.ok{border-left-color:var(--grn)} .toast.err{border-left-color:var(--red)}

@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.dash{grid-template-columns:1fr}.nav-links{display:none}.broker-grid{grid-template-columns:repeat(3,1fr)}}

.broker-grid button:disabled{opacity:.45;cursor:not-allowed}
.broker-grid button:disabled:hover{border-color:var(--line);box-shadow:none}
.paper-badge{font-size:11px;font-weight:800;color:var(--gold);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);border-radius:99px;padding:3px 10px;letter-spacing:.6px}
.badge.seg-spot{background:rgba(167,139,250,.14);color:#c4b5fd;border:1px solid rgba(167,139,250,.4)}
.badge.seg-futures{background:rgba(34,211,238,.12);color:#67e8f9;border:1px solid rgba(34,211,238,.35)}
/* Leverage options zyada hone par wrap + scroll (100x/200x tak) */
#mLevTabs{flex-wrap:wrap;gap:5px;max-height:104px;overflow-y:auto}
#mLevTabs button{flex:0 0 auto;min-width:46px;padding:7px 10px}
.balbox{background:#0a1322;border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin:8px 0 2px;font-size:12.5px;line-height:1.6}
.balbox.ok{border-color:rgba(52,211,153,.4);color:#a7f3d0}
.balbox.err{border-color:rgba(248,113,113,.4);color:#fecaca}
.balbox.load{color:var(--mut)}
/* capital % chips — wallet ka jitna hissa lagana hai, ek click me */
.chips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:#0a1322;color:var(--mut);font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 11px;cursor:pointer}
.chips button:hover{border-color:var(--acc2);color:var(--txt)}
.chips button.on{background:linear-gradient(92deg,#3b82f6,#22d3ee);color:#04121f;border-color:transparent}
/* edit mode me jo badal nahi sakta */
.broker-grid button.locked,.tabs button.locked{opacity:.45;cursor:not-allowed}
.tabs.locked{opacity:.45;pointer-events:none}
/* wallet se zyada capital — chupchaap kam karne ke bajaye error */
.modal input.err{border-color:rgba(248,113,113,.65);background:rgba(248,113,113,.06)}
.hint.err{color:#fca5a5;font-weight:600}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
/* account me kitne ka position ban sakta hai (wallet × leverage) */
.balbox.pow{border-color:rgba(59,130,246,.42);color:#bfdbfe;margin-top:6px}
/* size exchange ke minimum se chhoti — warning, error nahi (setting theek karni hai) */
.calcbox.warn{border-color:rgba(251,191,36,.6);color:#fde68a;border-style:solid}
/* capital | per-trade ₹ | risk% — ek hi row me, phone par stack */
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:620px){.three{grid-template-columns:1fr}}
/* BETA = real data par test mode (DEMO DATA se alag rang, taaki confuse na ho) */
.paper-badge.beta{background:rgba(96,165,250,.14);color:#93c5fd;border-color:rgba(96,165,250,.4)}
/* warning ke andar ek-click fix button */
.mini.fixamt{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.5);color:#fde68a}
.mini.fixamt:disabled{opacity:.5;cursor:not-allowed}
/* FAILED row ke neeche exchange ki asli wajah */
.st-why{font-size:11px;color:var(--mut);font-weight:400;margin-top:3px;max-width:320px;white-space:normal;line-height:1.45}
.st-FAILED{color:var(--red);font-weight:700}
/* dashboard sync indicator — dikhe ki data kab taaza hua */
.syncdot{font-size:11px;color:var(--mut);letter-spacing:.2px}
.syncdot.on{color:var(--grn)}
.syncdot.off{color:var(--red)}
/* position badge: LONG vs SHORT alag */
.badge.pos-long{background:rgba(52,211,153,.14);color:#6ee7b7;border:1px solid rgba(52,211,153,.4)}
.badge.pos-short{background:rgba(248,113,113,.14);color:#fca5a5;border:1px solid rgba(248,113,113,.4)}
/* engine ne nahi band kiya — exchange app se close / liquidation */
.badge.MANUAL{background:rgba(251,191,36,.16);color:#fde68a;border:1px solid rgba(251,191,36,.4);margin-left:5px}
.badge.CLOSE{background:rgba(148,163,184,.16);color:#cbd5e1;border:1px solid rgba(148,163,184,.4)}

/* Leverage input — jab exchange har integer allow karta hai (1..max) to 100
   button dikhane ki jagah ek box. Values wahi, sirf control alag. */
#mLevTabs .levnum{width:88px;padding:8px 10px;border-radius:8px;border:1px solid var(--line,#2a3344);
  background:var(--card,#131a26);color:var(--ink,#e8eef7);font:inherit;font-weight:600;text-align:center}
#mLevTabs .levnum:focus{outline:2px solid var(--accent,#3b82f6);outline-offset:1px}
#mLevTabs .levx{margin-left:6px;color:var(--muted,#8b97a8);font-weight:600}

/* "Password bhool gaye?" — button jaisa nahi, link jaisa */
.linkbtn{background:none;border:0;padding:6px 0 0;color:var(--muted,#8b97a8);
  font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;width:100%;text-align:center}
.linkbtn:hover{color:var(--accent,#3b82f6)}

/* Paused subscription — dikhna chahiye ki ye ruki hui hai */
.subrow.paused{opacity:.72}
.subrow.paused .dot{background:#b45309}
.badge.paused{background:#b45309;color:#fff}

/* =================================================================
   PREMIUM LAYER
   Sirf dikhawat — layout, class ke naam, ya koi behaviour nahi badla.
   ================================================================= */

/* ---- 1. TYPOGRAPHY ----
   Paise wale har number me TABULAR figures. Warna 1 aur 7 ki chaudai alag
   hoti hai aur number badalte waqt poora column hilta hai — sasta lagta hai
   aur padhne me dikkat bhi hoti hai. Trading UI me ye sabse badi chhoti baat. */
body{
  font-feature-settings:"ss01","cv11";
  letter-spacing:-.011em;
}
.hero-price b, .hero-stats b, .pf-val, .pf-row b, #pfBase, #pfCur, #pfPnl, #pfWallet,
td, .mono, .stat b, .badge, .subrow small, .trade-px{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
h1,h2,h3{letter-spacing:-.028em}

/* Hero headline: gradient ki jagah champagne ka halka sa ishara.
   Blue→cyan gradient har SaaS template me hai — wahi hatana tha. */



/* ---- 2. BACKGROUND ----
   Purane orbs dhabba jaise lag rahe the. Ab bahut halka, aur upar ek mahin
   grain — grain hi wo cheez hai jo flat dark ko "material" bana deti hai. */


body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ⚠ `.overlay` ko ismein KABHI mat jodna. Uska `position:fixed` hi use screen ke
   beech me rakhta hai; `relative` karte hi wo normal flow me aa jata hai aur
   subscribe card page ke SABSE NEECHE chala jata hai. (Ye galti ho chuki hai.)
   Overlay ka z-index pehle se 100 hai — use grain ke upar rehne ki fikar nahi. */
.nav,.hero,main,footer{position:relative;z-index:1}

/* ---- 3. DEPTH ----
   Har uthi hui cheez par: upar ek patli roshni + neeche gehra saaya.
   Asli duniya me light upar se aati hai — isi se "surface" ka ehsaas banta hai. */
.hero-card,.card,.modal,.panel,.strat,.subrow,.box,.balbox{
  box-shadow:var(--sh),var(--edge);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.strat,.hero-card,.modal{
  background:linear-gradient(177deg,var(--card2),var(--card));
}
/* hover par halka sa uthna — 2px bas, zyada karo to sasta lagta hai */
/* (purana halka hover hata diya — neeche wala motion wala chalta hai) */
.subrow{transition:background var(--t),border-color var(--t)}
.subrow:hover{background:rgba(255,255,255,.022)}

/* ---- 4. MOTION / MICRO-FEEDBACK ----
   Dabane par cheez halki si dabni chahiye — ye ek line "feel" badal deti hai. */
.btn,.mini,.lang-btn,.tabs button,.tfbtns button,.linkbtn,.broker-grid button{
  transition:transform .12s var(--e),background var(--t),border-color var(--t),box-shadow var(--t),color var(--t);
}
.btn:active,.mini:active,.lang-btn:active,.tabs button:active,.broker-grid button:active{transform:scale(.975)}


.btn.ghost:hover,.mini:hover{border-color:var(--acc2);color:var(--txt)}

/* Focus: keyboard se chalane walon ke liye saaf nishaan (accessibility) */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--acc2);outline-offset:2px;border-radius:8px;
}

/* ---- 5. LOADING SKELETON ----
   Khali jagah "toota hua" lagta hai; shimmer "aa raha hai" lagta hai. */
.sk{position:relative;overflow:hidden;background:var(--card2);border-radius:var(--r-sm);color:transparent!important}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-line{height:12px;margin:8px 0}
.sk-card{height:132px;margin:10px 0}

/* ---- 6. LIST ENTRY ----
   Naye row ek-ek karke aate hain (stagger) — ekdam se sab aa jaana jhatka lagta hai. */
@keyframes riseIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.strat,.subrow,.trow{animation:riseIn .34s var(--e) both}
.strat:nth-child(2),.subrow:nth-child(2),.trow:nth-child(2){animation-delay:.04s}
.strat:nth-child(3),.subrow:nth-child(3),.trow:nth-child(3){animation-delay:.08s}
.strat:nth-child(4),.subrow:nth-child(4),.trow:nth-child(4){animation-delay:.12s}
.strat:nth-child(n+5),.subrow:nth-child(n+5),.trow:nth-child(n+5){animation-delay:.16s}

/* ---- 7. KHULI POSITION ka zinda ehsaas ----
   Jahan asli paisa laga hai, wo row dhadakti honi chahiye. */
.badge[class*="pos-"]{position:relative}
.badge[class*="pos-"]::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:1px solid currentColor;opacity:0;animation:livePulse 2.6s var(--e) infinite;
}
@keyframes livePulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}

/* ---- 8. SCROLLBAR + SELECTION — chhoti cheezein, par dikhti hain ---- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:var(--line2)}


/* ---- 9. MODAL — glass, taki peeche ka app dikhta rahe (context na toote) ---- */
.overlay{backdrop-filter:blur(10px) saturate(.9);background:rgba(5,5,8,.62)}
.modal{border:1px solid var(--line2);border-radius:20px}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* ⚠ `both` fill-mode NAHI. Uske saath modal animation ki shuruaati halat
   (opacity:0) me atak sakta hai — yani card khulta hai par dikhta nahi.
   Bina fill ke: animation na chale to modal apni normal halat me (dikhta hua)
   rehta hai. Dikhne wali cheez kabhi animation ke bharose nahi honi chahiye. */
.overlay:not(.hidden) .modal{animation:modalIn .26s var(--e)}

/* ---- 10. P&L ke rang saaf rahein ---- */
.pos,.up{color:var(--grn)} .neg,.down{color:var(--red)}


/* ---- 11. SPACING — saans lene ki jagah ---- */

.chips button{background:rgba(255,255,255,.028)}







/* Saans lene ki jagah — premium ka 70% yahi hai */
.hero{padding:76px 20px 18px}
.hero .sub{line-height:1.72;margin-bottom:32px}
.hero-stats{gap:44px}
.section-head,h2{margin-bottom:6px}

.engine-dot{background:rgba(255,255,255,.02)}

/* ---- 12. SUBSCRIPTION ROW ----
   Pause button jodne ke baad ek row me 6 button ho gaye, aur flex ne strategy ka
   naam nichod diya — "breakout-prev-candle-5m" 4 line me tut raha tha. Us row me
   naam sabse zaroori cheez hai; wo kabhi nahi tutna chahiye.
   Hal: naam ko kam se kam 260px milega; jagah na bachi to buttons apne aap
   agli line me chale jayenge (wrap). Chaudi screen par sab ek hi line me. */
.subrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;
  padding:13px 16px;background:rgba(255,255,255,.018);
}
.subrow .dot{flex:0 0 auto}
.subrow .grow{flex:1 1 260px;min-width:0}
.subrow b{font-size:14px;letter-spacing:-.01em;display:block;overflow-wrap:anywhere}
.subrow small{margin-top:3px;line-height:1.5}
.subrow .mini{padding:6px 11px;font-size:12px;border-radius:9px;flex:0 0 auto}
/* Stop sabse bhaari action hai — alag dikhe, par chillaye nahi */
.subrow .mini:last-of-type{border-color:rgba(251,113,133,.3);color:#ffd9de}
.subrow .mini:last-of-type:hover{border-color:var(--red);background:rgba(251,113,133,.08)}

/* =================================================================
   MOTION — dikhne wala hissa
   Niyam jo poore file me nibhaya hai:
     1. Har animation ke BINA bhi cheez dikhni chahiye (fill-mode ka bharosa nahi)
     2. Ek hi easing (--e) — tabhi alag-alag cheezein ek system lagti hain
     3. reduced-motion wale user ke liye sab band (upar ek jagah likha hai)
   ================================================================= */

/* ---- CHART KA BANNA ----
   Line ek sire se doosre sire tak khinchti hai. Trading app me yahi ek motion
   hai jo "premium" se zyada "zinda" lagta hai — data banta hua dikhta hai.
   pathLength="1" ki wajah se lambai ki ginti nahi karni padti, CSS hi kaafi hai. */
@keyframes drawLine{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.draw{animation:drawLine 1.05s var(--e)}
@keyframes dotPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
.dot-pop{animation:dotPop .4s var(--e) .85s backwards;transform-origin:center}

/* ---- PRICE BADALNE KA ISHARA ----
   Number upar gaya ya neeche — padhne se PEHLE rang se pata chal jaye. */
@keyframes tickUp{0%{color:var(--grn);transform:translateY(2px)}100%{color:inherit;transform:none}}
@keyframes tickDn{0%{color:var(--red);transform:translateY(-2px)}100%{color:inherit;transform:none}}
.tick-up{animation:tickUp .7s var(--e)}
.tick-dn{animation:tickDn .7s var(--e)}

/* ---- COIN BADALNE PAR CARD ----
   BTC se SOL par jaate waqt card halka sa saans leta hai (ekdum badalna jhatka). */
@keyframes cardSwap{0%{opacity:.35;transform:translateY(6px) scale(.993)}100%{opacity:1;transform:none}}
.hero-card.swap{animation:cardSwap .34s var(--e)}

/* ---- HERO KA AANA ----
   Page khulte hi cheezein ek-ek karke aati hain, saath me nahi. */
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .pill{animation:heroIn .5s var(--e) .02s backwards}
.hero h1{animation:heroIn .6s var(--e) .08s backwards}
.hero .sub{animation:heroIn .6s var(--e) .16s backwards}
.hero-btns{animation:heroIn .6s var(--e) .24s backwards}
.hero-stats{animation:heroIn .6s var(--e) .32s backwards}
.hero-card{animation:heroIn .7s var(--e) .18s backwards}

/* ---- SCROLL PAR AANA ----
   .reveal JS lagata hai; nazar me aate hi .seen. Ek baar hi — warna upar-neeche
   scroll karne par cheezein blink karti rehti hain. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--e),transform .55s var(--e)}
.reveal.seen{opacity:1;transform:none}

/* ---- CARD HOVER ----
   Pehle 3px tha — itna halka ki dikhta hi nahi tha. Ab uthna saaf dikhta hai,
   kinara chamakta hai, aur upar se roshni guzarti hai (sheen). */
.strat::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg);transition:left .7s var(--e);
}
.strat:hover{transform:translateY(-7px);border-color:rgba(34,211,238,.45);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.9),0 0 0 1px rgba(34,211,238,.18),0 0 34px -14px rgba(34,211,238,.4)}
.strat:hover::after{left:115%}

/* ---- PRIMARY BUTTON ----
   Hover par roshni ki ek lakeer guzarti hai. */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--e);
}
.btn.primary:hover::after{left:130%}
.btn.primary:hover{transform:translateY(-2px)}

/* ---- NAV ----
   Scroll karte hi patli aur gehri ho jati hai. */
.nav{transition:padding var(--t),background var(--t),box-shadow var(--t),border-color var(--t)}
.nav.scrolled{background:rgba(7,11,20,.92);box-shadow:0 10px 30px -18px rgba(0,0,0,.9)}
.nav.scrolled .nav-inner{padding-top:9px;padding-bottom:9px}
.nav-inner{transition:padding var(--t)}

/* ---- TABLE ROW ---- */
tbody tr{transition:background var(--t)}
tbody tr:hover{background:rgba(255,255,255,.028)}

/* ---- TOAST ---- */
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.toast{animation:toastIn .3s var(--e)}

/* ---- STRATEGY MODAL KA HEADER ----
   Close button (✕) modal ke kone me `absolute` baitha hai, aur Live-price wali
   pill bhi usi kone me aati hai — isliye ✕ price ke UPAR chadh jata tha.
   Hal: header me ✕ ke barabar jagah chhod do. Button ko hilane se baaki modals
   ka ✕ bhi hil jata, isliye jagah yahin banayi hai.
   (✕ ~34px + 10px right + thodi saans = 52px) */
.sm-head{padding-right:52px}
/* Chhoti screen par price pill neeche aa jaye, title ke saath na dabe */
@media (max-width:560px){
  .sm-head{flex-wrap:wrap;padding-right:44px}
  .sm-head .livepill{width:100%;justify-content:flex-start}
}

/* ---------- Your profile modal ka danger zone ----------
   Delete ka button Save ke bagal me nahi hona chahiye, isliye alag khaana aur
   alag rang. Khulta bhi tab hai jab user khud "Delete my account" dabaye. */
.danger-zone { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.linkbtn.danger { color: #f87171; }
.btn.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.danger:hover { background: #991b1b; }

/* =================================================================
   MANDATORY RISK DISCLAIMER + LEGAL SECTION + CONSENT
   -----------------------------------------------------------------
   Disclaimer bar har screen par dikhni chahiye (page, section, modal) —
   isliye fixed + modal ke z-index se upar. Uski asli height JS naapta hai
   aur --riskbar-h me daalta hai, kyunki text wrap screen ke hisaab se
   badalta hai (mobile par 5 line, desktop par 2).
   ================================================================= */
:root{ --riskbar-h:96px; }

/* Bar ke neeche content chhupna nahi chahiye — footer tak pahunchna chahiye */
body{ padding-bottom:calc(var(--riskbar-h, 96px) + 12px); }

/* Bar ka rang site ka hi — pehle bhoora-sona (rgba(38,27,10)) tha, jo gehre
   neele page par paraya lagta tha. Ab wahi card/line/mut tokens jo poore app me
   chalte hain. Chetavni ka ishara ⚠️ emoji se aa jata hai; uske liye poori bar
   ko doosre rang me rangne ki zaroorat nahi. */
.risk-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:linear-gradient(180deg, rgba(14,22,40,.96), rgba(7,11,20,.99));
  border-top:1px solid var(--line);
  box-shadow:0 -22px 50px -30px #000;
  backdrop-filter:blur(12px);
}
.risk-bar-in{
  max-width:1180px; margin:auto; padding:9px 20px;
  display:flex; align-items:center; gap:14px;
}
.risk-bar b{
  flex:0 0 auto; color:var(--txt); font-size:12px; letter-spacing:.02em;
  text-transform:uppercase; white-space:nowrap;
}
.risk-bar p{
  margin:0; flex:1; color:var(--mut); font-size:11.5px; line-height:1.55;
  letter-spacing:0;
}
.risk-bar-link{
  flex:0 0 auto; color:var(--mut); font-size:12px; font-weight:600;
  text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--line2);
}
.risk-bar-link:hover{ color:var(--txt); border-bottom-color:var(--mut); }

/* Modal bar ke neeche na chhupe — warna Confirm button dab jata hai */
.overlay{ padding-bottom:calc(16px + var(--riskbar-h, 96px) + 6px); }
.modal{ max-height:calc(92vh - var(--riskbar-h, 96px) - 10px); }

/* ---- Legal section ---- */
#risk{ scroll-margin-top:84px; }
/* Ye box aur cards bhi site ke card/line par — sone wala tint hata diya,
   warna poora page bhoora dikhta tha. Chetavni ka ishara ⚠️ emoji aur
   headings se aa jata hai. */
.legal-fullbox{
  background:var(--card2); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; margin:6px 0 16px;
  box-shadow:var(--edge);
}
.legal-fullbox b{ color:var(--txt); font-size:13px; }
.legal-fullbox p{ margin:7px 0 0; color:var(--mut); font-size:13px; line-height:1.7; }

.legal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.legal-card{
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--line2);
  border-radius:var(--r); padding:17px 18px;
}
.legal-card h4{ margin:0 0 7px; font-size:14px; color:var(--txt); }
.legal-card p{ margin:0; color:var(--mut); font-size:13px; line-height:1.65; }
.legal-card b{ color:var(--txt); }
.legal-foot{
  margin:14px 0 0; font-size:11.5px; line-height:1.6; text-align:left;
}
#legalLangNote{ margin-top:6px; }

/* ---- Consent checkbox (signup + subscribe) ---- */
.consent{
  display:flex; align-items:flex-start; gap:9px; margin:13px 0 4px;
  font-size:11.5px; line-height:1.55; color:var(--mut); cursor:pointer;
  text-align:left;
}
.consent input{
  flex:0 0 auto; width:15px; height:15px; margin:2px 0 0;
  accent-color:var(--gold); cursor:pointer;
}
.consent a{ color:var(--gold); text-decoration:underline; }
.consent-note{
  margin:8px 0 0; font-size:11px; line-height:1.5; color:var(--mut); text-align:center;
}

/* ---- Footer: links + repeat of the mandatory disclaimer ---- */
footer{ padding-bottom:calc(30px + var(--riskbar-h, 96px)); }
.foot-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
  margin-bottom:10px; font-size:12.5px;
}
.foot-links a{ color:var(--mut); text-decoration:none; }
.foot-links a:hover{ color:var(--gold); }
.foot-legal{
  max-width:940px; margin:12px auto 0; font-size:11px; line-height:1.6;
  color:var(--mut); opacity:.85;
}

@media (max-width:760px){
  .risk-bar-in{ padding:7px 14px; gap:8px; flex-wrap:wrap; }
  .risk-bar b{ display:none; }
  .risk-bar p{ flex:1 1 100%; font-size:10.5px; line-height:1.45; }
  .risk-bar-link{ margin-left:auto; font-size:11px; }
  .legal{ grid-template-columns:1fr; }
  .legal-card{ padding:15px; }
}
/* Toast bar ke neeche chhup na jaye */
#toasts{ bottom:calc(var(--riskbar-h, 96px) + 16px); }
/* footer ke neeche extra jagah nahi — body ka padding kaafi hai */
footer{ padding-bottom:24px; }

/* OK button — bar hatane ke liye. User ko hamesha chipki hui legal bar nahi
   chahiye; OK dabane par hat jati hai aur localStorage me yaad rehta hai
   (riskbar.js). Hat jane ke baad bhi disclaimer footer me maujood rehta hai. */
/* App ke .btn.ghost jaisa — chhota version. Pehle ye sona tha, to bar par do
   sone ke tukde (OK aur link) page se alag chamakte the. */
.risk-ok{
  flex:0 0 auto; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.05); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px 16px; font-size:12px; font-weight:700; letter-spacing:.04em;
  transition:border-color var(--t), background var(--t);
}
.risk-ok:hover{ border-color:var(--acc); background:rgba(255,255,255,.09); }
/* Bar hidden ho to uski jagah bhi nahi rehni chahiye */
.risk-bar[hidden]{ display:none; }
/* Chhoti screen par bar lipat jati hai — OK aur link ek line me rahein */
@media (max-width:720px){
  .risk-bar-in{ flex-wrap:wrap; gap:8px 12px; padding:9px 16px; }
  .risk-bar p{ flex:1 1 100%; order:2; }
  .risk-bar b{ order:1; }
  .risk-ok{ order:3; margin-left:auto; }
  .risk-bar-link{ order:4; }
}

/* =================================================================
   LEGAL PAGES (risk.html, privacy.html)
   -----------------------------------------------------------------
   Ye pages app.js load nahi karte, par dikhne me site ka hissa lagne
   chahiye. Isliye style yahan hai, har page ke andar <style> me nahi:
   ek jagah badlo to dono page saath badlein.
   Rang SIRF tokens se — pehle maine inme #60a5fa (neela) hardcode kar
   diya tha jabki site ka accent gold hai, aur page paraya lagta tha.
   ================================================================= */
.legalpage{ max-width:1180px; margin:auto; padding:96px 20px 30px; }
.legalpage .back{
  display:inline-block; margin-bottom:22px; font-size:13px;
  color:var(--mut); transition:color var(--t);
}
.legalpage .back:hover{ color:var(--gold); }
.legalpage h1{
  font-family:Sora,Inter,sans-serif; font-size:26px; letter-spacing:-.5px;
  margin:0 0 4px;
}
.legalpage .stamp{ color:var(--mut); font-size:12.5px; margin:0 0 24px; }
.legalpage h2{
  font-family:Sora,Inter,sans-serif; font-size:17px; letter-spacing:-.2px;
  margin:30px 0 8px; color:var(--txt);
}
.legalpage p,.legalpage li{ color:var(--mut); font-size:13.5px; line-height:1.7; }
.legalpage b{ color:var(--txt); }
.legalpage ul{ padding-left:20px; margin:8px 0; }
.legalpage li{ margin:6px 0; }
.legalpage a{ color:var(--gold); }
.legalpage a:hover{ color:#fff; }
/* Sidha-sadha card, baaki app ke panel jaisa */
.legalbox{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; margin:16px 0;
  box-shadow:var(--edge);
}
.legalbox p{ margin:0; }
/* Privacy page ki table */
.legaltable{ width:100%; border-collapse:collapse; margin:12px 0; font-size:13px; }
.legaltable th,.legaltable td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--mut);
}
.legaltable th{ color:var(--txt); font-weight:600; }
.legaltable tr:first-child th{ border-bottom-color:var(--line2); }
/* risk.html me .section bhi hai (wo markup index se uthaya gaya hai). Nested
   hone par padding do baar lag jati thi — yahan zero kar dete hain. */
.legalpage .section{ padding:0; max-width:none; }

/* =================================================================
   AAJ KI CRYPTO NEWS — dashboard me Portfolio ke bagal me
   -----------------------------------------------------------------
   Dashboard ke baaki panels jaisa hi .panel. Portfolio aur news ek line
   me, barabar oonchai. Pehle ye poore page ke daaye sticky column tha —
   user ko wo jama nahi, dashboard ke saath line me chahiye tha.
   Rang sirf site ke tokens se.
   ================================================================= */
.dash-top{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
/* Grid ka doosra khaana SIRF jab news ho (app.js `has-news` lagata hai) */
.dash-top.has-news{ grid-template-columns:minmax(0,1fr) 340px; }
@media (max-width:900px){ .dash-top.has-news{ grid-template-columns:minmax(0,1fr); } }

.news-panel{ display:flex; flex-direction:column; min-height:0; }
.news-panel[hidden]{ display:none; }
.news-panel .panel-head{ margin-bottom:4px; }
.news-live{ display:flex; align-items:center; gap:6px; color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.news-live i{ width:7px; height:7px; border-radius:50%; background:var(--grn); animation:newsPulse 2s infinite; }
@keyframes newsPulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); } 70%,100%{ box-shadow:0 0 0 6px rgba(52,211,153,0); } }
.news-note{ margin:0 0 10px; color:var(--mut); font-size:11.5px; }

/* Khidki bachi hui saari jagah leti hai. Andar ki list ABSOLUTE hai — iska
   matlab news kitni bhi lambi ho, wo panel ko lamba nahi karti; panel ki
   oonchai Portfolio se aati hai. Bina iske 30 news wala panel Portfolio ko
   bhi kheench kar lamba kar deta. */
.news-window{
  position:relative; flex:1; min-height:240px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
}
.news-track{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; gap:10px; padding:4px 0; }
/* Loop: list do baar hoti hai (A B C D A B C D) aur aadhi doori chalti hai,
   to aakhri ke baad pehli bina jhatke aati hai — A, B, C, D, A, B...
   Disha: upar se neeche. Ulta (neeche se upar) chahiye to sirf from/to
   aapas me badal do. */
.news-track.moving{ animation:newsLoop var(--news-dur,60s) linear infinite; }
.news-window:hover .news-track,
.news-window:focus-within .news-track,
.news-window.held .news-track{ animation-play-state:paused; }      /* phone: ungli rakhi to ruko */
/* Panel ke andar ungli se upar-neeche kheenchna list chalaye, page nahi.
   (Scroll ka kaam app.js karta hai — nudgeNews.) */
.news-window{ touch-action:pan-x; overscroll-behavior:contain; }
@keyframes newsLoop{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

.news-item{
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; font-size:12.5px; line-height:1.55; color:var(--txt);
}
.news-item time{ display:block; color:var(--mut); font-size:11px; margin-bottom:5px; }
/* Bot ne jaisa bheja waisa: line break, bold, italic sab */
.news-body{ white-space:pre-line; word-break:break-word; }
.news-body b{ font-weight:700; }
.news-body code{ font-family:ui-monospace,Consolas,monospace; font-size:.92em; background:rgba(255,255,255,.06); padding:0 4px; border-radius:4px; }
.news-body a{ color:var(--acc2); border-bottom:1px solid var(--line2); }
.news-body a:hover{ color:var(--txt); }
/* Poori khabar uski website par */
.news-read{ display:inline-block; margin-top:8px; font-size:11.5px; font-weight:600; color:var(--acc2); }
.news-read:hover{ color:var(--txt); }
.news-empty{ color:var(--mut); font-size:12.5px; padding:10px 2px; }

/* Motion se dikkat wale ke liye: chalna band, haath se scroll */
@media (prefers-reduced-motion:reduce){
  .news-track.moving{ animation:none; }
  .news-window{ overflow-y:auto; }
  .news-track{ position:static; }
}
/* Mobile par Portfolio ke neeche — tay oonchai, warna khidki 0 ho jati */
@media (max-width:900px){ .news-panel{ height:420px; } }

/* ---------- Contact & community ----------
   Ek chauda banner: icon, baat, aur button. Rang site ke tokens se; button
   wahi .btn.primary jo baaki site par hai. */
.community{
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(120deg, var(--card2), var(--card));
  border:1px solid var(--line); border-radius:var(--r); padding:22px 24px;
  box-shadow:var(--edge);
}
.community-ic{
  flex:0 0 auto; width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; color:var(--acc2);
  background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.25);
}
.community-txt{ flex:1; min-width:0; }
.community-txt h3{ margin:0 0 4px; font-size:17px; }
.community-txt p{ margin:0; color:var(--mut); font-size:13.5px; line-height:1.6; }
.community-txt small{ display:block; margin-top:6px; color:var(--mut); opacity:.8; font-size:11.5px; }
.community-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:640px){
  .community{ flex-direction:column; align-items:flex-start; text-align:left; }
  .community-btn{ width:100%; text-align:center; }
}

/* =================================================================
   PRICE TICKER — header ke theek neeche, header ke saath chipka
   -----------------------------------------------------------------
   Nav ke andar hai, to nav ki sticky + blur waali parat isko bhi milti
   hai. Rang sirf tokens se. Daam "tabular-nums" — har update par ank
   apni jagah rahein, patti kaanpe nahi.
   ================================================================= */
.ticker{
  position:relative; display:flex; align-items:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(14,22,40,.55), rgba(7,11,20,.35));
  height:28px; font-size:12px;
}
.ticker[hidden]{ display:none; }
.ticker-window{
  flex:1; min-width:0; overflow:hidden; height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
/* Loop: list do baar, aadhi chaudai tak chalti hai — beech me jhatka nahi.
   Speed JS set karta hai (--tk-dur), coin ki ginti ke hisaab se. */
.ticker-track{ display:flex; align-items:center; height:100%; width:max-content; }
.ticker-track.moving{ animation:tickerMove var(--tk-dur,60s) linear infinite; }
.ticker-window:hover .ticker-track{ animation-play-state:paused; }
@keyframes tickerMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.tk-item{
  display:inline-flex; align-items:center; gap:7px; padding:0 18px; height:100%;
  white-space:nowrap; color:var(--mut); font-variant-numeric:tabular-nums;
  border-right:1px solid rgba(30,44,75,.6);
}
.tk-item img{ width:16px; height:16px; border-radius:50%; flex:0 0 auto; }
.tk-rank{ font-size:10.5px; color:var(--mut); opacity:.6; }
.tk-sym{ color:var(--txt); font-weight:700; letter-spacing:.02em; max-width:72px; overflow:hidden; text-overflow:ellipsis; }
.tk-price{ color:var(--txt); }
.tk-ch{ font-weight:600; font-size:11.5px; }
.tk-ch.up{ color:var(--grn); }
.tk-ch.dn{ color:var(--red); }
.tk-ch.flat{ color:var(--mut); }

/* Attribution (CoinGecko ki shart) — daayi taraf tika, chalti patti ke upar */
.ticker-src{
  flex:0 0 auto; height:100%; display:flex; align-items:center; padding:0 14px 0 10px;
  font-size:10.5px; letter-spacing:.04em; color:var(--mut); opacity:.75;
  border-left:1px solid var(--line);
}
.ticker-src:hover{ opacity:1; color:var(--txt); }

@media (prefers-reduced-motion:reduce){
  .ticker-track.moving{ animation:none; }
  .ticker-window{ overflow-x:auto; }
}
@media (max-width:640px){
  .ticker{ height:26px; font-size:11px; }
  .tk-item{ padding:0 12px; gap:6px; }
  .tk-rank{ display:none; }
  .ticker-src{ display:none; }        /* chhoti screen: jagah ticker ko; link footer me hai */
}

/* Header ab nav + ticker hai. "#marketplace" jaise link par jaane par
   section ki heading header ke neeche na chhupe. */
html{ scroll-padding-top:84px; }
.foot-src{ margin:6px 0 0; font-size:11px; color:var(--mut); opacity:.75; }
.foot-src a{ color:var(--mut); border-bottom:1px solid var(--line2); }
/* =================================================================
   HEADER + TICKER DONO CHIPKE; HEADER PATLA
   -----------------------------------------------------------------
   Kahani: pehle header chipakta hi nahi tha (niche dekho) -> user ne kaha
   "sirf ticker fix, header nahi" -> phir "header bhi fix krr do ... neeche
   gaya aur home pe jaana tha toh scroll upar krna pda". To ab dono: ticker
   <nav> ke ANDAR menu ke neeche, aur poora <nav> sticky — dono ek saath,
   kahin se bhi AlgoSub par ek click = upar.

   Ye block JAAN-BOOJH KAR file ke AAKHIR me hai: upar ke purane niyam
   (`.nav{position:sticky}` line ~49, aur `.nav,.hero,main,footer
   {position:relative}` line ~347) aapas me ulat-pulat karte the — CSS me
   baad wala jeet'ta hai. test.js aakhri position ki jaanch karta hai.
   z-index 60: page (1) ke upar, modal (100) aur risk-bar (120) ke neeche.
   ================================================================= */
.nav{ position:sticky; top:0; z-index:60; }
/* Ticker nav ke andar hai — alag se chipakne ki zaroorat nahi; nav ki
   dhundhli parat ise bhi milti hai. */
.ticker{ position:relative; background:rgba(7,11,20,.35); border-top:1px solid var(--line); border-bottom:0; }

/* Header: PATLA (upar-neeche kam), par DAAYE-BAAYE khula.
   ~64px mota laga -> 42px kiya -> "bht close close lg rha, spacing do" ->
   user ne saaf kiya: "vertical mai nhi, horizontal pe ... header patla hie
   rakho". To oonchai ~42px hi, par AlgoSub / Strategies / How it works /
   buttons ke beech ki jagah badhi (menu 32px, groups 48px). */
.nav-inner{ padding:7px 24px; gap:40px; }
.nav.scrolled .nav-inner{ padding-top:5px; padding-bottom:5px; }
.brand{ font-size:16px; gap:10px; }
.brand-mark{ font-size:18px; }
.brand-text{ line-height:1.1; }
.brand-text small{ font-size:7.5px; letter-spacing:3.2px; }
.nav-links{ font-size:14px; gap:28px; letter-spacing:.1px; }
/* Menu ka koi shabd do line me na toote ("How It / Works" 1366px par toot raha tha) */
.nav-links a, .engine-dot, .lang-btn{ white-space:nowrap; transition:color var(--t); }
.nav-cta{ gap:14px; }
.lang-btn{ font-size:12px; padding:4px 15px; }
.engine-dot{ font-size:11px; padding:3px 13px; gap:7px; }
.engine-dot i{ width:7px; height:7px; }
#userbox{ gap:10px; }
#userbox .btn.sm{ padding:5px 15px; font-size:12.5px; }

/* =================================================================
   PHONE PAR HEADER (user: "website phone responsive hoona chahiyeh")
   -----------------------------------------------------------------
   Asli phone emulation (Edge, 390px) ke screenshot me dikha: header ki
   har cheez do line me toot rahi thi — "brand ki chhoti line", "engine /
   live", "Login / / Signup". Baaki page phone par theek tha.
   Niyam: header me koi text NAHI tootega; jagah kam ho to kam zaroori
   cheez chhoti/chhupti hai (engine ka text -> sirf hara dot).
   ================================================================= */
.nav-inner{ min-width:0; }
.nav-cta{ min-width:0; }
#userbox{ display:flex; align-items:center; gap:6px; min-width:0; }
#userbox .btn{ white-space:nowrap; }
.brand-text, .brand-text small{ white-space:nowrap; }

@media (max-width:640px){
  .nav-inner{ padding:8px 16px; gap:12px; }
  .brand{ font-size:15px; gap:8px; }
  .brand-mark{ font-size:17px; }
  .brand-text small{ font-size:6.5px; letter-spacing:1.8px; }
  .nav-cta{ gap:9px; }
  .lang-btn{ padding:5px 10px; font-size:11.5px; }
  /* Engine: text chhupa, sirf hara dot — matlab wahi, jagah aadhi.
     title="Trade engine status" hover/long-press par batata hai. */
  .engine-dot{ padding:5px; border-radius:50%; }
  .engine-dot em{ display:none; }
  .syncdot{ display:none; }
  #userbox .btn.sm{ padding:6px 11px; font-size:12px; }
  #userbox .btn.primary.sm{ padding:7px 12px; }
  /* Login ke baad: naam lamba ho to "Aaditya Jais…" — header na toote */
  #userbox .btn.ghost:first-child{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  /* Phone par Logout header se hat kar "Your Profile" ke andar (#prLogout)
     — naam ko jagah milti hai, aur zyaadatar apps me logout wahin hota hai. */
  #userbox .nav-logout{ display:none; }
}
/* Bahut chhote phone (360px se kam): tagline hatao, naam ki jagah do */
@media (max-width:370px){
  .brand-text small{ display:none; }
  .lang-btn{ padding:4px 7px; }
  #userbox .btn.ghost:first-child{ max-width:120px; }
}
/* Beech ki chaudai (laptop ~1000-1180px): menu khula hai par jagah kam —
   gaps thode kam, warna header ki cheezein aapas me takrayein. */
@media (min-width:901px) and (max-width:1180px){
  .nav-inner{ gap:24px; padding-left:18px; padding-right:18px; }
  .nav-links{ gap:20px; font-size:13.5px; }
  .nav-cta{ gap:10px; }
  /* Login ke baad yahan Logout 8-31px bahar nikal raha tha (960-1024px) —
     engine ka text hata kar sirf hara dot, jagah ban jati hai. */
  .engine-dot{ padding:5px; border-radius:50%; }
  .engine-dot em{ display:none; }
  #userbox .btn.ghost:first-child{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
}

/* =================================================================
   HEADER: EK KONE SE DOOSRE KONE TAK
   -----------------------------------------------------------------
   User: "ek corner se dusre corner tak . jese bdi company ki website mai".
   Pehle nav-inner 1180px ke dabbe me beech me band tha — bade screen par
   dono taraf khaali patti. Ab poori chaudai: logo baaye kone me, buttons
   daaye kone me, menu dono ke beech (dono taraf margin auto).
   Brand "AlgoSub" jaisa tha waisa (do line) — baaki sab
   ek line (upar white-space:nowrap).
   ================================================================= */
/* Kram (user: "Strategies algo sub ke bagal mai, beech mai space, phir
   hindi wla option leke end tak logout"):
     [AlgoSub  Strategies Dashboard How it works ...]   ...khaali...   [हिंदी engine 👤 Logout]
   Menu logo ke saath (sirf gap); khaali jagah nav-cta ka margin-left:auto. */
.nav-inner{ max-width:none; padding-left:32px; padding-right:32px; }
.nav-links{ margin-left:0; }
.nav-cta{ margin-left:auto; }
@media (min-width:901px) and (max-width:1180px){
  .nav-inner{ padding-left:20px; padding-right:20px; }
}
@media (max-width:640px){
  .nav-inner{ padding-left:16px; padding-right:16px; }
}

/* =================================================================
   CHATBOT — neeche daaye kone me (chatbot.js)
   -----------------------------------------------------------------
   Risk-bar neeche chipki rehti hai, to button usse UPAR (--riskbar-h).
   Toast pehle isi kone me the — unhe button ke upar khiska diya, warna
   dono ek doosre ko dhakte. Rang sirf tokens se.
   z-index: page/header (60) ke upar, modal (100) ke neeche — modal khule
   to chat uske peeche rahe.
   ================================================================= */
.cb-fab{
  position:fixed; right:20px; bottom:calc(var(--riskbar-h, 0px) + 20px); z-index:90;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:#04121f;
  background:linear-gradient(135deg,#3b82f6,#22d3ee);
  box-shadow:0 14px 34px -10px rgba(56,150,255,.75), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform var(--t), box-shadow var(--t);
}
.cb-fab:hover{ transform:translateY(-2px) scale(1.04); }
.cb-fab.on{ transform:rotate(-8deg); }
.cb-dot{ position:absolute; top:4px; right:4px; width:13px; height:13px; border-radius:50%; background:var(--red); border:2px solid var(--bg); }
#toasts{ bottom:calc(var(--riskbar-h, 0px) + 92px) !important; }

.cb-teaser{
  position:fixed; right:20px; bottom:calc(var(--riskbar-h, 0px) + 90px); z-index:90;
  max-width:280px; display:flex; gap:8px; align-items:flex-start; cursor:pointer;
  background:var(--card2); color:var(--txt); border:1px solid var(--line2); border-radius:14px 14px 4px 14px;
  padding:12px 12px 12px 14px; font-size:13.5px; line-height:1.45; box-shadow:var(--sh-lift);
  animation:cbIn .3s var(--e);
}
.cb-teaser[hidden]{ display:none; }
.cb-teaser-x{ border:0; background:none; color:var(--mut); font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }

.cb-panel{
  position:fixed; right:20px; bottom:calc(var(--riskbar-h, 0px) + 92px); z-index:90;
  width:380px; height:min(600px, calc(100vh - var(--riskbar-h, 0px) - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line2); border-radius:18px;
  box-shadow:var(--sh-lift); animation:cbIn .25s var(--e);
}
.cb-panel[hidden]{ display:none; }
@keyframes cbIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

.cb-head{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(120deg, rgba(59,130,246,.18), rgba(34,211,238,.08)); }
.cb-avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:#04121f;
  background:linear-gradient(135deg,#3b82f6,#22d3ee); flex:0 0 auto; }
.cb-titles{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cb-titles b{ font-size:14.5px; }
.cb-titles small{ font-size:11.5px; color:var(--grn); }
.cb-close{ border:0; background:none; color:var(--mut); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.cb-close:hover{ color:var(--txt); }

.cb-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.cb-msg{ max-width:88%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; word-break:break-word; }
.cb-msg p{ margin:0 0 6px; } .cb-msg p:last-child{ margin-bottom:0; }
.cb-msg.bot{ align-self:flex-start; background:var(--card2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.cb-msg.me{ align-self:flex-end; background:linear-gradient(120deg,#2563eb,#0891b2); color:#fff; border-bottom-right-radius:4px; }
.cb-msg b{ color:var(--txt); }
.cb-typing{ display:flex; gap:4px; padding:12px 14px; }
.cb-typing i{ width:7px; height:7px; border-radius:50%; background:var(--mut); animation:cbBlink 1s infinite; }
.cb-typing i:nth-child(2){ animation-delay:.15s; } .cb-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes cbBlink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.cb-steps{ list-style:none; margin:10px 0 4px; padding:0; display:flex; flex-direction:column; gap:12px; }
.cb-step{ background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:9px; }
.cb-step img{ display:block; width:100%; height:auto; border-radius:8px; margin-bottom:8px; border:1px solid var(--line); }
.cb-step-t{ display:block; margin-bottom:3px; font-size:13px; }
.cb-step p{ color:var(--mut); font-size:12.5px; }
.cb-illus{ display:block; color:var(--mut); font-size:11px; margin-top:6px; opacity:.8; }
.cb-link{ display:inline-block; margin-top:8px; color:var(--acc2); font-weight:600; font-size:12.5px; }

.cb-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 10px; }
.cb-chips:empty{ display:none; }
.cb-chip{ border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--txt); border-radius:99px;
  padding:6px 11px; font-size:12px; cursor:pointer; font-family:inherit; transition:border-color var(--t), background var(--t); }
.cb-chip:hover{ border-color:var(--acc2); background:rgba(34,211,238,.08); }

.cb-form{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }
.cb-form input{ flex:1; min-width:0; margin:0; border-radius:12px; padding:10px 12px; font-size:13.5px; }
.cb-send{ border:0; border-radius:12px; width:44px; cursor:pointer; color:#04121f; font-size:15px;
  background:linear-gradient(135deg,#3b82f6,#22d3ee); }
.cb-note{ margin:0; padding:0 14px 10px; font-size:10.5px; color:var(--mut); opacity:.8; text-align:center; }

/* Phone: chat lagbhag poori screen, button ke upar */
@media (max-width:640px){
  .cb-fab{ right:14px; width:52px; height:52px; bottom:calc(var(--riskbar-h, 0px) + 14px); }
  .cb-panel{ right:8px; left:8px; width:auto; bottom:calc(var(--riskbar-h, 0px) + 76px);
    height:calc(100dvh - var(--riskbar-h, 0px) - 90px); border-radius:16px; }
  .cb-teaser{ right:14px; left:14px; max-width:none; bottom:calc(var(--riskbar-h, 0px) + 76px); }
  #toasts{ bottom:calc(var(--riskbar-h, 0px) + 80px) !important; }
}
@media (prefers-reduced-motion:reduce){ .cb-panel, .cb-teaser{ animation:none; } }
/* Bot ki image (img/bot.svg). Neela bot neele gol button par khoya lagta —
   button gehra, halki cyan chamak ke saath, bot bada. */
.cb-fab{ background:radial-gradient(circle at 50% 40%, #16233f, #0b1222); color:var(--txt);
  border:1px solid rgba(34,211,238,.45); box-shadow:0 14px 34px -10px rgba(34,211,238,.55), 0 0 0 4px rgba(34,211,238,.08); }
.cb-fab-img{ width:40px; height:40px; display:block; }
.cb-avatar{ background:none; width:38px; height:38px; }
.cb-avatar-img{ width:38px; height:38px; display:block; }
.cb-teaser-img{ width:28px; height:28px; flex:0 0 auto; margin-top:-2px; }
@media (max-width:640px){ .cb-fab-img{ width:36px; height:36px; } }
/* "Need help?" — bot button ke bagal me hamesha (user: "need help chat bot
   ke around kahi dikhe taaki logo ko uski visiblity pta ho"). Button ke
   beech ki seedh me; chat khuli ho ya swagat bubble ho to chhupta hai. */
.cb-help{
  position:fixed; z-index:90; right:90px; bottom:calc(var(--riskbar-h, 0px) + 33px);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  padding:7px 14px 7px 12px; border-radius:99px; font-size:13px; font-weight:600; color:var(--txt);
  background:var(--card2); border:1px solid rgba(34,211,238,.4);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.8); white-space:nowrap;
  animation:cbHelpIn .5s var(--e) both; transition:border-color var(--t), transform var(--t);
}
.cb-help:hover{ border-color:var(--acc2); transform:translateX(-2px); }
.cb-help[hidden]{ display:none; }
/* Button ki taraf chhota teer — label bot ka hi hai, ye saaf dikhe */
.cb-help::after{ content:''; position:absolute; right:-6px; top:50%; width:10px; height:10px; margin-top:-5px;
  background:var(--card2); border-right:1px solid rgba(34,211,238,.4); border-top:1px solid rgba(34,211,238,.4); transform:rotate(45deg); }
.cb-help-dot{ width:7px; height:7px; border-radius:50%; background:var(--grn); animation:newsPulse 2s infinite; }
@keyframes cbHelpIn{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:none; } }
@media (max-width:640px){
  .cb-help{ right:76px; bottom:calc(var(--riskbar-h, 0px) + 25px); font-size:12px; padding:6px 12px 6px 10px; }
}
@media (prefers-reduced-motion:reduce){ .cb-help{ animation:none; } }
/* Step ke andar ki chetavni (CoinDCX step 4: "Bind IP Address" mat karo) */
.cb-step .cb-warn{ margin:8px 0 0; padding:8px 10px; border-radius:9px; font-size:12.5px; line-height:1.5;
  color:#fecaca; background:rgba(248,113,113,.10); border:1px solid rgba(248,113,113,.45); }
.cb-step .cb-warn b{ color:#fff; }

/* Subscribe form: "Key kahan se milegi?" -> chatbot ke CoinDCX steps */
.keyhelp{ float:right; background:none; border:0; padding:0; font:inherit; font-size:12px; color:var(--acc, #6ea8ff); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.keyhelp:hover{ opacity:.85 }
/* Modal (100) khula ho aur chat usi se khula -> modal ke upar, risk-bar (120) ke neeche */
.cb-panel.cb-front{ z-index:110; }