:root {
  --bg: #0b0f17; --panel: #121826; --panel2: #182033; --line: #243049; --text: #e7ecf5; --muted: #8a97ad; --dim: #5d6a80;
  --up: #1fc77e; --up-bg: rgba(31,199,126,.12); --down: #f0525a; --down-bg: rgba(240,82,90,.12);
  --warn: #f5b93b; --warn-bg: rgba(245,185,59,.1); --accent: #4c8dff; --accent-bg: rgba(76,141,255,.12);
  --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--accent); }
button { font: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); } .warn { color: var(--warn); }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 58px; background: rgba(11,15,23,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 17px; letter-spacing: .2px; white-space: nowrap; }
.brand b { color: var(--accent); }
nav { display: flex; gap: 2px; overflow-x: auto; }
nav a { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
nav a:hover { color: var(--text); background: var(--panel); }
nav a.active { color: var(--text); background: var(--panel2); }
.src { margin-left: auto; font-size: 12px; padding: 5px 10px; border-radius: 20px; white-space: nowrap; border: 1px solid; }
.src.angel { color: var(--up); border-color: rgba(31,199,126,.4); background: var(--up-bg); }
.src.demo { color: var(--warn); border-color: rgba(245,185,59,.4); background: var(--warn-bg); }

main { max-width: 1300px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; min-width: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); }
.mt { margin-top: 14px; } .mt2 { margin-top: 24px; }

/* hero */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px; background: linear-gradient(135deg, #14203a, #121826 60%); }
.hero h1 { font-size: 24px; }
.cta { background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 14px 26px; font-size: 16px; font-weight: 600; box-shadow: 0 6px 20px rgba(76,141,255,.3); }
.cta:hover { filter: brightness(1.1); } .cta:disabled { opacity: .6; cursor: wait; }
.btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; }
.btn:hover { border-color: var(--accent); }
.btn.danger { color: var(--down); }

.banner { border-radius: 10px; padding: 11px 14px; font-size: 13px; border: 1px solid; }
.banner.live { background: var(--up-bg); border-color: rgba(31,199,126,.35); }
.banner.pre, .banner.next { background: var(--accent-bg); border-color: rgba(76,141,255,.35); }
.banner.warn { background: var(--warn-bg); border-color: rgba(245,185,59,.35); color: #f0d493; }

/* KPIs */
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.kpi .l { color: var(--muted); font-size: 12px; }
.kpi .v { font-size: 22px; font-weight: 700; margin-top: 2px; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* pick cards */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.pick { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color .15s; }
.pick:hover { border-color: var(--accent); }
.pick .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pick .sym { font-size: 17px; font-weight: 700; }
.pick .sec { color: var(--muted); font-size: 12px; }
.pick .px { text-align: right; font-weight: 600; }
.prob { display: flex; align-items: center; gap: 10px; }
.prob .pv { font-size: 24px; font-weight: 800; color: var(--up); min-width: 64px; }
.prob .bar { flex: 1; height: 8px; background: var(--panel2); border-radius: 5px; position: relative; overflow: visible; }
.prob .bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--up); border-radius: 5px; }
.prob .bar i { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--muted); }
.why { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.why li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--line); }
.why li:first-child { border-top: 0; }
.plan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--muted); }
.plan div { background: var(--panel2); border-radius: 8px; padding: 6px 2px; }
.plan b { display: block; color: var(--text); font-size: 13px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 12px; background: var(--panel2); color: var(--muted); }
.badge.g { background: var(--up-bg); color: var(--up); } .badge.r { background: var(--down-bg); color: var(--down); } .badge.y { background: var(--warn-bg); color: var(--warn); }

/* tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--panel); }
td.r, th.r { text-align: right; }
tbody tr { cursor: pointer; } tbody tr:hover td { background: var(--panel2); }
.search { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 8px; width: 220px; outline: none; }

/* sector bars */
.sbar { display: grid; grid-template-columns: 120px 1fr 60px; gap: 10px; align-items: center; font-size: 12.5px; margin: 6px 0; }
.sbar .t { height: 8px; background: var(--panel2); border-radius: 4px; position: relative; }
.sbar .t::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--dim); }
.sbar .t span { position: absolute; top: 0; bottom: 0; border-radius: 4px; }

/* month compare bars */
.mbars { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 10px; }
.mb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mb .pair { display: flex; align-items: flex-end; gap: 3px; height: 130px; width: 100%; justify-content: center; }
.mb .pair span { width: 40%; max-width: 22px; border-radius: 4px 4px 0 0; }
.mb small { color: var(--muted); font-size: 11px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* forms */
.form { display: grid; gap: 14px; max-width: 520px; }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.form input { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 11px 12px; border-radius: 8px; font-size: 14px; outline: none; }
.form input:focus { border-color: var(--accent); }
.steps { margin: 0; padding-left: 20px; color: var(--muted); } .steps li { margin: 6px 0; }
.msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.msg.ok { background: var(--up-bg); color: var(--up); } .msg.err { background: var(--down-bg); color: var(--down); }

/* loader */
.loader { text-align: center; padding: 50px 20px; color: var(--muted); }
.pbar { height: 6px; background: var(--panel2); border-radius: 4px; max-width: 360px; margin: 14px auto 0; overflow: hidden; }
.pbar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.spin { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp 1s linear infinite; margin: 0 auto 12px; }
@keyframes sp { to { transform: rotate(360deg); } }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: flex-start; justify-content: center; padding: 30px 16px; z-index: 50; overflow-y: auto; }
.modal.open { display: flex; }
.modal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 980px; padding: 20px; }
.modal .x { float: right; background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; }
#chart { height: 380px; margin-top: 10px; }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.news-list a { color: var(--text); text-decoration: none; } .news-list a:hover { color: var(--accent); }

.foot { color: var(--dim); font-size: 12px; margin-top: 30px; text-align: center; }

@media (max-width: 900px) {
  .g2, .g3 { grid-template-columns: 1fr; } .g5 { grid-template-columns: repeat(2, 1fr); }
  .top { gap: 10px; padding: 0 12px; } .brand span { display: none; }
  .picks { grid-template-columns: 1fr; }
}

/* chips (index filter / tabs) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 6px 13px; border-radius: 20px; font-size: 12.5px; }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* market forecast range */
.range .rbar { height: 10px; background: var(--panel2); border-radius: 6px; position: relative; }
.range .rbar span { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(240,82,90,.55), rgba(31,199,126,.55)); border-radius: 6px; }
.range .rbar i { position: absolute; top: -5px; width: 3px; height: 20px; background: #fff; border-radius: 2px; transform: translateX(-1px); }
.range .rbar em { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--dim); }
.range .rlbl { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; text-align: center; }
.range .rlbl span:first-child { text-align: left; } .range .rlbl span:last-child { text-align: right; }
.legend span { white-space: nowrap; }

/* paper trading */
input.mini { width: 84px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 5px 7px; border-radius: 6px; text-align: right; font: inherit; font-size: 12.5px; }
.form select.sel, select.sel { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 11px 10px; border-radius: 8px; font: inherit; }
.pick .btn.pbuy { padding: 6px 12px; font-size: 12.5px; }

/* A-grade */
.grade { display: inline-block; min-width: 26px; text-align: center; font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 6px; vertical-align: 2px; }
.grade.g-a { background: var(--up); color: #062; } .grade.g-p { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }
.grade.g-b { background: var(--warn-bg); color: var(--warn); } .grade.g-c { background: var(--down-bg); color: var(--down); }
.checks { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.checks li { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-top: 1px dashed var(--line); }
.checks li:first-child { border-top: 0; }
.checks li .muted { font-size: 11.5px; padding-left: 22px; }
.newsline { display: flex; flex-direction: column; gap: 4px; font-size: 12px; background: var(--panel2); border-radius: 8px; padding: 8px 10px; }
.newsline a { color: var(--text); text-decoration: none; } .newsline a:hover { color: var(--accent); }
details.card summary { cursor: pointer; }

/* macro */
.macro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.macro-item { background: var(--panel2); border-radius: 10px; padding: 10px 12px; font-size: 13px; }

/* 🏆 best trades */
.pick.best { gap: 10px; }
.pick.best.v-best { border-color: var(--up); box-shadow: 0 0 0 1px rgba(31,199,126,.25); }
.pick.best.v-ok { border-color: rgba(245,185,59,.6); }
.pick.best.v-skip { opacity: .8; }
.vbadge { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 7px; letter-spacing: .3px; }
.vbadge.v-best { background: var(--up); color: #04220f; } .vbadge.v-ok { background: var(--warn-bg); color: var(--warn); }
.vbadge.v-wait { background: var(--accent-bg); color: var(--accent); } .vbadge.v-skip { background: var(--down-bg); color: var(--down); }
.pbars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.pbar-row { display: grid; grid-template-columns: 48px 1fr 26px; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); }
.pbar-row .pb { height: 6px; background: var(--panel2); border-radius: 4px; overflow: hidden; } .pbar-row .pb span { display: block; height: 100%; }
.pbar-row b { color: var(--text); text-align: right; }
.step { border-top: 1px dashed var(--line); padding-top: 7px; }
.step-h { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.step-l { font-size: 12px; color: var(--muted); padding-left: 22px; line-height: 1.45; }
.stopbox { background: var(--down-bg); color: #f7b3b6; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }

/* options P&L */
select.mini2 { padding: 5px 6px; font-size: 12.5px; }
tr.zero td { background: var(--panel2); }
#greekHelp summary { cursor: pointer; }