:root{--bg:#060912;--bg2:#0c1020;--surface:rgba(255,255,255,0.04);--surface-tint:rgba(0,0,0,.2);--hairline:rgba(255,255,255,.07);--surface2:rgba(255,255,255,0.07);--border:rgba(255,255,255,0.09);--border-glow:rgba(0,245,160,0.35);--accent:#00f5a0;--accent2:#00d4ff;--accent3:#a855f7;--text:#e8f0fe;--text2:#8899aa;--text3:#66788a;--primary:#00f5a0;--red:#ff4757;--menu-bg:#141924;--menu-border:rgba(255,255,255,.14);--menu-hover:rgba(255,255,255,.07);--danger:#ff4757;--success:#00f5a0;--warn:#ffa502;--font-head:'Syne',sans-serif;--font-mono:'Space Mono',monospace;--font-body:'DM Sans',sans-serif;--radius:20px;--radius-sm:12px}body.light-mode{--bg:#f0f4f8;--bg2:#e2e8f0;--surface:rgba(255,255,255,0.85);--surface2:rgba(255,255,255,0.95);--border:rgba(0,0,0,0.08);--text:#1a2332;--text2:#5a6a7a;--text3:#7b8a9a;--primary:#00a86b;--red:#e03141;--menu-bg:#ffffff;--menu-border:rgba(0,0,0,.12);--menu-hover:rgba(0,0,0,.055);--accent:#00a86b;--accent2:#0088cc;--accent3:#7c3aed;--surface-tint:rgba(0,0,0,.045);--hairline:rgba(0,0,0,.08)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}#bgCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5}#authPage{position:fixed;inset:0;z-index:100;display:flex;align-items:stretch;background:#020917;overflow:hidden}#authBgCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.auth-left{flex:1;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:36px 48px 36px 48px;min-width:0}.auth-left::after{content:'';position:absolute;top:-60px;right:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(0,245,160,.1) 0,transparent 70%);pointer-events:none}.auth-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.auth-stat-chip{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 10px;font-size:.73rem;font-family:var(--font-mono);display:flex;align-items:center;gap:5px;backdrop-filter:blur(8px)}.auth-stat-chip .sv{font-weight:700}.auth-stat-chip .sv.up{color:#00f5a0}.auth-stat-chip .sv.dn{color:#ff4757}.auth-stat-chip .sl{color:rgba(255,255,255,.32);font-size:.66rem}.auth-left-logo{display:flex;align-items:center;gap:10px}.auth-left-logo img{width:36px;height:36px;object-fit:contain}.auth-left-logo .lbrand{font-family:var(--font-head);font-size:1.45rem;font-weight:800;letter-spacing:2px;display:flex;align-items:center}.auth-left-logo .lbrand .t-trade{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.15)}.auth-left-logo .lbrand .t-nix{background:linear-gradient(90deg,#00f5a0,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-headline{margin-top:0}.auth-headline h1{font-family:var(--font-head);font-size:3rem;font-weight:800;line-height:1.08;color:#fff;margin:0}.auth-headline h1 .hl-green{color:#00f5a0}.auth-headline p{color:rgba(255,255,255,.52);font-size:.92rem;margin:12px 0 16px;line-height:1.6;max-width:320px}.auth-features{display:flex;flex-direction:column;gap:16px}.auth-feat-item{display:flex;align-items:flex-start;gap:14px}.auth-feat-icon{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.auth-feat-icon.green{background:rgba(0,245,160,.12);color:#00f5a0}.auth-feat-icon.purple{background:rgba(108,71,255,.15);color:#a78bfa}.auth-feat-icon.blue{background:rgba(0,212,255,.12);color:#00d4ff}.auth-feat-icon.amber{background:rgba(251,146,60,.15);color:#fb923c}.auth-feat-text h4{color:#fff;font-size:.95rem;font-weight:700;margin:0 0 3px}.auth-feat-text p{color:rgba(255,255,255,.45);font-size:.8rem;margin:0;line-height:1.4}.auth-left-footer{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.35);font-size:.78rem}.auth-left-footer .sec-badge{display:flex;align-items:center;gap:6px;color:#00f5a0;font-weight:600;font-size:.82rem}.auth-right{width:520px;flex-shrink:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:32px 40px}.auth-right::before{content:'';position:absolute;inset:8px;border-radius:24px;background:linear-gradient(160deg,rgba(10,16,35,.85) 0,rgba(6,10,24,.92) 100%);border:1px solid rgba(108,71,255,.5);backdrop-filter:blur(40px);box-shadow:0 0 80px rgba(108,71,255,.12),0 0 40px rgba(0,245,160,.05),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(108,71,255,.1);pointer-events:none}.auth-right::after{content:'';position:absolute;top:8px;right:8px;width:60px;height:60px;border-top:2px solid rgba(0,245,160,.4);border-right:2px solid rgba(0,245,160,.4);border-radius:0 24px 0 0;pointer-events:none}.auth-right-corner-bl{position:absolute;bottom:8px;left:8px;width:60px;height:60px;border-bottom:2px solid rgba(108,71,255,.5);border-left:2px solid rgba(108,71,255,.5);border-radius:0 0 0 24px;pointer-events:none;z-index:3}.auth-wrapper{position:relative;z-index:1;width:100%;max-width:400px;animation:authIn .7s cubic-bezier(.34,1.56,.64,1)}@keyframes authIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}.auth-card-inner{text-align:center}.auth-card-inner .welcome-logo{width:92px;height:92px;border-radius:22px;background:rgba(5,10,22,.9);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative}.auth-card-inner .welcome-logo img{width:72px;height:72px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 0 10px rgba(0,245,160,.35))}.logo-ring{position:absolute;inset:-3px;border-radius:25px;padding:2px;background:conic-gradient(from 0deg,#00f5a0,#00d4ff,#6c47ff,#ff4757,#00f5a0);animation:spinRing 3s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes spinRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-card-inner h2{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:#fff;margin:0 0 5px}.auth-card-inner h2 .wgrad{background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.auth-card-inner .sub{color:rgba(255,255,255,.38);font-size:.82rem;margin:0 0 22px}.btn-google{width:100%;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 18px;cursor:pointer;transition:all .2s;color:#fff;font-size:.95rem;font-weight:500;margin-bottom:20px;text-align:left}.btn-google:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}.btn-google .g-logo{width:28px;height:28px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-google .g-logo img{width:16px;height:16px}.btn-google .user-ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f97316,#ef4444);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0}.btn-google span{flex:1}.btn-google .chev{color:rgba(255,255,255,.3);font-size:.85rem}.auth-or{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.25);font-size:.72rem;text-transform:uppercase;letter-spacing:2px;margin:0 0 20px}.auth-or::after,.auth-or::before{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}.auth-field{margin-bottom:14px;text-align:left}.auth-field label{display:block;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px}.auth-input-wrap{position:relative}.auth-input-wrap .field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.25);font-size:.9rem;pointer-events:none}.auth-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 16px 13px 40px;color:#fff;font-family:var(--font-body);font-size:.93rem;transition:all .2s;outline:0}.auth-input:focus{border-color:rgba(0,245,160,.5);background:rgba(0,245,160,.04);box-shadow:0 0 0 3px rgba(0,245,160,.1)}.auth-input::placeholder{color:rgba(255,255,255,.2)}.otp-input{text-align:center;font-family:var(--font-mono);font-size:1.6rem;letter-spacing:.5rem;font-weight:700;padding-left:16px}.btn-auth{width:100%;padding:14px;background:linear-gradient(90deg,#00d4ff 0%,#00f5a0 62%);border:none;border-radius:14px;color:#000;font-family:var(--font-head);font-weight:800;font-size:1rem;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}.btn-auth::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .5s}.btn-auth:hover::after{transform:translateX(100%)}.btn-auth:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,245,160,.4)}.auth-secure-note{display:flex;align-items:center;justify-content:center;gap:6px;color:rgba(255,255,255,.3);font-size:.78rem;margin-top:14px}.auth-secure-note i{color:#00f5a0}.auth-contact{text-align:center;color:rgba(255,255,255,.3);font-size:.8rem;margin-top:20px}.auth-contact a{color:#00f5a0;text-decoration:none;font-weight:600}.auth-agree{display:flex;align-items:flex-start;gap:9px;font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:16px;text-align:left}.auth-agree input{margin-top:3px;width:15px;height:15px;accent-color:#00f5a0;flex-shrink:0;cursor:pointer}.auth-agree a{color:#00f5a0;text-decoration:none}.auth-error{background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.3);border-radius:10px;padding:10px 14px;color:#ff4757;font-size:.82rem;margin-bottom:14px;display:none;text-align:left}.auth-hint{text-align:center;color:rgba(255,255,255,.35);font-size:.84rem;line-height:1.6}.auth-hint a{color:#00f5a0;text-decoration:none}@media (max-width:900px){.auth-left{display:none}.auth-right{width:100%;padding:20px;align-items:center;justify-content:center}.auth-right::before{inset:0;border-radius:0;border:none;background:linear-gradient(160deg,rgba(6,10,24,.94) 0,rgba(2,6,16,.97) 100%);box-shadow:none}.auth-bg-tint{background:linear-gradient(180deg,rgba(2,9,23,.75) 0%,rgba(2,9,23,.55) 45%,rgba(2,9,23,.8) 100%)}.auth-wrapper{max-width:440px}.auth-card-inner h2{font-size:1.35rem}}@media (max-width:480px){.auth-right{padding:24px 16px}.auth-headline h1{font-size:2.4rem}}.auth-copyright{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.2);font-size:.72rem;z-index:3;white-space:nowrap}#appPage{display:none}.navbar-top{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(6,9,18,.85);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid var(--border);padding:0 24px}body.light-mode .navbar-top{background:rgba(240,244,248,.9)}.nav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:16px;height:64px}.nav-brand{font-family:var(--font-head);font-weight:800;font-size:1.3rem;letter-spacing:0;display:flex;align-items:center;gap:8px;white-space:nowrap}.bw-trade{color:var(--text)}.bw-nix{background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.nav-links{display:flex;align-items:center;gap:4px;flex:1}.nav-link{padding:8px 14px;border-radius:var(--radius-sm);color:var(--text2);text-decoration:none;font-size:.88rem;font-weight:500;transition:color .2s,background .2s;cursor:pointer;border:none;background:0 0;white-space:nowrap}.nav-link.active,.nav-link:hover{color:var(--accent);background:rgba(0,245,160,.07)}.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}.nav-user-badge{background:var(--surface2);border:1px solid var(--border);border-radius:50px;padding:6px 14px;font-size:.82rem;color:var(--text2);display:flex;align-items:center;gap:6px}.nav-user-badge span{color:var(--accent);font-weight:600}.nav-avatar-img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}.mini-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.mini-avatar-fallback{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#000;font-weight:800}.profile-avatar-wrap{position:relative;width:80px;height:80px;flex-shrink:0;cursor:pointer}.profile-avatar-wrap img.profile-avatar-img{width:80px;height:80px;border-radius:50%;object-fit:cover;display:block}.profile-avatar-wrap .avatar-edit-badge{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;font-size:.75rem;border:2px solid var(--bg)}.nav-icon-btn{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;color:var(--text2);font-size:1rem}.nav-icon-btn:hover{border-color:var(--accent);color:var(--accent)}.hamburger{display:none}.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:16px;z-index:49;flex-direction:column;gap:4px;max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-menu.open{display:flex}.mobile-menu .nav-link{display:block;padding:12px 16px}
/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU LAYOUT FIX
   BUG THA: menu me desktop navbar ka HTML copy hota hai, jo horizontal
   flex row aur 2-column dropdown grid ke liye bana hai. Mobile me wahi
   CSS lagne se items ek line me side-by-side chale jaate the (screen se
   bahar), <li> ke bullet (○) dikhne lagte the, aur beech me bada khaali
   hissa ban jaata tha. Ab menu ke ANDAR sab kuch zabardasti vertical,
   full-width aur tap-friendly kar dete hain.
   ══════════════════════════════════════════════════════════════════ */
.mobile-menu{padding:8px 0 14px}
/* har container ko vertical stack banao — koi row/grid nahi */
.mobile-menu ul,.mobile-menu ol,.mobile-menu .dropdown-menu,
.mobile-menu .profile-grid,.mobile-menu .nav-links{
  display:block!important;list-style:none!important;
  margin:0!important;padding:0!important;
  grid-template-columns:none!important;float:none!important;
  position:static!important;transform:none!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  min-width:0!important;width:auto!important}
.mobile-menu li{list-style:none!important;display:block!important;margin:0!important}
/* .pd-grid desktop par 2-column hai — mobile menu me har item poori chaudai
   le, taaki tap area bada rahe aur naam kabhi kate nahi. */
.mobile-menu .pd-grid{display:block!important;grid-template-columns:none!important;gap:0!important}
.mobile-menu li::marker{content:""}
/* har tap-able item: poori chaudai, aaram se tap hone layak */
.mobile-menu .nav-link,.mobile-menu .dropdown-item,.mobile-menu a,.mobile-menu button{
  display:block!important;width:100%!important;box-sizing:border-box;
  text-align:left!important;padding:13px 18px!important;margin:0!important;
  font-size:.97rem!important;line-height:1.35!important;
  color:var(--text)!important;text-decoration:none!important;
  background:transparent!important;border:0!important;border-radius:10px;
  white-space:normal!important;overflow:visible!important}
.mobile-menu .nav-link:active,.mobile-menu .dropdown-item:active,
.mobile-menu a:active{background:var(--surface)!important}
/* section labels (PAGES / SETTINGS) */
.mobile-menu .pd-section-label{
  display:block!important;padding:14px 18px 6px!important;
  font-size:.7rem!important;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text2)!important;opacity:.8}
/* dividers */
.mobile-menu hr,.mobile-menu .dropdown-divider{
  display:block!important;margin:8px 14px!important;
  border:0;border-top:1px solid var(--border)!important;opacity:.7}
/* logout ko laal rakho */
.mobile-menu a[onclick*="doLogout"],.mobile-menu .dropdown-item[onclick*="doLogout"]{
  color:var(--danger)!important}#mainContent{max-width:1400px;margin:0 auto;padding:88px 24px 40px;position:relative;z-index:1}.glass-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;backdrop-filter:blur(12px);animation:fadeUp .5s ease;transition:transform .15s ease-out,box-shadow .25s;will-change:transform}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}@media(max-width:992px){.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:576px){.metric-grid{grid-template-columns:repeat(2,1fr);gap:12px}}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px;text-align:center;transition:transform .15s ease-out,border-color .25s,box-shadow .25s;cursor:pointer;position:relative;overflow:hidden;will-change:transform}.metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity .25s}.metric-card:hover{border-color:rgba(0,245,160,.3)}.metric-card:hover::before{opacity:1}.chart-card.tilt-3d,.glass-card.tilt-3d,.metric-card.tilt-3d{box-shadow:0 18px 34px -12px rgba(0,0,0,.45)}.metric-icon{font-size:1.5rem;margin-bottom:8px;opacity:.7}.metric-val{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;line-height:1;margin-bottom:6px;background:linear-gradient(135deg,var(--text),var(--text2));-webkit-background-clip:text;background-clip:text;color:transparent}.metric-val.pos{background:linear-gradient(135deg,var(--success),#00c47f);-webkit-background-clip:text;background-clip:text;color:transparent}.metric-val.neg{background:linear-gradient(135deg,var(--danger),#ff7070);-webkit-background-clip:text;background-clip:text;color:transparent}.metric-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--text2)}.form-control,.form-select{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;padding:12px 16px!important;color:var(--text)!important;font-family:var(--font-body)!important;transition:border-color .2s,box-shadow .2s!important}.form-control:focus,.form-select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(0,245,160,.12)!important}.form-control::placeholder{color:var(--text2)!important;opacity:.5!important}.form-label{color:var(--text2);font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:6px}.form-select option{background:var(--bg2);color:var(--text)}.btn-primary-custom{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:50px;padding:12px 28px;font-family:var(--font-head);font-weight:700;color:#000;cursor:pointer;transition:all .2s;font-size:.9rem}.btn-primary-custom:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,245,160,.3)}.btn-outline-custom{background:0 0;border:1px solid var(--border);border-radius:50px;padding:11px 26px;color:var(--text2);cursor:pointer;transition:all .2s;font-family:var(--font-body);font-weight:500;font-size:.9rem}.btn-outline-custom:hover{border-color:var(--accent);color:var(--accent)}.btn-sm-icon{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:.9rem}.btn-sm-icon:hover{border-color:var(--accent);color:var(--accent)}.btn-sm-icon.danger:hover{border-color:var(--danger);color:var(--danger)}.trade-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:all .2s;position:relative;overflow:hidden}.trade-card:hover{border-color:rgba(0,245,160,.2);transform:translateY(-2px)}.trade-card.win{border-left:3px solid var(--success)}.trade-card.loss{border-left:3px solid var(--danger)}.trade-field{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:.85rem}.trade-field:last-of-type{border-bottom:none}.trade-field .lbl{color:var(--text2);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.trade-field .val{font-family:var(--font-mono);font-size:.82rem}.badge-win{background:rgba(0,245,160,.15);color:var(--success);border:1px solid rgba(0,245,160,.3);border-radius:6px;padding:2px 8px;font-size:.75rem;font-family:var(--font-mono)}.badge-loss{background:rgba(255,71,87,.15);color:var(--danger);border:1px solid rgba(255,71,87,.3);border-radius:6px;padding:2px 8px;font-size:.75rem;font-family:var(--font-mono)}.badge-open{background:rgba(255,165,2,.15);color:var(--warn);border:1px solid rgba(255,165,2,.3);border-radius:6px;padding:2px 8px;font-size:.75rem}.badge-long{background:rgba(0,245,160,.1);color:var(--success);border-radius:6px;padding:2px 8px;font-size:.75rem}.badge-short{background:rgba(255,71,87,.1);color:var(--danger);border-radius:6px;padding:2px 8px;font-size:.75rem}.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;transition:transform .15s ease-out,box-shadow .25s;will-change:transform}.chart-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity .3s}.chart-card:hover::before{opacity:1}.chart-card canvas{width:100%!important}.dash-chart-row{display:grid;gap:16px;margin-bottom:16px}.dash-chart-row.two-col{grid-template-columns:1fr 1fr}.dash-chart-row.full{grid-template-columns:1fr}.dash-chart-row.three-two{grid-template-columns:5fr 3fr}@media(max-width:768px){.dash-chart-row.three-two,.dash-chart-row.two-col{grid-template-columns:1fr}}.chart-title{font-family:var(--font-head);font-size:.95rem;font-weight:700;margin-bottom:16px;color:var(--text2);text-transform:uppercase;letter-spacing:1px}.top-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}.top-bar h2{font-family:var(--font-head);font-size:1.5rem;font-weight:800;margin:0}.back-btn{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:50px;padding:8px 16px;cursor:pointer;color:var(--text2);font-size:.85rem;transition:all .2s}.back-btn:hover{border-color:var(--accent);color:var(--accent)}.ticker-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;overflow:hidden}.ticker-nse{overflow:hidden;padding:10px 0;border-bottom:1px solid var(--border)}.ticker-tape{display:inline-flex;white-space:nowrap;animation:ticker 50s linear infinite}.ticker-item{display:inline-flex;align-items:center;gap:6px;padding:0 30px;font-family:var(--font-mono);font-size:.82rem}@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.t-up{color:var(--success)}.t-dn{color:var(--danger)}.t-sym{color:var(--accent2);font-weight:700}@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(0,245,160,.5)}50%{opacity:.6;transform:scale(1.3);box-shadow:0 0 0 5px rgba(0,245,160,0)}}.watchlist-table{width:100%;border-collapse:separate;border-spacing:0 6px}.watchlist-table th{color:var(--text2);font-size:.75rem;text-transform:uppercase;letter-spacing:.8px;padding:8px 12px}.watchlist-table td{padding:12px;background:var(--surface)}.watchlist-table tr td:first-child{border-radius:10px 0 0 10px}.watchlist-table tr td:last-child{border-radius:0 10px 10px 0}.watchlist-table td.sym{font-family:var(--font-mono);font-weight:700;color:var(--accent2)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}.modal-overlay.show{display:flex}.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:28px;width:100%;max-width:480px;animation:authIn .3s ease}.toast-alert{position:fixed;top:80px;right:20px;z-index:9999;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 18px;font-size:.88rem;max-width:320px;animation:toastIn .3s ease;box-shadow:0 10px 30px rgba(0,0,0,.3)}.toast-alert.success{border-color:rgba(0,245,160,.4);color:var(--success)}.toast-alert.danger{border-color:rgba(255,71,87,.4);color:var(--danger)}.toast-alert.info{border-color:rgba(0,212,255,.4);color:var(--accent2)}#offlineBanner{position:fixed;top:0;left:0;right:0;z-index:10000;background:linear-gradient(90deg,#ff4757,#ff6b81);color:#fff;text-align:center;padding:9px 16px;font-size:.85rem;font-weight:600;display:none;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 12px rgba(0,0,0,.3)}#offlineBanner.show{display:flex;animation:slideDown .3s ease}@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}#offlineBanner .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulseDot 1.2s ease infinite}@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;color:#000;font-family:var(--font-head)}.stat-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}.stat-row:last-child{border-bottom:none}.stat-row .k{color:var(--text2);font-size:.85rem}.stat-row .v{font-family:var(--font-mono);font-size:.9rem;font-weight:700}.risk-panel{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px}.risk-stat{text-align:center}.risk-stat .v{font-family:var(--font-mono);font-size:1.1rem;font-weight:700}.risk-stat .l{font-size:.72rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}.img-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;display:none;align-items:center;justify-content:center}.img-modal.show{display:flex}.img-modal img{max-width:90vw;max-height:90vh;border-radius:12px}.fc{--fc-border-color:var(--border);--fc-page-bg-color:transparent;--fc-today-bg-color:rgba(0,245,160,0.05)}.fc-theme-standard td,.fc-theme-standard th{border-color:var(--border)}.fc-col-header-cell-cushion,.fc-daygrid-day-number{color:var(--text2)!important;text-decoration:none!important;font-size:.82rem}.fc-event{border-radius:6px!important;border:none!important;font-size:.75rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.dropdown-menu{background:var(--bg2)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;padding:8px!important}.dropdown-menu.profile-grid{min-width:340px}.pd-full{width:100%}.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}.pd-section-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:6px 12px 3px;font-weight:700}.dropdown-menu.profile-grid .dropdown-item{border-radius:8px;font-size:.86rem;padding:8px 12px}.dropdown-item{color:var(--text2)!important;border-radius:8px!important;font-size:.88rem!important}.dropdown-item:hover{background:var(--surface2)!important;color:var(--accent)!important}.section-title{font-family:var(--font-head);font-size:1.6rem;font-weight:800;margin-bottom:4px}.section-sub{color:var(--text2);font-size:.9rem;margin-bottom:24px}@media(max-width:768px){.navbar-top{padding:0 12px}.nav-inner{gap:8px;height:58px}.mobile-menu{top:58px;max-height:calc(100vh - 58px)}.nav-brand{font-size:.95rem}.nav-brand svg,.nav-brand img{width:24px;height:24px}.nav-right{gap:6px}.nav-user-badge{padding:5px 9px;font-size:.74rem;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-user-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64px;display:inline-block}.nav-icon-btn{width:34px;height:34px;font-size:.95rem;flex-shrink:0}.nav-links{display:none}.nav-inner{gap:8px;min-width:0}.nav-brand{flex-shrink:1;min-width:0;overflow:hidden}.nav-right{gap:6px;flex-shrink:0;min-width:0}.nav-right .nav-icon-btn:not(.hamburger){display:none}.nav-user-badge{max-width:74px}.nav-user-badge span{max-width:48px}.hamburger{display:flex;flex-shrink:0;margin-left:2px}.metric-val{font-size:1.3rem}.auth-card{padding:24px 20px}.section-title{font-size:1.3rem}.glass-card{padding:16px;border-radius:14px}.metric-card{padding:16px 12px;border-radius:14px}#mainContent{padding:70px 12px 32px}.trade-card{padding:14px}}@media(max-width:480px){.navbar-top{padding:0 8px}.nav-inner{gap:6px;height:54px}.mobile-menu{top:54px;max-height:calc(100vh - 54px)}.nav-brand .bw-nix,.nav-brand .bw-trade{font-size:.88rem}.nav-user-badge{max-width:64px;padding:5px 7px}.nav-user-badge span{max-width:40px}.nav-icon-btn{width:32px;height:32px;font-size:.88rem}#mainContent{padding:66px 8px 28px}.metric-grid{gap:8px}.metric-card{padding:12px 10px}.metric-val{font-size:1.1rem}.top-bar{gap:8px}}.btn-outline-custom,.btn-primary-custom,.btn-sm-icon,.glass-card,.metric-card,.trade-card{transition:all .18s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}@media(hover:none){.btn-sm-icon{width:40px;height:40px}}.qa-tile{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:18px 12px;text-align:center;cursor:pointer;transition:all .18s}.qa-tile:hover{border-color:var(--primary);transform:translateY(-2px);background:var(--surface)}.qa-emoji{font-size:1.8rem;margin-bottom:8px}.qa-label{font-weight:700;font-size:.85rem;color:var(--text)}
#authPage .hl-green{color:#00f5a0}#authPage .sec-badge{color:rgba(255,255,255,.65);font-weight:500}#authPage .wgrad{background:0 0;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:#fff}#authPage .auth-card-inner h2{color:#fff}#authPage a{color:rgba(255,255,255,.7);font-weight:500;text-decoration:underline;text-underline-offset:2px}#authPage a:hover{color:#00f5a0}
#aiBtn{position:fixed;bottom:24px;right:24px;z-index:9999;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#00f5a0,#00d4ff);border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,245,160,.5);display:none;align-items:center;justify-content:center;font-size:1.5rem;transition:transform .2s}#aiBtn:hover{transform:scale(1.1)}#aiBadge{position:absolute;top:-3px;right:-3px;background:#ff4757;color:#fff;font-size:.55rem;width:16px;height:16px;border-radius:50%;align-items:center;justify-content:center;font-weight:800;display:none}#aiPanel{position:fixed;z-index:9999;background:var(--bg2);border:1px solid rgba(255,255,255,.08);display:none;flex-direction:column;overflow:hidden;bottom:90px;right:16px;width:min(400px,calc(100vw - 20px));height:min(600px,calc(100vh - 110px));border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:all .25s ease}#aiPanel.show{display:flex}#aiPanel.expanded{bottom:0;right:0;top:0;left:0;width:100%!important;height:100%!important;border-radius:0}.aih{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--hairline);flex-shrink:0;background:var(--surface-tint)}.aih-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:livePulse 1.4s infinite;flex-shrink:0}.aih-name{font-weight:700;font-size:.88rem;font-family:var(--font-head);color:var(--text);flex:1}.aih-sub{font-size:.65rem;color:var(--text2);margin-top:1px}.aih-btns{display:flex;gap:4px;margin-left:auto}.aihb{width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:0 0;color:var(--text2);font-size:.78rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.aihb:hover{border-color:var(--accent);color:var(--accent)}#aiSetup{flex:1;padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#aiChat{display:flex;flex-direction:column;flex:1;overflow:hidden}#aiMsgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 12px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}#aiMsgs::-webkit-scrollbar{width:3px}#aiMsgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}.msg{display:flex;gap:6px;animation:mIn .18s ease;min-width:0}@keyframes mIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.msg.u{align-self:flex-end;flex-direction:row-reverse;max-width:88%}.msg.b{align-self:flex-start;max-width:93%}.mav{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-top:4px;overflow:hidden}.mbb{padding:8px 11px;border-radius:14px;font-size:.83rem;line-height:1.55;word-break:break-word;overflow-wrap:break-word;min-width:0}.msg.u .mbb{background:rgba(0,245,160,.12);border:1px solid rgba(0,245,160,.2);color:var(--text);border-top-right-radius:3px}.msg.b .mbb{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:var(--text);border-top-left-radius:3px}.mbb strong{color:var(--accent)}.mbb code{background:rgba(0,245,160,.1);border-radius:3px;padding:1px 4px;font-family:var(--font-mono);font-size:.76rem}.m-read-btn{display:inline-flex;align-items:center;gap:3px;margin-top:7px;padding:4px 10px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);border-radius:6px;color:var(--accent2);font-size:.7rem;cursor:pointer;transition:all .13s}.m-read-btn:hover{background:rgba(0,212,255,.2)}.m-read-btn.m-read-active{background:rgba(0,245,160,.18);border-color:rgba(0,245,160,.4);color:var(--accent);animation:m-read-pulse 1s infinite}@keyframes m-read-pulse{0%,100%{opacity:1}50%{opacity:.6}}.ai-tc-wrap{margin-top:8px;background:rgba(0,245,160,.06);border:1px solid rgba(0,245,160,.2);border-radius:10px;padding:9px 10px}.ai-tc-wrap .tc-head{font-weight:700;color:var(--accent);font-size:.82rem;margin-bottom:7px}.ai-tc-item{background:rgba(255,255,255,.03);border-radius:7px;padding:7px 9px;margin-bottom:5px}.ai-tc-item:last-of-type{margin-bottom:0}.ai-tc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}.ai-tc-sym{font-family:var(--font-mono);font-weight:700;font-size:.82rem;color:var(--accent2)}.ai-tc-meta{display:flex;gap:8px;font-size:.73rem;color:var(--text2);flex-wrap:wrap}.ai-tc-meta b{color:var(--text)}.ai-save-btn{width:100%;margin-top:8px;padding:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:8px;color:#000;font-weight:700;cursor:pointer;font-size:.8rem;font-family:var(--font-head)}.ai-save-btn:disabled{opacity:.5;cursor:not-allowed}.ai-confirm{background:rgba(255,165,2,.08);border:1px solid rgba(255,165,2,.3);border-radius:9px;padding:10px;margin-top:8px}.ai-confirm-t{font-weight:700;color:var(--warn);font-size:.8rem;margin-bottom:4px}.ai-confirm-d{font-size:.77rem;color:var(--text2);margin-bottom:8px;line-height:1.5}.ai-cb{display:flex;gap:6px}.ai-yes{flex:1;padding:7px;background:var(--danger);border:none;border-radius:7px;color:#fff;font-weight:700;cursor:pointer;font-size:.78rem}.ai-no{flex:1;padding:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;color:var(--text2);cursor:pointer;font-size:.78rem}.typing{display:flex;gap:4px;padding:2px 0;align-items:center}.typing span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:td 1.2s infinite}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes td{0%,100%,60%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1.2)}}.chips{padding:5px 10px 6px;display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0;border-top:1px solid rgba(255,255,255,.05)}.chip{font-size:.67rem;padding:3px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:0 0;color:var(--text2);cursor:pointer;transition:all .13s;white-space:nowrap}.chip:hover{border-color:var(--accent);color:var(--accent)}#aiAttach{padding:0 10px 5px;display:none;flex-wrap:wrap;gap:5px;align-items:center}.ap{position:relative;display:inline-flex}.ap img{width:38px;height:38px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.ap-x{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:#ff4757;color:#fff;border:none;cursor:pointer;font-size:.55rem;display:flex;align-items:center;justify-content:center}.fc-chip{display:flex;align-items:center;gap:4px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);border-radius:6px;padding:3px 8px;font-size:.72rem;color:var(--accent2)}.fc-x{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.15);color:var(--text2);border:none;cursor:pointer;font-size:.55rem;display:flex;align-items:center;justify-content:center}#aiContBar{padding:4px 10px 2px;flex-shrink:0}#aiContBtn{width:100%;padding:6px;background:rgba(0,245,160,.08);border:1px solid rgba(0,245,160,.25);border-radius:8px;color:var(--accent);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}#aiContBtn.on{background:rgba(255,71,87,.15);border-color:var(--danger);color:var(--danger)}.ai-inp{border-top:1px solid rgba(255,255,255,.06);padding:8px 10px;display:flex;gap:5px;align-items:flex-end;flex-shrink:0;background:rgba(0,0,0,.15)}#aiTxt{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px 11px;color:var(--text);font-size:.84rem;resize:none;outline:0;max-height:80px;font-family:var(--font-body);line-height:1.4;transition:border-color .2s}#aiTxt:focus{border-color:rgba(0,245,160,.4)}#aiTxt::placeholder{color:var(--text2);opacity:.5}.aib{width:33px;height:33px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);cursor:pointer;font-size:.88rem;display:flex;align-items:center;justify-content:center;transition:all .13s;flex-shrink:0;color:var(--text2)}.aib:hover{border-color:var(--accent);color:var(--accent)}.aib.red{border-color:var(--danger)!important;color:var(--danger)!important;animation:vp 1s infinite}.ai-send{width:33px;height:33px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;font-size:.88rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#000;transition:transform .13s}.ai-send:hover{transform:scale(1.1)}@keyframes vp{0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,.4)}50%{box-shadow:0 0 0 7px rgba(255,71,87,0)}}.cmg{max-width:140px;max-height:90px;border-radius:7px;object-fit:cover;margin-top:5px;cursor:pointer;display:block}#callOv{display:none;position:absolute;inset:0;z-index:10;background:var(--bg);border-radius:20px;flex-direction:column;align-items:center;justify-content:center;gap:16px}#callAv{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#00f5a0,#00d4ff);display:flex;align-items:center;justify-content:center;font-size:2.5rem}#callSt{font-family:var(--font-head);font-size:1rem;color:var(--text)}#callTr{font-size:.82rem;color:var(--text2);text-align:center;max-width:280px;min-height:40px;padding:0 20px}#callAct{min-height:60px;display:flex;flex-direction:column;gap:6px;align-items:center;width:90%;max-width:280px}.call-act-card{width:100%;background:rgba(0,245,160,.1);border:1px solid rgba(0,245,160,.3);border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.call-act-card.del{background:rgba(255,71,87,.1);border-color:rgba(255,71,87,.3)}.call-act-label{font-size:.78rem;color:var(--text);flex:1}.call-act-yes{padding:5px 14px;background:var(--accent);border:none;border-radius:6px;color:#000;font-weight:700;cursor:pointer;font-size:.75rem}.call-act-no{padding:5px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text2);cursor:pointer;font-size:.75rem}.call-btns{display:flex;gap:16px}
body.tnl-on>#aiBtn,body.tnl-on>#aiPanel,body.tnl-on>#appPage,body.tnl-on>#authPage,body.tnl-on>#bgCanvas,body.tnl-on>#offlineBanner{display:none!important}#tnlHost{position:relative;z-index:5}
/* ── AI panel: 3-dot menu ─────────────────────────────────────────────────
   Mode, language and "clear chat" used to sit in their own row (and the
   language one was a native <select>, which renders with the OS's own blue
   highlight and looks nothing like the rest of the panel). They live in this
   menu now, so the panel keeps one clean header row. */
.aih { position: relative; }
.ai-menu {
  position: absolute; top: 52px; right: 10px; z-index: 60;
  min-width: 208px; padding: 6px;
  /* --surface is a translucent white, which would let the chat show through a
     floating menu. Needs to be solid so it reads as a panel sitting on top. */
  /* BUG THA: ye #141924 hardcoded tha, isliye light mode mein bhi menu kaala
     rehta tha — aur uske andar .ai-menu-item ka color var(--text) hai, jo light
     mode mein DARK NAVY hai. Kaale par kaala = kuch dikhta hi nahi tha.
     (Screenshot mein "English / हिंदी / Hinglish" isi wajah se gayab the.) */
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 13px;
  box-shadow: 0 16px 44px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.ai-menu-lbl {
  font-size: .63rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text3); padding: 7px 10px 4px; font-weight: 700;
}
.ai-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.ai-menu-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--text); cursor: pointer;
  font-size: .82rem; font-weight: 600; font-family: inherit; text-align: left;
}
.ai-menu-item:hover { background: var(--menu-hover); }
.ai-menu-item.danger { color: #ff6b7a; }
/* the tick only shows on whichever option is currently active */
.ai-menu-tick { opacity: 0; color: var(--accent); font-weight: 700; }
.ai-menu-item.active { color: var(--accent); background: rgba(0,245,160,.09); }
.ai-menu-item.active .ai-menu-tick { opacity: 1; }

/* ── chips on one line ────────────────────────────────────────────────────
   Five chips used to wrap onto two rows and eat vertical space on a phone.
   One scrollable row instead, with the scrollbar hidden. */
.chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; }

/* mic button reads as "live" while continuous voice is on */
.aib.on {
  background: rgba(0,245,160,.16) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Login page background video ──────────────────────────────────────────
   Sits behind everything on the auth screen. The 3D candlestick canvas is
   kept as a fallback and only hidden once the video is genuinely playing,
   so a blocked autoplay or a slow connection still shows the old animation. */
.auth-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* The clip gets noticeably brighter in the middle, which would wash out the
   white headline — this holds the contrast steady throughout. */
.auth-bg-tint {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,9,23,.86) 0%, rgba(2,9,23,.55) 42%, rgba(2,9,23,.3) 100%),
    linear-gradient(180deg, rgba(2,9,23,.3) 0%, rgba(2,9,23,.08) 45%, rgba(2,9,23,.45) 100%);
}
#authBgCanvas { z-index: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   TRADE MOOL — UI polish pass
   Appended after the base sheet so these rules win without editing any of
   the existing ones. Everything here is presentational: no JS selectors,
   IDs or class names are changed, so app logic is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. HEADER ────────────────────────────────────────────────────────────
   Was: 64px bar, 30px logo, 4px gap between links — everything crowded
   into one line. Give it height, scale the logo, and let the links breathe. */
.nav-inner{ height:72px; gap:clamp(8px,1.5vw,14px); }
.nav-brand{ font-size:clamp(1.05rem,.95rem + .3vw,1.25rem); gap:10px; }
.nav-brand svg,.nav-brand img{ width:35px; height:35px; }

.nav-links{ gap:clamp(2px,.4vw,4px); flex-wrap:nowrap; min-width:0; }
.nav-link{
  padding:8px clamp(8px,1vw,12px);
  font-size:clamp(.74rem,.68rem + .3vw,.86rem);
  position:relative;                 /* anchor for the underline */
  flex-shrink:1;
  min-width:0;
  white-space:nowrap;
}
/* Animated underline: grows from the centre on hover, and stays put on the
   active tab. transform-based so it animates on the compositor. */
.nav-link::after{
  content:'';
  position:absolute;
  left:clamp(8px,1vw,12px); right:clamp(8px,1vw,12px); bottom:2px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s cubic-bezier(.16,.84,.44,1);
}
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--accent); }
.nav-link.active::after{ transform:scaleX(1); }
/* the Profile dropdown toggle shouldn't get an underline */
.nav-link.dropdown-toggle::after{ display:none; }

/* User badge: online dot so the header reads as a live session */
.nav-user-badge{
  padding:7px 15px 7px 12px;
  position:relative;
  transition:border-color .2s, background .2s;
}
.nav-user-badge:hover{ border-color:rgba(0,245,160,.3); }
.nav-user-badge::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px rgba(0,245,160,.18), 0 0 8px var(--accent);
  flex-shrink:0;
  animation:tnxOnlinePulse 2.4s ease-in-out infinite;
}
@keyframes tnxOnlinePulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(0,245,160,.18), 0 0 8px var(--accent); }
  50%    { box-shadow:0 0 0 4px rgba(0,245,160,.06), 0 0 12px var(--accent); }
}
.nav-icon-btn{ width:40px; height:40px; font-size:1.05rem; }
.nav-icon-btn:hover{ border-color:rgba(0,245,160,.35); color:var(--accent); }

/* ── 2. MARKET TICKER ─────────────────────────────────────────────────────
   Was 0.68rem — genuinely hard to read. Bump the type, give the rows air,
   and let live prices flash on change (the .tick-flash class is applied by
   the ticker script when a value updates). */
.ticker-tape{ font-size:.86rem !important; letter-spacing:.2px; }
.ticker-nse, #wlTickerRow{ padding:11px 0 !important; }
.ticker-tape .up, .ticker-tape .pos{ color:var(--accent); }
.ticker-tape .dn, .ticker-tape .neg{ color:var(--red); }

/* a price that just changed pulses once — makes the tape feel live */
@keyframes tnxTickUp   { 0%{background:rgba(0,245,160,.22)} 100%{background:transparent} }
@keyframes tnxTickDown { 0%{background:rgba(255,84,104,.22)} 100%{background:transparent} }
.tick-flash-up  { animation:tnxTickUp .9s ease-out;   border-radius:5px; }
.tick-flash-down{ animation:tnxTickDown .9s ease-out; border-radius:5px; }

/* ── 3. DASHBOARD CARDS ───────────────────────────────────────────────────
   Every card had identical weight, so the eye had nowhere to land.
   The P&L card is the one number that matters most — give it the span. */
.metric-grid{ gap:18px; }
.metric-card{
  padding:26px 20px;                  /* 22/18 -> 26/20, point 7 */
  transition:transform .2s cubic-bezier(.16,.84,.44,1), border-color .25s, box-shadow .25s;
}
.metric-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
/* A quiet sheen that sweeps across on hover. Pure CSS, no repaint of content. */
.metric-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;
}
.metric-card:hover::before{ transform:translateX(120%); }

/* ── 7. BREATHING ROOM ────────────────────────────────────────────────────
   Content sat tight to the top-left of most panels. */
.chart-card{ padding:28px; }
.glass-card{ padding:30px; }
.chart-title{ margin-bottom:16px; }

/* ── 8. ICONS ─────────────────────────────────────────────────────────────
   Bootstrap Icons are a single family already; the inconsistency was in
   weight, because some render heavier at small sizes. Normalise it. */
.bi{ -webkit-text-stroke:0; font-weight:400 !important; vertical-align:-.08em; }
.nav-icon-btn .bi{ font-size:1.05rem; }

/* ── 9. SECTION ACCENT COLOURS ────────────────────────────────────────────
   Everything used the same cyan, so sections were indistinguishable at a
   glance. These map to what each area actually means — profit/loss keep
   their conventional colours, and the rest get their own identity.
   Applied as a left edge on section headings, so it's an aid to navigation
   rather than decoration. */
:root{
  --sec-analytics:#3b9bff;   /* analytics  — blue   */
  --sec-psych:#ff9f43;       /* psychology — orange */
  --sec-ai:#a472ff;          /* AI         — purple */
}
.section-title{ position:relative; padding-left:14px; }
.section-title::before{
  content:'';
  position:absolute; left:0; top:.18em; bottom:.18em;
  width:3px; border-radius:3px;
  background:var(--accent);
}
body[data-tab="analytics"] .section-title::before{ background:var(--sec-analytics); }
body[data-tab="edge"]      .section-title::before{ background:var(--sec-psych); }
body[data-tab="ai"]        .section-title::before{ background:var(--sec-ai); }

/* ── 12. MICRO-INTERACTIONS ───────────────────────────────────────────────
   The page was static. These are all transform/opacity only — cheap to
   animate, and every one is disabled under prefers-reduced-motion below. */
.chart-card:hover, .glass-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}

/* buttons get a light sweep on hover */
.btn-primary, .btn-accent{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-accent::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;
}
.btn-primary:hover::after, .btn-accent:hover::after{ left:120%; }

/* panels fade up as they mount */
@keyframes tnxRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.metric-card, .chart-card{ animation:tnxRise .45s cubic-bezier(.16,.84,.44,1) both; }
.metric-grid > .metric-card:nth-child(1){ animation-delay:.02s }
.metric-grid > .metric-card:nth-child(2){ animation-delay:.06s }
.metric-grid > .metric-card:nth-child(3){ animation-delay:.10s }
.metric-grid > .metric-card:nth-child(4){ animation-delay:.14s }
.metric-grid > .metric-card:nth-child(5){ animation-delay:.18s }
.metric-grid > .metric-card:nth-child(6){ animation-delay:.22s }
.metric-grid > .metric-card:nth-child(7){ animation-delay:.26s }
.metric-grid > .metric-card:nth-child(8){ animation-delay:.30s }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────
   The P&L span and the taller header only make sense on wide screens. */
@media (max-width:900px){
  .nav-inner{ height:62px; gap:10px; }
  .nav-brand{ font-size:1.05rem; }
  .nav-brand svg,.nav-brand img{ width:30px; height:30px; }
  .chart-card{ padding:20px; }
  .glass-card{ padding:20px; }
}
@media (max-width:560px){
  .metric-card{ padding:18px 14px; }
  .ticker-tape{ font-size:.8rem !important; }
}

/* ── ACCESSIBILITY ────────────────────────────────────────────────────────
   Every animation above is decorative, so all of it comes off for anyone
   who has asked their system to reduce motion. */
@media (prefers-reduced-motion:reduce){
  .metric-card, .chart-card, .glass-card,
  .nav-link::after, .nav-user-badge::before,
  .btn-primary::after, .btn-accent::after,
  .tick-flash-up, .tick-flash-down{
    animation:none !important;
    transition:none !important;
  }
  .metric-card:hover, .chart-card:hover, .glass-card:hover{ transform:none; }
}

/* keyboard focus stays visible — the hover styles above must not hide it */
.nav-link:focus-visible,
.nav-icon-btn:focus-visible,
.metric-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — AI panel
   Poore AI panel mein borders/backgrounds rgba(255,255,255,...) se bane the.
   Wo dark background par to theek hain, par light mode mein safed-par-safed
   ho jaate hain — borders gayab, bubbles flat, input box invisible.
   Neeche har us jagah ka light-mode version hai.
   ══════════════════════════════════════════════════════════════════════════ */
body.light-mode #aiPanel { border-color: var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.18); }
body.light-mode .aihb { border-color: var(--border); }
body.light-mode .ai-menu { box-shadow: 0 16px 44px rgba(0,0,0,.18); }
body.light-mode .ai-menu-item.danger { color: #d93a4a; }          /* #ff6b7a light bg par bahut halka tha */
body.light-mode .ai-menu-item.active { background: rgba(0,168,107,.12); }

body.light-mode .msg.b .mbb {
  background: #ffffff;                    /* pehle rgba(255,255,255,.05) — light bg par gayab */
  border-color: var(--border);
}
body.light-mode .msg.u .mbb { background: rgba(0,168,107,.12); border-color: rgba(0,168,107,.28); }
body.light-mode .mbb code   { background: rgba(0,168,107,.12); }

body.light-mode .ai-inp { background: rgba(0,0,0,.03); border-top-color: var(--border); }
body.light-mode #aiTxt  { background: #ffffff; border-color: var(--border); }
body.light-mode #aiTxt:focus { border-color: rgba(0,168,107,.5); }
body.light-mode .aib    { background: #ffffff; border-color: var(--border); }
body.light-mode .chip   { border-color: var(--border); }
body.light-mode .chips  { border-top-color: var(--border); }
body.light-mode .ai-no  { background: rgba(0,0,0,.05); border-color: var(--border); }
body.light-mode .ap img,
body.light-mode .fc-x   { border-color: var(--border); }
body.light-mode .ai-tc-item { background: rgba(0,0,0,.035); }
body.light-mode #aiMsgs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
body.light-mode #callOv { background: var(--bg); }

/* AI ke jawab mein jo update/bulk cards aate hain, unki lines bhi
   rgba(255,255,255,.05) se bani thi — light mode mein dikhti hi nahi thi. */
body.light-mode #aiMsgs div[style*="rgba(255,255,255,0.05)"] { border-bottom-color: rgba(0,0,0,.08) !important; }
body.light-mode #aiMsgs button[style*="rgba(255,255,255,0.06)"] {
  background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVEMENT BAND — dashboard/trades me sab kuch sthir rahe
   ─────────────────────────────────────────────────────────────────────────
   Har card khulte waqt neeche se upar aata tha (tnxRise), aur maus le jaane
   par uchhalta tha (translateY). Ek-do card ho to theek lagta hai, par
   dashboard me 8-10 cards hain — sab ek saath hilte the, aur trades ki
   list me har row par maus jaate hi page kaanpta hua lagta tha. Padhne
   waale ke liye ye thakaan dene wali cheez hai.

   Ab: koi uchhal nahi, koi slide nahi. Cards apni jagah par khade rehte
   hain, aur maus le jaane par sirf border halka ujla hota hai — pata bhi
   chal jaata hai ki row highlight hui, aur kuch hilta bhi nahi.

   Jo animation kaam ki hai wo chhui nahi:
     • toast/modal ka aana-jaana (feedback ke liye zaroori)
     • AI typing ke teen dots
     • live/online ka blinking dot
     • ticker tape (usko chalna hi chahiye)
     • price tick ka flash (up/down ka signal)
   ══════════════════════════════════════════════════════════════════════════ */
.metric-card, .chart-card { animation: none !important; }

/* Hover par uchhalna band — sirf border ujla hoga */
.metric-card:hover, .chart-card:hover, .trade-card:hover, .stat-card:hover,
.tnx-card:hover, .kpi-card:hover, .edge-card:hover, .pb-card:hover,
.wl-row:hover, .trade-row:hover, tbody tr:hover {
  transform: none !important;
}
.metric-card, .chart-card, .trade-card, .stat-card, .tnx-card, .kpi-card {
  transition: border-color .16s ease, background-color .16s ease !important;
}

/* Glass card ka fadeUp bhi band — login ke baad poora page slide hota tha */
.glass-card { animation: none !important; }
