/* ===== TARA — Neon Glassmorphism (Style A) ===== */
:root{
  --bg:#030913; --bg2:#061024;
  --violet:#2f6bff; --violet-hi:#5b8dff; --cyan:#38bdf8; --magenta:#7dd3fc; --sapphire:#2f6bff; --sky:#38bdf8; --ice:#7dd3fc;
  --primary:#5b8dff; --primary2:#2f6bff; --primary-hi:#9dbcff; --accent:#38bdf8;
  --primary-bg:rgba(47,107,255,.18); --ring:rgba(47,107,255,.5);
  --green:#2fe0a6; --green-hi:#5ff0c0; --green-soft:#0f9d76; --green-bg:rgba(47,224,166,.12);
  --red:#ff5b7a; --red-hi:#ff8ba1; --red-soft:#ff2d6e; --red-bg:rgba(255,91,122,.12);
  --yellow:#ffcf5b; --blue:#38bdf8;
  --text-hi:#ffffff; --text:#eef1ff; --text-dim:#9aa3c7; --muted:#6b7299;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09);
  --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --radius:20px;
  --shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-lg:0 20px 60px -12px rgba(47,107,255,.4);
  --ease:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.4,0,.2,1);
  /* THEME-driving vars (default = Sapphire; themes इन्हें override करते हैं — Section "THEMES" नीचे) */
  --g1:#5b8dff; --g2:#38bdf8; --g3:#7dd3fc;            /* brand/accent gradient trio */
  --glow:rgba(47,107,255,.55);                          /* primary glow (box-shadows) */
  --bga1:rgba(47,107,255,.55); --bga2:rgba(56,189,248,.42); --bga3:rgba(56,189,248,.38); --bga4:rgba(47,224,166,.18); /* body background blobs */
  --aura1:rgba(91,141,255,.11); --aura2:rgba(56,189,248,.10); --aura3:rgba(125,211,252,.08); /* aurora blobs */
}
/* ===== DAY = warm paper / parchment ===== */
html.light{
  --bg:#efe6cf;
  --primary:#1e5fe0; --primary2:#1748b8; --primary-hi:#1748b8; --accent:#0369a1;
  --primary-bg:rgba(30,95,224,.1); --ring:rgba(30,95,224,.4);
  --green:#0f9d76; --green-hi:#0b7d5e; --red:#c0392f; --red-hi:#a5281f; --green-bg:rgba(15,157,118,.12); --red-bg:rgba(192,57,47,.12); --yellow:#b45309;
  --text-hi:#2a2313; --text:#3a3320; --text-dim:#6b6146; --muted:#8a7d5c;
  --glass:rgba(253,249,238,.92); --glass-2:#f3ead2; --card:rgba(253,249,238,.94); --card2:#f5edd8;
  --border:rgba(120,100,60,.22); --border-strong:rgba(120,100,60,.36);
  --shadow:0 10px 26px rgba(90,72,30,.14),inset 0 1px 0 rgba(255,255,255,.55); --shadow-lg:0 22px 50px -14px rgba(30,95,224,.28);
  /* light-mode theme accents (themes इन्हें .light block में override करते हैं) */
  --g1:#1e5fe0; --g2:#0284c7; --g3:#0369a1; --glow:rgba(30,95,224,.3); --cyan:#0284c7; --violet:#1e5fe0;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text); min-height:100vh; position:relative; overflow-x:hidden;
  font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(560px 520px at -6% -8%, var(--bga1), transparent 70%),
    radial-gradient(520px 480px at 104% 4%, var(--bga2), transparent 70%),
    radial-gradient(620px 560px at 24% 116%, var(--bga3), transparent 70%),
    radial-gradient(420px 400px at 108% 92%, var(--bga4), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
/* paper day background: warm parchment + fibre texture */
html.light body{ background:
    radial-gradient(900px 700px at 100% -10%, rgba(214,196,150,.5), transparent 60%),
    radial-gradient(800px 700px at -10% 110%, rgba(224,208,164,.55), transparent 60%),
    linear-gradient(180deg,#f4edd9,#e8dbbb); background-attachment:fixed; }
html.light body::after{opacity:1;background-image:
    repeating-linear-gradient(0deg,rgba(150,125,70,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(150,125,70,.04) 0 1px,transparent 1px 4px),
    radial-gradient(rgba(120,95,45,.06) 1px,transparent 1px); background-size:auto,auto,4px 4px;}
html.light .card,html.light .stat,html.light #sidebar,html.light .tile,html.light .modal,html.light .chips,html.light .seg,html.light details.exp,html.light .tabs,html.light .sig-card{backdrop-filter:none;-webkit-backdrop-filter:none}
/* subtle grain (dark) */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(140,180,255,.04) 1px,transparent 1px);background-size:3px 3px;}
.mono{font-family:"JetBrains Mono","SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.green{color:var(--green)} .red{color:var(--red)} .muted{color:var(--muted)}
.hidden{display:none!important}
a{color:inherit;text-decoration:none}

/* glass helper */
.glass, .card, .stat, #sidebar, .tile, .modal, #toast, .chips, .seg, details.exp{
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
}

/* layout — sidebar अब overlay drawer है (content कभी shift नहीं होता) */
#app{display:block;min-height:100vh;position:relative;z-index:1}
#sidebar{width:240px;background:var(--glass);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 14px;position:fixed;left:0;top:0;height:100vh;height:100dvh;z-index:50;
  transform:translateX(-103%);transition:transform .38s var(--ease);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
#app.nav-open #sidebar{transform:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:11px;padding:6px 40px 20px 8px}
/* 🪙 S170: logo का रंगीन tile (gradient background + छाया + गोल कोने) हटाया — owner: "background कोई color नहीं चाहिए, बस icon वही दिखे, clear-cut edge-to-edge" */
.brand .logo{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center}
.brand .logo img,.gate-brand .logo img,#gate .gp-logo img{width:100%;height:100%;object-fit:contain;display:block;background:none;border:0;border-radius:0}
.brand .name{font-size:21px;font-weight:900;letter-spacing:.08em;
  background:linear-gradient(90deg,#fff,var(--primary-hi) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .sub{font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:2px;white-space:nowrap}
nav{display:flex;flex-direction:column;gap:3px;margin-top:4px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
nav a{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--text-dim);
  font-weight:600;font-size:14px;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s}
nav a .ic{width:18px;text-align:center;opacity:.9}
nav a:hover{background:var(--glass-2);color:var(--text-hi);box-shadow:0 0 14px color-mix(in srgb,var(--primary-hi,#59c2ff) 30%,transparent)}   /* S60-15: translateX हटा (panel-खिसकन), glow */
nav a.active{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 34%,transparent),color-mix(in srgb,var(--g2) 22%,transparent));
  border:1px solid color-mix(in srgb,var(--g1) 55%,transparent);box-shadow:0 0 22px var(--glow),inset 0 1px 0 rgba(255,255,255,.15)}
nav a.active::after{content:"";width:8px;height:6px;border-radius:999px;margin-left:auto;
  background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 10px rgba(56,189,248,.6)}
.side-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;padding-top:12px}
#main{min-width:0;padding:64px 32px 64px;max-width:1220px;margin:0 auto;position:relative;z-index:1}
.view{animation:viewIn .4s var(--ease) both}
.page-h{margin:0 0 4px;font-size:27px;font-weight:900;letter-spacing:-.01em;color:var(--text-hi)}
.page-sub{margin:0 0 22px;color:var(--muted);font-size:14px}

/* cards (glass) */
.card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card+.card{margin-top:16px}
.grid{display:grid;gap:16px}
/* 🧮 S175-D5 (owner: "dashboard वग़ैरह organize नहीं"): `class="stats"` (js/app.js का s80CardHtml —
   🖥 Software की अपनी trades) का grid-नियम किसी css में था ही नहीं ⇒ चारों stat-खाने पूरी चौड़ाई में
   एक-के-नीचे-एक गिरते थे (live-नाप 07-08 रात, screenshot)। अब वही रूप जो '/' dashboard की stat-पट्टी
   का है: auto-fit grid — desktop पर एक पंक्ति, mobile पर अपने-आप 2×2/1-column। */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:10px}
.stats>.card.stat{margin:0}
.g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(6,1fr)}   /* S28: /published 6 stat-cards */
.grid>.card{animation:viewIn .45s var(--ease) backwards}
.grid>.card:nth-child(2){animation-delay:.05s} .grid>.card:nth-child(3){animation-delay:.1s}
.grid>.card:nth-child(4){animation-delay:.15s} .grid>.card:nth-child(5){animation-delay:.2s}
@media(max-width:920px){.g6,.g4,.g3,.g2{grid-template-columns:1fr 1fr}}

/* S28: /published two-column streams (left = website/bulk · right = TARA Hyper) — 920px से नीचे stack */
.pub-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pub-cols.one{grid-template-columns:1fr}   /* S66: 🚀 Hyper tab — दूसरा खाना गणित से हमेशा ख़ाली, इसलिए एक ही पूरी चौड़ाई का */
.pub-col{min-width:0}
.pub-col-h{font-weight:800;font-size:13px;letter-spacing:.04em;display:flex;gap:8px;align-items:center;margin:2px 0 8px}
/* W8 (S52): per-box scroll — signals हर box के अंदर scroll हों, page स्थिर (overscroll-contain scroll-chain रोकता)। height owner render-verify पर tune। */
.pub-col-scroll{max-height:min(62vh,760px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth;padding-right:4px}
.pub-col-scroll::-webkit-scrollbar{width:8px}
.pub-col-scroll::-webkit-scrollbar-thumb{background:var(--border,rgba(128,128,128,.35));border-radius:4px}
/* S66: दूसरी तरफ़ signals हों तो ख़ाली तरफ़ पूरा card नहीं, सिर्फ़ यह एक पंक्ति */
.pub-col-slim{font-size:12px;color:var(--muted);border:1px dashed var(--border);border-radius:12px;padding:10px 13px;line-height:1.6}
@media(max-width:920px){.pub-cols{grid-template-columns:1fr}.pub-col-scroll{max-height:none;overflow:visible}}

/* stat card */
.stat{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:transform .3s var(--ease-std)}
.stat::before{content:"";position:absolute;top:-70px;right:-70px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);filter:blur(30px)}
.stat::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .3s;pointer-events:none}
.stat:hover{transform:translateY(-4px) scale(1.02)} .stat:hover::after{opacity:1}
.stat.profit::before{background:radial-gradient(circle,rgba(47,224,166,.4),transparent 70%)}
.stat.loss::before{background:radial-gradient(circle,rgba(255,91,122,.4),transparent 70%)}
.stat .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:relative}
.stat .v{font-size:28px;font-weight:900;margin:8px 0 2px;font-family:"JetBrains Mono",monospace;letter-spacing:-.02em;position:relative;
  background:linear-gradient(90deg,#fff,var(--primary-hi));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.profit .v{background:linear-gradient(90deg,#2fe0a6,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.loss .v{background:linear-gradient(90deg,#ff8ba1,#ff5b7a);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .s{font-size:12px;color:var(--muted);position:relative}

/* chips / buttons */
.chips{display:inline-flex;gap:4px;background:var(--glass);padding:4px;border-radius:13px;border:1px solid var(--border)}
.chips button{border:0;background:transparent;color:var(--text-dim);padding:6px 12px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;transition:.2s}
.chips button.on{color:#0a0a14;background:linear-gradient(135deg,var(--cyan),var(--g3));box-shadow:0 0 18px var(--glow)}
.chips button:active{transform:scale(.96)}
.btn{border:1px solid var(--border);border-radius:12px;padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer;background:var(--glass-2);color:var(--text);
  transition:transform .15s var(--ease-std),border-color .2s,box-shadow .2s;backdrop-filter:blur(10px)}
.btn:hover{transform:translateY(-1px);border-color:var(--border-strong)} .btn:active{transform:scale(.96)}
.btn.primary{color:#0a0a14;border:none;position:relative;overflow:hidden;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);
  box-shadow:0 0 34px var(--glow),0 8px 22px rgba(56,189,248,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none;transform:none}
.btn.primary:disabled::after{display:none}
.btn.block{width:100%}
a.btn{display:inline-block;vertical-align:middle;text-decoration:none}   /* anchor-button: overflow:hidden शुरू हो (वरना .btn.primary का shine बाहर तक sweep करता था) */
.btn.green{background:linear-gradient(135deg,#0f9d76,#2fe0a6);color:#04240f;border:0;box-shadow:0 0 16px rgba(47,224,166,.4)}
.btn.red{background:linear-gradient(135deg,#ff2d6e,#ff5b7a);color:#fff;border:0;box-shadow:0 0 16px rgba(255,45,105,.4)}
.btn.sm{padding:6px 10px;font-size:12px}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;border:1px solid transparent}
.badge.win{background:rgba(47,224,166,.14);color:var(--green);border-color:rgba(47,224,166,.35)}
.badge.loss{background:rgba(255,91,122,.14);color:var(--red);border-color:rgba(255,91,122,.35)}
.badge.draw{background:rgba(255,255,255,.06);color:var(--text-dim);border-color:var(--border)}

/* forms */
label.f{display:block;font-size:13px;font-weight:700;margin:14px 0 6px}
input,select,textarea{width:100%;background:rgba(255,255,255,.045);border:1px solid var(--border);color:var(--text);
  border-radius:12px;padding:11px 13px;font-size:16px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--ring)}
select option{background:#0b0e1c;color:var(--text)}
textarea{min-height:84px;resize:vertical}
.row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.seg{display:flex;gap:10px}
.seg button{flex:1;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--glass-2);color:var(--text-dim);font-weight:800;cursor:pointer;transition:.18s}
.seg button:active{transform:scale(.96)}
.seg button.on-call{background:linear-gradient(135deg,rgba(47,224,166,.28),rgba(56,189,248,.14));border-color:rgba(47,224,166,.6);color:var(--green-hi);box-shadow:0 0 18px rgba(47,224,166,.3)}
.seg button.on-put{background:linear-gradient(135deg,rgba(255,91,122,.28),rgba(255,45,105,.14));border-color:rgba(255,91,122,.6);color:var(--red-hi);box-shadow:0 0 18px rgba(255,45,105,.3)}
.seg.res button.on{background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 30%,transparent),color-mix(in srgb,var(--g2) 16%,transparent));border-color:color-mix(in srgb,var(--g1) 60%,transparent);color:var(--primary-hi)}

/* trade rows */
/* 📡 S84-C: Published Signals क्षेत्र (My Signals के अंदर) — software की अपनी signals, live timing।
   दोनों theme के tokens से (कोई हार्ड रंग नहीं); दिशा रंग-chip, बड़ा live countdown। */
.psig-card{margin-bottom:16px;border-color:var(--border-strong)}
.psig-card>.between>b{font-size:15px}
.psig-list{margin-top:6px}
.psig-row{cursor:default}
.psig-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 9px;border-radius:10px;font-weight:900;
  font-size:12.5px;letter-spacing:.4px;line-height:1;flex:0 0 auto}
.psig-chip.call{background:var(--green-bg);color:var(--green-hi);box-shadow:inset 0 0 0 1px var(--green-soft,var(--green))}
.psig-chip.put{background:var(--red-bg);color:var(--red-hi);box-shadow:inset 0 0 0 1px var(--red-soft,var(--red))}
.psig-row .msig-cd{font-size:14px;font-weight:900;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  display:inline-block;margin-top:2px}
.psig-out{font-weight:800;font-size:12px;padding:3px 9px;border-radius:8px;white-space:nowrap}
.psig-out.win{color:var(--green-hi);background:var(--green-bg)}
.psig-out.loss{color:var(--red-hi);background:var(--red-bg)}
.psig-out.draw{color:var(--muted);background:var(--card2)}
/* 🆕 S84-D: Save प्रति row + Save-all switch */
.psig-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.psig-head>b{font-size:15px}
.psig-saveall{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-dim);
  cursor:pointer;user-select:none}
.psig-saveall input{width:15px;height:15px;accent-color:var(--green,#2fe0a6);cursor:pointer}
.psig-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.psig-save{white-space:nowrap}
.psig-save.on{color:var(--green-hi);border-color:var(--green-soft,var(--green));background:var(--green-bg)}
.psig-saved-all{font-size:11.5px;font-weight:700;color:var(--green-hi);background:var(--green-bg);padding:4px 9px;border-radius:8px;white-space:nowrap}
.trow{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;border-radius:9px}
.trow:last-child{border-bottom:0} .trow:hover{background:var(--glass-2)}
.dirico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.dirico.call{background:rgba(47,224,166,.14);color:var(--green-hi);box-shadow:0 0 14px rgba(47,224,166,.25)}
.dirico.put{background:rgba(255,91,122,.14);color:var(--red-hi);box-shadow:0 0 14px rgba(255,45,105,.25)}
.trow .meta{flex:1;min-width:0} .trow .meta .a{font-weight:700} .trow .meta .m{font-size:12px;color:var(--muted)}
.trow .pl{text-align:right;font-weight:800} .trow .pl .stake{display:block;font-size:11px;color:var(--muted);font-weight:600}
/* 🔴 S60-1/2 (owner, mobile): फ़ोन पर .trow एक ही non-wrapping flex line थी — दायाँ action-block (publish-manage
   में 9 buttons) min-content से नीचे नहीं सिकुड़ता, इसलिए .meta 0px तक निचुड़ जाती थी (text एक-शब्द-प्रति-पंक्ति,
   pills अपने box से बाहर बहकर buttons पर चढ़े) और row viewport से ~110px बाहर निकल जाती थी ⇒ page horizontal-scroll।
   fix: ≤560px पर row wrap करे — text ऊपर, actions अपनी पूरी-चौड़ाई पंक्ति में (बाएँ से, ख़ुद भी wrap करते हुए)।
   desktop (>560px) बिल्कुल अछूता। .pl (trade P&L) अपनी जगह दाईं ओर ही रहता है। */
@media(max-width:560px){
  .trow{flex-wrap:wrap;align-items:flex-start;row-gap:8px;column-gap:10px}
  .trow > .meta{flex:1 1 55%;min-width:0}
  .trow .meta .a,.trow .meta .m{overflow-wrap:anywhere}
  .trow > :last-child:not(.meta):not(.pl){max-width:100%;text-align:left!important}
  .trow > :last-child:not(.meta):not(.pl) > div[style*="display:flex"]{flex-wrap:wrap;justify-content:flex-start!important}
  .trow > :last-child:not(.meta):not(.pl)[style*="display:flex"]{flex-wrap:wrap;justify-content:flex-start!important}
}

/* signal result */
.sig-card{border:1px solid var(--border);border-radius:26px;padding:22px;margin-top:16px;position:relative;overflow:hidden;
  background:var(--glass);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);animation:viewIn .4s var(--ease) both}
.sig-card::before{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;filter:blur(30px)}
.sig-card.call{border-color:rgba(47,224,166,.32);box-shadow:0 0 60px rgba(47,224,166,.16),0 20px 60px rgba(0,0,0,.5)}
.sig-card.call::before{background:radial-gradient(circle,rgba(47,224,166,.35),transparent 70%)}
.sig-card.put{border-color:rgba(255,91,122,.32);box-shadow:0 0 60px rgba(255,45,105,.18),0 20px 60px rgba(0,0,0,.5)}
.sig-card.put::before{background:radial-gradient(circle,rgba(255,45,105,.35),transparent 70%)}
.sig-dir{font-size:26px;font-weight:900;position:relative}
.dir-call{color:var(--green-hi);text-shadow:0 0 22px rgba(47,224,166,.6)} .dir-put{color:var(--red-hi);text-shadow:0 0 22px rgba(255,45,105,.6)} .dir-skip{color:var(--muted)}
.conf-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);overflow:hidden;margin:8px 0 4px;position:relative}
.conf-bar>i{display:block;height:100%;border-radius:999px;transform-origin:left;animation:growX .9s var(--ease) both;
  background:linear-gradient(90deg,var(--g1),var(--g2) 55%,var(--green));box-shadow:0 0 18px var(--glow)}
.ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-family:"JetBrains Mono",monospace}
.rec{padding:13px 15px;border-radius:14px;font-weight:700;margin:15px 0;border:1px solid transparent;font-size:14px}
.rec-strong{color:var(--green);background:linear-gradient(135deg,rgba(47,224,166,.14),rgba(56,189,248,.08));border-color:rgba(47,224,166,.4);box-shadow:0 0 26px rgba(47,224,166,.18)}
.rec-moderate{color:var(--yellow);background:rgba(255,207,91,.1);border-color:rgba(255,207,91,.35)}
.rec-skip{color:var(--red-hi);background:rgba(255,91,122,.1);border-color:rgba(255,91,122,.35)}
.factor{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--border)}
.factor:last-child{border-bottom:0}
.factor .fl{font-weight:600;font-size:13px} .factor .fw{font-size:11px;color:var(--muted);font-family:"JetBrains Mono",monospace}
.factor .fbar{grid-column:1 / -1;height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.factor .fbar>i{display:block;height:100%;transform-origin:left;animation:growX .9s var(--ease) both}
.fs-bull{color:var(--green)} .fs-bear{color:var(--red)} .fs-neu{color:var(--muted)}
/* 5-factor breakdown — small cards */
.factor-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin:8px 0 6px}
.fcard{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:10px 12px}
.fcard .fc-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.fcard .fc-name{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.25}
.fcard .fw{font-size:11px;color:var(--muted);font-family:"JetBrains Mono",monospace;flex:none}
.fcard .fc-score{font-size:13px;font-weight:800;margin:7px 0}
.fcard .fbar{height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.fcard .fbar>i{display:block;height:100%;transform-origin:left;animation:growX .9s var(--ease) both}
.fcard.fs-bull{border-color:rgba(47,224,166,.30)} .fcard.fs-bear{border-color:rgba(255,91,122,.28)}

/* pair grid + checkbox grid */
.pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-height:220px;overflow-y:auto;padding:3px}
/* D6 (S53, best-effort): phone पर 3-col pair-grid tight (pair-name barely fits) ⇒ ≤480px पर 2-col (desktop/tablet अछूता; असली verify owner-phone पर deploy-बाद) */
@media(max-width:480px){ .pairs{grid-template-columns:repeat(2,1fr);gap:7px} }
.pairs button{padding:11px 8px;border-radius:13px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text-dim);cursor:pointer;font-size:12px;font-weight:700;transition:.16s}
.pairs button:hover{background:var(--glass-2)}
.pairs button.on{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 30%,transparent),color-mix(in srgb,var(--g2) 16%,transparent));border:1px solid color-mix(in srgb,var(--g1) 70%,transparent);box-shadow:0 0 24px var(--glow),inset 0 1px 0 rgba(255,255,255,.2)}
.pcheck{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:250px;overflow-y:auto;padding:3px}
.pcheck label{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.035);font-size:12px;font-weight:600;cursor:pointer;transition:.16s}
.pcheck label.on{border-color:color-mix(in srgb,var(--g1) 70%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 28%,transparent),color-mix(in srgb,var(--g2) 14%,transparent));color:#fff;box-shadow:0 0 18px var(--glow)}
.pcheck input{width:auto;margin:0;accent-color:var(--violet)}

/* time spinner */
.spin{display:flex;align-items:center;justify-content:center;gap:8px}
.spin .col{display:flex;flex-direction:column;align-items:center;gap:6px}
.spin .num{width:70px;height:54px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:13px;font-size:26px;font-weight:800;font-family:"JetBrains Mono",monospace;box-shadow:inset 0 0 20px rgba(47,107,255,.1)}
.spin .sb{width:36px;height:30px;border-radius:9px;border:0;background:rgba(255,255,255,.05);color:var(--text-dim);cursor:pointer;font-size:14px;transition:.14s}
.spin .sb:hover{background:rgba(47,107,255,.25);color:#fff} .spin .sb:active{transform:scale(.9)}
.spin .cap{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* heatmap */
.hm{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hm .d{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font-size:10px;color:var(--text-dim);cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s ease,filter .16s ease;will-change:transform;
  animation:hmPop .34s cubic-bezier(.34,1.56,.64,1) both}
.hm .d.fut{cursor:default;animation:none}
.hm .d:hover{transform:scale(1.16);filter:brightness(1.14);box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:2}
.hm .d:active{transform:scale(1.05)}
.hm .d.sel{outline:2px solid var(--cyan);outline-offset:1px;box-shadow:0 0 0 3px rgba(56,189,248,.35);transform:scale(1.1);z-index:3}
@keyframes hmPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.hm-h{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:10px;color:var(--muted);text-align:center;margin-bottom:4px}
/* heatmap day-detail panel */
.hm-detail{overflow:hidden}
.hm-detail.show .hm-detail-in{animation:hdIn .3s cubic-bezier(.34,1.56,.64,1) both}
.hm-detail-in{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:10px 13px;margin-bottom:12px;
  border-radius:12px;background:var(--card2,rgba(255,255,255,.045));border:1px solid var(--border)}
.hm-detail .hd-wk{font-weight:800;font-size:14px;color:var(--text-hi)}
.hm-detail .hd-dt{font-size:13px;color:var(--text-dim)}
.hm-detail .hd-pl{margin-left:auto;font-weight:800;font-size:13.5px}
.hm-detail .hd-pl.green{color:var(--green,#22c55e)} .hm-detail .hd-pl.red{color:var(--red,#ef4444)} .hm-detail .hd-pl.flat{color:var(--muted)}
@keyframes hdIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}

/* tabs */
.tabs{display:inline-flex;gap:4px;background:var(--glass);padding:5px;border-radius:14px;border:1px solid var(--border);margin-bottom:14px}
.tabs button{border:0;background:transparent;color:var(--text-dim);padding:9px 17px;border-radius:10px;cursor:pointer;font-weight:700;font-size:13px;transition:.2s}
.tabs button.on{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 40%,transparent),color-mix(in srgb,var(--g2) 22%,transparent));border:1px solid color-mix(in srgb,var(--g1) 50%,transparent);box-shadow:0 0 20px var(--glow)}

/* misc */
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tile{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:13px;padding:13px}
.tile .k{font-size:11px;color:var(--muted)} .tile .v{font-weight:800;margin-top:3px}
/* 🔴 S66-D1: `.pill` में ऊपर-नीचे padding था पर display default (inline) — इसलिए जब एक ही पंक्ति में
   कई pills हों और वे wrap करें, तो गोल background अगली पंक्ति के अक्षरों पर चढ़ जाता और शब्द बीच से
   टूटकर अकेले गिर जाते (/published की row मोबाइल पर यही दिखाती थी)। `.badge` में यह पहले से था।
   दोनों skins `.pill` को फिर से रंगते हैं पर `display` कोई नहीं छूता — इसलिए यहाँ base में ही सही जगह है। */
.pill{display:inline-block;vertical-align:middle;margin-block:1px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-dim)}
/* 🔴 S66-D2: हर जीवित countdown इसी class पर लिखा जाता है (drawMsigCds) और `soon` तब लगती है जब
   एक मिनट से कम बचा हो — पर किसी भी stylesheet में इनका कोई नियम नहीं था। अंक हिलते भी थे (tabular नहीं)। */
.msig-cd{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.msig-cd.soon{color:var(--yellow)}
.empty{text-align:center;color:var(--muted);padding:36px 10px}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);background:rgba(15,17,30,.9);border:1px solid var(--border-strong);color:var(--text-hi);
  padding:12px 18px;border-radius:13px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 26px rgba(47,107,255,.3);opacity:0;transition:opacity .25s,transform .25s var(--ease);pointer-events:none;z-index:50;font-weight:600}
#toast.show{opacity:1;transform:translate(-50%,0)}
.notice{font-size:12px;color:var(--yellow);background:rgba(255,207,91,.07);border:1px solid rgba(255,207,91,.25);border-radius:12px;padding:10px 13px;margin:10px 0}
.checklist label{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:13px;color:var(--text-dim);cursor:pointer}
.checklist input{width:auto;margin-top:2px;accent-color:var(--violet)} .checklist input:checked + span{text-decoration:line-through;opacity:.6}
details.exp{border:1px solid var(--border);border-radius:13px;padding:4px 14px;margin:12px 0;background:var(--glass)}
details.exp summary{cursor:pointer;font-weight:700;padding:11px 0}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40;padding:20px;animation:fadeIn .2s both;backdrop-filter:blur(6px)}
.modal{background:rgba(15,17,30,.85);border:1px solid var(--border-strong);border-radius:var(--radius);padding:22px;max-width:520px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:modalIn .22s var(--ease) both}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(47,107,255,.25);border-top-color:var(--cyan);animation:spin 1s linear infinite;display:inline-block;vertical-align:middle}
.skeleton{height:70px;border-radius:13px;background:rgba(255,255,255,.05);animation:pulse 1.6s var(--ease-std) infinite;margin-bottom:8px}
svg text{fill:var(--muted)}

/* keyframes */
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}}
.bar-grow{transform-origin:bottom;animation:growY .6s var(--ease) backwards}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes fadeIn{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== v2 polish: logo, theme switch, dramatic animations, scanning, light mode ===== */
.brand{animation:dropIn .6s var(--ease) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
/* 🪙 S170: v2-polish का logo-tile (gradient background + चमक-सफ़ाई ::after + svg-छाया) हटाया — owner: सिर्फ़ icon, कोई background नहीं */

/* day/night toggle switch in sidebar footer */
.theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}
.theme-row .lbl{font-size:13px;font-weight:600;color:var(--text-dim)}
.theme-switch{width:52px;height:28px;border-radius:999px;border:1px solid var(--border-strong);background:rgba(255,255,255,.06);position:relative;cursor:pointer;padding:0;transition:background .3s,border-color .3s;flex:none}
.theme-switch:hover{border-color:var(--primary)}
.theme-switch .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;line-height:1;background:linear-gradient(135deg,#5b8dff,#38bdf8);box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 14px rgba(47,107,255,.5);transition:transform .35s var(--ease),background .35s}
html.light .theme-switch{background:rgba(255,207,91,.2)}
html.light .theme-switch .knob{transform:translateX(24px);background:linear-gradient(135deg,#ffcf5b,#ff8ba1);box-shadow:0 2px 10px rgba(0,0,0,.2),0 0 14px rgba(255,207,91,.6)}

/* pair/slot chip: smooth color/glow transition — कोई zoom/lift नहीं */
.pairs button{transition:border-color .25s,color .25s,background .25s,box-shadow .3s}
/* result dramatic reveal */
.sig-card:not(.scan-card){animation:resultIn .6s var(--ease) both}
@keyframes resultIn{0%{opacity:0;transform:translateY(22px) scale(.97)}60%{opacity:1}100%{opacity:1;transform:none}}
.sig-dir{animation:pop .5s var(--ease) .12s both}
@keyframes pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
.btn.primary.is-scanning{filter:saturate(1.2);animation:ctaPulse 1.1s ease-in-out infinite}
@keyframes ctaPulse{50%{filter:brightness(1.12) saturate(1.3)}}

/* signal "analyzing" processing animation */
.scan-card{background:var(--glass)}
.scan-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.radar{width:52px;height:52px;border-radius:50%;flex:none;position:relative;background:radial-gradient(circle,rgba(56,189,248,.12),transparent 70%);border:1px solid rgba(56,189,248,.25);box-shadow:0 0 24px rgba(56,189,248,.3),inset 0 0 18px rgba(47,107,255,.2)}
.radar::before{content:"";position:absolute;inset:3px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(56,189,248,.05) 250deg,rgba(47,224,166,.55) 340deg,rgba(255,255,255,.85) 360deg);animation:sweep 1.25s linear infinite;mask:radial-gradient(circle,transparent 26%,#000 27%);-webkit-mask:radial-gradient(circle,transparent 26%,#000 27%)}
.radar::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);background:#5ff0c0;box-shadow:0 0 12px #2fe0a6}
@keyframes sweep{to{transform:rotate(360deg)}}
.scan-title{font-size:18px;font-weight:800;background:linear-gradient(90deg,var(--g1),var(--g2),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:flow 2.2s linear infinite}
@keyframes flow{to{background-position:200% center}}
.scanbars{display:flex;flex-direction:column;gap:11px}
.scanrow{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(6px);animation:fadeUp .4s var(--ease) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.scanrow .sname{font-size:12.5px;color:var(--text-dim);width:160px;flex:none}
.scanrow .sline{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.scanrow .sline i{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(47,107,255,.8),rgba(56,189,248,.9),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:scanSweep 1.15s ease-in-out infinite}
@keyframes scanSweep{0%{background-position:-60% 0}100%{background-position:160% 0}}
.scan-foot{margin-top:16px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.scan-dots{display:inline-flex;gap:4px}
.scan-dots i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blink 1.2s ease-in-out infinite}
.scan-dots i:nth-child(2){animation-delay:.2s}.scan-dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* light (day) mode polish */
html.light .brand .name{background:linear-gradient(90deg,var(--primary2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .stat .v{background:linear-gradient(90deg,var(--primary2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .stat.profit .v{background:linear-gradient(90deg,#0b7d5e,#0369a1);-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .stat.loss .v{background:linear-gradient(90deg,#a5281f,#a5281f);-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .scan-title{background:linear-gradient(90deg,var(--g1),var(--g3),var(--green-hi));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:flow 2.2s linear infinite}
html.light .btn.primary{color:#fff}
html.light .chips button.on{color:#fff}
html.light nav a.active{color:#123a8f}
html.light #sidebar{background:rgba(255,255,255,.75)}

/* ===== v3: sapphire shine + dramatic pair-select + paper-day fills ===== */
.pairs button.on{position:relative;overflow:hidden;
  box-shadow:0 0 30px var(--glow),inset 0 0 0 1px color-mix(in srgb,var(--g1) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.pairs button.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-130%);animation:chipShine .7s var(--ease) 1}
@keyframes chipShine{to{transform:translateX(130%)}}
.pcheck label.on{box-shadow:0 0 20px var(--glow),inset 0 0 0 1px color-mix(in srgb,var(--g1) 50%,transparent)}
/* stronger sapphire glow on hero elements */
.btn.primary{box-shadow:0 0 44px var(--glow),0 8px 24px rgba(56,189,248,.38),inset 0 1px 0 rgba(255,255,255,.45)}
/* 🪙 S170: logo की glow-छाया हटाई — owner: icon के पीछे कोई रंग/चमक नहीं */
nav a.active{box-shadow:0 0 26px var(--glow),inset 0 1px 0 rgba(255,255,255,.16)}
.tabs button.on{box-shadow:0 0 26px var(--glow)}
.stat::before{filter:blur(28px)}
/* paper day: solid sapphire fills for selected controls */
html.light .pairs button.on,html.light .pcheck label.on{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g3));border-color:transparent;box-shadow:0 8px 18px var(--glow)}
html.light .btn.primary{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;box-shadow:0 10px 26px var(--glow)}
html.light .tabs button.on,html.light .chips button.on,html.light .seg button.on,html.light nav a.active{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 6px 16px var(--glow)}
html.light nav a.active::after,html.light .pairs button.on::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent)}
html.light .confbar>i,html.light .conf-bar>i,html.light .bar>i{background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:none}
html.light .scan-title,html.light .stat .v,html.light .brand .name,html.light .brand .g{filter:none}

/* ===== v4: market pulse, sapphire dot, paper sidebar, bg shine, roller, responsive ===== */
/* selected slot/pair: smooth glowing DOT only — कोई scale/shake/zoom नहीं (box-shadow ripple = smooth) */
.pairs button.on::before,.pcheck label.on::before{content:"";position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:#5b8dff;box-shadow:0 0 0 0 rgba(91,141,255,.7);animation:sapphirePulse 1.7s ease-out infinite}
.pcheck label.on{position:relative}
@keyframes sapphirePulse{0%{box-shadow:0 0 0 0 rgba(91,141,255,.6)}70%{box-shadow:0 0 0 8px rgba(91,141,255,0)}100%{box-shadow:0 0 0 0 rgba(91,141,255,0)}}
/* market tab pulse: OTC=purple, Live=green (dot indicator) */
#tabOtc,#tabLive{position:relative;padding-left:24px!important}
#tabOtc::before,#tabLive::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%}
#tabOtc::before{background:#a855f7;box-shadow:0 0 0 0 rgba(168,85,247,.7);animation:pulseP 1.6s ease-out infinite}
#tabLive::before{background:#22e07a;box-shadow:0 0 0 0 rgba(34,224,122,.7);animation:pulseG 1.6s ease-out infinite}
@keyframes pulseP{0%{box-shadow:0 0 0 0 rgba(168,85,247,.6)}70%{box-shadow:0 0 0 8px rgba(168,85,247,0)}100%{box-shadow:0 0 0 0 rgba(168,85,247,0)}}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(34,224,122,.6)}70%{box-shadow:0 0 0 8px rgba(34,224,122,0)}100%{box-shadow:0 0 0 0 rgba(34,224,122,0)}}

/* PAPER sidebar in day mode */
html.light #sidebar{background:linear-gradient(180deg,#f0e6cd,#e8dcbb);border-right:1px solid rgba(120,100,60,.28)}
html.light .brand .sub{color:#8a7d5c}

/* background SHINE — aurora breathe: बड़े blurred glow blobs धीरे-धीरे drift/साँस लेते हैं।
   कोई rotation नहीं, कोई edge नहीं (inset -45% + soft radials) — resize पर भी सिर्फ़ shine दिखती है। */
body::before{content:"";position:fixed;inset:-45%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 32% at 24% 30%, var(--aura1), transparent 70%),
    radial-gradient(36% 28% at 76% 20%, var(--aura2), transparent 70%),
    radial-gradient(44% 36% at 60% 80%, var(--aura3), transparent 70%),
    radial-gradient(30% 26% at 12% 78%, rgba(47,224,166,.05), transparent 70%);
  filter:blur(50px);will-change:transform,opacity;
  animation:aurora 16s ease-in-out infinite alternate}
html.light body::before{background:
    radial-gradient(40% 32% at 24% 30%, rgba(214,196,150,.20), transparent 70%),
    radial-gradient(36% 28% at 76% 20%, rgba(30,95,224,.06), transparent 70%),
    radial-gradient(44% 36% at 60% 80%, rgba(224,208,164,.18), transparent 70%)}
@keyframes aurora{
  0%{transform:translate3d(-3%,-2%,0) scale(1);opacity:.7}
  50%{transform:translate3d(2.5%,2%,0) scale(1.07);opacity:1}
  100%{transform:translate3d(-1.5%,3%,0) scale(1.02);opacity:.8}}

/* time ROLLER — smooth odometer: पुराना अंक नीचे slide-out, नया ऊपर से आराम से slide-in */
.spin .num{overflow:hidden;position:relative}
.spin .num .rr{position:absolute;inset:0;display:grid;place-items:center}
.spin .num .rr.out{animation:rollOut .5s cubic-bezier(.22,1,.36,1) forwards}
.spin .num .rr.in{animation:rollIn .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rollOut{from{transform:translateY(0);opacity:1}to{transform:translateY(78%);opacity:0}}
@keyframes rollIn{from{transform:translateY(-78%);opacity:0}to{transform:translateY(0);opacity:1}}
.spin .cap.live{color:var(--accent)}

/* sidebar collapse + responsive drawer */
#navToggle{position:fixed;top:12px;left:12px;z-index:60;width:42px;height:42px;border-radius:12px;border:1px solid var(--border-strong);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--text-hi);cursor:pointer;font-size:18px;display:none;place-items:center;box-shadow:var(--shadow);transition:left .3s var(--ease),background .3s}
#navToggle.show{display:grid}
/* sidebar खुला हो तो ☰ brand के दाईं ओर (logo से overlap नहीं) */
#app.nav-open ~ #navToggle{left:186px;border-color:var(--border);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:var(--text-dim)}
#app.nav-open ~ #navToggle:hover{color:var(--text-hi);border-color:var(--border-strong)}
.navdim{position:fixed;inset:0;background:rgba(0,5,20,.55);z-index:49;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#app.nav-open .navdim{opacity:1;pointer-events:auto}
/* desktop/tablet: sidebar हमेशा docked (drawer नहीं) — nav + user/logout बिना toggle दिखें */
@media(min-width:921px){
  #sidebar{transform:none!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
  #app{padding-left:240px}
  #navToggle{display:none!important}
  .navdim{display:none!important}
}
@media(max-width:920px){
  #main{padding:64px 16px 60px}
}
/* S60-owner: phone पर .g4 (चार stat/tile cards) 2-2 की जोड़ी में — आधी scrolling; .g3/.g2 पहले जैसे 1-col */
/* S66-D3: फ़ोन पर ऊपर की 64px ख़ाली जगह पहले पर्दे का पाँचवाँ हिस्सा खा जाती थी (ऊपर जीवित पट्टी
   पहले से चिपकी रहती है, इसलिए इतनी जगह की ज़रूरत ही नहीं) — पहली असली पंक्ति जल्दी दिखे। */
@media(max-width:560px){ .g4{grid-template-columns:1fr 1fr} .g3,.g2{grid-template-columns:1fr} .row{grid-template-columns:1fr} .grid[style*="2fr"]{grid-template-columns:1fr!important} #main{padding-top:26px;padding-left:12px;padding-right:12px} .page-h{font-size:22px} .pairs,.pcheck{grid-template-columns:1fr 1fr} }

/* ===== auth gate (login / signup / pending) ===== */
#gate{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;overflow:auto;background:var(--bg);min-height:100vh;min-height:100dvh}
/* day mode: gate का bg parchment (वरना non-Sapphire theme में --bg dark रह जाता है) */
html.light #gate{background:linear-gradient(180deg,#f4edd9,#e8dbbb)}
#gate input{font-size:16px}
@media(max-width:560px){ #gate{padding:16px 12px;justify-content:flex-start} .gate-card{padding:20px 16px;margin-top:24px} }
.gate-card{width:100%;max-width:400px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  animation:resultIn .5s var(--ease) both;position:relative;z-index:1}
html.light .gate-card{backdrop-filter:none;-webkit-backdrop-filter:none}
.gate-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:18px}
/* 🪙 S170: gate (login) का logo-tile भी हटाया — "Login page वगैरह सब जगह वही icon आए", कोई background नहीं */
.gate-brand .logo{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}
.gate-brand .name{font-size:22px;font-weight:900;letter-spacing:.08em;background:linear-gradient(90deg,#fff,var(--primary-hi) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .gate-brand .name{background:linear-gradient(90deg,var(--primary2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.gate-brand .sub{font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.gate-tabs{display:flex;gap:6px;background:var(--glass);padding:5px;border-radius:12px;border:1px solid var(--border);margin-bottom:8px}
.gate-tabs button{flex:1;border:0;background:transparent;color:var(--text-dim);padding:10px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s}
.gate-tabs button.on{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 40%,transparent),color-mix(in srgb,var(--g2) 22%,transparent));border:1px solid color-mix(in srgb,var(--g1) 50%,transparent);box-shadow:0 0 20px var(--glow)}
html.light .gate-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2))}
.gate-err{color:var(--red);font-size:13px;min-height:18px;margin-top:8px;font-weight:600}
.gate-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.65}
.gate-icon{font-size:44px;text-align:center;margin:4px 0 2px}
.tg-steps{margin:14px 4px 2px;padding-left:20px;font-size:13px;color:var(--muted);line-height:1.85;text-align:left}
.tg-steps li{margin:5px 0}
.tg-gate .gate-note b, .tg-steps b{color:var(--text-hi)}
.tg-gate a.btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
/* Live-market lock (weekend/holiday) + owner holiday manager */
button.is-locked, button.is-locked:hover, button.is-locked:active{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}
.lock-note{font-size:12px;color:var(--muted);background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 11px;margin:8px 0}
.hol-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hol-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-hi);background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:5px 7px 5px 12px}
.hol-chip button{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:2px 5px;border-radius:50%}
.hol-chip button:hover{color:var(--red);background:var(--red-bg)}
.gate-theme{position:fixed;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:12px;border:1px solid var(--border-strong);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-hi);cursor:pointer;font-size:17px}

/* light-mode readability fixes (ये elements dark bg hardcode करते थे → Day mode में unreadable) */
html.light .modal{background:var(--glass);color:var(--text)}
html.light .modal .muted{color:var(--muted)}
html.light #toast{background:#123a8f;color:#fff;border-color:rgba(255,255,255,.28)}
html.light select option{background:#fff;color:#2a2313}

/* nav badge — unread signals / pending users count */
nav a .nbadge{margin-left:auto;background:linear-gradient(135deg,#ff5b7a,#ff8fa5);color:#fff;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:999px;line-height:1.45;box-shadow:0 0 10px rgba(255,91,122,.45);flex:0 0 auto}
nav a.active .nbadge{margin-left:8px}   /* active dot (::after) खुद margin-left:auto लेता है */
html.light nav a .nbadge{box-shadow:0 2px 8px rgba(255,91,122,.35)}

/* screenshot attach (New Trade / trade modal) */
.shot-prev .shot-thumb{margin-top:10px;display:flex;align-items:flex-start;gap:10px}
.shot-prev img{max-width:180px;max-height:120px;border-radius:10px;border:1px solid var(--border);display:block;object-fit:cover}
.shot-img{max-width:100%;max-height:320px;border-radius:10px;border:1px solid var(--border);display:block}

/* hybrid signal — analyst view (summary / entry rule / session note) */
.sig-analysis{margin:14px 0 12px}
.sig-analysis .an-sum{margin:7px 0 2px;font-size:13.5px;line-height:1.7}

/* sidebar footer: user row */
.user-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px 2px;margin-top:6px;border-top:1px solid var(--border)}
.user-row .user-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.user-row .uname{font-weight:700;color:var(--text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.user-row .ubadge{font-size:9px;letter-spacing:.12em;color:var(--accent);font-weight:800}

/* ===== THEMES (Feature 6): 24 palettes; हर theme dark + light (.light) दोनों में ===== */
html[data-theme="emerald"]{--g1:hsl(152 84% 62%);--g2:hsl(170 86% 58%);--g3:hsl(188 88% 76%);--primary:hsl(152 84% 62%);--primary2:hsl(152 80% 50%);--primary-hi:hsl(152 88% 80%);--accent:hsl(170 86% 58%);--cyan:hsl(170 86% 58%);--violet:hsl(152 84% 62%);--glow:hsla(152 88% 60% / 0.5);--bg:hsl(152 42% 6%);--bg2:hsl(152 38% 10%);--bga1:hsla(152 88% 62% / 0.5);--bga2:hsla(170 85% 58% / 0.38);--bga3:hsla(188 80% 62% / 0.34);--bga4:hsla(212 70% 55% / 0.16);--aura1:hsla(152 88% 64% / 0.11);--aura2:hsla(170 85% 60% / 0.1);--aura3:hsla(188 80% 72% / 0.08)}
html[data-theme="emerald"].light{--g1:hsl(152 72% 32%);--g2:hsl(170 70% 31%);--g3:hsl(188 65% 35%);--primary:hsl(152 72% 32%);--primary2:hsl(152 75% 34%);--primary-hi:hsl(152 75% 34%);--accent:hsl(170 70% 31%);--cyan:hsl(170 70% 31%);--violet:hsl(152 72% 32%);--glow:hsla(152 72% 32% / 0.3)}
html[data-theme="royal"]{--g1:hsl(265 84% 62%);--g2:hsl(249 86% 58%);--g3:hsl(233 88% 76%);--primary:hsl(265 84% 62%);--primary2:hsl(265 80% 50%);--primary-hi:hsl(265 88% 80%);--accent:hsl(249 86% 58%);--cyan:hsl(249 86% 58%);--violet:hsl(265 84% 62%);--glow:hsla(265 88% 60% / 0.5);--bg:hsl(265 42% 6%);--bg2:hsl(265 38% 10%);--bga1:hsla(265 88% 62% / 0.5);--bga2:hsla(249 85% 58% / 0.38);--bga3:hsla(233 80% 62% / 0.34);--bga4:hsla(325 70% 55% / 0.16);--aura1:hsla(265 88% 64% / 0.11);--aura2:hsla(249 85% 60% / 0.1);--aura3:hsla(233 80% 72% / 0.08)}
html[data-theme="royal"].light{--g1:hsl(265 72% 46%);--g2:hsl(249 70% 46%);--g3:hsl(233 65% 46%);--primary:hsl(265 72% 46%);--primary2:hsl(265 75% 34%);--primary-hi:hsl(265 75% 34%);--accent:hsl(249 70% 46%);--cyan:hsl(249 70% 46%);--violet:hsl(265 72% 46%);--glow:hsla(265 72% 46% / 0.3)}
html[data-theme="sunset"]{--g1:hsl(24 84% 62%);--g2:hsl(352 86% 58%);--g3:hsl(320 88% 76%);--primary:hsl(24 84% 62%);--primary2:hsl(24 80% 50%);--primary-hi:hsl(24 88% 80%);--accent:hsl(352 86% 58%);--cyan:hsl(352 86% 58%);--violet:hsl(24 84% 62%);--glow:hsla(24 88% 60% / 0.5);--bg:hsl(24 42% 6%);--bg2:hsl(24 38% 10%);--bga1:hsla(24 88% 62% / 0.5);--bga2:hsla(352 85% 58% / 0.38);--bga3:hsla(320 80% 62% / 0.34);--bga4:hsla(84 70% 55% / 0.16);--aura1:hsla(24 88% 64% / 0.11);--aura2:hsla(352 85% 60% / 0.1);--aura3:hsla(320 80% 72% / 0.08)}
html[data-theme="sunset"].light{--g1:hsl(24 72% 44%);--g2:hsl(352 70% 46%);--g3:hsl(320 65% 46%);--primary:hsl(24 72% 44%);--primary2:hsl(24 75% 34%);--primary-hi:hsl(24 75% 34%);--accent:hsl(352 70% 46%);--cyan:hsl(352 70% 46%);--violet:hsl(24 72% 44%);--glow:hsla(24 72% 44% / 0.3)}
html[data-theme="rose"]{--g1:hsl(340 84% 62%);--g2:hsl(354 86% 58%);--g3:hsl(8 88% 76%);--primary:hsl(340 84% 62%);--primary2:hsl(340 80% 50%);--primary-hi:hsl(340 88% 80%);--accent:hsl(354 86% 58%);--cyan:hsl(354 86% 58%);--violet:hsl(340 84% 62%);--glow:hsla(340 88% 60% / 0.5);--bg:hsl(340 42% 6%);--bg2:hsl(340 38% 10%);--bga1:hsla(340 88% 62% / 0.5);--bga2:hsla(354 85% 58% / 0.38);--bga3:hsla(8 80% 62% / 0.34);--bga4:hsla(40 70% 55% / 0.16);--aura1:hsla(340 88% 64% / 0.11);--aura2:hsla(354 85% 60% / 0.1);--aura3:hsla(8 80% 72% / 0.08)}
html[data-theme="rose"].light{--g1:hsl(340 72% 46%);--g2:hsl(354 70% 46%);--g3:hsl(8 65% 46%);--primary:hsl(340 72% 46%);--primary2:hsl(340 75% 34%);--primary-hi:hsl(340 75% 34%);--accent:hsl(354 70% 46%);--cyan:hsl(354 70% 46%);--violet:hsl(340 72% 46%);--glow:hsla(340 72% 46% / 0.3)}
html[data-theme="crimson"]{--g1:hsl(352 84% 62%);--g2:hsl(344 86% 58%);--g3:hsl(336 88% 76%);--primary:hsl(352 84% 62%);--primary2:hsl(352 80% 50%);--primary-hi:hsl(352 88% 80%);--accent:hsl(344 86% 58%);--cyan:hsl(344 86% 58%);--violet:hsl(352 84% 62%);--glow:hsla(352 88% 60% / 0.5);--bg:hsl(352 42% 6%);--bg2:hsl(352 38% 10%);--bga1:hsla(352 88% 62% / 0.5);--bga2:hsla(344 85% 58% / 0.38);--bga3:hsla(336 80% 62% / 0.34);--bga4:hsla(52 70% 55% / 0.16);--aura1:hsla(352 88% 64% / 0.11);--aura2:hsla(344 85% 60% / 0.1);--aura3:hsla(336 80% 72% / 0.08)}
html[data-theme="crimson"].light{--g1:hsl(352 72% 46%);--g2:hsl(344 70% 46%);--g3:hsl(336 65% 46%);--primary:hsl(352 72% 46%);--primary2:hsl(352 75% 34%);--primary-hi:hsl(352 75% 34%);--accent:hsl(344 70% 46%);--cyan:hsl(344 70% 46%);--violet:hsl(352 72% 46%);--glow:hsla(352 72% 46% / 0.3)}
html[data-theme="amber"]{--g1:hsl(42 84% 62%);--g2:hsl(30 86% 58%);--g3:hsl(18 88% 76%);--primary:hsl(42 84% 62%);--primary2:hsl(42 80% 50%);--primary-hi:hsl(42 88% 80%);--accent:hsl(30 86% 58%);--cyan:hsl(30 86% 58%);--violet:hsl(42 84% 62%);--glow:hsla(42 88% 60% / 0.5);--bg:hsl(42 42% 6%);--bg2:hsl(42 38% 10%);--bga1:hsla(42 88% 62% / 0.5);--bga2:hsla(30 85% 58% / 0.38);--bga3:hsla(18 80% 62% / 0.34);--bga4:hsla(102 70% 55% / 0.16);--aura1:hsla(42 88% 64% / 0.11);--aura2:hsla(30 85% 60% / 0.1);--aura3:hsla(18 80% 72% / 0.08)}
html[data-theme="amber"].light{--g1:hsl(42 72% 35%);--g2:hsl(30 70% 41%);--g3:hsl(18 65% 46%);--primary:hsl(42 72% 35%);--primary2:hsl(42 75% 34%);--primary-hi:hsl(42 75% 34%);--accent:hsl(30 70% 41%);--cyan:hsl(30 70% 41%);--violet:hsl(42 72% 35%);--glow:hsla(42 72% 35% / 0.3)}
html[data-theme="teal"]{--g1:hsl(178 84% 62%);--g2:hsl(164 86% 58%);--g3:hsl(150 88% 76%);--primary:hsl(178 84% 62%);--primary2:hsl(178 80% 50%);--primary-hi:hsl(178 88% 80%);--accent:hsl(164 86% 58%);--cyan:hsl(164 86% 58%);--violet:hsl(178 84% 62%);--glow:hsla(178 88% 60% / 0.5);--bg:hsl(178 42% 6%);--bg2:hsl(178 38% 10%);--bga1:hsla(178 88% 62% / 0.5);--bga2:hsla(164 85% 58% / 0.38);--bga3:hsla(150 80% 62% / 0.34);--bga4:hsla(238 70% 55% / 0.16);--aura1:hsla(178 88% 64% / 0.11);--aura2:hsla(164 85% 60% / 0.1);--aura3:hsla(150 80% 72% / 0.08)}
html[data-theme="teal"].light{--g1:hsl(178 72% 31%);--g2:hsl(164 70% 32%);--g3:hsl(150 65% 33%);--primary:hsl(178 72% 31%);--primary2:hsl(178 75% 34%);--primary-hi:hsl(178 75% 34%);--accent:hsl(164 70% 32%);--cyan:hsl(164 70% 32%);--violet:hsl(178 72% 31%);--glow:hsla(178 72% 31% / 0.3)}
html[data-theme="ice"]{--g1:hsl(196 84% 62%);--g2:hsl(206 86% 58%);--g3:hsl(216 88% 76%);--primary:hsl(196 84% 62%);--primary2:hsl(196 80% 50%);--primary-hi:hsl(196 88% 80%);--accent:hsl(206 86% 58%);--cyan:hsl(206 86% 58%);--violet:hsl(196 84% 62%);--glow:hsla(196 88% 60% / 0.5);--bg:hsl(196 42% 6%);--bg2:hsl(196 38% 10%);--bga1:hsla(196 88% 62% / 0.5);--bga2:hsla(206 85% 58% / 0.38);--bga3:hsla(216 80% 62% / 0.34);--bga4:hsla(256 70% 55% / 0.16);--aura1:hsla(196 88% 64% / 0.11);--aura2:hsla(206 85% 60% / 0.1);--aura3:hsla(216 80% 72% / 0.08)}
html[data-theme="ice"].light{--g1:hsl(196 72% 39%);--g2:hsl(206 70% 46%);--g3:hsl(216 65% 46%);--primary:hsl(196 72% 39%);--primary2:hsl(196 75% 34%);--primary-hi:hsl(196 75% 34%);--accent:hsl(206 70% 46%);--cyan:hsl(206 70% 46%);--violet:hsl(196 72% 39%);--glow:hsla(196 72% 39% / 0.3)}
html[data-theme="indigo"]{--g1:hsl(232 84% 62%);--g2:hsl(248 86% 58%);--g3:hsl(264 88% 76%);--primary:hsl(232 84% 62%);--primary2:hsl(232 80% 50%);--primary-hi:hsl(232 88% 80%);--accent:hsl(248 86% 58%);--cyan:hsl(248 86% 58%);--violet:hsl(232 84% 62%);--glow:hsla(232 88% 60% / 0.5);--bg:hsl(232 42% 6%);--bg2:hsl(232 38% 10%);--bga1:hsla(232 88% 62% / 0.5);--bga2:hsla(248 85% 58% / 0.38);--bga3:hsla(264 80% 62% / 0.34);--bga4:hsla(292 70% 55% / 0.16);--aura1:hsla(232 88% 64% / 0.11);--aura2:hsla(248 85% 60% / 0.1);--aura3:hsla(264 80% 72% / 0.08)}
html[data-theme="indigo"].light{--g1:hsl(232 72% 46%);--g2:hsl(248 70% 46%);--g3:hsl(264 65% 46%);--primary:hsl(232 72% 46%);--primary2:hsl(232 75% 34%);--primary-hi:hsl(232 75% 34%);--accent:hsl(248 70% 46%);--cyan:hsl(248 70% 46%);--violet:hsl(232 72% 46%);--glow:hsla(232 72% 46% / 0.3)}
html[data-theme="magenta"]{--g1:hsl(312 84% 62%);--g2:hsl(324 86% 58%);--g3:hsl(336 88% 76%);--primary:hsl(312 84% 62%);--primary2:hsl(312 80% 50%);--primary-hi:hsl(312 88% 80%);--accent:hsl(324 86% 58%);--cyan:hsl(324 86% 58%);--violet:hsl(312 84% 62%);--glow:hsla(312 88% 60% / 0.5);--bg:hsl(312 42% 6%);--bg2:hsl(312 38% 10%);--bga1:hsla(312 88% 62% / 0.5);--bga2:hsla(324 85% 58% / 0.38);--bga3:hsla(336 80% 62% / 0.34);--bga4:hsla(12 70% 55% / 0.16);--aura1:hsla(312 88% 64% / 0.11);--aura2:hsla(324 85% 60% / 0.1);--aura3:hsla(336 80% 72% / 0.08)}
html[data-theme="magenta"].light{--g1:hsl(312 72% 46%);--g2:hsl(324 70% 46%);--g3:hsl(336 65% 46%);--primary:hsl(312 72% 46%);--primary2:hsl(312 75% 34%);--primary-hi:hsl(312 75% 34%);--accent:hsl(324 70% 46%);--cyan:hsl(324 70% 46%);--violet:hsl(312 72% 46%);--glow:hsla(312 72% 46% / 0.3)}
html[data-theme="lime"]{--g1:hsl(92 84% 62%);--g2:hsl(72 86% 58%);--g3:hsl(52 88% 76%);--primary:hsl(92 84% 62%);--primary2:hsl(92 80% 50%);--primary-hi:hsl(92 88% 80%);--accent:hsl(72 86% 58%);--cyan:hsl(72 86% 58%);--violet:hsl(92 84% 62%);--glow:hsla(92 88% 60% / 0.5);--bg:hsl(92 42% 6%);--bg2:hsl(92 38% 10%);--bga1:hsla(92 88% 62% / 0.5);--bga2:hsla(72 85% 58% / 0.38);--bga3:hsla(52 80% 62% / 0.34);--bga4:hsla(152 70% 55% / 0.16);--aura1:hsla(92 88% 64% / 0.11);--aura2:hsla(72 85% 60% / 0.1);--aura3:hsla(52 80% 72% / 0.08)}
html[data-theme="lime"].light{--g1:hsl(92 72% 31%);--g2:hsl(72 70% 30%);--g3:hsl(52 65% 33%);--primary:hsl(92 72% 31%);--primary2:hsl(92 75% 34%);--primary-hi:hsl(92 75% 34%);--accent:hsl(72 70% 30%);--cyan:hsl(72 70% 30%);--violet:hsl(92 72% 31%);--glow:hsla(92 72% 31% / 0.3)}
html[data-theme="ocean"]{--g1:hsl(205 84% 62%);--g2:hsl(183 86% 58%);--g3:hsl(161 88% 76%);--primary:hsl(205 84% 62%);--primary2:hsl(205 80% 50%);--primary-hi:hsl(205 88% 80%);--accent:hsl(183 86% 58%);--cyan:hsl(183 86% 58%);--violet:hsl(205 84% 62%);--glow:hsla(205 88% 60% / 0.5);--bg:hsl(205 42% 6%);--bg2:hsl(205 38% 10%);--bga1:hsla(205 88% 62% / 0.5);--bga2:hsla(183 85% 58% / 0.38);--bga3:hsla(161 80% 62% / 0.34);--bga4:hsla(265 70% 55% / 0.16);--aura1:hsla(205 88% 64% / 0.11);--aura2:hsla(183 85% 60% / 0.1);--aura3:hsla(161 80% 72% / 0.08)}
html[data-theme="ocean"].light{--g1:hsl(205 72% 44%);--g2:hsl(183 70% 32%);--g3:hsl(161 65% 33%);--primary:hsl(205 72% 44%);--primary2:hsl(205 75% 34%);--primary-hi:hsl(205 75% 34%);--accent:hsl(183 70% 32%);--cyan:hsl(183 70% 32%);--violet:hsl(205 72% 44%);--glow:hsla(205 72% 44% / 0.3)}
html[data-theme="coral"]{--g1:hsl(10 84% 62%);--g2:hsl(24 86% 58%);--g3:hsl(38 88% 76%);--primary:hsl(10 84% 62%);--primary2:hsl(10 80% 50%);--primary-hi:hsl(10 88% 80%);--accent:hsl(24 86% 58%);--cyan:hsl(24 86% 58%);--violet:hsl(10 84% 62%);--glow:hsla(10 88% 60% / 0.5);--bg:hsl(10 42% 6%);--bg2:hsl(10 38% 10%);--bga1:hsla(10 88% 62% / 0.5);--bga2:hsla(24 85% 58% / 0.38);--bga3:hsla(38 80% 62% / 0.34);--bga4:hsla(70 70% 55% / 0.16);--aura1:hsla(10 88% 64% / 0.11);--aura2:hsla(24 85% 60% / 0.1);--aura3:hsla(38 80% 72% / 0.08)}
html[data-theme="coral"].light{--g1:hsl(10 72% 46%);--g2:hsl(24 70% 44%);--g3:hsl(38 65% 38%);--primary:hsl(10 72% 46%);--primary2:hsl(10 75% 34%);--primary-hi:hsl(10 75% 34%);--accent:hsl(24 70% 44%);--cyan:hsl(24 70% 44%);--violet:hsl(10 72% 46%);--glow:hsla(10 72% 46% / 0.3)}
html[data-theme="neonviolet"]{--g1:hsl(278 84% 62%);--g2:hsl(296 86% 58%);--g3:hsl(314 88% 76%);--primary:hsl(278 84% 62%);--primary2:hsl(278 80% 50%);--primary-hi:hsl(278 88% 80%);--accent:hsl(296 86% 58%);--cyan:hsl(296 86% 58%);--violet:hsl(278 84% 62%);--glow:hsla(278 88% 60% / 0.5);--bg:hsl(278 42% 6%);--bg2:hsl(278 38% 10%);--bga1:hsla(278 88% 62% / 0.5);--bga2:hsla(296 85% 58% / 0.38);--bga3:hsla(314 80% 62% / 0.34);--bga4:hsla(338 70% 55% / 0.16);--aura1:hsla(278 88% 64% / 0.11);--aura2:hsla(296 85% 60% / 0.1);--aura3:hsla(314 80% 72% / 0.08)}
html[data-theme="neonviolet"].light{--g1:hsl(278 72% 46%);--g2:hsl(296 70% 46%);--g3:hsl(314 65% 46%);--primary:hsl(278 72% 46%);--primary2:hsl(278 75% 34%);--primary-hi:hsl(278 75% 34%);--accent:hsl(296 70% 46%);--cyan:hsl(296 70% 46%);--violet:hsl(278 72% 46%);--glow:hsla(278 72% 46% / 0.3)}
html[data-theme="mint"]{--g1:hsl(160 84% 62%);--g2:hsl(176 86% 58%);--g3:hsl(192 88% 76%);--primary:hsl(160 84% 62%);--primary2:hsl(160 80% 50%);--primary-hi:hsl(160 88% 80%);--accent:hsl(176 86% 58%);--cyan:hsl(176 86% 58%);--violet:hsl(160 84% 62%);--glow:hsla(160 88% 60% / 0.5);--bg:hsl(160 42% 6%);--bg2:hsl(160 38% 10%);--bga1:hsla(160 88% 62% / 0.5);--bga2:hsla(176 85% 58% / 0.38);--bga3:hsla(192 80% 62% / 0.34);--bga4:hsla(220 70% 55% / 0.16);--aura1:hsla(160 88% 64% / 0.11);--aura2:hsla(176 85% 60% / 0.1);--aura3:hsla(192 80% 72% / 0.08)}
html[data-theme="mint"].light{--g1:hsl(160 72% 32%);--g2:hsl(176 70% 31%);--g3:hsl(192 65% 37%);--primary:hsl(160 72% 32%);--primary2:hsl(160 75% 34%);--primary-hi:hsl(160 75% 34%);--accent:hsl(176 70% 31%);--cyan:hsl(176 70% 31%);--violet:hsl(160 72% 32%);--glow:hsla(160 72% 32% / 0.3)}
html[data-theme="slate"]{--g1:hsl(215 65% 62%);--g2:hsl(203 67% 58%);--g3:hsl(191 68% 76%);--primary:hsl(215 65% 62%);--primary2:hsl(215 63% 50%);--primary-hi:hsl(215 68% 80%);--accent:hsl(203 67% 58%);--cyan:hsl(203 67% 58%);--violet:hsl(215 65% 62%);--glow:hsla(215 68% 60% / 0.5);--bg:hsl(215 26% 6%);--bg2:hsl(215 24% 10%);--bga1:hsla(215 68% 62% / 0.5);--bga2:hsla(203 66% 58% / 0.38);--bga3:hsla(191 63% 62% / 0.34);--bga4:hsla(275 57% 55% / 0.16);--aura1:hsla(215 68% 64% / 0.11);--aura2:hsla(203 66% 60% / 0.1);--aura3:hsla(191 63% 72% / 0.08)}
html[data-theme="slate"].light{--g1:hsl(215 58% 46%);--g2:hsl(203 57% 45%);--g3:hsl(191 54% 39%);--primary:hsl(215 58% 46%);--primary2:hsl(215 60% 34%);--primary-hi:hsl(215 60% 34%);--accent:hsl(203 57% 45%);--cyan:hsl(203 57% 45%);--violet:hsl(215 58% 46%);--glow:hsla(215 58% 46% / 0.3)}
/* D3 (S53, owner "accent रंग theme से बदले"): color-theme का accent Terminal/Aurora skins में भी लगे। जब कोई
   color-theme चुनी हो (data-theme set; sapphire-default में attribute नहीं ⇒ skin-native रहता), skin का flat
   accent token theme के --accent पर जाए (aurora का prominent gradient भी theme-रंग से)। skin का dark-green/light
   atmosphere + semantic win/loss (हरा/लाल) यथावत। specificity html[data-ui][data-theme] (0,2,1) > html[data-ui] (0,1,1)
   ⇒ skin-default override; var(--accent)/--g1/--g2 उसी html पर theme-rule से resolve होते। */
/* terminal के दो accent-namespaces (--tsh-* shell/nav + --tv-* views/buttons) + उनके line/glow (hardcoded green
   literals) सब theme-accent पर; rgb-triplet tokens के लिए relative-color rgb(from var(--accent) ...) — modern Chrome
   support करता, पुराने browser पर invalid ⇒ skin-green fallback (graceful)। bg/text/win/loss यथावत। */
/* 🔴 skin terminal-views #main/#modalBg/#toast के अंदर पूरी --accent-family (accent/primary/cyan/g1../glow) को
   green पर remap करती है ⇒ #main में var(--accent) theme नहीं देता। इसलिए theme-accent को html-स्तर पर (जहाँ remap
   नहीं) नए --th-acc में capture करके inherit कराते हैं (skin --th-acc नहीं जानती), फिर #main में उसी से tint। */
html[data-ui="terminal"][data-theme]{
  --th-acc: var(--accent);   /* html पर --accent = theme; capture + inherit to #main (skin-remap से बचा) */
  --tsh-acc: var(--accent);
  --tsh-line: rgb(from var(--accent) r g b / .32); --tsh-line2: rgb(from var(--accent) r g b / .14);
  --tsh-glow: 0 0 10px rgb(from var(--accent) r g b / .45);
}
html[data-ui="terminal"][data-theme] #main,
html[data-ui="terminal"][data-theme] #modalBg,
html[data-ui="terminal"][data-theme] #toast{
  --tv-acc: var(--th-acc);
  --tv-line: rgb(from var(--th-acc) r g b / .32); --tv-line2: rgb(from var(--th-acc) r g b / .14);
  --tv-glow: 0 0 10px rgb(from var(--th-acc) r g b / .45);
}
/* button/atmosphere के direct rgba(var(--*-acc-rgb),..) faint-tints के लिए भी relative-color se accent-tinted background */
html[data-ui="terminal"][data-theme] #main .btn.primary,
html[data-ui="terminal"][data-theme] #modalBg .btn.primary{ background:rgb(from var(--th-acc) r g b / .16); box-shadow:inset 0 0 18px rgb(from var(--th-acc) r g b / .12); }
html[data-ui="aurora"][data-theme]{
  --ash-accent: var(--accent);
  --ash-grad: linear-gradient(120deg, var(--g1) 0%, var(--g2) 58%, var(--accent) 120%);
  --ash-glow: 0 0 0 4px rgb(from var(--accent) r g b / .14);
}
html[data-theme="bronze"]{--g1:hsl(32 79% 62%);--g2:hsl(18 81% 58%);--g3:hsl(4 83% 76%);--primary:hsl(32 79% 62%);--primary2:hsl(32 76% 50%);--primary-hi:hsl(32 83% 80%);--accent:hsl(18 81% 58%);--cyan:hsl(18 81% 58%);--violet:hsl(32 79% 62%);--glow:hsla(32 83% 60% / 0.5);--bg:hsl(32 38% 6%);--bg2:hsl(32 34% 10%);--bga1:hsla(32 83% 62% / 0.5);--bga2:hsla(18 80% 58% / 0.38);--bga3:hsla(4 76% 62% / 0.34);--bga4:hsla(92 67% 55% / 0.16);--aura1:hsla(32 83% 64% / 0.11);--aura2:hsla(18 80% 60% / 0.1);--aura3:hsla(4 76% 72% / 0.08)}
html[data-theme="bronze"].light{--g1:hsl(32 68% 40%);--g2:hsl(18 67% 46%);--g3:hsl(4 62% 46%);--primary:hsl(32 68% 40%);--primary2:hsl(32 71% 34%);--primary-hi:hsl(32 71% 34%);--accent:hsl(18 67% 46%);--cyan:hsl(18 67% 46%);--violet:hsl(32 68% 40%);--glow:hsla(32 68% 40% / 0.3)}
html[data-theme="aqua"]{--g1:hsl(186 84% 62%);--g2:hsl(198 86% 58%);--g3:hsl(210 88% 76%);--primary:hsl(186 84% 62%);--primary2:hsl(186 80% 50%);--primary-hi:hsl(186 88% 80%);--accent:hsl(198 86% 58%);--cyan:hsl(198 86% 58%);--violet:hsl(186 84% 62%);--glow:hsla(186 88% 60% / 0.5);--bg:hsl(186 42% 6%);--bg2:hsl(186 38% 10%);--bga1:hsla(186 88% 62% / 0.5);--bga2:hsla(198 85% 58% / 0.38);--bga3:hsla(210 80% 62% / 0.34);--bga4:hsla(246 70% 55% / 0.16);--aura1:hsla(186 88% 64% / 0.11);--aura2:hsla(198 85% 60% / 0.1);--aura3:hsla(210 80% 72% / 0.08)}
html[data-theme="aqua"].light{--g1:hsl(186 72% 33%);--g2:hsl(198 70% 40%);--g3:hsl(210 65% 46%);--primary:hsl(186 72% 33%);--primary2:hsl(186 75% 34%);--primary-hi:hsl(186 75% 34%);--accent:hsl(198 70% 40%);--cyan:hsl(198 70% 40%);--violet:hsl(186 72% 33%);--glow:hsla(186 72% 33% / 0.3)}
html[data-theme="fuchsia"]{--g1:hsl(322 84% 62%);--g2:hsl(308 86% 58%);--g3:hsl(294 88% 76%);--primary:hsl(322 84% 62%);--primary2:hsl(322 80% 50%);--primary-hi:hsl(322 88% 80%);--accent:hsl(308 86% 58%);--cyan:hsl(308 86% 58%);--violet:hsl(322 84% 62%);--glow:hsla(322 88% 60% / 0.5);--bg:hsl(322 42% 6%);--bg2:hsl(322 38% 10%);--bga1:hsla(322 88% 62% / 0.5);--bga2:hsla(308 85% 58% / 0.38);--bga3:hsla(294 80% 62% / 0.34);--bga4:hsla(22 70% 55% / 0.16);--aura1:hsla(322 88% 64% / 0.11);--aura2:hsla(308 85% 60% / 0.1);--aura3:hsla(294 80% 72% / 0.08)}
html[data-theme="fuchsia"].light{--g1:hsl(322 72% 46%);--g2:hsl(308 70% 46%);--g3:hsl(294 65% 46%);--primary:hsl(322 72% 46%);--primary2:hsl(322 75% 34%);--primary-hi:hsl(322 75% 34%);--accent:hsl(308 70% 46%);--cyan:hsl(308 70% 46%);--violet:hsl(322 72% 46%);--glow:hsla(322 72% 46% / 0.3)}
html[data-theme="forest"]{--g1:hsl(140 77% 62%);--g2:hsl(124 78% 58%);--g3:hsl(108 80% 76%);--primary:hsl(140 77% 62%);--primary2:hsl(140 73% 50%);--primary-hi:hsl(140 80% 80%);--accent:hsl(124 78% 58%);--cyan:hsl(124 78% 58%);--violet:hsl(140 77% 62%);--glow:hsla(140 80% 60% / 0.5);--bg:hsl(140 36% 6%);--bg2:hsl(140 32% 10%);--bga1:hsla(140 80% 62% / 0.5);--bga2:hsla(124 78% 58% / 0.38);--bga3:hsla(108 73% 62% / 0.34);--bga4:hsla(200 65% 55% / 0.16);--aura1:hsla(140 80% 64% / 0.11);--aura2:hsla(124 78% 60% / 0.1);--aura3:hsla(108 73% 72% / 0.08)}
html[data-theme="forest"].light{--g1:hsl(140 66% 33%);--g2:hsl(124 65% 33%);--g3:hsl(108 61% 34%);--primary:hsl(140 66% 33%);--primary2:hsl(140 69% 34%);--primary-hi:hsl(140 69% 34%);--accent:hsl(124 65% 33%);--cyan:hsl(124 65% 33%);--violet:hsl(140 66% 33%);--glow:hsla(140 66% 33% / 0.3)}
html[data-theme="lavender"]{--g1:hsl(255 79% 62%);--g2:hsl(271 81% 58%);--g3:hsl(287 83% 76%);--primary:hsl(255 79% 62%);--primary2:hsl(255 76% 50%);--primary-hi:hsl(255 83% 80%);--accent:hsl(271 81% 58%);--cyan:hsl(271 81% 58%);--violet:hsl(255 79% 62%);--glow:hsla(255 83% 60% / 0.5);--bg:hsl(255 38% 6%);--bg2:hsl(255 34% 10%);--bga1:hsla(255 83% 62% / 0.5);--bga2:hsla(271 80% 58% / 0.38);--bga3:hsla(287 76% 62% / 0.34);--bga4:hsla(315 67% 55% / 0.16);--aura1:hsla(255 83% 64% / 0.11);--aura2:hsla(271 80% 60% / 0.1);--aura3:hsla(287 76% 72% / 0.08)}
html[data-theme="lavender"].light{--g1:hsl(255 68% 46%);--g2:hsl(271 67% 46%);--g3:hsl(287 62% 46%);--primary:hsl(255 68% 46%);--primary2:hsl(255 71% 34%);--primary-hi:hsl(255 71% 34%);--accent:hsl(271 67% 46%);--cyan:hsl(271 67% 46%);--violet:hsl(255 68% 46%);--glow:hsla(255 68% 46% / 0.3)}
html[data-theme="ruby"]{--g1:hsl(345 84% 62%);--g2:hsl(335 86% 58%);--g3:hsl(325 88% 76%);--primary:hsl(345 84% 62%);--primary2:hsl(345 80% 50%);--primary-hi:hsl(345 88% 80%);--accent:hsl(335 86% 58%);--cyan:hsl(335 86% 58%);--violet:hsl(345 84% 62%);--glow:hsla(345 88% 60% / 0.5);--bg:hsl(345 42% 6%);--bg2:hsl(345 38% 10%);--bga1:hsla(345 88% 62% / 0.5);--bga2:hsla(335 85% 58% / 0.38);--bga3:hsla(325 80% 62% / 0.34);--bga4:hsla(45 70% 55% / 0.16);--aura1:hsla(345 88% 64% / 0.11);--aura2:hsla(335 85% 60% / 0.1);--aura3:hsla(325 80% 72% / 0.08)}
html[data-theme="ruby"].light{--g1:hsl(345 72% 46%);--g2:hsl(335 70% 46%);--g3:hsl(325 65% 46%);--primary:hsl(345 72% 46%);--primary2:hsl(345 75% 34%);--primary-hi:hsl(345 75% 34%);--accent:hsl(335 70% 46%);--cyan:hsl(335 70% 46%);--violet:hsl(345 72% 46%);--glow:hsla(345 72% 46% / 0.3)}
html[data-theme="steel"]{--g1:hsl(210 64% 62%);--g2:hsl(218 66% 58%);--g3:hsl(226 67% 76%);--primary:hsl(210 64% 62%);--primary2:hsl(210 62% 50%);--primary-hi:hsl(210 67% 80%);--accent:hsl(218 66% 58%);--cyan:hsl(218 66% 58%);--violet:hsl(210 64% 62%);--glow:hsla(210 67% 60% / 0.5);--bg:hsl(210 25% 6%);--bg2:hsl(210 23% 10%);--bga1:hsla(210 67% 62% / 0.5);--bga2:hsla(218 65% 58% / 0.38);--bga3:hsla(226 62% 62% / 0.34);--bga4:hsla(270 56% 55% / 0.16);--aura1:hsla(210 67% 64% / 0.11);--aura2:hsla(218 65% 60% / 0.1);--aura3:hsla(226 62% 72% / 0.08)}
html[data-theme="steel"].light{--g1:hsl(210 57% 46%);--g2:hsl(218 56% 46%);--g3:hsl(226 53% 46%);--primary:hsl(210 57% 46%);--primary2:hsl(210 59% 34%);--primary-hi:hsl(210 59% 34%);--accent:hsl(218 56% 46%);--cyan:hsl(218 56% 46%);--violet:hsl(210 57% 46%);--glow:hsla(210 57% 46% / 0.3)}
html[data-theme="midnight"]{--g1:hsl(225 84% 62%);--g2:hsl(251 86% 58%);--g3:hsl(277 88% 76%);--primary:hsl(225 84% 62%);--primary2:hsl(225 80% 50%);--primary-hi:hsl(225 88% 80%);--accent:hsl(251 86% 58%);--cyan:hsl(251 86% 58%);--violet:hsl(225 84% 62%);--glow:hsla(225 88% 60% / 0.5);--bg:hsl(225 42% 6%);--bg2:hsl(225 38% 10%);--bga1:hsla(225 88% 62% / 0.5);--bga2:hsla(251 85% 58% / 0.38);--bga3:hsla(277 80% 62% / 0.34);--bga4:hsla(285 70% 55% / 0.16);--aura1:hsla(225 88% 64% / 0.11);--aura2:hsla(251 85% 60% / 0.1);--aura3:hsla(277 80% 72% / 0.08)}
html[data-theme="midnight"].light{--g1:hsl(225 72% 46%);--g2:hsl(251 70% 46%);--g3:hsl(277 65% 46%);--primary:hsl(225 72% 46%);--primary2:hsl(225 75% 34%);--primary-hi:hsl(225 75% 34%);--accent:hsl(251 70% 46%);--cyan:hsl(251 70% 46%);--violet:hsl(225 72% 46%);--glow:hsla(225 72% 46% / 0.3)}

/* theme picker (Settings → Appearance) */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;margin-top:4px}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 6px;border-radius:12px;border:1px solid var(--border);background:var(--glass);cursor:pointer;transition:transform .16s var(--ease),border-color .2s,box-shadow .2s;font:inherit}
.theme-swatch:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.theme-swatch.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--ring)}
.theme-swatch .sw{width:100%;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.theme-swatch .tn{font-size:11px;font-weight:600;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.theme-swatch.on .tn{color:var(--text-hi)}

/* Published feed: slide-open Trading Rules card */
.rules-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--glass);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}
.rules-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;background:transparent;border:0;color:var(--text-hi);font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;text-align:left}
.rules-head:hover{background:var(--glass-2)}
.rules-arrow{transition:transform .3s var(--ease);color:var(--muted);font-size:13px}
.rules-card.open .rules-arrow{transform:rotate(180deg)}
.rules-body{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.rules-card.open .rules-body{max-height:640px}
.rules-list{margin:0;padding:2px 20px 16px 42px;display:grid;gap:9px}
.rules-list li{font-size:13.5px;line-height:1.55;color:var(--text-dim)}
.rules-list li::marker{color:var(--primary);font-weight:800}

/* ---- user photo avatars (registration + owner user-info) ---- */
.gate-photo{display:flex;align-items:center;gap:10px;margin-top:4px}
.gate-avatar{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:22px;background:var(--card2);border:1px solid var(--border);background-size:cover;background-position:center}
.gate-avatar.has-img{font-size:0}
.ui-av{width:56px;height:56px;border-radius:50%;flex:0 0 auto;background-size:cover;background-position:center;background-color:var(--card2);border:1px solid var(--border)}
.ui-av-letter{display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--text)}
/* 2026-07-12: Generate & Publish — sticky progress row (हमेशा ऊपर दिखे) */
.gen-progress{position:sticky;top:8px;z-index:40;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 14px;border-radius:12px;font-size:13px;background:color-mix(in srgb,var(--bg2) 88%,transparent);border:1px solid var(--border);box-shadow:0 4px 18px rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:12px}
.gen-progress .gp-sep{opacity:.4}
html.light .gen-progress{background:color-mix(in srgb,var(--bg2) 94%,transparent);box-shadow:0 4px 14px rgba(0,0,0,.1)}
/* 2026-07-12: next-signal countdown row (dashboard + published feed) */
.nextsig-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 14%,transparent),color-mix(in srgb,var(--g2) 10%,transparent));border:1px solid color-mix(in srgb,var(--g1) 35%,var(--border));box-shadow:0 0 18px color-mix(in srgb,var(--glow) 40%,transparent)}
.nextsig-row .nextsig-cd{margin-left:auto;font-weight:800;font-size:17px;color:var(--yellow);letter-spacing:.04em}

/* ⏱️ S80-1 (owner 04-08: "live countdown चलना चाहिए थोड़ा बड़े में") — ऊपर वाली sticky पट्टी (#nextSigBar) का
   countdown अब तक पट्टी के अपने 13px पर चल रहा था: `.nextsig-row .nextsig-cd` वाला 17px नियम उस पर लगता ही
   नहीं (वह जुड़वाँ पट्टी अलग है, यह body की सीधी संतान)। अब उसका अपना नियम — बड़ा, monospace-अंक (हर सेकंड
   अक्षर हिलें नहीं), वही --yellow जो दूसरी पट्टी पर है (दो अलग रूप कभी नहीं)।
   ⚠️ मोबाइल: पट्टी पहले से wrap करती है (S63 R5), इसलिए बड़ा अंक कटता नहीं — बस अगली पंक्ति में चला जाता है;
   360px पर आकार थोड़ा छोटा ताकि pair/दिशा वाली पंक्ति एक ही लाइन में बनी रहे। तीनों skins इसी को पाते हैं
   (aurora/terminal के अपने override सिर्फ़ `#main .nextsig-row` पर हैं — यह पट्टी उनसे अछूती)। */
#nextSigBar .nextsig-cd{margin-left:auto;font-weight:800;font-size:26px;line-height:1.05;color:var(--yellow);
  letter-spacing:.03em;font-variant-numeric:tabular-nums}
@media (max-width:560px){ #nextSigBar .nextsig-cd{font-size:21px} }
@media (max-width:380px){ #nextSigBar .nextsig-cd{font-size:19px} }
/* 2026-07-12: Telegram template preview bubble */
.tg-preview{margin-top:6px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.55;background:color-mix(in srgb,var(--bg2) 80%,transparent);border:1px solid var(--border);word-break:break-word}
html.light .tg-preview{background:color-mix(in srgb,var(--bg2) 96%,transparent)}

/* ===== 🔴 S60-9 (owner clear-pass 2026-07-25): RGB-ring + atom-orbit — हर screen, हर skin/theme ===== */
/* रंग हर skin/theme की अपनी palette-vars से (cyan/g3/red/yellow/green) — इसलिए हर रूप में मेल खाते हैं।
   ring = JS-injected <span class="rgb-ring"> (app.js decorateS60) — .card::before/::after skins में पहले से भरे हैं,
   इसलिए pseudo नहीं, अलग element (टकराव-मुक्त)। reduced-motion पर सब बंद (styles.css:320 global + नीचे)। */
@property --taraAng{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--rgbA:var(--cyan,#38bdf8);--rgbB:var(--g3,#a78bfa);--rgbC:var(--red,#ff5b7a);--rgbD:var(--yellow,#f6c445);--rgbE:var(--green,#2fe0a6)}
.card{position:relative}   /* ring-anchor (.stat पहले से relative) */
.rgb-ring{position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:6;opacity:.75;
  background:conic-gradient(from var(--taraAng),var(--rgbA),var(--rgbB),var(--rgbC),var(--rgbD),var(--rgbE),var(--rgbA));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:taraRgbSpin 9s linear infinite}
@keyframes taraRgbSpin{to{--taraAng:360deg}}
/* S60-18 owner: RGB-line पर ही दौड़ते 2 particles (एक-दूसरे का पीछा) — comet-tail सहित */
@property --taraAng2{syntax:'<angle>';initial-value:0deg;inherits:false}
.rgb-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.4px;
  background:conic-gradient(from var(--taraAng2),
    transparent 0deg 128deg, rgba(255,255,255,.02) 138deg, rgba(255,255,255,.55) 168deg, #ffffff 176deg, transparent 180deg,
    transparent 180deg 308deg, rgba(255,255,255,.02) 318deg, rgba(255,255,255,.55) 348deg, #ffffff 356deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:taraChase 2.8s linear infinite;filter:drop-shadow(0 0 5px rgba(255,255,255,.9));pointer-events:none}
@keyframes taraChase{to{--taraAng2:360deg}}
html.light .rgb-ring::after{filter:drop-shadow(0 0 4px rgba(120,90,10,.8));opacity:.9}
/* S60-14 owner: ring के पीछे blended glow — वही conic (inherit) धुँधलाकर, अलग परत जैसा नहीं */
.rgb-ring::before{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:5.5px;background:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:blur(11px);opacity:.8}
html.light .rgb-ring::before{opacity:.55}
/* (S60-18: orbit-atom CSS हटा — owner: particles सिर्फ़ RGB-line पर, ऊपर .rgb-ring::after) */
/* S60-14 owner-आदेश: atom/ring हर हाल में चलें (OS reduce-motion से मुक्त) — बाक़ी site reduce का सम्मान करती रहे */
@media (prefers-reduced-motion:reduce){
  .rgb-ring{animation:taraRgbSpin 9s linear infinite!important}
  .rgb-ring::after{animation:taraChase 2.8s linear infinite!important}
}

/* S60-15: sidebar nav-items के ring/glow हल्के (सूचियों में शोर न हो) */
#sidebar nav{overflow-x:hidden}   /* S60-15b: atom जुड़ने से 2-3px overflow की पट्टी न दिखे */
#sidebar .rgb-ring{padding:1.2px;opacity:.55}
#sidebar .rgb-ring::before{opacity:.28}

/* ===== 🛰️ S60-19 Command Center (owner clear-pass) ===== */
.cc-sync{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:13px 16px!important;margin-bottom:14px}
.cc-live{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12px;color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);border-radius:99px;padding:4px 12px;background:color-mix(in srgb,var(--green) 8%,transparent)}
.cc-live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:ccPulse 1.6s ease-in-out infinite}
.cc-live.off{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 45%,transparent);background:color-mix(in srgb,var(--yellow) 8%,transparent)}
.cc-live.off i{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
@keyframes ccPulse{50%{opacity:.35;transform:scale(.8)}}
.cc-sv{display:flex;flex-direction:column;min-width:92px}
.cc-sv .k{font-size:9.5px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.cc-sv .v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.cc-sv .v small{font-size:10.5px;color:var(--text-dim);font-weight:600}
.cc-tabs{display:flex;gap:8px;margin:2px 0 14px}
.cc-tabs button{border:1px solid var(--border-strong);background:transparent;color:var(--text-dim);padding:8px 16px;border-radius:12px;font-weight:800;cursor:pointer;transition:.25s}
.cc-tabs button small{font-weight:700;opacity:.7;margin-left:4px}
.cc-tabs button.on{color:#fff;border-color:color-mix(in srgb,var(--g2) 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 35%,transparent),color-mix(in srgb,var(--g3,#a78bfa) 20%,transparent));box-shadow:0 0 22px var(--glow)}
html.light .cc-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2))}
.cc-eng{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px 12px;align-items:center}
.cc-eng .nm{font-weight:800;font-size:13px;min-width:118px;position:relative}
.cc-eng .nm.best::after{content:"👑 BEST";position:absolute;top:-10px;right:-4px;font-size:8.5px;letter-spacing:.08em;color:#04140a;background:linear-gradient(90deg,var(--yellow),#ffe08a);padding:2px 7px;border-radius:99px;font-weight:900;box-shadow:0 0 12px color-mix(in srgb,var(--yellow) 60%,transparent);animation:ccPulse 2s infinite}
.cc-eng .track{height:12px;border-radius:7px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden;position:relative}
.cc-eng .track i{position:absolute;inset:0;width:0;border-radius:7px;background:linear-gradient(90deg,var(--cyan,#38bdf8),var(--g3,#a78bfa));animation:ccFill 1.4s .3s cubic-bezier(.2,.7,.2,1) forwards}
.cc-eng .track i.win{background:linear-gradient(90deg,#1c8f6b,var(--green))}
@keyframes ccFill{to{width:var(--w,0%)}}
.cc-eng .pc{font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.cc-eng .pf{font-weight:800;font-size:12.5px;text-align:right;min-width:70px}
.cc-eng .wl{grid-column:1/5;font-size:10.5px;color:var(--muted);margin:-4px 0 4px}
.cc-line{stroke-dasharray:900;stroke-dashoffset:900;animation:ccDraw 1.8s .3s ease forwards}
@keyframes ccDraw{to{stroke-dashoffset:0}}
.cc-tickwrap{display:flex;overflow:hidden;margin-top:10px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cc-tickrow{display:flex;gap:8px;animation:ccSlide 28s linear infinite;width:max-content}
@keyframes ccSlide{to{transform:translateX(-50%)}}
.cc-tk{flex:0 0 auto;display:flex;gap:6px;align-items:center;font-size:11.5px;border:1px solid var(--border);border-radius:99px;padding:4px 11px;color:var(--text-dim);background:color-mix(in srgb,var(--text) 2%,transparent)}
.cc-tk b.w{color:var(--green)} .cc-tk b.l{color:var(--red)}
.cc-win10{border:1px dashed color-mix(in srgb,var(--g2) 40%,transparent);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--g1) 7%,transparent);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cc-win10 .k{font-size:9.5px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.cc-win10 .t{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.cc-gsel{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:560px){ .cc-sync{gap:10px} .cc-sv{min-width:44%} .cc-eng .nm{min-width:96px} }
/* S60-19b (owner-screenshot fixes): grid-blowout — equity-card viewport से बाहर बहता था (ticker width:max-content
   grid-child को फुलाता); minmax(0,·) + min-width:0 = असली इलाज। शीर्षक एक-पंक्ति; sync-bar सुघड़। */
#ccRoot .grid.g2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
#ccRoot .card{min-width:0}
#ccRoot .card > h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ccRoot .cc-eng .nm{min-width:104px}
@media(max-width:900px){ #ccRoot .grid.g2{grid-template-columns:1fr} }
/* ===== S60-20 (owner: "बाक़ी dashboards भी इसी design में") — CC-भाषा global: stat/tile typography + chips=cc-tabs ===== */
.card.stat .t{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700}
/* 🔴 S74-10: यहाँ जमा हुआ `font-size:26px` ही वह जगह थी जहाँ से पूरी website पर रक़में कटती थीं
   (360px फ़ोन पर stat-card 153px का होता है और `.v` को सिर्फ़ 115px मिलते हैं — 26px पर `$999999.99`
   को 151px चाहिए ⇒ `.card` का overflow:hidden बाक़ी काट देता है)। अब वही clamp जो app.js दो पन्नों पर
   inline लगा रहा था (`DASH_V_FIT`), एक ही जगह सबके लिए — ≥482px पर्दे पर नतीजा ठीक वही 26px है।
   ⚠️ यह अकेला काफ़ी नहीं: clamp **पर्दे** की चौड़ाई देखता है जबकि card **grid** से चौड़ाई पाता है
   (560–1280px पर पर्दा चौड़ा, column पतला ⇒ फिर भी कटता था — नापा)। उसका पक्का इलाज file के आख़िर में
   "S74-10" वाले container-query ब्लॉक में है; यह पंक्ति उन पुराने browsers के लिए है जिनमें container-query नहीं। */
/* 🔴 S75-11 (owner-नियम "झूठा ना दिखाए"): पहले बहुत लंबी रक़म (12-13 अक्षर, जैसे `$12845300.75` या
   `$1,284,300.00`) card में समाती नहीं थी और **चुपचाप कट** जाती थी — कटने की कोई निशानी तक नहीं थी,
   इसलिए अधूरा अंक पूरा अंक जैसा पढ़ा जाता (नापा: 360px पर 10px, dsMoney वाली 13-अक्षर रक़म पर 21px कटती थी;
   terminal skin में `.card`/`.stat` का `overflow:visible` है इसलिए वहाँ अंक card से **बाहर निकलकर** बग़ल में
   चला जाता था — नाप में पूरे पन्ने का 1-5px दाएँ-बाएँ खिसकना भी मिला)।
   इलाज दो हिस्सों में: (क) यहाँ `…` — कटने पर owner को साफ़ दिखे कि अंक अधूरा है; `overflow:hidden` ख़ुद
   `.v` पर है इसलिए skin के `overflow:visible` से कोई फ़र्क़ नहीं पड़ता, (ख) पूरा अंक `title=""` में
   (js/app.js का statCard) — hover/लंबे दबाव पर पढ़ा जा सके।
   ⚠️ clamp का गुणांक जान-बूझकर **नहीं** घटाया गया: घटाने से हर छोटी रक़म भी छोटी दिखने लगती (सारी stat-पट्टियाँ
   तीनों skins × चारों चौड़ाइयों पर दोबारा नापनी पड़तीं), जबकि यह इलाज सिर्फ़ उसी हालत में दिखता है जहाँ आज
   चुपचाप कटता था। */
.card.stat .v{font-size:clamp(15px,4.8vw,26px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.stat .s{font-size:11px;color:var(--muted)}
.tile .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tile .v{font-weight:800;font-variant-numeric:tabular-nums}
/* 🔴 S75-R (मोबाइल-नियम "360/390/414 पर कुछ न टूटे" — दो समीक्षकों ने अलग-अलग नापा):
   `.chips` लपेटती ही नहीं थी, इसलिए /signal और /generate के timeframe-row पर पूरा पन्ना दाएँ-बाएँ खिसकता था
   (नाप: 360px ⇒ documentElement.scrollWidth 408 बनाम clientWidth 360; सबसे बाहर '30m' button, right=408.3;
   390px ⇒ 408 बनाम 390; 414px और 720px पर खिसकन थी ही नहीं)। ज़ंजीर में किसी भी पूर्वज पर `overflow-x:auto`
   नहीं है, इसलिए खिसकन पूरे document तक पहुँच जाती थी।
   ⚠️ यह S75 की पैदा की हुई ख़राबी **नहीं** थी (पुरानी styles.css की तीनों नक़लों में भी अक्षरशः यही पंक्ति है) —
   पर मोबाइल-नियम इसी पर लागू होता है, इसलिए ठीक किया गया।
   इलाज नया नहीं है: इसी website पर #hmRange और दो और chips-पट्टियों पर `flex-wrap:wrap` पहले से inline लगा है
   (js/app.js में `style="flex-wrap:wrap"` grep करें) — वही आज़माया हुआ तरीक़ा अब सबके लिए एक जगह। */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--border-strong);background:transparent;color:var(--text-dim);padding:7px 15px;border-radius:12px;font-weight:800;cursor:pointer;transition:.25s}
.chips button.on{color:#fff;border-color:color-mix(in srgb,var(--g2) 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 35%,transparent),color-mix(in srgb,var(--g3,#a78bfa) 20%,transparent));box-shadow:0 0 22px var(--glow)}
html.light .chips button.on{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2))}
/* सभी .card शीर्षक CC-शैली में एक-पंक्ति (blowout-रोक भी) */
#main .card > h3:first-child, #main .card .between > b:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main .grid{min-width:0} #main .grid > .card{min-width:0}

/* ===== S61: 👤 User Explorer (Owner Panel) — owner-only card ===== */
.uxp .uxp-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.uxp .uxp-search{flex:1 1 220px;min-width:180px}
.uxp .uxp-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.uxp .uxp-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text) 3%,transparent);font-size:12.5px;font-weight:700}
.uxp .uxp-chip:hover{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.uxp .uxp-chip.on{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--text-hi)}
.uxp .uxp-chip i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;font-style:normal;flex:0 0 7px}
.uxp .uxp-chip i.pend{background:var(--yellow)}
.uxp .uxp-chip i.off{background:color-mix(in srgb,var(--text) 25%,transparent)}
.uxp .uxp-chip small{font-weight:600;color:var(--muted);font-size:10.5px}
.uxp .uxp-id{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding:12px 0 4px;border-top:1px solid var(--border);margin-top:10px}
.uxp .uxp-av{width:52px;height:52px;border-radius:14px;flex:0 0 52px;display:grid;place-items:center;font-size:20px;font-weight:900;
  background:linear-gradient(140deg,color-mix(in srgb,var(--g1) 30%,transparent),color-mix(in srgb,var(--g2) 30%,transparent));color:var(--text-hi)}
.uxp .uxp-idmain{flex:1 1 240px;min-width:0}
.uxp .uxp-nm{font-size:16px;font-weight:900;color:var(--text-hi);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.uxp .uxp-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.7}
.uxp .uxp-sub b{color:var(--text)}
.uxp .uxp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:14px 0 4px}
.uxp .uxp-k{border:1px solid var(--border);border-radius:11px;padding:9px 11px;background:color-mix(in srgb,var(--text) 2.5%,transparent);min-width:0}
.uxp .uxp-k b{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.uxp .uxp-k span{font-size:17px;font-weight:900;color:var(--text-hi);font-variant-numeric:tabular-nums;display:block;overflow:hidden;text-overflow:ellipsis}
.uxp .uxp-k small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;font-weight:600}
.uxp .uxp-2col{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
@media (max-width:860px){ .uxp .uxp-2col{grid-template-columns:1fr} }
.uxp .uxp-h{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.uxp .uxp-day{font-size:11px;font-weight:800;color:var(--text-hi);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px dashed var(--border)}
.uxp .uxp-day:first-child{margin-top:0}
.uxp .uxp-ev{display:grid;grid-template-columns:48px 22px 1fr;gap:8px;align-items:start;padding:5px 0;font-size:12.5px}
.uxp .uxp-ev .t{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11.5px;padding-top:1px}
.uxp .uxp-ev .i{text-align:center}
.uxp .uxp-ev .d{min-width:0}
.uxp .uxp-ev .d b{color:var(--text-hi);font-weight:700}
.uxp .uxp-ev .d small{display:block;color:var(--muted);font-size:11px;margin-top:1px;overflow-wrap:anywhere}
.uxp .uxp-scroll{max-height:330px;overflow:auto;padding-right:6px}
.uxp .uxp-mk{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent);font-size:12.5px}
.uxp .uxp-mk:last-child{border-bottom:0}
.uxp .uxp-mk .p{min-width:0}
.uxp .uxp-mk .p b{color:var(--text-hi)}
.uxp .uxp-mk .p small{display:block;color:var(--muted);font-size:10.5px}

/* ===========================================================================
   S66 — 🔝 TOP PICKS (/top-picks)
   अपने ही `.tp-` namespace में, सिर्फ़ दोनों skins में मौजूद var() पर टिका
   (हर एक का fallback भी दिया है) — इसलिए terminal · aurora · day · night
   चारों में बिना अलग skin-block के सही दिखता है।
   सिद्धांत: एक pick पर सिर्फ़ पाँच बातें। कोई छठी चीज़ यहाँ न जोड़ें।
   =========================================================================== */
.tp-head{align-items:flex-start;gap:14px;flex-wrap:wrap}
.tp-ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.tp-lab{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted,#8a8a8a);white-space:nowrap}
.tp-lab select,.tp-lab input{width:auto;margin:0;padding:5px 8px;font-size:12px;font-weight:700}
.tp-lab input{width:60px;text-align:center}
.tp-sw{font-weight:800}
/* ON-रूप के लिए JS `.primary` लगाता है — दोनों skins उसे ख़ुद रंगते हैं। अपनी `.tp-sw.on` उनके
   ज़्यादा-विशिष्ट `html[data-ui=…] #main .btn` नियम से हमेशा दब जाती (वही जाल जिसमें `.btn.on` फँसा था)। */

/* जीवित पट्टी — feed कितनी ताज़ा · कितने chart दायरे में · अगला scan कब */
.tp-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
.tp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-dim,#9aa3c7);
  border:1px solid var(--border,rgba(128,128,128,.25));border-radius:999px;padding:5px 12px;
  background:color-mix(in srgb,var(--text,#888) 3%,transparent);font-variant-numeric:tabular-nums}
.tp-chip.ok{color:var(--green,#16a34a);border-color:color-mix(in srgb,var(--green,#16a34a) 40%,transparent)}
.tp-chip.bad{color:var(--red,#dc2626);border-color:color-mix(in srgb,var(--red,#dc2626) 45%,transparent)}

.tp-note{font-size:12.5px;line-height:1.65;border-radius:12px;padding:9px 13px;margin:0 0 12px;
  border:1px solid var(--border,rgba(128,128,128,.25));background:color-mix(in srgb,var(--text,#888) 3%,transparent);color:var(--text-dim,#9aa3c7)}
.tp-note.warn{border-color:color-mix(in srgb,var(--yellow,#eab308) 45%,transparent);color:var(--yellow,#eab308)}
.tp-note.pub{border-color:color-mix(in srgb,var(--green,#16a34a) 40%,transparent);color:var(--green,#16a34a);margin-top:12px}
.tp-note b{color:inherit;font-weight:800}
#main .card.tp-warn .empty,#main .card.tp-warn .empty b{color:var(--red,#dc2626)}

/* दायरे में कौन-कौन से chart — एक पंक्ति, ताकि "क्यों यही pairs" का जवाब सामने रहे */
.tp-scope{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.tp-scope-k{font-size:9.5px;letter-spacing:.14em;font-weight:800;color:var(--muted,#8a8a8a);margin-right:2px}
.tp-scope-p{font-size:11px;font-weight:700;color:var(--text-dim,#9aa3c7);border:1px solid var(--border,rgba(128,128,128,.22));
  border-radius:8px;padding:3px 8px;white-space:nowrap}
.tp-scope-p b{color:var(--text-hi,#fff);font-weight:800;font-size:11px}

/* चारों engines — desktop पर 2×2, mobile पर एक के नीचे एक */
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tp-eng{min-width:0;border:1px solid var(--border,rgba(128,128,128,.25));border-radius:var(--radius,18px);
  background:var(--card,rgba(255,255,255,.04));box-shadow:var(--shadow,0 8px 26px rgba(0,0,0,.18));overflow:hidden}
.tp-eng-h{display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-bottom:1px solid var(--border,rgba(128,128,128,.25));
  background:color-mix(in srgb,var(--text,#888) 4%,transparent)}
.tp-eng-ico{font-size:15px;line-height:1;flex:0 0 auto}
.tp-eng-name{font-size:13.5px;font-weight:900;color:var(--text-hi,#fff);letter-spacing:.01em;flex:0 0 auto}
.tp-eng-blurb{font-size:10.5px;color:var(--muted,#8a8a8a);font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.tp-eng-n{flex:0 0 auto;min-width:24px;text-align:center;font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;
  color:var(--primary,#5b8dff);border:1px solid color-mix(in srgb,var(--primary,#5b8dff) 40%,transparent);
  background:var(--primary-bg,rgba(91,141,255,.14));border-radius:999px;padding:2px 9px}
.tp-eng-n.zero{color:var(--muted,#8a8a8a);border-color:var(--border,rgba(128,128,128,.25));background:transparent}
.tp-eng-warn{flex:0 0 auto;font-size:11px;line-height:1;cursor:help}
/* हर section का अपना scroll — E1/Advanced उदार engines हैं और 7 charts × 10 मिनट पर 60+ rows दे सकते हैं।
   बिना इसके page 9,000px लंबी हो जाती थी और चारों engines की तुलना ही असंभव थी (मापकर देखा)।
   गिनती header में असली रहती है, इसलिए कुछ छुपता नहीं — सिर्फ़ चारों खाने बराबर ऊँचे रहते हैं। */
.tp-eng-body{padding:6px;max-height:min(46vh,420px);overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.tp-eng-body::-webkit-scrollbar{width:8px}
.tp-eng-body::-webkit-scrollbar-thumb{background:var(--border,rgba(128,128,128,.35));border-radius:4px}

/* मिनट का सिरा — समय-खिड़की + उसका countdown एक ही बार, नीचे उसी मिनट के सारे charts */
/* .tp-group सिर्फ़ लपेटने के लिए है — हर मिनट-सिरे का sticky-दायरा अपने ही गुच्छे तक सीमित हो जाए।
   parent पर position की ज़रूरत नहीं: sticky का containing block वैसे भी उसका parent-box है। */
.tp-slot{display:flex;align-items:center;gap:8px;padding:9px 11px 5px;position:sticky;top:0;z-index:1;
  background:var(--card2,var(--card,#16181d))}
.tp-group+.tp-group .tp-slot{margin-top:6px;border-top:1px dashed var(--border,rgba(128,128,128,.25));padding-top:11px}
.tp-slot-t{font-size:12px;font-weight:900;color:var(--text-hi,#fff);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tp-slot-n{margin-left:auto;font-size:10px;font-weight:800;color:var(--muted,#8a8a8a);
  border:1px solid var(--border,rgba(128,128,128,.22));border-radius:999px;padding:1px 7px}

/* एक pick — चार बातें, और कुछ नहीं (समय ऊपर के सिरे पर है) */
.tp-pick{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;cursor:pointer;
  border-left:3px solid transparent;transition:background .16s var(--ease-std,ease),transform .16s var(--ease-std,ease)}
.tp-pick+.tp-pick{margin-top:3px}
.tp-pick.up{border-left-color:var(--green,#16a34a);background:color-mix(in srgb,var(--green,#16a34a) 5%,transparent)}
.tp-pick.down{border-left-color:var(--red,#dc2626);background:color-mix(in srgb,var(--red,#dc2626) 5%,transparent)}
.tp-pick:hover{background:color-mix(in srgb,var(--text,#888) 8%,transparent)}
.tp-pick:active{transform:scale(.995)}
.tp-dir{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:900}
.tp-pick.up .tp-dir{color:var(--green,#16a34a);background:var(--green-bg,rgba(45,190,120,.14))}
.tp-pick.down .tp-dir{color:var(--red,#dc2626);background:var(--red-bg,rgba(220,38,38,.12))}
.tp-body{min-width:0;flex:1 1 auto}
.tp-l1{display:flex;align-items:baseline;gap:8px;min-width:0}
.tp-pair{font-size:12.5px;font-weight:800;color:var(--text-hi,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tp-win{font-size:11.5px;font-weight:700;color:var(--text-dim,#9aa3c7);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.tp-l2{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;font-weight:700;color:var(--muted,#8a8a8a);flex-wrap:wrap}
.tp-pay{color:var(--green,#16a34a);font-weight:800;font-variant-numeric:tabular-nums}
.tp-conf{font-variant-numeric:tabular-nums}
.tp-sep{opacity:.5}
.tp-agree{color:var(--primary,#5b8dff);font-weight:800;border:1px solid color-mix(in srgb,var(--primary,#5b8dff) 35%,transparent);
  border-radius:6px;padding:0 5px;font-size:10px;white-space:nowrap}
.tp-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.tp-cd{font-size:11px;font-weight:800;color:var(--text-dim,#9aa3c7);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-cd .soon,.tp-cd.soon{color:var(--yellow,#eab308)}
.tp-word{font-size:10px;font-weight:900;letter-spacing:.09em}
.tp-word.up{color:var(--green,#16a34a)}
.tp-word.down{color:var(--red,#dc2626)}
.tp-empty{padding:18px 12px;text-align:center;font-size:12px;color:var(--muted,#8a8a8a);line-height:1.6}

@media(max-width:920px){ .tp-grid{grid-template-columns:1fr} }
@media(max-width:560px){
  .tp-head{flex-direction:column;align-items:stretch}
  .tp-ctl{justify-content:flex-start}
  .tp-eng-blurb{display:none}          /* छोटी screen पर header की जगह नाम+गिनती को */
  .tp-pick{gap:9px;padding:9px}
  .tp-l1{flex-wrap:wrap;gap:2px 8px}
}

/* ===========================================================================
   S67 — 🎬 MOTION SWITCH (html.no-anim)  +  उसका अपना toggle (.mo-sw)
   एक ही base-नियम तीनों रूपों (classic · terminal · aurora) पर चलता है, क्योंकि
   यह `*` पर टिका है और skins इनमें से किसी selector को छूती नहीं।

   तीन जाल जो map ने पकड़े और यहाँ संभाले गए हैं:
   (1) `.rgb-ring` की दो अनंत घूमती परतें styles.css में OS-reduce-motion के बावजूद
       **जान-बूझकर ज़िंदा** रखी गई हैं — इसलिए उन्हें अलग से, ज़्यादा विशिष्ट नियम से मारना पड़ता है।
   (2) login-gate की ticker-पट्टी `padding-left:100%` से शुरू होकर marquee करती है —
       सिर्फ़ animation रोक दें तो पट्टी पर्दे से बाहर अटकी रह जाती (दिखती ही नहीं)।
   (3) toggle ख़ुद इस नियम से बाहर रहे — owner ने यही माँगा: "off करने पर सिर्फ़ उसी toggle पर animation आए"।
   =========================================================================== */
html.no-anim *, html.no-anim *::before, html.no-anim *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  animation-delay:0s!important;
  transition-duration:.01ms!important;
  transition-delay:0s!important;
  scroll-behavior:auto!important;
}
/* (1) rgb-ring — styles.css इसे reduce-motion में भी चलाए रखता है, इसलिए यहाँ पूरा हटा दो */
html.no-anim .rgb-ring, html.no-anim .rgb-ring::after{ animation:none!important; opacity:0!important; }
/* (2) marquee-पट्टियाँ: चलना बंद, पर जगह पर आ जाएँ — वरना ख़ाली दिखतीं */
html.no-anim #gate .tkrow, html.no-anim .cc-tickrow{ animation:none!important; padding-left:0!important; transform:none!important; }
/* hover/press पर उछलना भी बंद — यह transition नहीं, transform होता है */
html.no-anim .tp-pick:active, html.no-anim .btn:hover, html.no-anim .btn:active,
html.no-anim .hm .d:hover:not(.sel), html.no-anim .hm .d:active:not(.sel),
html.no-anim .tp-eng:hover{ transform:none!important; }

/* ---- (3) toggle ख़ुद — अकेली चीज़ जो अब भी हिलती है -------------------------- */
.mo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 12px 2px;
  padding:8px 10px;border:1px solid var(--border,rgba(128,128,128,.22));border-radius:12px;
  background:color-mix(in srgb,var(--text,#888) 3%,transparent)}
.mo-lab{display:flex;flex-direction:column;gap:1px;min-width:0}
.mo-lab b{font-size:11.5px;font-weight:800;color:var(--text-hi,#fff);letter-spacing:.01em;white-space:nowrap}
.mo-lab span{font-size:10px;font-weight:700;color:var(--muted,#8a8a8a);white-space:nowrap}
.mo-sw{position:relative;flex:0 0 auto;width:52px;height:28px;border-radius:999px;cursor:pointer;padding:0;
  border:1px solid var(--border-strong,rgba(128,128,128,.4));background:color-mix(in srgb,var(--text,#888) 8%,transparent);
  transition:background .25s ease,border-color .25s ease}
.mo-sw:focus-visible{outline:2px solid var(--primary,#5b8dff);outline-offset:2px}
/* ON = animation चालू (हरा) · OFF = बंद (धूसर) — रंग + शब्द + गोले की जगह, तीनों बताते हैं */
.mo-sw.on{background:var(--green-bg,rgba(45,190,120,.18));border-color:var(--green,#16a34a)}
.mo-sw .mo-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;line-height:1;
  background:var(--muted,#8a8a8a);color:var(--card,#111);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .25s ease}
/* knob की जगह JS inline-style से (drawMotionSwitch) — cascade में कोई दुविधा न रहे;
   यहाँ सिर्फ़ रंग। खिसकना नीचे की transition से होता है। */
.mo-sw.on .mo-knob{background:var(--green,#16a34a)}
.mo-sw .mo-txt{position:absolute;top:0;bottom:0;display:grid;place-items:center;
  font-size:8.5px;font-weight:900;letter-spacing:.08em;color:var(--muted,#8a8a8a);pointer-events:none;
  transition:opacity .2s ease,color .2s ease}
.mo-sw .mo-txt.i-on{left:6px;opacity:0}
.mo-sw .mo-txt.i-off{right:6px;opacity:1}
.mo-sw.on .mo-txt.i-on{opacity:1;color:var(--green,#16a34a)}
.mo-sw.on .mo-txt.i-off{opacity:0}

/* toggle की अपनी जान — ON पर हरे गोले के चारों ओर धीमी लहर।
   `html.no-anim` में भी यह चलती रहे इसलिए ऊपर वाले kill-नियम से ज़्यादा विशिष्ट + !important। */
@keyframes moBreathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green,#16a34a) 55%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--green,#16a34a) 0%,transparent)}}
html .mo-sw.on .mo-knob{animation:moBreathe 2.2s ease-in-out infinite!important;animation-duration:2.2s!important;animation-iteration-count:infinite!important}
/* OFF पर कोई लहर नहीं — पर knob का खिसकना तब भी दिखे, वरना दबाने का पता ही न चले */
/* सिर्फ़ अवधि लौटाओ — transform को !important से मत बाँधो। दोनों सिरे !important होने पर ON→OFF की
   वापसी interpolate ही नहीं होती थी और knob 24px पर अटक जाता (browser में चलाकर पकड़ा)। */
html.no-anim .mo-sw .mo-knob{transition-duration:.28s!important}
html.no-anim .mo-sw{transition-duration:.25s!important}
html.no-anim .mo-sw .mo-txt{transition-duration:.2s!important}

@media (prefers-reduced-motion:reduce){
  /* OS ने कहा "कम motion" पर user ने toggle ON रखा हो — तब भी सिर्फ़ यह एक लहर चलने दो, और कुछ नहीं */
  html .mo-sw.on .mo-knob{animation:moBreathe 2.2s ease-in-out infinite!important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   S71-03/04/05 (owner): छोटे number-input में अंक कट जाते थे।
   जड़: global `input{padding:11px 13px}` (26px) + border (2px) + type=number का
   spinner (~16px) = 44px chrome. inline width 52-58px ⇒ text के लिए सिर्फ़ 8-14px बचता।
   (live नापा: #mpCut w=58 padL/R=13 ⇒ contentW=30, spinner के बाद ~14px)
   हल: spinner हटाओ + padding घटाओ + पर्याप्त min-width। `!important` इसलिए कि दोनों skins
   के `#main input` नियम ज़्यादा विशिष्ट हैं और इसे दबा देते।
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🔴 S71-R2 (self-review): पहले `min-width:78px!important` + `flex:0 0 auto` इसे **बिल्कुल न सिकुड़ने वाला**
   बनाते थे। #sgPayCut जिस pankti में है उसमें wrap नहीं है ⇒ 360px फ़ोन पर पूरी पट्टी बाहर निकल जाती।
   अब: चौड़ाई वही (अंक पूरा दिखे) पर ज़रूरत पड़ने पर सिकुड़ भी सकता है, और उसकी पट्टियाँ wrap करती हैं। */
.numin{
  width:78px!important; min-width:56px!important; flex:0 1 78px;
  padding:8px 10px!important; font-size:14px!important; text-align:center!important;
  -moz-appearance:textfield; appearance:textfield;
}
/* 🔴 S72-F1: जिन पट्टियों में .numin बैठता है वे तंग जगह पर लपेट जाएँ (inline-style वाली flex-rows भी)।
   पहले यहाँ `#sgPayInfo, #payrow` लिखा था — दोनों बेकार थे: #payrow पूरे codebase में कहीं है ही नहीं,
   और #sgPayInfo सिर्फ़ "💹 live payout" वाला text-div है (js/app.js का `#sgPayInfo`) — flex-container नहीं, .numin
   उसमें बैठता भी नहीं। असली .numin-पट्टियाँ इन दोनों label-div के *अगले sibling* हैं
   (js/app.js: /signal का payout-row और owner G&P का row) — उन्हीं पर wrap चाहिए,
   वरना 360-414px फ़ोन पर select#sgSort और 'All' button का text कट जाता है। */
#sgPayInfo + div, #ownPayInfo + div{flex-wrap:wrap}
/* इन पट्टियों का <select> global `input,select,textarea{width:100%}` (styles.css:166) से पूरी चौड़ाई
   माँगता है — wrap चालू होते ही वह अकेला एक पूरी पंक्ति घेर लेता। `.tp-lab select` (styles.css:806)
   वाला वही पुराना तरीक़ा यहाँ भी: अपनी सामग्री जितनी ही चौड़ाई लो। */
#sgPayInfo + div select, #ownPayInfo + div select{width:auto}
/* 🔴 S74-07: अब .numin अपने `.numwrap` के अंदर बैठता है, इसलिए `.numin ~ *` उस पट्टी के आगे वाले भाई-बहनों
   तक नहीं पहुँचता (वे अब .numwrap के भाई हैं)। सिकुड़ने की वही पुरानी छूट बनी रहे, इसलिए .numwrap और उसके
   आगे वालों को भी वही min-width:0 — बाक़ी नियम अक्षरशः पहले जैसा। */
.numin ~ *, .numin, .numwrap ~ *, .numwrap{min-width:0}
.numin::-webkit-outer-spin-button,
.numin::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
/* 🔴 S73: `.wide` को अपनी लिखी चौड़ाई कभी मिलती ही नहीं थी। कारण: .numin flex-item है और उस पर
   `flex:0 1 78px` (styles.css:993) flex-basis सेट करता है — flex-item में basis `width` को हरा देता है,
   इसलिए `width:104px!important` भी बेअसर था। desktop पर संयोग से सही दिखता था क्योंकि वहाँ
   `min-width:96px!important` ऊपर से clamp कर देता; मोबाइल का min-width 72px है, इसलिए वहाँ 84px ही
   बनता रहा (नापा: 360/390/414px तीनों skins पर 84px, चाहिए 104px)।
   हल = सिर्फ़ basis भी बताओ। flex-shrink वही 1 रहता (.numin से), इसलिए तंग पट्टी में सिकुड़ने की
   S71-K14 वाली छूट ज्यों-की-त्यों — पट्टी बाहर नहीं निकलती। */
.numin.wide{ width:96px!important; min-width:96px!important; flex-basis:96px }
/* मोबाइल: उँगली के लिए थोड़ा बड़ा, पर कभी कटे नहीं */
@media(max-width:520px){
  .numin{ width:84px!important; min-width:60px!important; flex:0 1 84px; font-size:15px!important; padding:9px 10px!important }
  .numin.wide{ width:104px!important; min-width:72px!important; flex-basis:104px }
}
/* ═══════════════════════════════════════════════════════════════════════════
   🔴 S73-04 (owner): "confidence वाला section … mouse से click करके slide ऊपर नीचे change हो वह option नहीं दिया है"
   native spinner जान-बूझकर वापस नहीं लाया गया (वह ~16px खा जाता था — S71 भाग-B की नाप; अंक फिर कटने लगते)।
   इसलिए ये ▲▼ box के **बाहर**, उसके बग़ल में बैठते हैं: box की चौड़ाई पर कोई असर नहीं ⇒ अंक कभी नहीं कटेगा।
   चौड़ाई सिर्फ़ 22px और यह `flex:0 0 auto` है, पर हर .numin-पट्टी में wrap पहले से है (S71-K14/S72-F1),
   इसलिए तंग फ़ोन पर पट्टी बाहर नहीं निकलती — 360/390/414px तीनों skins पर नापा।
   🔴 S74-07 (नापकर सुधारा): "पट्टी बाहर नहीं निकलती" सच था, पर एक हालत नापी नहीं गई थी — wrap ठीक .numin और
   .numstep के **बीच** पड़ जाता (वे दो अलग flex-item थे), और ▲▼ अगली पंक्ति में किसी दूसरे button के बग़ल में
   जा बैठते। अब दोनों एक .numwrap के अंदर हैं ⇒ उनके बीच wrap पड़ ही नहीं सकता। (नाप: चारों ids × तीनों skins
   × 360/390/414/720 = 60 हालतें — हर बार ▲▼ input के **दाएँ, उसी पंक्ति में** (ऊर्ध्वाधर ओवरलैप हमेशा;
   मोबाइल पर जोड़ी input से ऊँची है इसलिए वह 7px ऊपर से शुरू होती है — बीच में align है, अलग पंक्ति नहीं)।
   पहले इन्हीं 60 में से 7 हालतों में ▲▼ अगली पंक्ति में गिरते थे: classic/aurora 360px #mpCut,
   classic/aurora 414px #sgPayCut, classic/aurora 720px #apConf, terminal 360px #mpCut。)
   ═══════════════════════════════════════════════════════════════════════════ */
.numwrap{ display:inline-flex; align-items:center; gap:4px; flex:0 1 auto; min-width:0; vertical-align:middle }
.numstep{ display:inline-flex; flex-direction:column; gap:2px; margin-left:-2px; flex:0 0 auto; vertical-align:middle }
.numstep-b{
  width:22px; height:17px; line-height:1; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:900; cursor:pointer; user-select:none;
  /* 🔴 S74-09: तीर पहले `--muted` पर थे — terminal skin में नापा contrast सिर्फ़ 3.5:1 (10px के glyph text
     माने जाएँ तो WCAG AA का 4.5:1 चाहिए) और किनारा `--border` इतना फीका कि button दिखता ही नहीं था।
     अब वही tokens जो तीनों skins में पहले से मौजूद हैं: --text-dim (गाढ़ा) + --border-strong। */
  border:1px solid var(--border-strong,var(--border)); border-radius:5px;
  /* 🔴 S73-R2 (आख़िरी जाँच ने असली Chrome के pixels से नापा): पीठ सिर्फ़ `--card` थी, जो classic-dark में
     4.5% अपारदर्शी सफ़ेद है ⇒ पीछे की नीली aura झलकती और पन्ने के **सबसे ऊपरी** हिस्से पर contrast
     4.23 रह जाता (24 में से बाक़ी 23 ऊँचाइयों पर 6.3+)。 `--bg2` अपारदर्शी है ⇒ aura झलकती ही नहीं।
     जिस skin में `--bg2` न हो वहाँ पुराना ही व्यवहार (fallback chain अछूती)。 */
  background:var(--bg2,var(--card,#fff)); color:var(--text-dim,var(--muted));
}
/* base अब `--bg2` है, इसलिए hover उसी token पर रखने से कोई फ़र्क़ ही नहीं दिखता — hover अब
   किनारे और अक्षर के रंग से बोलता है (हर skin में काम करता है, किसी नए token की ज़रूरत नहीं)。 */
.numstep-b:hover{ border-color:var(--acc,var(--text-dim,var(--border))); color:var(--text) }
.numstep-b:active{ transform:translateY(1px) }
/* 🔴 S74-08 (मोबाइल, नापकर): पहले यहाँ लिखा था "उँगली-लायक़ ऊँचाई (दोनों मिलकर .numin के 38px के बराबर)" —
   पर उँगली को **एक** button दबाना होता है, और वह 26×19px था: WCAG 2.2 (2.5.8) का न्यूनतम 24×24px भी नहीं,
   और बीच का 2px फ़ासला इतना कम कि ▲ की जगह ▼ दब जाना आम। अब हर button 30×24px और फ़ासला 4px
   (जोड़ी 52px ऊँची — पट्टी की पंक्ति ~14px ऊँची होती है, चौड़ाई सिर्फ़ 4px बढ़ती है)। */
/* 🔴 S75-13: सीमा 520px से बढ़ाकर 920px। कारण नापा हुआ — 720px पर्दे पर तीनों skins के चारों ठिकानों
   (#sgPayCut · #ownPayCut · #mpCut · #apConf) पर ये button वापस 22×17px हो जाते थे, यानी वही WCAG 2.2
   (2.5.8) का 24×24px न्यूनतम टूटता था जिसे ठीक ऊपर वाली टिप्पणी ख़ुद कसौटी मानती है। 521-920px = tablet
   और आड़ा पकड़ा हुआ phone — वहाँ भी उँगली ही चलती है, mouse नहीं। 921px से ही sidebar खुलता है
   (नीचे/ऊपर का `@media(min-width:921px)` वाला नियम), इसलिए वही असली "desktop" की दहलीज़ है।
   ⚠️ क्या टूट सकता है: जोड़ी 4px चौड़ी और ~14px ऊँची हो जाती है। जिन पट्टियों में ये बैठते हैं उन सब पर
   `flex-wrap:wrap` पहले से ज़िंदा है (S71-K14 / S72-F1), इसलिए पट्टी बाहर नहीं निकलती। */
@media(max-width:920px){
  .numstep{ gap:4px }
  .numstep-b{ width:30px; height:24px; font-size:11px }
}
/* 🔴 S73-09 (owner): "Live trade चल रही है. वह ऊपर highlight होकर countdown आया करें"।
   जिस section में trade इसी वक़्त चल रही है वह लाल किनारे से अलग दिखता है। रंग/परछाईं app.js के
   ACC_LIVE_STYLE से inline आती है (तीनों skins में तुरंत लगे); यहाँ सिर्फ़ वह हल्की धड़कन है जो
   Animation-switch (S67/S68) बंद करने पर अपने-आप रुक जाती है — वह switch `html.no-anim` लगाता है
   (styles.css:927 आसपास उसी वर्ग के बाक़ी नियम)। reduced-motion वाले users के लिए भी वही छूट। */
.acc.acc-live .acc-title{ color:var(--red) }
.acc.acc-live .msig-cd{ color:var(--red); font-weight:800 }
@keyframes accLivePulse{ 0%,100%{opacity:1} 50%{opacity:.55} }
.acc.acc-live .badge.live-b{ animation:accLivePulse 1.6s ease-in-out infinite }
html.no-anim .acc.acc-live .badge.live-b{ animation:none!important }
@media(prefers-reduced-motion:reduce){ .acc.acc-live .badge.live-b{ animation:none } }

/* ═══════════════════════════════════════════════════════════════════════════
   S71-11/12/23 (owner): साझा accordion (.acc) — "click करने पर ही खुले"।
   बंद section का body render ही नहीं होता, इसलिए यहाँ max-height वाली चाल की
   ज़रूरत नहीं (.rules-card वाली 640px की सीमा यहाँ लागू ही नहीं होती —
   30+ rows वाला section भी पूरा दिखता है)।
   रंग/border सब var() से ⇒ तीनों skins अपने-आप सही दिखते हैं।
   ═══════════════════════════════════════════════════════════════════════════ */
.acc{border:1px solid var(--border);border-radius:var(--radius,14px);background:var(--glass);margin-bottom:10px;overflow:visible}
.acc > .acc-h:first-child{border-radius:var(--radius,14px) var(--radius,14px) 0 0}
/* 🔴 S71-R2 (self-review): सिर हमेशा **लपेटने वाला** हो। पहले `.acc-r{flex:0 0 auto}` अपने max-content पर
   जमा रहता (उसका अपना flex-wrap मरा हुआ था), और `.acc-t{flex:1}` बची हुई जगह में सिकुड़कर शून्य हो जाता
   ⇒ 7 chips वाले pair-section में **शीर्षक ही ग़ायब** हो जाता और `overflow:hidden` से ▾ भी कट जाता।
   अब: सिर ख़ुद wrap करता है, बाईं ओर की पट्टी को अपनी न्यूनतम चौड़ाई मिलती है, और badges नीचे लपेट जाते हैं। */
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 14px;background:transparent;border:0;color:var(--text-hi,var(--text));
  font-family:inherit;font-weight:800;font-size:14px;text-align:left;cursor:pointer;line-height:1.35}
.acc-h:hover{background:var(--glass-2,rgba(255,255,255,.04))}
.acc-h:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.acc-t{display:flex;flex-direction:column;gap:2px;min-width:min(190px,100%);flex:1 1 190px}
.acc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-sub{font-weight:600;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-r{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.acc-ar{color:var(--muted);font-size:12px;transition:transform .25s var(--ease,ease);display:inline-block;flex:0 0 auto}
.acc.open .acc-ar{transform:rotate(180deg)}
.acc-b{padding:0 10px 10px}
.acc-b > .trow:first-child{margin-top:0}
/* मोबाइल: badges नीचे लपेट जाएँ, शीर्षक कभी न कटे */
@media(max-width:520px){
  .acc-h{padding:11px 12px;font-size:13.5px;flex-wrap:wrap}
  .acc-t{flex:1 1 100%}
  .acc-r{flex:1 1 100%;justify-content:flex-start;margin-top:6px}
  .acc-b{padding:0 7px 8px}
}
/* S71-20/21: "LIVE" — अभी आने वाली/चल रही trade का संकेत (accordion-सिर पर भी दिखे) */
.badge.live-b{background:color-mix(in srgb, var(--violet,#7c3aed) 16%, transparent);color:var(--violet,#7c3aed);border-color:color-mix(in srgb, var(--violet,#7c3aed) 42%, transparent);font-weight:800}
@media (prefers-reduced-motion:no-preference){
  .badge.live-b{animation:liveB 2s ease-in-out infinite}
  @keyframes liveB{0%,100%{opacity:1}50%{opacity:.62}}
}
/* S71-21: चल रही trade — "🔴 LIVE" (expiry तक का countdown उसी के साथ) */
.live-now{color:var(--red,#dc2626);font-weight:900;letter-spacing:.02em}
@media (prefers-reduced-motion:no-preference){ .live-now{animation:liveB 1.4s ease-in-out infinite} }

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 S74-10 (owner: "लिख जाता है लेकिन कट जाता है") — stat-card की रक़म अब **card** के नाप से,
   पर्दे के नाप से नहीं।

   जड़ क्या थी (असली Chrome में नापा, तीनों skins × 8 चौड़ाइयों पर):
     `.card.stat .v` का जमा हुआ 26px और `clamp(…,5.4vw,…)` — दोनों **पर्दे** की चौड़ाई देखते हैं,
     जबकि card अपनी चौड़ाई **grid** से पाता है। इसलिए बीच की चौड़ाइयों पर पर्दा चौड़ा (⇒ font पूरा 26px)
     पर column पतला रह जाता था और `.card` का overflow:hidden रक़म काट देता था:
        Dashboard की 5-card पट्टी (js/app.js का `DASH_STATS_GRID`) — 560/768/920/1024/1280 चारों पर कटती थी
        Analytics की `.grid.g4` पट्टी (js/app.js का VIEWS['/analytics']) — 360/390/414 और 1024 पर कटती थी
        aurora skin और भी तंग है (उसका `.card` padding 22px है, 18px नहीं ⇒ `.v` को 8px कम मिलते हैं)।

   इलाज: हर stat-card ख़ुद एक **container** बने, और रक़म का font उसी की चौड़ाई का हिस्सा हो (cqi)。
   गुणांक अंदाज़े का नहीं — नापा हुआ है: सबसे लंबी असली रक़म `$999,999.99` (js/app.js का `dsMoney()`)
   को 26px पर 6.403 × font-size जगह चाहिए, यानी font ≤ उपलब्ध-चौड़ाई ÷ 6.403 ⇒ 100 ÷ 6.403 = 15.6cqi。
   सुरक्षा के लिए 15.5cqi रखा (तीनों skins में एक ही अंक — cqi हर skin के अपने content-box पर टिकता है,
   इसलिए aurora का 22px padding अपने-आप हिसाब में आ जाता है)।

   · `!important` क्यों: app.js दो पन्नों पर यही चीज़ **inline** लगाता है (`DASH_V_FIT`) और
     inline-style stylesheet को हरा देती है। इसी एक `!important` से वह inline बेअसर हो जाता है —
     यानी Dashboard-agent के handover वाली शर्त पूरी: "यह लग जाए तो inline DASH_V_FIT हटाया जा सकता है"।
   · `.grid > .card.stat` तक सीमित क्यों: `container-type:inline-size` का मतलब है "चौड़ाई सामग्री से तय
     न हो" — grid-खाने में चौड़ाई पहले से पक्की होती है, इसलिए वहाँ बिलकुल सुरक्षित है। statCard()
     (js/app.js) हमेशा किसी `.grid` का सीधा बच्चा ही होता है (पूरी app.js में हर बुलावा जाँचा)।
     कभी कोई stat-card grid के बाहर बना, तो cqi का कोई container न मिलने पर वह viewport पर लौटता है
     ⇒ clamp का ऊपरी सिरा 26px — यानी आज जैसा ही, कुछ बिगड़ता नहीं।
   · `@supports` के बाहर कुछ नहीं बदला: container-query न समझने वाले पुराने browser पर ऊपर वाली
     (styles.css की `.card.stat .v`) पंक्ति चलती है — वही clamp जो app.js आज लगा रहा है।
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (container-type:inline-size){
  #main .grid > .card.stat{container-type:inline-size}
  /* 🔴 S75-11: गुणांक 15.5cqi → 14cqi. पुराना गुणांक `$999,999.99` (11 अक्षर) पर नापा गया था — पर
     Dashboard/Analytics की रक़म `money()` से बनती है जिसमें **comma होता ही नहीं**, इसलिए असली सबसे लंबी
     रक़म 12 अक्षर की है (`$12845300.75`)。 नाप (असली Chrome, 360px, card 160px ⇒ `.v` को 122px):
     15.5cqi ⇒ font 18.91px, उस रक़म को 132px चाहिए ⇒ 10px कटती थी; 14cqi ⇒ font 17.08px, चाहिए 119px ⇒ पूरी आती है。
     निचला सिरा 15px जान-बूझकर नहीं घटाया (उससे नीचे पढ़ना मुश्किल)。
     ≥186px चौड़े card पर नतीजा पहले जैसा 26px ही है (पहले ≥168px), यानी desktop/tablet पर कुछ नहीं बदला。
     13 अक्षर वाली `dsMoney()` (comma-सहित) फिर भी नहीं समाती — उसके लिए ऊपर वाला `…` + `title` है। */
  #main .grid > .card.stat > .v{font-size:clamp(15px,14cqi,26px)!important}
}

/* 🔴 S74-B4 (owner: "trade history को clean करने का एक button दीजिए **अच्छा सा**") —
   app.js इसे सादा `class="btn sm"` देता है (js/app.js का VIEWS['/'] — `clearBtn`), इसलिए यह बाक़ी सामान्य buttons जैसा दिखता था;
   terminal skin में तो नापने पर यह **हरा** निकला (rgb(34,197,94)) — मिटाने वाले button के लिए ग़लत इशारा।
   अब यह चुपचाप ख़तरे का रंग पहनता है: सिर्फ़ अक्षर + किनारा लाल (पीठ skin की अपनी ही रहती है, इसलिए
   तीनों skins और day/night दोनों में अपने-आप बैठ जाता है), और छूने पर हल्की लाल पीठ आती है।
   ⚠️ विशिष्टता: skins का `html[data-ui="…"] #main .btn` (1 id) है — इसलिए यहाँ दो id (`#main #dashClearTr`)
   चाहिए ही, वरना नियम दब जाता (वही जाल जो इसी file में `.tp-sw.on` के लिए लिखा है)。
   मिटाने की पुष्टि वाला लाल button (`#dcGo`, js/app.js का dashClearTradesModal()) पहले से `.btn.red` है और दोनों skins उसे
   ख़ुद लाल रंगती हैं — वहाँ कुछ नहीं छुआ। */
#main #dashClearTr{ color:var(--red); border-color:color-mix(in srgb,var(--red) 45%,transparent); font-weight:800 }
#main #dashClearTr:hover{ color:var(--red-hi,var(--red)); border-color:var(--red);
  background:color-mix(in srgb,var(--red) 14%,transparent); box-shadow:none }
#main #dashClearTr:focus-visible{ outline:2px solid var(--red); outline-offset:2px }

/* 🔴 S74-11 (owner: "CSV upload करने के बाद … देखने में खूबसूरत अच्छा बनाइए") — import-preview की table।
   नापा (360px): table अपने `overflow:auto` डिब्बे में पहले से खिसकती है (पन्ना नहीं खिसकता — यह ठीक था),
   पर हर खाना बीच-शब्द लपेटकर पंक्ति ऊँची कर देता था — classic 32px, **terminal 43px** (यानी हर row दो
   लाइन की)। एक ही नियम से हर खाना अपनी एक पंक्ति में रहता है और table वैसे ही अपने डिब्बे में खिसकती है।
   दायरा जान-बूझकर सिर्फ़ `#csvPreview` की table तक — website की बाक़ी कोई table इससे नहीं छुई जाती। */
#csvPreview table th, #csvPreview table td{ white-space:nowrap }


/* ═══════════════════════════════════════════════════════════════════════════
   🌐 S75-D — Website-signal नियमों का panel (दाएँ से बाएँ खुलने वाला drawer)

   owner की माँग (शब्द-दर-शब्द, DISCUSSION-demands-ledger.md का S75 समूह D):
   "एक panel दे दो जो right से left की तरफ खुलेगा **जैसे बाकी हमारे panel खोलते हैं उसी तरीके से**"。
   इसलिए यहाँ कुछ नया नहीं गढ़ा गया — website के अपने drawer (`#sidebar`, ऊपर styles.css:75-79) की
   ठीक वही ज्यामिति, वही रफ़्तार (.38s var(--ease)), वही परछाईं (0 0 60px rgba(0,0,0,.5)) और वही
   hairline — बस आईने में उलटी (बाएँ की जगह दाएँ)。

   ⚠️⚠️ विशिष्टता (specificity) की सबसे ज़रूरी बात — इसे समझे बिना यहाँ कुछ मत बदलना:
   panel का ढाँचा js/app.js के `wsrEnsure()` (js/app.js:7418-7480) से बनता है और वह अपने साथ एक
   `<style>` भी लेकर आता है (js/app.js:7422-7469)。 वह <style> `<body>` के अंदर जुड़ता है, यानी
   document-क्रम में इस file के <link> के **बाद**。 इसलिए बराबर विशिष्टता पर **वही जीतता है**।
   उसे हराने के लिए यहाँ हर selector `#wsrBg` (एक id) से शुरू होता है — (1,x,0) हमेशा (0,x,0) से बड़ा है।
   ⚠️ इसका सीधा नतीजा: नीचे जिस भी गुण का "बंद" रूप id-वाले नियम से लिखा है, उसका "खुला" रूप भी
   id-वाले नियम से लिखना **अनिवार्य** है — वरना panel खुलेगा ही नहीं (नापा: बिना `#wsrBg.open .wsr-panel`
   के transform translateX(103%) पर अटका रहता है)。
   ⚠️ दो जगह एक ही चीज़ लिखी है (यहाँ और app.js के <style> में) — यह जान-बूझकर है: पुरानी styles.css
   cache में रह जाए तो app.js वाली प्रति panel को कम-से-कम काम-लायक़ रखती है। पर **असली मान यही हैं**;
   app.js में कुछ बदलें तो यहाँ भी बदलना पड़ेगा, वरना यहाँ का नियम चुपचाप ऊपर चढ़ा रहेगा।

   🔴 जो नापकर ठीक किया गया — नाप असली (headless) Chrome में, तीनों skins × सात पर्दे
   (360×800 · 390×800 · 414×800 · 720×800 · 1280×800 और आड़े फ़ोन 740×360 · 844×390)
   × सात data-हालतें (सामान्य · app-ठीक · app-पुराना · लोड हो रहा · विफल · चेतावनी · सहेजा जा रहा)
   = 147 हालतें। तीनों में **दाएँ-बाएँ खिसकन शून्य**, panel हर बार पूरा पर्दे के अंदर,
   panel के अंदर कोई चीज़ अपने डिब्बे से बाहर नहीं (सबसे बुरा overflow 0.0px):
   1. switch का ON/OFF दिखता ही नहीं था। नाप = screenshot के **असली pixel** (गोली का बीच बनाम
      पटरी का खुला छोर), चारों रूपों में:
        पहले → ON : classic-dark **1.70** · terminal **2.28** · classic-light 3.44 · aurora 3.44
               OFF: classic-light **1.74** · aurora **1.74** · classic-dark 9.07 · terminal 10.81
        अब   → ON : 7.35 · 7.39 · 4.25 · 4.25    OFF: 5.25 · 5.45 · 5.10 · 5.10
      यानी पहले चार हालतें WCAG 1.4.11 के 3:1 से नीचे थीं (गोली सफ़ेद थी — भरी हुई हरी पटरी पर
      वह लगभग घुल जाती थी, और दिन वाले रूपों में फीकी पटरी पर तो दिखती ही नहीं थी)।
      यह उस switch पर है जिससे owner पैसे वाले नियम चालू/बंद करते हैं — दिखना ही चाहिए।
      हल: website का अपना switch (`.mo-sw`, styles.css:966-987) जिस नुस्ख़े पर चलता है वही यहाँ —
      फीकी पटरी + गाढ़ी गोली (OFF ⇒ `--text-dim`, ON ⇒ `--green`, दिन में `--green-hi`),
      किनारा `--border-strong` / `--green`, और गोली के चारों ओर एक बाल-भर का छल्ला।
      नाप 46×26 से बढ़कर 52×28 — ठीक वही जो `.mo-sw` की है।
   2. गोल-कोने skin के `--radius` को नहीं मानते थे — terminal skin में `--radius:2px` (सब कुछ नुकीला)
      पर ✕ 11px, .btn 12px, note 9px गोल रहते थे (नापा)। अब वही `min(Npx,var(--radius,Npx))` जो
      panel की बाक़ी पंक्तियाँ पहले से इस्तेमाल करती हैं।
   3. panel के अंदर का scroll ख़त्म होते ही पीछे का पन्ना खिसकने लगता था (overscroll-behavior:auto नापा)。
   4. मोबाइल पर ✕ 38×38 था; website का अपना drawer-button (`#navToggle`, styles.css:447) 42×42 है।
   5. उँगली से दबाने पर कोई जवाब नहीं मिलता था (hover फ़ोन पर होता ही नहीं) — अब हल्का दबाव,
      और Animation-switch/reduced-motion पर वह भी रुक जाता है।

   ✅ जो जान-बूझकर **नहीं** बदला (और क्यों):
   · चौड़ाई `min(392px,92vw)` वैसी ही। owner दो चीज़ें एक साथ चाहते हैं — "लगभग पूरी चौड़ाई" और
     "ख़ाली जगह click ⇒ बंद"। panel जितना चौड़ा, ख़ाली पट्टी उतनी पतली। नापा: 360px ⇒ पट्टी 28.8px,
     390 ⇒ 31.2px, 414 ⇒ 33.1px — तीनों WCAG 2.2 (2.5.8) के 24px से ऊपर। 95vw कर देते तो 18px रह
     जाती और owner का "ख़ाली जगह click" टूट जाता।
   · panel अपारदर्शी ही रहा (--bg पर --glass की परत)। #sidebar सचमुच काँच है (backdrop-filter),
     पर उसमें सिर्फ़ 14px के मोटे nav-link हैं; इस panel में 10.5px की वे पंक्तियाँ हैं जो owner को
     बतातीं हैं कि app नियम पढ़ रहा है या नहीं — उन्हें पीछे के बदलते पन्ने पर तैराना contrast की
     कोई गारंटी नहीं देता। रंग-रचना वही है (--bg + --glass), इसलिए देखने में #sidebar जैसा ही लगता है।
   · terminal/aurora skins panel को अपना font/button-रूप नहीं देतीं, क्योंकि वे सिर्फ़
     `#main, #modalBg, #toast` के भीतर remap करती हैं (skin-terminal-views.css:34-36)。 रंग तो
     app.js का `wsrSkinVars()` उतार देता है, पर font/किनारे नहीं। उसका साफ़ हल उन्हीं files में
     `#wsrBg` जोड़ना है — वे मेरी files नहीं थीं, इसलिए यहाँ उनका रंग-तंत्र नक़ल नहीं किया गया।
     नापा हुआ फ़र्क़ (390px): terminal में `#main` का button `ui-monospace` + 0px कोना है, panel का
     button Arial + अब 2px कोना; classic/aurora में यह फ़र्क़ है ही नहीं (दोनों जगह एक ही font)。

   ⚠️ इससे क्या टूट सकता है (नापकर लिखा, छुपाया नहीं):
   · switch 6px चौड़ा हुआ ⇒ 390px फ़ोन पर एक पंक्ति का text एक लाइन ज़्यादा लपेटता है
     (सबसे छोटी पंक्ति 85px → 100.7px; 360px और 414px पर कोई फ़र्क़ नहीं)。 पूरे body की
     ऊँचाई 1395px → 1490px — panel पहले से scroll करता है, कुछ कटता नहीं, दाएँ-बाएँ खिसकन शून्य।
   · ✕ मोबाइल पर 42×42 हुआ ⇒ सिर 4px ऊँचा (body की दिखने वाली ऊँचाई 836px → 832px)。
   · यहाँ के नियम `#wsrBg` (एक id) पर हैं, इसलिए ये app.js के <style> को **हमेशा** दबाते हैं।
     कोई app.js में नाप बदले और यहाँ न बदले तो बदलाव पर्दे पर दिखेगा ही नहीं — ऊपर वाली
     "दो जगह एक ही चीज़" वाली चेतावनी इसी की है।
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- backdrop: वही `.navdim` (styles.css:452) जो sidebar के पीछे आता है ------------------ */
#wsrBg{ position:fixed; inset:0; z-index:70; background:rgba(0,5,20,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s }
#wsrBg.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s ease }

/* ---- drawer: #sidebar (styles.css:75-79) का आईना — बाएँ की जगह दाएँ ---------------------- */
#wsrBg .wsr-panel{
  position:fixed; top:0; right:0; left:auto; height:100vh; height:100dvh;
  width:min(392px,92vw); display:flex; flex-direction:column; color:var(--text);
  /* #sidebar `background:var(--glass)` + काँच है; यह वही रंग अपारदर्शी पीठ पर रखता है (ऊपर कारण) */
  background-color:var(--bg,#061024);
  background-image:linear-gradient(var(--glass,rgba(255,255,255,.055)),var(--glass,rgba(255,255,255,.055)));
  border-left:1px solid var(--border);
  /* बंद हालत में वही भीतरी hairline जो #sidebar पर है (वहाँ दाईं ओर, यहाँ बाईं ओर) */
  box-shadow:inset 1px 0 0 rgba(255,255,255,.04);
  transform:translateX(103%); transition:transform .38s var(--ease) }
/* ⚠️ खुला रूप भी id से — ऊपर वाली चेतावनी देखें */
#wsrBg.open .wsr-panel{ transform:none; box-shadow:0 0 60px rgba(0,0,0,.5) }

#wsrBg .wsr-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:14px 14px 11px; border-bottom:1px solid var(--border) }
#wsrBg .wsr-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:12px 14px 26px; -webkit-overflow-scrolling:touch;
  /* 🔴 नाप-3: पहले `auto` था ⇒ panel का scroll ख़त्म होते ही पीछे का पन्ना खिसकने लगता था */
  overscroll-behavior:contain }

/* ✕ — website के अपने drawer-button (#navToggle) जैसा; कोने skin के --radius पर */
#wsrBg .wsr-x{ border-radius:min(12px,var(--radius,12px)) }
#wsrBg .wsr-x:focus-visible{ outline:2px solid var(--primary,#5b8dff); outline-offset:2px }
/* मोबाइल/tablet पर वही 42×42 जो #navToggle की है (styles.css:447) */
@media(max-width:920px){
  #wsrBg .wsr-x{ width:42px; height:42px; min-width:42px }
}

/* कोने: terminal skin में --radius:2px है — panel की हर चीज़ उसे माने, अकेली गोल न दिखे (नापा) */
#wsrBg .wsr-note{ border-radius:min(9px,var(--radius,9px)) }
#wsrBg .wsr-msg{ border-radius:min(11px,var(--radius,11px)) }
#wsrBg .wsr-body .btn{ border-radius:min(12px,var(--radius,12px)) }

/* ---------------------------------------------------------------------------
   switch — website का अपना `.mo-sw` (styles.css:966-987) जिस नुस्ख़े पर चलता है, वही।
   नाप ऊपर वाली टिप्पणी के बिंदु-1 में दर्ज है (सब ≥ 4.25:1, WCAG 1.4.11 का 3:1 पार)。
   नाप 52×28 भी `.mo-sw` की ही है — 46×26 से बड़ी, उँगली के लिए बेहतर, और owner को
   website भर में एक ही आकार का switch दिखता है।
   --------------------------------------------------------------------------- */
#wsrBg .wsr-sw{
  width:52px; height:28px; min-width:52px; border-radius:999px;
  border:1px solid var(--border-strong,rgba(128,128,128,.4));
  background:color-mix(in srgb,var(--text,#888) 8%,transparent);
  transition:background .2s ease, border-color .2s ease }
#wsrBg .wsr-sw::after{
  top:2px; left:2px; width:22px; height:22px;
  /* 🔴 यहाँ `--muted` नहीं, `--text-dim` — नापकर बदला: `--muted` वाली गोली classic-dark में पटरी से
     सिर्फ़ 2.79:1 पर थी (3:1 से नीचे)。 `--text-dim` से चारों रूपों में 5.1 से ऊपर (नाप ऊपर बिंदु-1 में)。 */
  background:var(--text-dim,#8a8a8a);
  /* बाल-भर का छल्ला — गोली का किनारा हर skin में दिखे, चाहे पटरी का रंग जो भी हो */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--text,#888) 22%,transparent);
  transition:transform .2s ease, background .2s ease }
#wsrBg .wsr-sw.on{ background:var(--green-bg,rgba(45,190,120,.18)); border-color:var(--green,#16a34a) }
/* 52 − 2 (बायाँ) − 22 (गोली) − 2 (दायाँ) = 26px का सफ़र */
#wsrBg .wsr-sw.on::after{ transform:translateX(26px); background:var(--green,#16a34a) }
/* दिन वाले रूपों (classic-light · aurora) में ON की गोली `--green` पर पटरी से सिर्फ़ 2.86:1 निकली —
   वही टोकन जो website पहले से रखती है (`--green-hi`, html.light में #0b7d5e) लगाने पर 4.25:1 (नापा)。
   रात वाले रूप छुए ही नहीं गए (वहाँ पहले से 7.35 / 7.39)。 */
html.light #wsrBg .wsr-sw.on::after{ background:var(--green-hi,var(--green,#16a34a)) }

/* ---- उँगली से दबाने पर जवाब (फ़ोन पर hover होता ही नहीं) ------------------------------- */
#wsrBg .wsr-row.tap:active{ transform:scale(.985) }
#wsrBg .wsr-row.tap:focus-visible{ outline:2px solid var(--primary,#5b8dff); outline-offset:2px }

/* ---------------------------------------------------------------------------
   🎬 Animation-switch (html.no-anim) + OS का reduced-motion — S73 वाली शैली।
   ऊपर के `*` वाले नियम (styles.css:320 और 937) पहले से हर transition की अवधि .01ms कर देते हैं,
   इसलिए slide व्यवहार में रुक ही जाती है (नापा: t=60ms पर transform पहले ही `none`)。 फिर भी यहाँ
   नाम लेकर लिखा जा रहा है — बिलकुल वैसे ही जैसे `.acc.acc-live .badge.live-b` के लिए लिखा है
   (styles.css:1104-1105) — ताकि कल कोई उस `*` वाले नियम में छूट जोड़े तो यह drawer उसमें बहकर
   दोबारा फिसलने न लगे।
   ⚠️ `transition:none` से बंद होते वक़्त `visibility` भी तुरंत लगती है — यही चाहिए, वरना अदृश्य
   परत ऊपर पड़ी रह जाती। (नापा: बंद करने के बाद pointer-events पीछे के पन्ने तक पहुँचते हैं।)
   --------------------------------------------------------------------------- */
html.no-anim #wsrBg, html.no-anim #wsrBg .wsr-panel,
html.no-anim #wsrBg .wsr-sw, html.no-anim #wsrBg .wsr-sw::after{ transition:none!important }
html.no-anim #wsrBg .wsr-row.tap:active{ transform:none!important }
@media(prefers-reduced-motion:reduce){
  #wsrBg, #wsrBg .wsr-panel, #wsrBg .wsr-sw, #wsrBg .wsr-sw::after{ transition:none!important }
  #wsrBg .wsr-row.tap:active{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 S75-14 — ▲▼ (.numstep-b) की पीठ दिन-वाले रूपों में काली पड़ी थी।
   जड़: S73-R2 ने पीठ `--bg2` कर दी थी (सही कारण से — `--card` पारदर्शी है और पीछे की नीली aura
   झलकने से contrast 4.23 रह जाता था)। पर `--bg2` सिर्फ़ `:root` में है (styles.css:3) — `html.light`
   उसे override करता ही नहीं (styles.css:26-36 में `--bg2` है ही नहीं), और aurora skin भी नहीं।
   नतीजा नापा: classic-light और aurora दोनों में ▲▼ की पीठ rgb(6,16,36) यानी गहरा नीला डिब्बा
   काग़ज़-रंग के पन्ने पर, अक्षर rgb(107,97,70) — screenshot के असली pixel से नापा contrast सिर्फ़ **3.09:1** (WCAG AA का 4.5:1 चाहिए)。
   यह panel के अंदर भी दिखता है (payout और entry-lead वाले दो box) और #main में भी।
   हल: सिर्फ़ दिन-वाले रूपों के लिए वही काम `--glass-2` से, जो `html.light` में #f3ead2 है —
   **अपारदर्शी** है इसलिए S73-R2 की असली शर्त (aura न झलके) ज्यों-की-त्यों रहती है।
   नाप के बाद (वही असली pixel, panel बंद रखकर #main पर): पीठ rgb(243,234,210) बनाम अक्षर
   rgb(107,97,70) ⇒ **5.11:1** ✅  (रात वाले रूपों की नाप जस-की-तस: classic-dark 7.62 · terminal 6.39)
   रात वाले रूप (classic-dark · terminal) को छुआ ही नहीं — वहाँ `--bg2` वैसा ही रहता है,
   इसलिए S73-R2 की 6.3+ वाली नाप बिलकुल सुरक्षित है।
   ⚠️ क्या टूट सकता है: कोई skin आगे चलकर `--glass-2` को पारदर्शी कर दे तो aura फिर झलक सकती है —
   तब यहाँ फिर से नापना पड़ेगा (आज नापा: aurora में भी यह अपारदर्शी ही है)。
   ═══════════════════════════════════════════════════════════════════════════ */
html.light .numstep-b{ background:var(--glass-2,var(--card,#fff)) }

/* ═══════════════════════════════════════════════════════════════════════════
   🟦 S93 — live-trade popup card (owner: "पट्टी तो है, पर एक popup चाहिए — square card,
   अच्छे animation के साथ, हर पन्ने के top section पर") + पट्टी के LIVE/MTG phase-labels।
   रंग हमेशा skin-tokens से (--card/--bg/--border/--green/--red/--yellow) — S63-R7 का सबक़:
   `--card` जड़ में पारदर्शी है, इसलिए पीठ उसे अपारदर्शी --bg के ऊपर बिछाकर बनती है (पट्टी वाला
   ही नुस्ख़ा)। कोई backdrop-filter नहीं (S62-F2-R3: कमज़ोर phone पर हर-सेकंड repaint = freeze)।
   z-order: modal-bg 40 और #navToggle 60 के नीचे (35) — popup कभी modal/hamburger नहीं ढकता।
   सारी हरकतें html.no-anim (S67 switch) और prefers-reduced-motion दोनों से बंद होती हैं।
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🎯 S175-D4 (owner: "popup काफ़ी बड़ा है… unique नहीं लग रहा"): compact ticket-रूप —
   चौड़ाई 370→292 · padding/खाने कसे · बाईं ओर phase-रंग की मोटी रेल + हल्की उसी रंग की झलक ⇒
   एक नज़र में पहचान (wait=teal · LIVE=लाल · MTG=पीला · जीत=हरा)। DOM/markup ज्यों-का-त्यों —
   सिर्फ़ रूप; सारे no-anim/reduced-motion पहरे पहले जैसे। मोबाइल-नाप 360/390/414 (S175-रिपोर्ट)। */
/* 🎯 S175-R (owner, v132 देखकर: "अभी भी काफ़ी बड़ा… थोड़ा unique छोटा या थोड़ा transparent"): 292→240px +
   पीछे का पन्ना हल्का झलके — background अब ~82% अपारदर्शी (color-mix ... transparent)। ⚠️ backdrop-filter
   जान-बूझकर नहीं (S62-F2-R3: कमज़ोर phone पर हर-सेकंड repaint = freeze)। रेल/phase-रंग वही unique पहचान। */
.livepop{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:35;
  width:min(240px,calc(100vw - 16px));box-sizing:border-box;
  background:color-mix(in srgb,var(--card,#12182a) 82%,transparent);
  border:1px solid var(--border,#26304a);border-left:4px solid var(--accent,#2dd4bf);
  border-radius:12px;padding:6px 9px 7px;
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 1px 5px rgba(0,0,0,.25);
  opacity:0;pointer-events:none}
.livepop.ph-live{border-left-color:var(--red,#ef4444);
  background:color-mix(in srgb,color-mix(in srgb,var(--red,#ef4444) 9%,var(--card,#12182a)) 82%,transparent)}
.livepop.ph-mtg{border-left-color:var(--yellow,#eab308);
  background:color-mix(in srgb,color-mix(in srgb,var(--yellow,#eab308) 9%,var(--card,#12182a)) 82%,transparent)}
.livepop.ph-wait{border-left-color:var(--accent,#2dd4bf)}
.livepop.res-win{border-left-color:var(--green,#22c55e)}
.livepop.res-loss{border-left-color:var(--red,#ef4444)}
.livepop.on{opacity:1;pointer-events:auto;animation:lpIn .38s cubic-bezier(.2,.9,.3,1.15)}
@keyframes lpIn{from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.94)}
  60%{opacity:1;transform:translateX(-50%) translateY(2px) scale(1.01)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.livepop .lp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 3px}
.livepop .lp-ph{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.livepop.ph-live .lp-ph{color:var(--red,#ef4444);animation:lpPulse 1.4s ease-in-out infinite}
.livepop.ph-mtg .lp-ph{color:var(--yellow,#eab308)}
.livepop.ph-wait .lp-ph{color:var(--accent,#2dd4bf)}
@keyframes lpPulse{0%,100%{opacity:1}50%{opacity:.55}}
.livepop .lp-x{background:none;border:1px solid var(--border,#26304a);color:inherit;border-radius:9px;
  width:24px;height:24px;line-height:1;font-size:12px;cursor:pointer;opacity:.75;flex:0 0 auto}
.livepop .lp-x:hover{opacity:1}
.livepop .lp-main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.livepop .lp-dir{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 5px;border-radius:7px;
  font-weight:900;font-size:11px}
.livepop .lp-dir i{font-style:normal;font-size:10px;letter-spacing:.03em}
.livepop .lp-dir.call{background:color-mix(in srgb,var(--green,#22c55e) 20%,transparent);color:var(--green,#22c55e);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green,#22c55e) 45%,transparent)}
.livepop .lp-dir.put{background:color-mix(in srgb,var(--red,#ef4444) 20%,transparent);color:var(--red,#ef4444);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red,#ef4444) 45%,transparent)}
.livepop .lp-pair{font-weight:800;font-size:12px;letter-spacing:.2px}
.livepop .lp-tf{font-size:9px;font-weight:800;padding:1px 6px;border-radius:999px;
  border:1px solid var(--border,#26304a);opacity:.85;white-space:nowrap}
.livepop .lp-meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:3px;font-size:11px}
.livepop .lp-sub{font-size:10px;opacity:.7}
.livepop .lp-cd{margin-left:auto;font-weight:900;font-size:16px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.livepop.ph-live .lp-cd{color:var(--red,#ef4444)}
.livepop.ph-mtg .lp-cd{color:var(--yellow,#eab308)}
.livepop.ph-wait .lp-cd{color:var(--accent,#2dd4bf)}
.livepop .lp-rule{margin-top:3px;font-size:10px;opacity:.85;line-height:1.45}
.livepop .lp-bar{height:2px;border-radius:999px;background:color-mix(in srgb,var(--border,#26304a) 60%,transparent);
  margin-top:5px;overflow:hidden}
.livepop .lp-bar i{display:block;height:100%;border-radius:999px;background:var(--accent,#2dd4bf);
  transform-origin:left;transform:scaleX(0);transition:transform .3s linear}
.livepop.ph-live .lp-bar i{background:var(--red,#ef4444)}
.livepop.ph-mtg .lp-bar i{background:var(--yellow,#eab308)}
.livepop .lp-res{margin-top:4px;font-weight:900;font-size:15px;letter-spacing:.02em;
  animation:lpResPop .45s cubic-bezier(.2,.9,.3,1.3)}
.livepop .lp-res.win{color:var(--green,#22c55e)}
.livepop .lp-res.loss{color:var(--red,#ef4444)}
.livepop .lp-res.draw{color:var(--yellow,#eab308)}
@keyframes lpResPop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.livepop.res-win{border-color:color-mix(in srgb,var(--green,#22c55e) 55%,var(--border,#26304a));
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--green,#22c55e) 30%,transparent), 0 0 26px color-mix(in srgb,var(--green,#22c55e) 22%,transparent)}
.livepop.res-loss{border-color:color-mix(in srgb,var(--red,#ef4444) 55%,var(--border,#26304a));
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--red,#ef4444) 30%,transparent), 0 0 26px color-mix(in srgb,var(--red,#ef4444) 22%,transparent)}
/* top JS से नपता है (#nextSigBar की असली ऊँचाई + 10px) — पट्टी mobile पर 2-पंक्ति wrap होती है,
   जड़ा हुआ 56px वहाँ उसे ढक देता (S63-R5 वाला ही सबक़: नापो, मानो मत)। 56px सिर्फ़ fallback है। */
@media(max-width:560px){.livepop .lp-cd{font-size:15px}.livepop .lp-pair{font-size:11.5px}}
/* पट्टी के phase-labels (drawNextSigBar) — LIVE धड़कता लाल · MTG पीला */
#nextSigBar .nsb-live{color:var(--red,#ef4444);font-weight:700;animation:lpPulse 1.4s ease-in-out infinite}
#nextSigBar .nsb-mtg{color:var(--yellow,#eab308);font-weight:700}
/* सारी S93-हरकतें एक जगह बंद — S67 का switch + OS reduce-motion (दोनों परतें) */
html.no-anim .livepop.on,html.no-anim .livepop .lp-res,html.no-anim .livepop.ph-live .lp-ph,
html.no-anim #nextSigBar .nsb-live{animation:none!important}
html.no-anim .livepop .lp-bar i{transition:none!important}
@media(prefers-reduced-motion:reduce){
  .livepop.on,.livepop .lp-res,.livepop.ph-live .lp-ph,#nextSigBar .nsb-live{animation:none!important}
  .livepop .lp-bar i{transition:none!important}}

/* 🟨 S93-B — 📡 Published Signals के घंटा-समूह (owner: "session wise collapse") + 🎯 candidate-चुनाव।
   रंग सब tokens से; कोई entrance-animation नहीं (सूची AutoRefresh पर दोबारा बनती है — S30 वाला flash-नियम)। */
.psig-grp{border:1px solid var(--border,#26304a);border-radius:12px;margin:8px 0;overflow:hidden}
.psig-grp-h{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;user-select:none;
  background:color-mix(in srgb,var(--border,#26304a) 22%,transparent);font-size:13px}
.psig-grp-h:hover{background:color-mix(in srgb,var(--border,#26304a) 36%,transparent)}
.psig-grp-h:focus-visible{outline:2px solid var(--accent,#2dd4bf);outline-offset:-2px}
.psig-grp-car{width:14px;opacity:.7;font-size:11px}
.psig-grp.open>.psig-grp-h{border-bottom:1px solid var(--border,#26304a)}
.psig-grp .psig-list{margin:2px 8px 6px}

/* 🟧 S93-B2 — पहचान-pills (owner 05-08 शाम: "software वाली पर साफ़ hyper, user की चुनी पर user choice"):
   🚀 Hyper = software की publish (सबको) · 👤 User choice = इस user की चुनी row (per-user)। रंग tokens से। */
/* (खंडन: --vio token website में है ही नहीं — --violet भी हर skin में नहीं; इसलिए ठोस मान + light-रूप में
   गहरा बैंगनी, ताकि 10px पर भी पढ़ा जा सके) */
.pill.po-hyp{padding:1px 7px;font-size:10px;background:rgba(124,92,255,.16);
  color:#a78bfa;border:1px solid rgba(124,92,255,.45);white-space:nowrap}
html.light .pill.po-hyp{color:#5b21b6;background:rgba(124,92,255,.14);border-color:rgba(91,33,182,.45)}
.pill.po-uc{padding:1px 7px;font-size:10px;background:color-mix(in srgb,var(--accent,#2dd4bf) 16%,transparent);
  color:var(--accent,#2dd4bf);border:1px solid color-mix(in srgb,var(--accent,#2dd4bf) 45%,transparent);white-space:nowrap}

/* 🟩 S95 — 📡 की खड़ी (vertical) पट्टी: सब / 👤 मेरे (owner: "user वाली एक list vertically, एक click पर सिर्फ़ अपने")।
   ≤560px पर पट्टी क्षैतिज हो जाती है (phone पर खड़ी पट्टी सूची की चौड़ाई खा जाती)। रंग tokens से। */
.psig-wrap{display:flex;gap:10px;align-items:flex-start}
.psig-body{flex:1;min-width:0}
/* (खंडन: sticky top:64px एक जड़ा हुआ अनुमान था — ऊपर की पट्टी की ऊँचाई नापी नहीं जाती और 561-920px पर
   वह इसे काट देती। पट्टी सूची के साथ ही रहे — sticky नहीं।) */
.psig-rail{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.psig-railb{display:flex;flex-direction:column;align-items:center;gap:1px;width:56px;padding:8px 4px;cursor:pointer;
  background:transparent;color:inherit;border:1px solid var(--border,#26304a);border-radius:12px;font:inherit;font-size:16px;line-height:1.1}
.psig-railb span{font-size:10.5px;font-weight:700;opacity:.85}
.psig-railb i{font-style:normal;font-size:10px;font-weight:800;opacity:.7;font-variant-numeric:tabular-nums}
.psig-railb:hover{background:color-mix(in srgb,var(--border,#26304a) 30%,transparent)}
.psig-railb.on{background:color-mix(in srgb,var(--accent,#2dd4bf) 16%,transparent);
  border-color:color-mix(in srgb,var(--accent,#2dd4bf) 55%,transparent);color:var(--accent,#2dd4bf)}
.psig-railb:focus-visible{outline:2px solid var(--accent,#2dd4bf);outline-offset:2px}
@media(max-width:560px){
  .psig-wrap{flex-direction:column}
  .psig-rail{flex-direction:row;position:static;width:100%}
  .psig-railb{flex:1;flex-direction:row;justify-content:center;gap:6px;width:auto;padding:7px 6px}
}