:root {
  --bg: #07111f;
  --panel: #0f1726;
  --panel-2: #111c2e;
  --border: #22324a;
  --text: #f5f9ff;
  --muted: #95a7c2;
  --shadow: 0 14px 36px rgba(2, 8, 23, 0.34);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --green-bg: rgba(22, 101, 52, 0.22);
  --green-text: #86efac;
  --blue-bg: rgba(37, 99, 235, 0.22);
  --blue-text: #93c5fd;
  --violet-bg: rgba(109, 40, 217, 0.2);
  --violet-text: #c4b5fd;
  --amber-bg: rgba(180, 83, 9, 0.2);
  --amber-text: #fcd34d;
  --gray-bg: rgba(75, 85, 99, 0.28);
  --gray-text: #cbd5e1;
  --rose-bg: rgba(190, 24, 93, 0.18);
  --rose-text: #fda4af;
  --accent-blue: #3b82f6;
  --accent-blue-strong: #2563eb;
  --accent-black: #020617;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top, rgba(59,130,246,.12), transparent 26%), linear-gradient(180deg, #08101d 0%, #07111f 100%);
  color: var(--text);
}
.container { max-width: 1680px; margin: 0 auto; padding: 24px; }
.page-shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(520px, 0.8fr); gap: 24px; align-items: start; }
.main-content { min-width: 0; }
.hero, .surface, .card, .tab-shell, .stat-card, .control, .table-card, .stock-watch-card, .section-card {
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hero {
  border-radius: var(--radius-xl);
  padding: 34px;
  margin-bottom: 24px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.28), transparent 34%),
    radial-gradient(circle at top right, rgba(37,99,235,.22), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #0b1730 48%, #08111f 100%);
}
.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-blue), #0f172a); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: 900; box-shadow: var(--shadow); }
.brand-name { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-text); margin-bottom: 4px; }
.brand-tagline { font-size: 12px; color: var(--muted); line-height: 1.5; }
.market-status-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.market-status-card { background: linear-gradient(180deg, rgba(17,28,46,.96), rgba(9,16,30,.96)); border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow: var(--shadow); }
.market-status-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:700; }
.market-status-value { font-size:18px; font-weight:800; color:var(--text); margin-bottom:4px; }
.market-status-sub { font-size:12px; color:var(--muted); line-height:1.5; }
.hero-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:end; }
h1 { margin:0; font-size:52px; line-height:1.02; letter-spacing:-.045em; max-width:12ch; text-wrap:balance; }
.hero p { max-width:760px; margin:20px 0 0; color:#c0d1ea; line-height:1.72; font-size:16px; }
.next-open-card { margin-top:14px; background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(15,23,38,.96)); border:1px solid rgba(59,130,246,.24); border-radius:20px; padding:16px; box-shadow:var(--shadow); }
.next-open-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-text); margin-bottom:8px; font-weight:800; }
.next-open-title { font-size:22px; font-weight:800; color:var(--text); margin:0 0 6px; }
.next-open-sub { font-size:13px; color:var(--muted); line-height:1.6; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-card { border-radius:var(--radius-lg); padding:16px; min-height:96px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg, rgba(17,28,46,.96), rgba(9,16,30,.96)); }
.stat-label { color:var(--muted); font-size:12px; margin-bottom:8px; }
.stat-value { font-size:30px; font-weight:700; }
.seo-nav { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.seo-nav a,.theme-toggle { text-decoration:none; color:#dbeafe; background:rgba(15,23,38,.92); border:1px solid rgba(59,130,246,.16); border-radius:999px; padding:8px 12px; font-size:13px; font-weight:600; box-shadow:var(--shadow); }
.theme-toggle { cursor:pointer; line-height:1; }
.controls { display:grid; grid-template-columns:1fr 220px 220px 180px; gap:12px; margin-bottom:20px; }
.control { border-radius:var(--radius-lg); padding:0 14px; min-height:52px; display:flex; align-items:center; }
.control input,.control select,.control button { width:100%; border:0; outline:none; background:transparent; font-size:15px; color:var(--text); }
.toolbar { display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:20px; }
.server-status { display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--panel-2); border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--muted); }
.status-pill.ok { color:var(--green-text); background:var(--green-bg); }
.status-pill.warn { color:var(--amber-text); background:var(--amber-bg); }
.status-pill.info { color:var(--blue-text); background:var(--blue-bg); }
.ghost-btn,.watch-btn,.primary-btn { border:1px solid var(--border); border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; background:var(--panel); color:var(--text); }
.primary-btn, .watch-btn.active { background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-strong)); color:white; border-color:rgba(59,130,246,.6); }
.stock-actions .ghost-btn { color:#93c5fd; border-color:rgba(59,130,246,.28); background:rgba(15,23,38,.88); }
.stock-watch-shell { margin-bottom:20px; }
.stock-watch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stock-watch-card { border-radius:var(--radius-lg); padding:18px; min-height:168px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.stock-watch-card.empty { background: linear-gradient(180deg, rgba(17,28,46,.9), rgba(9,16,30,.9)); border-style:dashed; color:var(--muted); align-items:center; text-align:center; justify-content:center; }
.stock-symbol { font-size:28px; font-weight:800; letter-spacing:-.04em; margin:0; color:var(--text); }
.stock-meta, .stock-price-sub, .stock-help, .footer-note, .seo-list, .faq-item p, .section-desc, .market-loc { color:var(--muted); }
.stock-price { font-size:30px; font-weight:800; letter-spacing:-.04em; margin-top:8px; }
.stock-change { display:inline-flex; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; width:fit-content; margin-top:10px; border:1px solid var(--border); background:var(--panel-2); color:var(--muted); }
.stock-change.up { color:var(--green-text); background:var(--green-bg); }
.stock-change.down { color:#fca5a5; background:rgba(127,29,29,.3); }
.market-link { color:#93c5fd; text-decoration:none; font-size:12px; font-weight:700; }
.inline-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tab-shell { border-radius:18px; padding:6px; display:inline-flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn { border:0; background:transparent; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; color:var(--muted); }
.tab-btn.active { background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(17,28,46,.96)); color:#dbeafe; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.section-card, .table-card { border-radius:var(--radius-xl); padding:22px; margin-bottom:18px; }
.section-title { font-size:22px; font-weight:700; margin:0 0 6px; }
.cards-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.card { border-radius:var(--radius-xl); padding:22px; display:grid; grid-template-rows:82px 106px 10px 196px 60px; row-gap:16px; height:100%; }
.card-head { display:flex; justify-content:space-between; gap:12px; min-height:82px; height:82px; }
.market-name { margin:0; font-size:22px; font-weight:700; line-height:1.14; min-height:50px; max-height:50px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.market-flag { display:inline-block; width:24px; height:18px; margin-left:8px; border-radius:3px; vertical-align:-2px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12); background:rgba(255,255,255,.08); }
.market-flag.globe { width:auto; height:auto; box-shadow:none; background:transparent; font-size:20px; }
.clock-line { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:12px; min-height:106px; }
.clock-time { font-size:34px; font-weight:700; letter-spacing:-.02em; }
.clock-date { font-size:14px; margin-top:6px; margin-bottom:10px; min-height:28px; color:var(--muted); }
.badge { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:700; min-width:132px; text-align:center; border:1px solid transparent; white-space:nowrap; }
.badge.open { background:var(--green-bg); color:var(--green-text); }
.badge.premarket,.badge.forex-open,.badge.crypto-open { background:var(--blue-bg); color:var(--blue-text); }
.badge.afterhours,.badge.futures-open { background:var(--violet-bg); color:var(--violet-text); }
.badge.paused,.badge.halfday { background:var(--amber-bg); color:var(--amber-text); }
.badge.closed,.badge.holiday { background:var(--gray-bg); color:var(--gray-text); }
.badge.special { background:var(--rose-bg); color:var(--rose-text); }
.progress-track { width:100%; height:10px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(147,197,253,.18); overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#60a5fa 0%, #dbeafe 100%); width:0; transition:width .4s ease; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-height:196px; height:196px; }
.info-box { background:var(--panel-2); border-radius:var(--radius-lg); padding:16px; min-height:90px; }
.info-label { color:var(--muted); font-size:12px; margin-bottom:8px; }
.info-value { font-weight:600; line-height:1.4; font-size:14px; }
.tag-row,.chip-row,.badge-row { display:flex; flex-wrap:wrap; gap:8px; align-self:end; min-height:52px; align-content:flex-start; }
.tag,.chip,.asset-chip { display:inline-flex; align-items:center; border-radius:999px; padding:7px 11px; font-size:12px; font-weight:600; background:var(--panel-2); border:1px solid var(--border); }
.asset-chip { padding:6px 10px; font-size:11px; font-weight:800; text-transform:uppercase; }
.asset-chip.equity { background:rgba(37,99,235,.16); color:#93c5fd; }
.asset-chip.futures { background:rgba(109,40,217,.16); color:#c4b5fd; }
.asset-chip.forex { background:rgba(22,101,52,.16); color:#86efac; }
.asset-chip.crypto { background:rgba(180,83,9,.16); color:#fcd34d; }
.ad-rail { position:sticky; top:24px; min-height:calc(100vh - 48px); }
.ad-panel { border-radius:var(--radius-xl); padding:18px; }
.ad-top-banner, .ad-slot { border:2px dashed var(--border); border-radius:var(--radius-lg); background:var(--panel-2); }
.ad-top-banner { min-height:124px; padding:18px 20px; margin-bottom:20px; display:flex; align-items:center; }
.ad-top-banner-slot, .ad-embed { width:100%; border-radius:12px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 16px; color:var(--muted); background:rgba(15,23,38,.88); }
.ad-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ad-slot { min-height:300px; display:flex; flex-direction:column; gap:12px; padding:14px; }
.ad-slot-head { display:flex; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px dashed var(--border); }
.ad-slot-title { font-size:13px; font-weight:700; }
.ad-slot-id { font-size:11px; color:var(--muted); font-family: ui-monospace, monospace; }
.seo-copy { display:grid; gap:18px; margin-top:20px; }
.faq-list { display:grid; gap:12px; }
.faq-item { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); }
.tooltip-help { cursor:help; border-bottom:1px dotted var(--muted); }
.empty { padding:24px; background:var(--panel); border:1px dashed var(--border); border-radius:var(--radius-xl); color:var(--muted); text-align:center; }
html[data-theme="light"] {
  --bg:#eef4ff; --panel:#fff; --panel-2:#f7faff; --border:#d7e2f1; --text:#0f172a; --muted:#52637d;
  --shadow:0 14px 36px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] body { background: radial-gradient(circle at top, rgba(59,130,246,.08), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%); }
html[data-theme="light"] .hero { background: radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 34%), radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 30%), linear-gradient(135deg,#fff 0%,#f4f8ff 48%,#eef4ff 100%); }
html[data-theme="light"] .hero p { color:#4b5d78; }
html[data-theme="light"] .seo-nav a, html[data-theme="light"] .theme-toggle { color:#1d4ed8; background:rgba(255,255,255,.94); }
html[data-theme="light"] .market-status-card, html[data-theme="light"] .stat-card, html[data-theme="light"] .stock-watch-card.empty { background: linear-gradient(180deg, #fff, #f7faff); }
html[data-theme="light"] .next-open-card { background: linear-gradient(135deg, rgba(37,99,235,.08), #fff); }
html[data-theme="light"] .market-link { color:#1d4ed8; }
html[data-theme="light"] .stock-actions .ghost-btn { color:var(--text); background:var(--panel); }
@media (max-width: 1180px) {
  .page-shell,.hero-grid,.controls,.toolbar,.ad-grid,.overlap-grid,.insight-grid { grid-template-columns:1fr; }
  .market-status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards-grid { grid-template-columns:1fr 1fr; }
  .stock-watch-grid { grid-template-columns:repeat(2,1fr); }
  .ad-rail { position:static; min-height:auto; }
}
@media (max-width: 900px) {
  .cards-grid,.market-status-strip,.stock-watch-grid,.ad-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .container { padding:16px; }
  h1 { font-size:36px; max-width:none; }
  .stats,.info-grid,.stock-form { grid-template-columns:1fr; }
  .card { grid-template-rows:auto auto 10px auto auto; }
  .card-head,.clock-line,.info-grid { min-height:auto; height:auto; }
  .clock-line { grid-template-columns:1fr; }
  .badge { min-width:0; }
}