:root{
  --navy-950:#0a1424; --navy-900:#0e1b30; --navy-800:#152841; --navy-700:#1e3554; --navy-600:#28405f;
  --gold-500:#c9a227; --gold-300:#e4c767;
  --ivory-100:#f2eee2;
  --slate-400:#8b96a8; --slate-500:#6f7d92; --slate-600:#5b6a80;
  --up-500:#3f9a6e; --up-700:#2c6e4e; --up-300:#68c294;
  --down-500:#b8534a; --down-700:#8a3d36; --down-300:#d47a70;
  --sans:"Hind Siliguri","IBM Plex Sans",-apple-system,sans-serif; --serif:"Tiro Bangla","Fraunces",Georgia,serif; --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--navy-950); color:var(--ivory-100); font-family:var(--sans); min-height:100vh;}

/* ---------- intro reveal ---------- */
.intro-overlay{
  position:fixed; inset:0; background:var(--navy-950); z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity 0.7s ease, visibility 0.7s ease;
}
.intro-overlay.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-candles{ display:flex; align-items:flex-end; gap:7px; height:130px; margin-bottom:30px; }
.intro-candle{ width:9px; border-radius:1px; opacity:0; transform:translateY(24px); animation:riseIn 0.55s ease forwards; }
@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
.intro-title{
  font-family:var(--serif); font-weight:500; font-size:19px; color:var(--slate-400);
  opacity:0; animation:fadeUp 0.7s ease forwards; animation-delay:1s; text-align:center; max-width:400px; padding:0 20px;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------- ticker ---------- */
.ticker-wrap{ background:var(--navy-900); border-bottom:1px solid var(--navy-700); overflow:hidden; white-space:nowrap; padding:9px 0; }
.ticker{ display:inline-block; padding-left:100%; animation:scroll 30s linear infinite; font-family:var(--mono); font-size:13px; color:var(--slate-400); }
.ticker span{ margin-right:48px; }
.ticker .up{ color:var(--up-500); } .ticker .down{ color:var(--down-500); }
@keyframes scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }

/* ---------- nav ---------- */
nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 48px; }
.mark{ display:flex; align-items:center; gap:10px; }
.mark-dot{ width:9px;height:9px;border-radius:50%; background:var(--gold-500); }
.mark-text{ font-weight:600; font-size:15px; color:var(--ivory-100); }
.mark-text b{ color:var(--gold-300); font-weight:600; }
.nav-link{ color:var(--slate-400); font-size:14px; text-decoration:none; }
.nav-link:hover{ color:var(--ivory-100); }

/* ---------- hero ---------- */
.hero{ padding:56px 48px 36px; text-align:center; max-width:760px; margin:0 auto; }
.hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.2vw,46px); line-height:1.14; margin:0 0 14px; }
.hero p.sub{ color:var(--slate-400); font-size:16px; line-height:1.6; margin:0 0 36px; }
.search-bar{ display:flex; align-items:center; gap:14px; background:var(--navy-800); border:1px solid var(--navy-700); border-radius:10px; padding:10px 12px; max-width:440px; margin:0 auto; }
.search-bar input[type=date]{ flex:1; background:transparent; border:none; color:var(--ivory-100); font-family:var(--mono); font-size:15px; padding:10px 8px; outline:none; color-scheme:dark; }
.search-bar button{ background:var(--gold-500); color:var(--navy-950); border:none; font-weight:600; font-size:14px; padding:12px 22px; border-radius:7px; cursor:pointer; }
.search-bar button:hover{ background:var(--gold-300); }

/* ---------- how it works ---------- */
.how{ max-width:920px; margin:0 auto; display:flex; border-top:1px solid var(--navy-800); border-bottom:1px solid var(--navy-800); padding:28px 48px; }
.how-step{ flex:1; padding:0 20px; }
.how-step + .how-step{ border-left:1px solid var(--navy-800); }
.how-num{ font-family:var(--mono); color:var(--gold-500); font-size:13px; margin-bottom:8px; }
.how-title{ font-weight:600; font-size:14.5px; margin-bottom:6px; }
.how-body{ color:var(--slate-400); font-size:13.5px; line-height:1.55; }

/* ---------- layout ---------- */
.layout{ max-width:1120px; margin:0 auto; padding:40px 48px 80px; display:flex; gap:44px; align-items:flex-start; }
.main-col{ flex:1; min-width:0; }
.side-col{ width:280px; flex-shrink:0; }
@media (max-width:840px){
  .layout{ flex-direction:column; padding:32px 24px 60px; }
  .side-col{ width:100%; order:-1; }
  .how{ flex-direction:column; padding:24px; gap:18px; }
  .how-step + .how-step{ border-left:none; border-top:1px solid var(--navy-800); padding-top:18px; }
  nav, .hero{ padding-left:24px; padding-right:24px; }
}
.side-title{ font-family:var(--mono); font-size:12px; letter-spacing:0.03em; color:var(--slate-500); margin-bottom:14px; }
.side-item{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:13px 0; border-bottom:1px solid var(--navy-800); color:var(--ivory-100); }
.side-item:hover .side-item-title{ color:var(--gold-300); }
.side-item-date{ font-family:var(--mono); font-size:11.5px; color:var(--slate-500); margin-bottom:4px; }
.side-item-title{ font-size:13.5px; line-height:1.4; }
.side-item-pair{ font-family:var(--mono); font-size:11px; color:var(--slate-500); margin-top:5px; }
.about-box{ margin-top:28px; padding-top:24px; border-top:1px solid var(--navy-800); }
.about-box p{ color:var(--slate-400); font-size:13px; line-height:1.65; margin:0; }

.empty{ text-align:center; color:var(--slate-600); font-size:14px; padding:60px 20px; }
.session{ display:none; }
.session.visible{ display:block; animation:fadeIn 0.35s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.session-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.session-date{ font-family:var(--mono); color:var(--gold-300); font-size:13px; margin-bottom:6px; }
.session-title{ font-family:var(--serif); font-size:25px; font-weight:500; margin:0; max-width:480px; line-height:1.25; }
.instrument-badge{ font-family:var(--mono); font-size:13px; background:var(--navy-800); border:1px solid var(--navy-700); padding:8px 14px; border-radius:7px; white-space:nowrap; }
.topics{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.topic{ font-size:12.5px; color:var(--slate-400); border:1px solid var(--navy-700); padding:5px 12px; border-radius:20px; }
.day-overview{ color:var(--slate-400); font-size:14px; line-height:1.6; max-width:600px; margin:0 0 26px; display:none; }

.topic-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.topic-tab{ background:var(--navy-800); border:1px solid var(--navy-700); color:var(--slate-400); font-size:13px; padding:9px 16px; border-radius:8px; cursor:pointer; font-family:var(--sans); }
.topic-tab:hover{ border-color:var(--gold-500); color:var(--ivory-100); }
.topic-tab.active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950); font-weight:600; }

/* ---------- 3D chart ---------- */
.chart-panel{ background:var(--navy-900); border:1px solid var(--navy-700); border-radius:12px; padding:22px 26px 18px; margin-bottom:28px; }
.chart-legend{ display:flex; gap:20px; margin-bottom:18px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--slate-400); font-family:var(--mono); }
.legend-swatch{ width:10px; height:10px; border-radius:2px; }
.topic-chart-img{ width:100%; border-radius:8px; display:block; }
.view-toggle{ display:flex; gap:8px; margin-bottom:18px; }
.view-toggle-btn{ background:var(--navy-800); border:1px solid var(--navy-700); color:var(--slate-400); font-size:12.5px; padding:7px 14px; border-radius:6px; cursor:pointer; font-family:var(--sans); }
.view-toggle-btn:hover{ border-color:var(--gold-500); color:var(--ivory-100); }
.view-toggle-btn.active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950); font-weight:600; }
.lang-toggle{ background:var(--navy-800); border:1px solid var(--navy-700); color:var(--gold-300); font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:20px; cursor:pointer; font-family:var(--sans); }
.lang-toggle:hover{ border-color:var(--gold-500); background:var(--navy-700); }
.chart3d-frame{ display:flex; gap:10px; padding:20px 10px 30px 44px; position:relative; }
.y-axis{ position:absolute; left:0; top:20px; bottom:30px; display:flex; flex-direction:column; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--slate-500); width:38px; text-align:right; }
.chart3d-plot{ position:relative; flex:1; height:230px; perspective:900px; }
.marker-line{ position:absolute; left:0; right:0; height:0; border-top:1.5px dashed; display:flex; justify-content:flex-end; align-items:center; }
.marker-line .marker-chip{ font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:4px; transform:translateY(-50%); margin-right:-6px; }
.candles{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:14px; padding-left:6px; }
.candle-slot{ position:relative; width:16px; height:100%; flex-shrink:0; }
.wick{ position:absolute; left:50%; width:2px; transform:translateX(-50%); background:var(--slate-500); }
.candle-3d{ position:absolute; left:0; width:16px; }
.candle-3d .face-front{ position:absolute; inset:0; }
.candle-3d .face-top{ position:absolute; top:-6px; left:0; width:100%; height:6px; transform:skewX(-42deg); transform-origin:bottom left; }
.candle-3d .face-side{ position:absolute; top:0; right:-6px; width:6px; height:100%; transform:skewY(-42deg); transform-origin:top left; }
.candle-up .face-front{ background:var(--up-500); } .candle-up .face-top{ background:var(--up-300); } .candle-up .face-side{ background:var(--up-700); }
.candle-down .face-front{ background:var(--down-500); } .candle-down .face-top{ background:var(--down-300); } .candle-down .face-side{ background:var(--down-700); }

.notes{ font-size:15px; line-height:1.75; color:#d9d5c8; max-width:620px; }
.notes p{ margin:0 0 14px; }
.key-levels{ display:flex; gap:28px; margin-top:22px; padding-top:22px; border-top:1px solid var(--navy-700); flex-wrap:wrap; }
.level{ font-family:var(--mono); }
.level-label{ font-size:11.5px; color:var(--slate-600); margin-bottom:4px; }
.level-value{ font-size:16px; }
.level-value.up{ color:var(--up-500); } .level-value.down{ color:var(--down-500); } .level-value.gold{ color:var(--gold-300); }

footer{ text-align:center; padding:26px; font-size:12.5px; color:var(--slate-600); border-top:1px solid var(--navy-800); }

/* ================= ADMIN ================= */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card{ background:var(--navy-900); border:1px solid var(--navy-700); border-radius:12px; padding:36px 32px; width:100%; max-width:340px; }
.auth-label{ display:block; font-size:12.5px; color:var(--slate-400); margin:16px 0 6px; }
.auth-input{ width:100%; background:var(--navy-800); border:1px solid var(--navy-700); border-radius:7px; color:var(--ivory-100); padding:11px 12px; font-size:14px; }
.auth-submit{ width:100%; background:var(--gold-500); color:var(--navy-950); border:none; font-weight:600; padding:12px; border-radius:7px; margin-top:22px; cursor:pointer; }
.auth-submit:hover{ background:var(--gold-300); }
.auth-error{ background:rgba(184,83,74,0.15); border:1px solid var(--down-500); color:var(--down-300); font-size:13px; padding:10px 12px; border-radius:7px; }

.admin-wrap{ max-width:760px; margin:0 auto; padding:40px 24px 80px; }
.admin-h1{ font-family:var(--serif); font-size:26px; font-weight:500; margin:0 0 24px; }
.admin-h2{ font-family:var(--serif); font-size:20px; font-weight:500; margin:48px 0 16px; }
.flash{ padding:11px 14px; border-radius:7px; font-size:13.5px; margin-bottom:20px; }
.flash-ok{ background:rgba(63,154,110,0.15); border:1px solid var(--up-500); color:var(--up-300); }
.flash-err{ background:rgba(184,83,74,0.15); border:1px solid var(--down-500); color:var(--down-300); }

.admin-form label{ display:block; font-size:12.5px; color:var(--slate-400); margin-bottom:6px; }
.admin-form .hint{ color:var(--slate-600); }
.form-field{ margin-bottom:18px; flex:1; }
.form-row{ display:flex; gap:16px; }
.form-row.three .form-field{ flex:1; }
.admin-form input[type=text], .admin-form input[type=date], .admin-form input[type=number], .admin-form textarea{
  width:100%; background:var(--navy-800); border:1px solid var(--navy-700); border-radius:7px;
  color:var(--ivory-100); padding:10px 12px; font-size:14px; font-family:var(--sans);
}
.admin-form textarea{ resize:vertical; }

.candle-table{ width:100%; border-collapse:collapse; margin-top:10px; margin-bottom:12px; }
.candle-table th{ text-align:left; font-size:11.5px; color:var(--slate-500); padding:6px 8px; font-weight:500; }
.candle-table td{ padding:4px 8px; }
.candle-table input{ width:90px; background:var(--navy-800); border:1px solid var(--navy-700); border-radius:5px; color:var(--ivory-100); padding:7px 8px; font-family:var(--mono); font-size:13px; }
.row-remove{ background:none; border:none; color:var(--slate-500); cursor:pointer; font-size:16px; }
.row-remove:hover{ color:var(--down-500); }

.btn-primary{ background:var(--gold-500); color:var(--navy-950); border:none; font-weight:600; padding:12px 24px; border-radius:7px; cursor:pointer; font-size:14px; }
.btn-primary:hover{ background:var(--gold-300); }
.btn-secondary{ background:none; border:1px solid var(--navy-700); color:var(--slate-400); padding:8px 16px; border-radius:7px; cursor:pointer; font-size:13px; }
.btn-secondary:hover{ border-color:var(--gold-500); color:var(--gold-300); }

.list-table{ width:100%; border-collapse:collapse; }
.list-table th{ text-align:left; font-size:11.5px; color:var(--slate-500); padding:8px; border-bottom:1px solid var(--navy-800); font-weight:500; }
.list-table td{ padding:10px 8px; border-bottom:1px solid var(--navy-800); font-size:13.5px; }
.delete-link{ color:var(--down-500); text-decoration:none; font-size:13px; }
.delete-link:hover{ text-decoration:underline; }

.topic-block{ background:var(--navy-900); border:1px solid var(--navy-700); border-radius:10px; padding:20px 22px; margin-bottom:18px; }
.topic-block-head{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.topic-name-input{ flex:1; background:var(--navy-800); border:1px solid var(--navy-700); border-radius:7px; color:var(--ivory-100); padding:10px 12px; font-size:14.5px; font-family:var(--serif); }
.topic-divider{ display:none; }