:root{
  /* light, broker-style palette: navy brand, saffron highlights, India-green profit */
  --bg:#f3f5f9;--panel:#ffffff;--panel2:#f6f8fb;--line:#e2e7ef;--line2:#eef1f6;
  --text:#1b2333;--muted:#667085;--dim:#a0a8b8;
  --brand:#0b3d91;--brand-ink:#ffffff;--brand-soft:#e8eefb;
  --saffron:#f5891f;--saffron-ink:#a3520a;--saffron-soft:#fff3e3;
  --up:#118a3c;--up-soft:#e7f6ec;--dn:#d7372f;--dn-soft:#fdecea;
  --buy:#1f6fe5;--buy-soft:#e8f0fe;--sell:#e0442c;--sell-soft:#fdebe7;
  --atm:#fff3e0;--itm:#fffbea;--hover:#eef4ff;
  --warn:#9a5b00;--warn-soft:#fff6e5;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --overlay:rgba(15,23,42,.45);
  --chart-bg:#ffffff;--chart-grid:#f0f2f6;--chart-text:#667085;
}
:root[data-theme="dark"]{
  --bg:#0b1120;--panel:#111a2e;--panel2:#16213a;--line:#223052;--line2:#1a2644;
  --text:#e6eaf2;--muted:#94a0b8;--dim:#5b6782;
  --brand:#4f8cff;--brand-ink:#ffffff;--brand-soft:#1a2a4d;
  --saffron:#ff9d3b;--saffron-ink:#ffb366;--saffron-soft:#3a2a14;
  --up:#2fbf71;--up-soft:#123222;--dn:#ff6b61;--dn-soft:#3a1717;
  --buy:#4f8cff;--buy-soft:#172a4d;--sell:#ff6b4f;--sell-soft:#3a1c14;
  --atm:#2a2414;--itm:#151f33;--hover:#1c2b4a;
  --warn:#ffb84d;--warn-soft:#2e2412;
  --shadow:none;--overlay:rgba(0,0,0,.6);
  --chart-bg:#111a2e;--chart-grid:#1a2644;--chart-text:#94a0b8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Inter','Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:13.5px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
button{font:inherit;color:inherit}
.up{color:var(--up)}.dn{color:var(--dn)}.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* top bar with a thin tricolour rule */
.topbar{height:52px;background:var(--panel);display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,#ff9933,#ffd9b0 30%,#e9eef6 50%,#bfe3c4 70%,#138808)}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--brand);font-size:1em;white-space:nowrap;letter-spacing:-.01em}
.logo-mark{width:26px;height:26px;border-radius:7px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-size:.8em}
.logo span{color:var(--saffron)}
.nav{display:flex;gap:2px}
.nav a{padding:6px 10px;border-radius:6px;color:var(--muted);font-weight:600;font-size:.88em}
.nav a:hover{background:var(--panel2);color:var(--text)}
.nav a.on{color:var(--brand);background:var(--brand-soft)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:6px;font-weight:600;font-size:.85em}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-pop{display:flex}
.menu-pop{display:none;flex-direction:column;position:absolute;right:0;top:42px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.12);min-width:250px;padding:6px;z-index:60}
/* account menu */
.menu summary.avatar{width:34px;height:34px;padding:0;border:none;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font-weight:700}
.acct-who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:.85em;line-height:1.4;overflow-wrap:anywhere}
.acct-opt{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;font-size:.85em;line-height:1.4;cursor:pointer;border-radius:6px}
.acct-opt:hover{background:var(--panel2)}
.acct-opt input{margin-top:3px;accent-color:var(--brand)}
.menu-pop a,.menu-pop button{padding:9px 10px;border-radius:6px;color:var(--text);text-align:left;background:none;border:none;cursor:pointer;font-weight:500}
.menu-pop a:hover,.menu-pop button:hover{background:var(--panel2)}
.session-chip{font-size:.82em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;border-left:1px solid var(--line)}
.session-chip b{color:var(--text)}
.spacer{flex:1}
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:1em;display:grid;place-items:center}
.icon-btn:hover{background:var(--panel2)}
.btn{padding:8px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:700;font-size:.85em;transition:background .12s,border-color .12s}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{background:var(--line);color:var(--dim);cursor:not-allowed;filter:none}
.btn-outline{background:var(--panel);border-color:var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-outline:disabled{color:var(--dim);border-color:var(--line2);cursor:not-allowed}
.btn-buy{background:var(--buy);color:#fff}
.btn-sell{background:var(--sell);color:#fff}
.btn-sm{padding:5px 10px;font-size:.78em;border-radius:6px}

/* setup */
.setup{max-width:560px;margin:44px auto;padding:0 16px}
.hero{text-align:center;margin-bottom:20px}
.hero h1{font-size:1.7em;letter-spacing:-.02em;line-height:1.2}
.hero h1 span{color:var(--saffron)}
.hero p{color:var(--muted);margin-top:8px;line-height:1.55;font-size:1.02em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78em;color:var(--muted);margin-bottom:6px;font-weight:600}
.field select{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:8px;font-size:1em;outline:none;appearance:auto}
.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{font-size:.85em;line-height:1.5;padding:10px 12px;border-radius:8px;background:var(--brand-soft);color:var(--brand);margin-bottom:16px;min-height:18px}
.note.warn{color:var(--warn);background:var(--warn-soft)}
.setup .btn-primary{width:100%;padding:12px;font-size:1em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.seo{margin-top:36px;line-height:1.6;font-size:.95em}
.seo h2{font-size:1.25em;line-height:1.3;margin-bottom:8px;letter-spacing:-.01em}
.seo h3{font-size:1.02em;margin:20px 0 6px}
.seo p{margin-bottom:10px}
.seo ul{padding-left:20px;margin-bottom:10px}
.seo li{margin-bottom:4px}
.seo a{text-decoration:underline}
.seo details{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.seo summary{font-weight:600;cursor:pointer}
.seo details p{margin:8px 0 0;color:var(--muted)}
.site-foot{margin-top:28px;padding:16px 0 28px;border-top:1px solid var(--line);font-size:.82em;color:var(--muted);line-height:1.5}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:8px}
.steps div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.82em;color:var(--muted);line-height:1.45}
.steps b{display:block;color:var(--text);margin-bottom:2px}
.steps i{font-style:normal;color:var(--saffron);font-weight:800;margin-right:4px}

/* workspace */
.ws{display:none;height:calc(100vh - 55px - 60px)}
body.has-ad-top .ws{height:calc(100vh - 55px - 60px - 106px)}
.ws.on{display:flex}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.side{width:370px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.spotbar{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.spot-lbl{font-size:.74em;color:var(--muted);font-weight:600;letter-spacing:.02em}
.spot{font-size:1.55em;font-weight:800;letter-spacing:-.01em}
.spot-chg{font-size:.85em;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--panel2)}
.spot-chg.up{background:var(--up-soft)}.spot-chg.dn{background:var(--dn-soft)}
.clock{margin-left:auto;text-align:right;font-size:.82em;color:var(--muted)}
.clock b{color:var(--text);font-size:1.12em}
.clock .exp{color:var(--saffron-ink);font-weight:600}
#chart{height:300px;border-bottom:1px solid var(--line);position:relative;background:var(--chart-bg)}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:.85em;pointer-events:none}

/* chain */
.chain-sec{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--panel)}
.chain-head{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--line);font-size:.78em;color:var(--muted)}
.chain-head .calls{color:var(--up);font-weight:700}.chain-head .puts{color:var(--dn);font-weight:700}
.chain-wrap{flex:1;overflow:auto;min-height:0}
table.chain{width:100%;border-collapse:collapse;font-size:.86em}
.chain th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-weight:600;padding:7px 10px;border-bottom:1px solid var(--line);font-size:.82em;z-index:1;text-align:right}
.chain td{padding:6px 10px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
.chain td.k{text-align:center;font-weight:700;background:var(--panel2);color:var(--text);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.chain td.ltp{cursor:pointer;font-weight:600}
.chain td.ltp:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--brand)}
.chain td.ltp.na{cursor:default;color:var(--dim)}
.chain td.ltp.na:hover{background:none;box-shadow:none}
.chain td.oi{color:var(--muted)}
.chain td.itm{background:var(--itm)}
.chain tr.atm td{background:var(--atm)}
.chain tr.atm td.k{color:var(--saffron-ink);background:var(--saffron-soft)}
.chain .d{font-size:.8em;margin-left:5px;font-weight:500}
.chain .held{display:inline-block;font-size:.72em;padding:0 5px;border-radius:4px;margin-right:5px;font-weight:700;vertical-align:1px}
.held.B{background:var(--buy-soft);color:var(--buy)}.held.S{background:var(--sell-soft);color:var(--sell)}
.chain.locked td.ltp{cursor:default}

/* positions */
.pnl-head{padding:16px 18px;border-bottom:1px solid var(--line)}
.pnl-head .lbl{font-size:.76em;color:var(--muted);font-weight:600}
.pnl-total{font-size:1.85em;font-weight:800;margin-top:2px;letter-spacing:-.01em}
.pnl-sub{font-size:.82em;color:var(--muted);margin-top:4px;display:flex;gap:14px;flex-wrap:wrap}
.pnl-sub b{color:var(--text)}
.banner{margin:12px 16px 0;padding:10px 12px;border-radius:8px;font-size:.84em;line-height:1.45}
.banner.done{background:var(--up-soft);color:var(--up)}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.pos-list{flex:1;overflow:auto;padding:10px 12px}
.pos{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow)}
.pos.future{opacity:.5}
.pos-top{display:flex;align-items:center;gap:7px}
.pos-name{font-weight:700}
.tag{font-size:.68em;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
.tag.B{background:var(--buy-soft);color:var(--buy)}.tag.S{background:var(--sell-soft);color:var(--sell)}
.tag.st{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.pos-pnl{margin-left:auto;font-weight:800}
.pos-meta{font-size:.78em;color:var(--muted);margin-top:5px;display:flex;justify-content:space-between;gap:8px}
.pos-actions{margin-top:7px;text-align:right}
.empty{color:var(--muted);text-align:center;padding:32px 12px;line-height:1.6;font-size:.9em}
/* payoff at expiry */
.payoff{padding:10px 14px 12px;border-top:1px solid var(--line);position:relative}
.payoff[hidden]{display:none}
.payoff-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.78em;color:var(--muted);margin-bottom:2px}
.payoff-head b{color:var(--text);font-weight:600}
.payoff svg{display:block;width:100%;height:auto;overflow:visible;touch-action:none}
.payoff .po-fill-up{fill:var(--up-soft)}.payoff .po-fill-dn{fill:var(--dn-soft)}
.payoff .po-line-up{stroke:var(--up)}.payoff .po-line-dn{stroke:var(--dn)}
.payoff .po-zero{stroke:var(--line)}
.payoff .po-spot{stroke:var(--brand);stroke-dasharray:3 3}
.payoff .po-cross{stroke:var(--muted);stroke-dasharray:2 3}
.payoff .po-be{fill:var(--panel);stroke:var(--text);stroke-width:1.5}
.payoff text{font-size:10px;fill:var(--muted);font-family:inherit}
.payoff text.po-spot-lbl{fill:var(--brand);font-weight:600}
.payoff-stats{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.78em;color:var(--muted);margin-top:4px}
.payoff-stats b{font-weight:600}
.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px}
.side-foot .btn{flex:1}

/* ad slots — invisible until AdSense is configured in admin */
.ad{display:none}
.ad.on{display:block;text-align:center;overflow:hidden}
.ad.on::before{content:'Advertisement';display:block;font-size:10px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.ad-top.on{height:106px;padding:4px 16px 0;background:var(--bg)}
.ad-setup.on{margin-top:24px;min-height:120px}
.ad-side.on{padding:10px 12px 12px;border-top:1px solid var(--line);min-height:120px;max-height:290px}

/* replay bar */
.rbar{position:fixed;left:0;right:0;bottom:0;height:60px;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -2px 8px rgba(16,24,40,.05);display:none;align-items:center;gap:6px;padding:0 14px;z-index:40}
.rbar.on{display:flex}
.rbtn{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;height:38px;min-width:40px;padding:0 10px;cursor:pointer;font-size:.9em;font-weight:700}
.rbtn:hover{border-color:var(--brand);color:var(--brand)}
.rbtn:disabled{opacity:.35;cursor:not-allowed;color:var(--text);border-color:var(--line)}
.rbtn.play{background:var(--brand);color:var(--brand-ink);border:none;min-width:50px}
.rbtn.settle{background:var(--saffron);color:#fff;border:none}
#slider{flex:1;accent-color:var(--brand);min-width:60px}
.rbar select{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;height:38px;padding:0 8px}

/* ticket + results modal */
.overlay{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.overlay.on{display:flex}
.modal{background:var(--panel);border-radius:14px;width:100%;max-width:390px;padding:20px;box-shadow:0 20px 50px rgba(16,24,40,.25)}
.modal.wide{max-width:660px;max-height:90vh;overflow:auto}
.modal h3{font-size:1.1em;margin-bottom:2px}
.modal .sub{color:var(--muted);font-size:.84em;margin-bottom:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.seg button{padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:700;color:var(--muted)}
.seg button.on.B{background:var(--buy);color:#fff;border-color:var(--buy)}
.seg button.on.S{background:var(--sell);color:#fff;border-color:var(--sell)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:.92em}
.kv span:first-child{color:var(--muted)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:1.1em}
.stepper input{width:56px;text-align:center;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;height:32px;font-size:1em}
.modal-actions{display:flex;gap:8px;margin-top:18px}
.modal-actions .btn{flex:1;padding:11px}
table.res{width:100%;border-collapse:collapse;font-size:.87em;margin-top:12px}
.res th,.res td{padding:8px 6px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
.res th:first-child,.res td:first-child{text-align:left}
.res th{color:var(--muted);font-weight:600}
.res-total{font-size:2.1em;font-weight:800;margin:6px 0 2px}

/* mobile */
.mtabs{display:none}
@media (max-width:900px){
  .topbar{padding:0 12px;gap:8px;height:50px}
  .nav{display:none}
  .logo-text{display:none}
  .session-chip{font-size:.74em;padding-left:8px}
  .ad-top{display:none !important}
  .ws.on{display:block;height:auto;padding-bottom:68px}
  body.has-ad-top .ws{height:auto}
  .mhead{position:sticky;top:53px;z-index:20;background:var(--panel)}
  .btn-sm{white-space:nowrap}
  .side{width:auto;border-left:none}
  #chart{height:calc(100vh - 53px - 104px - 60px)}
  .ws:not([data-tab="chart"]) #chart{display:none}
  .ws[data-tab="chart"] .chain-sec{display:none}
  .ws[data-tab="chart"] .side{display:none}
  .res .how{display:none}
  .spotbar{padding:8px 12px;gap:8px}
  .spot{font-size:1.25em}
  .spot-chg{font-size:.75em;padding:2px 7px}
  .clock{font-size:.75em}
  .clock b{font-size:1em}
  .mtabs{display:flex;background:var(--panel);border-bottom:1px solid var(--line)}
  .mtabs button{flex:1;padding:10px 4px;background:none;border:none;color:var(--muted);font-weight:700;font-size:.88em;border-bottom:2px solid transparent;cursor:pointer}
  .mtabs button.on{color:var(--brand);border-bottom-color:var(--saffron)}
  .ws[data-tab="chain"] .side{display:none}
  .chain-head{display:none}
  .ws[data-tab="pos"] .chain-sec{display:none}
  .chain-wrap{max-height:none;overflow:visible}
  .chain th{position:static}
  .chain .oi{display:none}
  .chain td{padding:8px 6px}
  .pos-list{overflow:visible}
  .rbar{gap:4px;padding:0 6px}
  .rbtn{min-width:34px;padding:0 6px}
  .rbar select,.rbtn.hide-m{display:none}
  .row2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .setup{margin-top:24px}
  .hero h1{font-size:1.4em}
}