/* ══════════════════════════════════════════════
       CSS VARIABLES — DARK / LIGHT THEMES
    ══════════════════════════════════════════════ */
    :root {
      --bg:#060812; --bg2:#0c0e1f; --card:#111427; --card2:#161929;
      --border:#1e2240; --accent:#6c8ef5; --a2:#22e8b2; --a3:#f5a623; --a4:#e84393;
      --glow:rgba(108,142,245,.15); --tp:#e8ecff; --ts:#7880aa; --tm:#3a3f64;
      --green:#22e8b2; --red:#ff4757; --yellow:#f5a623;
      --navbg:rgba(6,8,18,.96); --r:14px;
      --ff:'Sora',sans-serif; --mono:'JetBrains Mono',monospace;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    [data-theme="light"] {
      --bg:#f0f2fa; --bg2:#fff; --card:#fff; --card2:#f5f6ff; --border:#dde0f5;
      --accent:#4a6cf7; --a2:#00c896; --glow:rgba(74,108,247,.1);
      --tp:#0d1040; --ts:#4a5280; --tm:#9098c0; --green:#00c896; --red:#e53e3e; --yellow:#d69e2e;
      --navbg:rgba(240,242,250,.97);
    }

    /* ══════════════════════════════════════════════
       BASE RESET
    ══════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
    html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
    body { background:var(--bg); color:var(--tp); font-family:var(--ff); font-size:14px; overflow-x:hidden; padding-bottom:var(--safe-bottom) }
    a { text-decoration:none; color:inherit }
    img { max-width:100%; height:auto }
    button { font-family:var(--ff) }
    ::-webkit-scrollbar { width:4px; height:4px }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px }

    /* ══════════════════════════════════════════════
       LOADER
    ══════════════════════════════════════════════ */
    #loader { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; transition:opacity .7s ease,visibility .7s ease }
    #loader.out { opacity:0; visibility:hidden; pointer-events:none }
    .ld-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%,#0a0f2e,#060812 60%) }
    .ld-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(circle 500px at 70% 80%,rgba(34,232,178,.06),transparent),radial-gradient(circle 400px at 10% 60%,rgba(108,142,245,.08),transparent) }
    .ld-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center }
    .ld-logo { margin-bottom:16px; animation:ldDrop .6s cubic-bezier(.34,1.56,.64,1) .1s both; filter:drop-shadow(0 8px 32px rgba(108,142,245,.4)) }
    @keyframes ldDrop { from{opacity:0;transform:translateY(-20px) scale(.8)} to{opacity:1;transform:translateY(0) scale(1)} }
    .ld-brand { font-size:2.6rem; font-weight:800; letter-spacing:-2px; color:#fff; margin-bottom:5px; animation:ldFU .5s ease .25s both }
    .ld-brand span { background:linear-gradient(120deg,#6c8ef5,#22e8b2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
    .ld-tagline { font-size:.68rem; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,.22); margin-bottom:32px; animation:ldFU .5s ease .35s both }
    @keyframes ldFU { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    .ld-bar-track { width:220px; height:3px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; margin-bottom:10px; animation:ldFU .4s ease .4s both }
    .ld-bar-fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#6c8ef5,#22e8b2,#6c8ef5); background-size:200%; animation:ldShimmer 1.5s linear infinite; transition:width .3s ease }
    @keyframes ldShimmer { 0%{background-position:0%} 100%{background-position:200%} }
    .ld-pct { font-family:var(--mono); font-size:.75rem; color:rgba(255,255,255,.28); letter-spacing:1px; animation:ldFU .4s ease .5s both }
    #ldPct { color:#22e8b2; font-weight:700 }
    .ld-dots { display:flex; gap:6px; margin-top:24px; animation:ldFU .4s ease .55s both }
    .ld-dots span { width:6px; height:6px; border-radius:50%; background:rgba(108,142,245,.5) }
    .ld-dots span:nth-child(1) { animation:ldDot 1.2s ease .0s infinite }
    .ld-dots span:nth-child(2) { animation:ldDot 1.2s ease .2s infinite }
    .ld-dots span:nth-child(3) { animation:ldDot 1.2s ease .4s infinite }
    @keyframes ldDot { 0%,80%,100%{transform:scale(1);opacity:.4} 40%{transform:scale(1.5);opacity:1;background:#22e8b2} }

    /* ══════════════════════════════════════════════
       TICKER
    ══════════════════════════════════════════════ */
    .ticker { background:var(--bg2); border-bottom:1px solid var(--border); height:34px; display:flex; align-items:center; overflow:hidden }
    .tk-badge { flex-shrink:0; padding:0 14px; height:100%; background:linear-gradient(135deg,var(--accent),var(--a2)); font-size:.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:5px; white-space:nowrap }
    .tk-body { flex:1; overflow:hidden; position:relative }
    .tk-body::before,.tk-body::after { content:''; position:absolute; top:0; bottom:0; width:28px; z-index:2; pointer-events:none }
    .tk-body::before { left:0; background:linear-gradient(90deg,var(--bg2),transparent) }
    .tk-body::after { right:0; background:linear-gradient(-90deg,var(--bg2),transparent) }
    .tk-track { display:flex; width:max-content; animation:scroll 50s linear infinite }
    .tk-track:hover { animation-play-state:paused }
    @keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .t-chip { display:inline-flex; align-items:center; gap:6px; padding:0 16px; border-right:1px solid var(--border); font-size:.74rem; height:34px; font-family:var(--mono) }
    .t-n{color:var(--ts)} .t-v{font-weight:700} .up{color:var(--green)} .dn{color:var(--red)} .ne{color:var(--ts)}

    /* ══════════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════════ */
    nav { background:var(--navbg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:8px 0; position:sticky; top:0; z-index:900 }
    .brand { font-weight:800; font-size:1.2rem; letter-spacing:-.5px; color:var(--tp); display:flex; align-items:center; gap:8px; flex-shrink:0 }
    .nl-row { display:flex; align-items:center; gap:2px; flex-wrap:nowrap }
    .nl { padding:5px 9px; border-radius:7px; color:var(--ts); font-size:.78rem; font-weight:500; display:flex; align-items:center; gap:4px; transition:all .15s; white-space:nowrap }
    .nl:hover, .nl.on { color:var(--accent); background:var(--glow) }
    .nbadge { background:var(--green); color:#000; font-size:.56rem; font-weight:800; padding:1px 5px; border-radius:99px }
    .icon-btn { width:32px; height:32px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--ts); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; transition:all .15s; flex-shrink:0 }
    .icon-btn:hover { color:var(--accent); border-color:var(--accent) }
    .nav-btn { display:flex; align-items:center; gap:5px; padding:6px 13px; border-radius:8px; font-size:.76rem; font-weight:700; border:none; cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0 }
    .btn-primary { background:linear-gradient(135deg,var(--a2),var(--accent)); color:#fff }
    .btn-primary:hover { opacity:.9; transform:translateY(-1px) }
    .btn-ghost { background:var(--glow); border:1px solid rgba(108,142,245,.25); color:var(--accent) }
    .btn-ghost:hover { background:var(--accent); color:#fff }
    .ham { display:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--ts); cursor:pointer; align-items:center; justify-content:center; font-size:13px; transition:all .15s; flex-shrink:0 }
    .ham:hover { color:var(--accent); border-color:var(--accent) }

    /* About dropdown */
    .nav-dropdown { position:relative }
    .nav-dropdown-menu { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px; min-width:200px; box-shadow:0 12px 40px rgba(0,0,0,.35); opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-6px); transition:opacity .18s,transform .18s; z-index:1000 }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown-menu:hover { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) }
    .ndm-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--ts); font-size:.78rem; font-weight:500; transition:all .15s }
    .ndm-item:hover { background:var(--glow); color:var(--accent) }
    .ndm-item i { width:16px; text-align:center; color:var(--accent) }
    .ndm-divider { height:1px; background:var(--border); margin:5px 0 }

    /* ══════════════════════════════════════════════
       STATS CARDS
    ══════════════════════════════════════════════ */
    .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 }
    .sc { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px; position:relative; overflow:hidden; transition:transform .2s,box-shadow .2s }
    .sc:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--glow) }
    .sc-ico { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:10px }
    .sc-val { font-family:var(--mono); font-size:1.7rem; font-weight:700; line-height:1 }
    .sc-lbl { font-size:.64rem; color:var(--ts); margin-top:4px; text-transform:uppercase; letter-spacing:.7px }

    /* ══════════════════════════════════════════════
       DEMAT BANNER
    ══════════════════════════════════════════════ */
    .demat-banner { background:linear-gradient(135deg,#0d1240,#162060,#0d1240); border:1px solid rgba(108,142,245,.25); border-radius:var(--r); padding:18px 22px; margin:16px 0; display:flex; align-items:center; gap:18px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden }
    .demat-banner:hover { border-color:var(--accent); box-shadow:0 0 36px rgba(108,142,245,.15) }
    .demat-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(34,232,178,.07),transparent) }
    .db-ico { width:50px; height:50px; border-radius:12px; background:linear-gradient(135deg,var(--a2),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex-shrink:0; animation:pulse 2.5s ease infinite }
    @keyframes pulse { 0%,100%{box-shadow:0 6px 20px rgba(34,232,178,.25)} 50%{box-shadow:0 6px 28px rgba(34,232,178,.45)} }
    .db-txt { flex:1; min-width:0; position:relative; z-index:2 }
    .db-label { font-size:.58rem; letter-spacing:2px; text-transform:uppercase; color:var(--a2); font-weight:700; margin-bottom:3px }
    .db-title { font-size:1rem; font-weight:800; color:#fff; margin-bottom:3px }
    .db-sub { font-size:.73rem; color:rgba(255,255,255,.48) }
    .db-btn { flex-shrink:0; padding:9px 18px; border-radius:9px; background:linear-gradient(135deg,var(--a2),var(--accent)); border:none; color:#fff; font-size:.77rem; font-weight:700; cursor:pointer; white-space:nowrap; position:relative; z-index:2 }

    /* ══════════════════════════════════════════════
       ACTION BAR & FILTER BAR
    ══════════════════════════════════════════════ */
    .act-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px }
    .act-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--ts); font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s }
    .act-btn:hover { color:var(--accent); border-color:var(--accent) }
    .act-btn.on { background:var(--accent); border-color:var(--accent); color:#fff }
    .fbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px }
    .srch-wrap { flex:1; min-width:180px; position:relative }
    .srch-wrap i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--tm); font-size:11px; pointer-events:none }
    .srch { width:100%; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--tp); padding:8px 10px 8px 30px; font-size:.82rem; transition:all .15s }
    .srch:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow) }
    .pills { display:flex; gap:5px; flex-wrap:wrap }
    .pill { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--ts); font-size:.75rem; font-weight:600; transition:all .15s; white-space:nowrap }
    .pill:hover, .pill.on { background:var(--accent); border-color:var(--accent); color:#fff }
    .sort-sel { background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--tp); padding:7px 10px; font-size:.78rem; cursor:pointer }
    .sort-sel:focus { outline:none; border-color:var(--accent) }

    /* ══════════════════════════════════════════════
       TABLE
    ══════════════════════════════════════════════ */
    .tbl-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden }
    .tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch }
    table { width:100%; border-collapse:collapse; min-width:700px }
    thead tr { background:var(--bg2); border-bottom:2px solid var(--border) }
    th { padding:10px 12px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--tm); white-space:nowrap; user-select:none; cursor:pointer }
    th:hover { color:var(--accent) }
    td { padding:11px 12px; border-bottom:1px solid var(--border); font-size:.84rem; vertical-align:middle }
    tbody tr { transition:background .15s }
    tbody tr:hover { background:var(--card2) }
    tbody tr:last-child td { border-bottom:none }
    .co-name { font-weight:700; color:var(--tp); font-size:.86rem; display:block; transition:color .15s }
    .co-name:hover { color:var(--accent) }
    .co-meta { font-size:.64rem; color:var(--tm); margin-top:1px; display:flex; align-items:center; gap:4px }
    .mono { font-family:var(--mono) }
    .gmp-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; font-size:.76rem; font-weight:700; font-family:var(--mono); white-space:nowrap }
    .g-up { background:rgba(34,232,178,.10); color:var(--green) }
    .g-dn { background:rgba(255,71,87,.10); color:var(--red) }
    .g-ne { background:var(--bg2); color:var(--tm) }
    .st-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; font-size:.68rem; font-weight:700; white-space:nowrap }
    .s-open { background:rgba(34,232,178,.10); color:var(--green); border:1px solid rgba(34,232,178,.2) }
    .s-up { background:rgba(245,166,35,.10); color:var(--yellow); border:1px solid rgba(245,166,35,.2) }
    .s-cl { background:rgba(255,71,87,.08); color:var(--red); border:1px solid rgba(255,71,87,.18) }
    .wstar { background:none; border:none; cursor:pointer; color:var(--tm); font-size:14px; padding:2px; transition:color .15s,transform .15s }
    .wstar:hover, .wstar.on { color:var(--yellow); transform:scale(1.2) }

    /* EXPAND ROW */
    .exp-row td { padding:0 }
    .exp-inner { background:var(--bg2); border-top:1px solid var(--border); padding:14px 16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
    .exp-item .el { font-size:.61rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--tm); margin-bottom:2px }
    .exp-item .ev { font-family:var(--mono); font-size:.85rem; color:var(--tp) }
    .sub-row { display:flex; align-items:center; gap:6px; margin-top:3px }
    .sub-row-lbl { font-size:.64rem; color:var(--ts); width:38px; flex-shrink:0 }
    .sub-bar { flex:1; height:5px; background:var(--border); border-radius:99px; overflow:hidden }
    .sub-fill { height:100%; border-radius:99px; transition:width .6s ease }
    .sub-pct { font-family:var(--mono); font-size:.65rem; color:var(--tp); width:36px; text-align:right }

    /* ══════════════════════════════════════════════
       PAGINATION
    ══════════════════════════════════════════════ */
    .pgn { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-top:1px solid var(--border); flex-wrap:wrap; gap:8px }
    .pgn-info { font-size:.74rem; color:var(--tm) }
    .pgn-btns { display:flex; gap:5px; flex-wrap:wrap; align-items:center }
    .pgn-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 13px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--ts); font-size:.78rem; font-weight:600; transition:all .15s }
    .pgn-btn:hover { color:var(--accent); border-color:var(--accent) }
    .pgn-btn.active { background:var(--accent); border-color:var(--accent); color:#fff }
    .pgn-btn.disabled { opacity:.4; pointer-events:none }

    /* WATCHLIST */
    #wlStrip { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:12px 16px; margin-bottom:16px; display:none }
    #wlStrip.show { display:block }
    #wlCards { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px }

    /* ══════════════════════════════════════════════
       MODALS
    ══════════════════════════════════════════════ */
    .mo { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:16px }
    .mo.show { display:flex }
    .mb { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px; width:100%; max-width:460px; position:relative; animation:mIn .22s ease; max-height:90vh; overflow-y:auto }
    @keyframes mIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
    .mc { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--ts); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .15s }
    .mc:hover { color:var(--red); border-color:var(--red) }
    .mt { font-size:1rem; font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:7px }
    .mt i { color:var(--accent) }
    .fg { margin-bottom:12px }
    .fg label { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--ts); margin-bottom:5px }
    .fi { width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:8px; color:var(--tp); padding:9px 12px; font-size:.86rem; font-family:var(--mono); transition:all .15s }
    .fi:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow) }
    .calc-res { display:none; margin-top:14px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px }
    .calc-res.show { display:block }
    .cr-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); font-size:.8rem }
    .cr-row:last-child { border-bottom:none; font-weight:700 }
    .cr-row span:last-child { font-family:var(--mono) }
    .prob-bar-wrap { height:8px; background:var(--border); border-radius:99px; margin-top:5px; overflow:hidden }
    .prob-bar { height:100%; border-radius:99px; transition:width .8s ease }

    /* ══════════════════════════════════════════════
       MOBILE DRAWER
    ══════════════════════════════════════════════ */
    .drawer { position:fixed; top:0; right:0; bottom:0; width:min(290px,85vw); z-index:2000; background:var(--bg2); border-left:1px solid var(--border); transform:translateX(100%); transition:transform .28s; display:flex; flex-direction:column; overflow-y:auto }
    .drawer.open { transform:translateX(0) }
    .dr-overlay { position:fixed; inset:0; z-index:1999; background:rgba(0,0,0,.5); display:none }
    .dr-overlay.show { display:block }
    .dr-top { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border) }
    .dr-links { padding:14px; display:flex; flex-direction:column; gap:5px; flex:1 }
    .dr-link { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:9px; border:1px solid transparent; color:var(--ts); font-size:.88rem; font-weight:600; transition:all .15s }
    .dr-link:hover, .dr-link.on { background:var(--glow); color:var(--accent); border-color:rgba(108,142,245,.2) }
    .dr-link i { width:16px; text-align:center }
    .dr-foot { padding:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:7px }
    .dr-btn { display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ts); font-size:.83rem; font-weight:600; cursor:pointer; width:100%; text-align:left; transition:all .15s }
    .dr-btn:hover { color:var(--accent); border-color:var(--accent) }
    .dr-btn.demat { background:linear-gradient(135deg,var(--a2),var(--accent)); border:none; color:#fff }

    /* BROKER AD */
    .broker-ad { background:linear-gradient(135deg,#0d3b7e,#1558b2); border:1px solid rgba(56,126,209,.35); border-radius:var(--r); padding:12px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all .2s; margin:10px 0; text-decoration:none; position:relative }
    .broker-ad:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(56,126,209,.25) }
    .ba-logo { width:44px; height:44px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.95rem; flex-shrink:0 }
    .ba-txt { flex:1; min-width:0 }
    .ba-tag { font-size:.53rem; letter-spacing:1.8px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:2px }
    .ba-title { font-size:.9rem; font-weight:800; color:#fff; margin-bottom:1px }
    .ba-sub { font-size:.7rem; color:rgba(255,255,255,.55) }
    .ba-cta { flex-shrink:0; padding:7px 14px; border-radius:8px; background:#fff; font-size:.75rem; font-weight:800; border:none; cursor:pointer; white-space:nowrap }
    .ba-sp { position:absolute; top:6px; right:8px; font-size:.45rem; letter-spacing:1.5px; color:rgba(255,255,255,.25); text-transform:uppercase }

    /* FEEDBACK */
    .fb-strip { background:linear-gradient(135deg,rgba(108,142,245,.06),rgba(34,232,178,.04)); border:1px solid var(--border); border-radius:var(--r); padding:16px 20px; margin:18px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
    .fb-stars { display:flex; gap:4px }
    .fb-star { font-size:1.4rem; cursor:pointer; transition:transform .15s; opacity:.35 }
    .fb-star:hover, .fb-star.on { opacity:1; transform:scale(1.15) }
    .fb-inp { flex:1; min-width:160px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; color:var(--tp); padding:8px 12px; font-size:.82rem }
    .fb-inp:focus { outline:none; border-color:var(--accent) }
    .fb-btn { padding:8px 16px; border-radius:8px; background:var(--accent); border:none; color:#fff; font-size:.78rem; font-weight:700; cursor:pointer }

    /* TOAST */
    #toast { position:fixed; bottom:22px; right:22px; z-index:9999; background:var(--card); border:1px solid var(--a2); border-left:3px solid var(--a2); border-radius:9px; padding:9px 14px; display:flex; align-items:center; gap:8px; font-size:.79rem; transform:translateY(120%); transition:transform .38s cubic-bezier(.34,1.56,.64,1); max-width:280px; word-break:break-word }
    #toast.show { transform:translateY(0) }
    #toast i { color:var(--a2); flex-shrink:0 }

    /* SCROLL TO TOP */
    #scrollTop { position:fixed; bottom:calc(80px + var(--safe-bottom)); right:22px; z-index:999; width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 4px 16px rgba(108,142,245,.4); opacity:0; pointer-events:none; transition:opacity .3s,transform .2s }
    #scrollTop:hover { transform:translateY(-3px) }

    /* FOOTER */
    footer { background:var(--bg2); border-top:1px solid var(--border); margin-top:48px }
    .ft-wave { height:3px; background:linear-gradient(90deg,var(--accent),var(--a2),var(--a3),var(--a4),var(--accent)); background-size:200%; animation:ws 4s linear infinite }
    @keyframes ws { 0%{background-position:0%} 100%{background-position:200%} }

    .blink { animation:blink 1.3s ease infinite }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }

    /* ══════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
    ══════════════════════════════════════════════ */

    /* Tablet — hide some nav items */
    @media (max-width:1100px) {
      .nl { font-size:.73rem; padding:4px 7px }
    }
    @media (max-width:991px) {
      .btn-primary { display:none }
      .nav-dropdown-menu { left:auto; right:0; transform:translateX(0) translateY(-6px) }
      .nav-dropdown:hover .nav-dropdown-menu { transform:translateX(0) translateY(0) }
    }
    @media (max-width:850px) {
      /* Hide About + Charts + Blog from nav on small tablets — show in drawer */
      .nl-about, .nl-charts, .nl-blog { display:none }
    }
    @media (max-width:767px) {
      .ham { display:flex }
      .nl-row { display:none !important }
      /* Hide columns on mobile table */
      th:nth-child(4), td:nth-child(4),
      th:nth-child(5), td:nth-child(5) { display:none }
      .fbar { flex-direction:column }
      .pills { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none }
      .pills::-webkit-scrollbar { display:none }
      .sort-sel { width:100% }
      .stats { grid-template-columns:repeat(2,1fr) }
      .sc-val { font-size:1.4rem }
      .demat-banner { flex-wrap:wrap }
      .db-btn { width:100%; text-align:center; padding:10px }
      .broker-ad { flex-wrap:wrap }
      .ba-cta { width:100%; text-align:center }
    }
    @media (max-width:575px) {
      th:nth-child(7), td:nth-child(7) { display:none }
      td { padding:9px 6px }
      .act-bar { display:grid; grid-template-columns:1fr 1fr; gap:5px }
      .act-btn { justify-content:center; font-size:.7rem; padding:6px 8px }
      .pgn-btns { gap:3px }
      .pgn-btn { padding:5px 9px; font-size:.72rem }
      .mb { padding:18px 16px; border-radius:14px }
      .exp-inner { grid-template-columns:1fr 1fr }
      h1 { font-size:1.6rem !important; letter-spacing:-1px !important }
    }
    @media (max-width:380px) {
      .stats { grid-template-columns:1fr 1fr }
      .sc { padding:12px }
      .sc-val { font-size:1.2rem }
    }