/* ===== 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);
}
/* ===== 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);
}
*{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%, rgba(47,107,255,.55), transparent 70%),
    radial-gradient(520px 480px at 104% 4%, rgba(56,189,248,.42), transparent 70%),
    radial-gradient(620px 560px at 24% 116%, rgba(56,189,248,.38), transparent 70%),
    radial-gradient(420px 400px at 108% 92%, rgba(47,224,166,.18), 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;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}
.brand .logo{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:19px;color:#0a0a14;
  background:linear-gradient(135deg,rgba(47,107,255,.95),rgba(56,189,248,.9));box-shadow:0 0 26px rgba(47,107,255,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.brand .name{font-size:21px;font-weight:900;letter-spacing:.08em;
  background:linear-gradient(90deg,#fff,#9dbcff 55%,#7dd3fc);-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}
nav a{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);transform:translateX(4px)}
nav a.active{color:#fff;background:linear-gradient(135deg,rgba(47,107,255,.35),rgba(56,189,248,.2));
  border:1px solid rgba(120,170,255,.45);box-shadow:0 0 22px rgba(47,107,255,.4),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{margin-top: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}
.g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.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){.g4,.g3,.g2{grid-template-columns:1fr 1fr}}

/* 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,rgba(47,107,255,.4),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,#9dbcff);-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),#7dd3fc);box-shadow:0 0 18px rgba(56,189,248,.5)}
.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,#5b8dff 0%,#38bdf8 50%,#7dd3fc 100%);
  box-shadow:0 0 34px rgba(47,107,255,.55),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%}
.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:14px;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,rgba(47,107,255,.3),rgba(56,189,248,.16));border-color:rgba(120,170,255,.6);color:var(--primary-hi)}

/* trade rows */
.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}

/* 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,#2f6bff,#38bdf8 55%,#2fe0a6);box-shadow:0 0 18px rgba(56,189,248,.6)}
.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)}

/* pair grid + checkbox grid */
.pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-height:220px;overflow-y:auto;padding:3px}
.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:active{transform:scale(.96)}
.pairs button.on{color:#fff;background:linear-gradient(135deg,rgba(47,107,255,.3),rgba(56,189,248,.16));border:1px solid rgba(120,170,255,.7);box-shadow:0 0 24px rgba(47,107,255,.45),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:rgba(120,170,255,.7);background:linear-gradient(135deg,rgba(47,107,255,.28),rgba(56,189,248,.14));color:#fff;box-shadow:0 0 18px rgba(47,107,255,.3)}
.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);transition:transform .12s}
.hm .d:hover{transform:scale(1.14)}
.hm-h{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:10px;color:var(--muted);text-align:center;margin-bottom:4px}

/* 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,rgba(47,107,255,.4),rgba(56,189,248,.22));border:1px solid rgba(120,170,255,.5);box-shadow:0 0 20px rgba(47,107,255,.4)}

/* 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}
.pill{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)}
.empty{text-align:center;color:var(--muted);padding:36px 10px}
.disclaimer{font-size:12px;color:var(--text-dim);line-height:1.6}
#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}}
.brand .logo{position:relative;overflow:hidden;background:linear-gradient(135deg,#2f6bff,#38bdf8 60%,#7dd3fc);box-shadow:0 8px 26px rgba(47,107,255,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.brand .logo::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-120%);animation:shine 4s ease-in-out infinite 1s}
.brand .logo svg{position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* 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)}

/* dramatic: pair chip select pop + smoother hover */
.pairs button{transition:transform .18s var(--ease),border-color .25s,color .25s,background .25s,box-shadow .3s}
.pairs button:hover{transform:translateY(-2px)}
.pairs button.on{animation:chipPop .34s var(--ease)}
@keyframes chipPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
.pcheck label:hover{transform:translateY(-1px)}
/* 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,#5b8dff,#38bdf8,#2fe0a6);-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,#123a8f,#0369a1);-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .stat .v{background:linear-gradient(90deg,#1e3a8f,#0369a1);-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,#1e5fe0,#0369a1,#0b7d5e);-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;animation:chipPop .52s var(--ease);
  box-shadow:0 0 30px rgba(47,107,255,.6),inset 0 0 0 1px rgba(120,170,255,.6),inset 0 1px 0 rgba(255,255,255,.25)}
@keyframes chipPop{0%{transform:scale(.84)}40%{transform:scale(1.11)}68%{transform:scale(.97)}100%{transform:scale(1)}}
.pairs button.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-130%);animation:chipShine .7s var(--ease) 1}
@keyframes chipShine{to{transform:translateX(130%)}}
.pcheck label.on{box-shadow:0 0 20px rgba(47,107,255,.4),inset 0 0 0 1px rgba(120,170,255,.5);animation:chipPop .45s var(--ease)}
/* stronger sapphire glow on hero elements */
.btn.primary{box-shadow:0 0 44px rgba(47,107,255,.62),0 8px 24px rgba(56,189,248,.38),inset 0 1px 0 rgba(255,255,255,.45)}
.brand .logo,.logo{box-shadow:0 8px 30px rgba(47,107,255,.6),inset 0 1px 0 rgba(255,255,255,.55)}
nav a.active{box-shadow:0 0 26px rgba(47,107,255,.5),inset 0 1px 0 rgba(255,255,255,.16)}
.tabs button.on{box-shadow:0 0 26px rgba(47,107,255,.5)}
.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,#1e5fe0,#0369a1);border-color:transparent;box-shadow:0 8px 18px rgba(30,95,224,.28)}
html.light .btn.primary{background:linear-gradient(135deg,#1e5fe0,#0284c7);color:#fff;box-shadow:0 10px 26px rgba(30,95,224,.32)}
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,#1e5fe0,#0284c7);box-shadow:0 6px 16px rgba(30,95,224,.3)}
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,#1e5fe0,#0284c7);box-shadow:none}
html.light .scan-title,html.light .stat .v,html.light .brand .name,html.light .brand .g{filter:none}

/* ===== v4: shake select, market pulse, sapphire dot, paper sidebar, bg shine, roller, responsive ===== */
/* smooth soft SHAKE on pair/checkbox select — हल्का wiggle, कोई झटका नहीं */
.pairs button.on{animation:shakeSel .6s cubic-bezier(.25,.8,.3,1)!important}
.pcheck label.on{animation:shakeSel .6s cubic-bezier(.25,.8,.3,1)!important}
@keyframes shakeSel{0%{transform:translateX(0) rotate(0)}22%{transform:translateX(-3px) rotate(-.5deg)}48%{transform:translateX(2.5px) rotate(.4deg)}72%{transform:translateX(-1.2px) rotate(-.15deg)}100%{transform:none}}
/* sapphire signing pulse DOT on selected charts */
.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.4s ease-out infinite}
.pcheck label.on{position:relative}
@keyframes sapphirePulse{0%{box-shadow:0 0 0 0 rgba(91,141,255,.65);transform:scale(1)}70%{box-shadow:0 0 0 9px rgba(91,141,255,0);transform:scale(1.15)}100%{box-shadow:0 0 0 0 rgba(91,141,255,0);transform:scale(1)}}
/* 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%, rgba(91,141,255,.11), transparent 70%),
    radial-gradient(36% 28% at 76% 20%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(44% 36% at 60% 80%, rgba(125,211,252,.08), 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}
@media(max-width:920px){
  #main{padding:64px 16px 60px}
}
@media(max-width:560px){ .g4,.g3,.g2{grid-template-columns:1fr} .row{grid-template-columns:1fr} .grid[style*="2fr"]{grid-template-columns:1fr!important} #main{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:grid;place-items:center;padding:24px 18px;overflow:auto;background:var(--bg)}
.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}
.gate-brand .logo{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2f6bff,#38bdf8 60%,#7dd3fc);box-shadow:0 8px 30px rgba(47,107,255,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.gate-brand .name{font-size:22px;font-weight:900;letter-spacing:.08em;background:linear-gradient(90deg,#fff,#9dbcff 55%,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .gate-brand .name{background:linear-gradient(90deg,#123a8f,#0369a1);-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,rgba(47,107,255,.4),rgba(56,189,248,.22));border:1px solid rgba(120,170,255,.5);box-shadow:0 0 20px rgba(47,107,255,.4)}
html.light .gate-tabs button.on{color:#fff;background:linear-gradient(135deg,#1e5fe0,#0284c7)}
.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}
.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}

/* 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}