:root {
  --bg: #0a0d13;
  --bg2: #0f141c;
  --card: #131a24;
  --card2: #172030;
  --line: #222c3c;
  --text: #dfe7f2;
  --muted: #8394aa;
  --up: #f04b4b;
  --down: #21b573;
  --red: #ef4444;
  --amber: #f59e0b;
  --yellow: #eab308;
  --green: #22c55e;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 85% -10%, #16233a 0%, transparent 60%),
    radial-gradient(700px 400px at 0% 100%, #151b2b 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
}

main { max-width: 1320px; margin: 0 auto; padding: 18px 22px 40px; }

/* header */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  background: rgba(10, 13, 19, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #2a5bd7, #7c3aed);
  font-weight: 800; font-size: 18px; color: #fff;
  box-shadow: 0 4px 18px rgba(80, 110, 255, .35);
}
.title { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.sub { font-size: 11.5px; color: var(--muted); }
.meta { display: flex; align-items: center; gap: 10px; }
.clock { font-family: var(--mono); font-size: 13px; color: #b8c7dc; }
.badge {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #111722;
  white-space: nowrap;
}
.badge.live { color: #7ee2a8; border-color: #1f5c3c; background: #0d2419; }
.badge.off { color: #f3a3a3; border-color: #5c2323; background: #241010; }
.ghost {
  font: inherit; font-size: 12px; color: var(--muted);
  background: transparent; border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.ghost:hover { color: var(--text); border-color: #3a4a63; }

/* cards */
.card {
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
}

/* verdict */
.verdict {
  display: grid;
  grid-template-columns: 84px 1fr 260px;
  gap: 22px;
  align-items: center;
  margin: 6px 0 24px;
  position: relative;
  overflow: hidden;
}
.verdict::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 160px at 4% 50%, rgba(255,255,255,.05), transparent 70%);
  pointer-events: none;
}
.light { display: grid; place-items: center; }
.light span {
  width: 58px; height: 58px; border-radius: 50%;
  background: #2a3446;
  box-shadow: 0 0 0 6px rgba(255,255,255,.03);
  transition: all .35s ease;
}
.light.green span { background: var(--green); box-shadow: 0 0 26px rgba(34,197,94,.55), 0 0 0 6px rgba(34,197,94,.12); }
.light.yellow span { background: var(--yellow); box-shadow: 0 0 26px rgba(234,179,8,.55), 0 0 0 6px rgba(234,179,8,.12); }
.light.amber span { background: var(--amber); box-shadow: 0 0 26px rgba(245,158,11,.6), 0 0 0 6px rgba(245,158,11,.14); }
.light.red span { background: var(--red); box-shadow: 0 0 30px rgba(239,68,68,.65), 0 0 0 6px rgba(239,68,68,.15); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.eyebrow { font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.verdict-main h1 { margin: 4px 0 6px; font-size: 30px; letter-spacing: 1px; }
.verdict-main p { margin: 0; color: #b9c7d9; }
.risk { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.risk li { font-size: 12px; color: var(--muted); }
.risk li::before { content: "·"; margin-right: 6px; color: #4a5a72; }

.gap {
  border-left: 1px solid var(--line);
  padding-left: 20px;
  text-align: right;
}
.gap-value { font-family: var(--mono); font-size: 30px; font-weight: 700; margin: 2px 0; }
.gap-formula { font-size: 11px; color: var(--muted); line-height: 1.6; }

/* auction */
.auction { margin-bottom: 22px; }
.auction-grid { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.field input {
  font: inherit; color: var(--text); background: #0c111a;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; width: 150px; outline: none;
}
.field.wide input { width: 100%; }
.field input:focus { border-color: #3b5bdb; }
.auction-read { font-size: 14px; color: #b9c7d9; }
.auction-read b { font-family: var(--mono); font-size: 20px; }
.auction-note { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.auction-note.hot { color: #f3a3a3; }
.auction-note.cool { color: #7ee2a8; }

/* sections */
section { margin-bottom: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
h2 { font-size: 15px; margin: 0; letter-spacing: .5px; }
.hint { font-size: 11.5px; color: var(--muted); }

/* strips */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  position: relative;
  overflow: hidden;
}
.tile .name { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .price { font-family: var(--mono); font-size: 20px; font-weight: 700; margin: 3px 0 1px; }
.tile .pct { font-family: var(--mono); font-size: 13px; }
.tile .foot { font-size: 10.5px; color: #61728a; margin-top: 4px; }
.tile.ma-below { border-color: #4a2020; }
.tile.ma-above { border-color: #1f4433; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }

/* ETF table */
.table-wrap {
  border: 1px solid var(--line); border-radius: 14px; overflow: auto;
  background: var(--card);
}
table.etf { width: 100%; border-collapse: collapse; min-width: 720px; }
table.etf th {
  text-align: left; font-size: 11px; font-weight: 500; color: var(--muted);
  padding: 11px 14px; border-bottom: 1px solid var(--line); letter-spacing: 1px;
}
table.etf td { padding: 10px 14px; border-bottom: 1px solid #1a2230; font-size: 13px; }
table.etf tr:last-child td { border-bottom: 0; }
table.etf tr:hover td { background: #161e2b; }
.num { text-align: right; font-family: var(--mono); }
.prem {
  display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end;
  font-family: var(--mono); font-weight: 700;
}
.prem-bar { width: 64px; height: 5px; border-radius: 3px; background: #1c2634; overflow: hidden; }
.prem-bar i { display: block; height: 100%; border-radius: 3px; }
.pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.pill.red { color: #ffb4b4; background: #331414; border-color: #5c2323; }
.pill.amber { color: #ffd39b; background: #33230f; border-color: #6b4515; }
.pill.yellow { color: #f5e79b; background: #2f2a0d; border-color: #5e5416; }
.pill.green { color: #9be7b8; background: #0f2a1b; border-color: #1f5c3c; }
.group-row td { background: #10161f; color: #6f8199; font-size: 11px; letter-spacing: 2px; padding: 7px 14px; }

/* rules */
.rules { display: flex; flex-direction: column; gap: 10px; }
.rule {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 12px;
  padding: 14px 16px;
}
.rule.red { border-left-color: var(--red); }
.rule.amber { border-left-color: var(--amber); }
.rule.yellow { border-left-color: var(--yellow); }
.rule.green { border-left-color: var(--green); }
.rule-head { display: flex; align-items: center; gap: 10px; }
.rule-id { font-family: var(--mono); font-size: 11px; color: #5f7288; }
.rule-title { font-weight: 600; font-size: 14px; }
.rule-detail { color: #a9b8cb; font-size: 13px; margin: 6px 0 4px; }
.rule-action { font-size: 13px; color: #d6e0ee; }
.rule-action::before { content: "→ "; color: #5b6d86; }
.cites { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed #202a39; }
.cites blockquote { margin: 0 0 4px; font-size: 12px; color: #8b9cb2; }
.cites blockquote:last-child { margin-bottom: 0; }
.cites .when { font-family: var(--mono); font-size: 11px; color: #5d6f88; margin-left: 6px; }

/* archive */
.archive { margin-top: 8px; }
.archive-grid { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.primary {
  font: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(145deg, #2a5bd7, #4f46e5);
  border: 0; border-radius: 9px; padding: 9px 20px; cursor: pointer;
}
.primary:hover { filter: brightness(1.1); }
.history { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.history .row {
  display: flex; gap: 12px; font-size: 12px; color: var(--muted);
  padding: 7px 10px; border-radius: 8px; background: #0e141d;
}
.history .row b { color: #c8d4e4; font-weight: 500; }

/* buy signal */
.buy-card { margin: 0 0 24px; border-left: 3px solid var(--muted); }
.buy-card.buy-green { border-left-color: var(--green); box-shadow: 0 0 46px rgba(34, 197, 94, .13); }
.buy-card.buy-yellow { border-left-color: var(--yellow); }
.buy-card.buy-red { border-left-color: var(--red); }
.buy-head { display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center; }
.buy-light span {
  display: block; width: 44px; height: 44px; border-radius: 50%;
  background: #2a3446; box-shadow: 0 0 0 5px rgba(255, 255, 255, .03);
  transition: all .35s ease;
}
.buy-light.green span { background: var(--green); box-shadow: 0 0 24px rgba(34, 197, 94, .6), 0 0 0 5px rgba(34, 197, 94, .12); }
.buy-light.yellow span { background: var(--yellow); box-shadow: 0 0 24px rgba(234, 179, 8, .55), 0 0 0 5px rgba(234, 179, 8, .12); }
.buy-light.red span { background: var(--red); box-shadow: 0 0 28px rgba(239, 68, 68, .6), 0 0 0 5px rgba(239, 68, 68, .14); }
.buy-light.off span { background: #3a475c; }
.buy-main h2 { font-size: 23px; margin: 4px 0 6px; letter-spacing: .5px; }
.buy-main p { margin: 0; font-size: 13px; color: #b9c7d9; }
.premium-note { margin-top: 7px !important; font-size: 12px !important; color: #ffd39b !important; }
.buy-side { display: flex; gap: 26px; }
.buy-side div { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.buy-side b { font-size: 13px; font-weight: 600; color: var(--text); }
.gates { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.gate {
  font-size: 11.5px; color: var(--muted); padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: #0e141d;
}
.gate b { margin-left: 8px; font-weight: 500; color: #c8d4e4; }
.gate.ok { border-color: #1f5c3c; }
.gate.ok b { color: #9be7b8; }
.gate.no { border-color: #5c2323; }
.gate.no b { color: #ffb4b4; }
.triggers { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 10px; margin-bottom: 14px; align-items: start; }
.trg {
  background: #0e141d; border: 1px solid var(--line); border-left: 3px solid #33425a;
  border-radius: 10px; padding: 10px 12px;
}
.trg.fired { border-left-color: var(--green); }
.trg.near { border-left-color: var(--yellow); }
.trg.over { border-left-color: #6b5a2a; }
.trg-head { display: flex; align-items: center; gap: 8px; }
.trg-id { font-family: var(--mono); font-size: 10.5px; color: #5f7288; }
.trg-name { font-size: 13px; font-weight: 600; }
.trg-state {
  margin-left: auto; font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: #1a2331; color: var(--muted); white-space: nowrap;
}
.trg.fired .trg-state { background: #0f2a1b; color: #9be7b8; }
.trg.near .trg-state { background: #2f2a0d; color: #f5e79b; }
.trg-detail { margin: 6px 0 4px; font-size: 12px; color: #a9b8cb; }
.trg.compact { padding: 8px 12px; }
.trg.compact .trg-detail { margin: 2px 0 0; }
.trg-cites { font-size: 11px; color: #6f8199; line-height: 1.6; }
.trg-cites .when { margin-left: 4px; font-family: var(--mono); color: #5d6f88; }

/* buy map */
.map-card { margin: 0 0 26px; }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.map-head h2 { font-size: 18px; margin: 4px 0 4px; }
.map-sub { margin: 0; font-size: 12px; color: var(--muted); }
.field.amount { width: 130px; flex: 0 0 auto; }
.field.amount input { width: 100%; }
.map-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 10px; }
.map-tab {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: #0e141d; border: 1px solid var(--line); border-radius: 11px; padding: 8px 12px;
}
.map-tab:hover { border-color: #3a4a63; }
.map-tab.on { border-color: #3b5bdb; background: #111a2b; box-shadow: inset 0 0 0 1px rgba(59, 91, 219, .35); }
.map-tab b { font-size: 13px; white-space: nowrap; }
.tab-code { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tab-flag { margin-top: 4px; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: #7f91a8; }
.tab-flag.hit { color: #9be7b8; }
.tab-flag.best { color: #9be7b8; }
.tab-flag.no { color: #ffb4b4; }
.map-tab.blocked { opacity: .55; }

.map-panel { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #0d131b; }
.map-sum { display: flex; gap: 28px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid #1a2230; }
.map-sum div { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.map-sum b { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); }
.map-note { margin: 10px 0 0; font-size: 12px; color: #ffd39b; }
.map-pick { margin-top: 10px; font-size: 11px; color: #6f8199; line-height: 1.6; }
.map-pick .when { margin-left: 5px; font-family: var(--mono); color: #5d6f88; }

.levels { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lv {
  display: grid; grid-template-columns: 122px 1fr 118px auto; gap: 14px; align-items: center;
  background: #10161f; border: 1px solid var(--line); border-left: 3px solid #33425a;
  border-radius: 10px; padding: 10px 12px;
}
.lv.hit { border-left-color: var(--green); background: #0e1a15; }
.lv.near { border-left-color: var(--yellow); }
.lv.locked { opacity: .55; }
.lv-price { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.lv-price span { display: block; font-family: inherit; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.lv-why { font-size: 12px; color: #a9b8cb; }
.lv-cites { margin-top: 4px; }
.lv-q {
  font: inherit; font-size: 11px; color: #6f8199; cursor: pointer;
  background: transparent; border: 0; padding: 0;
}
.lv-q::before { content: "▸ "; }
.lv-q.open::before { content: "▾ "; }
.lv-q:hover { color: #b8c7dc; }
.lv-cites blockquote { margin: 5px 0 0; font-size: 11px; color: #6f8199; line-height: 1.6; }
.lv-cites .when { margin-left: 5px; font-family: var(--mono); color: #5d6f88; }
.lv-meta { font-size: 11.5px; color: #8b9cb2; text-align: right; }
.lv-meta i { display: block; font-style: normal; color: #5f7288; margin-top: 2px; }
.lv-side { display: flex; align-items: center; gap: 10px; }
.lv-state {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: #1a2331; color: var(--muted);
}
.lv.hit .lv-state { background: #0f2a1b; color: #9be7b8; }
.lv.near .lv-state { background: #2f2a0d; color: #f5e79b; }
.lv-add {
  font: inherit; font-size: 11.5px; color: #b8c7dc; cursor: pointer; white-space: nowrap;
  background: #151f2e; border: 1px solid #2b3a52; border-radius: 8px; padding: 5px 10px;
}
.lv-add:hover { color: #fff; border-color: #3b5bdb; }
.lv-add.added { color: #9be7b8; border-color: #1f5c3c; }
.crossed { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 10px; font-size: 11px; color: #6f8199; }
.crossed b { font-family: var(--mono); font-weight: 600; color: #93a4ba; text-decoration: line-through; }

.plan-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 8px; }.plan-head h3 { margin: 0; font-size: 13px; letter-spacing: .5px; }
.plan-list { display: flex; flex-direction: column; gap: 6px; }
.plan-row {
  display: grid; grid-template-columns: 22px 1fr 92px 150px 24px; gap: 10px; align-items: center;
  background: #10161f; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font-size: 12.5px;
}
.plan-row.reached { border-color: #1f5c3c; }
.plan-row.done { opacity: .45; }
.plan-row.done .pr-name { text-decoration: line-through; }
.pr-check input { accent-color: var(--green); cursor: pointer; }
.pr-name b { font-weight: 600; }
.pr-name span { color: var(--muted); margin-left: 6px; }
.pr-price { font-family: var(--mono); text-align: right; }
.pr-price i { display: block; font-style: normal; font-size: 10.5px; color: #7ee2a8; }
.pr-amt { font-family: var(--mono); color: var(--muted); text-align: right; }
.pr-del { background: transparent; border: 0; color: #5f7288; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.pr-del:hover { color: #ffb4b4; }
.plan-empty { font-size: 12px; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 9px; }

footer {
  max-width: 1320px; margin: 0 auto; padding: 0 22px 30px;
  font-size: 11.5px; color: #5b6b82; line-height: 1.8;
}

.hidden { display: none !important; }

@media (max-width: 900px) {
  .verdict { grid-template-columns: 64px 1fr; }
  .gap { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; text-align: left; }
  .verdict-main h1 { font-size: 24px; }
  .buy-head { grid-template-columns: 44px 1fr; gap: 14px; }
  .buy-side { grid-column: 1 / -1; gap: 20px; }
  .buy-main h2 { font-size: 19px; }
  .clock { display: none; }
  .field.amount { width: 100%; }
  .field.amount input { width: 150px; }
  .lv { grid-template-columns: 1fr auto; gap: 7px 12px; }
  .lv-price { grid-column: 1; grid-row: 1; }
  .lv-side { grid-column: 2; grid-row: 1; justify-self: end; }
  .lv-why { grid-column: 1 / -1; }
  .lv-meta { grid-column: 1 / -1; display: flex; gap: 12px; text-align: left; }
  .lv-meta i { display: inline; margin: 0; }
  .plan-row { grid-template-columns: 22px 1fr 24px; row-gap: 2px; }
  .pr-check { grid-column: 1; grid-row: 1; }
  .pr-name { grid-column: 2; grid-row: 1; }
  .pr-del { grid-column: 3; grid-row: 1; }
  .pr-price { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  .pr-amt { grid-column: 2 / 4; grid-row: 3; text-align: left; white-space: normal; }
}

@media (max-width: 560px) {
  .sub { display: none; }
  .top { padding: 12px 16px; }
  main { padding: 14px 12px 32px; }
}