:root{
  --bg:#0b1220; --bg2:#0f1a2d;
  --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.12);
  --text:#e6edf3; --muted:#a5b4c7; --up:#19d27c; --down:#ff6b6b; --accent:#8bd3ff; --accent2:#c08cff; --yellow:#f5b971;
}
.ait-ed{ color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: radial-gradient(950px 650px at 0% 0%, rgba(139,211,255,.10), transparent 60%),
              radial-gradient(950px 650px at 100% 10%, rgba(192,140,255,.10), transparent 60%),
              linear-gradient(135deg,var(--bg),var(--bg2));
  padding:16px; border-radius:16px;
}
h1{ font-size:32px; margin:0 0 6px; }
.sub{ color:var(--muted); }
.header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:12px; }
.pills{ display:flex; align-items:center; gap:10px; }
.pill{ background:var(--card); border:1px solid var(--border); padding:8px 12px; border-radius:999px; font-size:13px; }
.btn.small{ background:transparent; color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px; cursor:pointer; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:6px; }
.dot-ai{ background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.dot-live{ background:#31e981; }

.grid-top{ display:grid; grid-template-columns: 1.4fr .8fr; gap:12px; margin-bottom:12px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.card .title{ font-weight:700; }
.tf button{ background:transparent; color:var(--text); border:1px solid var(--border); padding:6px 10px; border-radius:8px; cursor:pointer; font-size:12px; }
.tf button.on{ background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#001018; border:none; }
.big{ }
.side{ }

.trend-list{ display:flex; flex-direction:column; gap:10px; }
.trend-row{ display:grid; grid-template-columns: 70px 1fr 100px 80px 90px; align-items:center; gap:8px; padding:10px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.04); }
.trend-row .sym{ font-weight:800; }
.trend-row .name{ color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.trend-row .chg.up{ color:var(--up); }
.trend-row .chg.down{ color:var(--down); }
.trend-row .vol{ color:var(--muted); font-size:12px; text-align:right; }

.row-head{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 8px; }
.options-row{ display:grid; grid-template-columns: repeat(9, minmax(160px,1fr)); gap:10px; overflow-x:auto; padding-bottom:4px; }
.opt-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px; min-width:190px; }
.opt-card .head{ display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.logo{ width:32px; height:32px; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:900; color:#001018; }
.live{ background:#31e98122; border:1px solid #31e98166; color:#31e981; padding:2px 6px; border-radius:999px; font-size:11px; margin-left:6px; }
.opt-card .price{ font-size:18px; font-weight:800; margin-bottom:4px; }
.meta{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.pct.up{ color:var(--up); } .pct.down{ color:var(--down); }
.tag{ background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--muted); padding:4px 8px; border-radius:999px; font-size:12px; }
.tag.yellow{ background:rgba(245,185,113,.12); border-color:rgba(245,185,113,.35); color:#f8d9a8; }

.block{ margin-top:12px; }
.globals{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:10px; }
.gm-card{ display:grid; grid-template-columns: 1.2fr 1fr .6fr; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; }
.gm-card .left .sym{ font-weight:800; }
.gm-card .left .nm{ color:var(--muted); font-size:13px; }
.gm-card .left .st{ color:var(--muted); font-size:12px; }
.gm-card .mid .price{ font-weight:700; }
.gm-card .mid .chg.up{ color:var(--up); } .gm-card .mid .chg.down{ color:var(--down); }
.trend{ padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted); }
.trend.buying{ background:#31e98122; border-color:#31e98166; color:#31e981; }
.trend.selling{ background:#ff6b6b22; border-color:#ff6b6b66; color:#ff9e9e; }
.trend.neutral{ background:rgba(255,255,255,.05); }

#spx_bond{ height: 320px; }

@media (max-width: 1200px){
  .grid-top{ grid-template-columns: 1fr; }
  .options-row{ grid-template-columns: repeat(3, minmax(190px,1fr)); }
}