:root {
  color-scheme: dark;
  --bg: #080a0f;
  --panel: #0e121a;
  --panel-2: #121722;
  --line: #242b38;
  --muted: #838da0;
  --text: #edf0f5;
  --blue: #55a8ff;
  --amber: #f0b75d;
  --red: #ee6964;
  --green: #35b6a7;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; }
body { padding-bottom: 36px; }
button { color: inherit; font: inherit; }
a { color: inherit; }
.page-header { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 max(20px, calc((100vw - 1380px) / 2)); border-bottom: 1px solid var(--line); background: rgba(10,13,19,.94); backdrop-filter: blur(14px); }
.brand { min-width: 230px; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #9b723a; border-radius: 9px; color: var(--amber); background: #211a12; font-family: serif; font-size: 20px; }
.brand strong, .brand small { display: block; }.brand strong { letter-spacing: .04em; }.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
nav { flex: 1; display: flex; gap: 8px; } nav a { padding: 8px 12px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 12px; } nav a:hover, nav a.active { color: #fff; background: #202838; }
#refresh { height: 34px; padding: 0 14px; border: 1px solid #416e9e; border-radius: 6px; background: #173251; cursor: pointer; } #refresh:hover { background: #1d426b; } #refresh:disabled { opacity: .55; cursor: wait; }
main { width: min(1380px, calc(100% - 40px)); margin: 0 auto; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; padding: 42px 2px 24px; }.eyebrow { margin: 0 0 7px; color: #6788ad; font-size: 10px; letter-spacing: .18em; }.hero h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 650; }.cutoff { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.health { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.health i { width: 8px; height: 8px; border-radius: 50%; background: #596274; }.health.ready i { background: var(--green); box-shadow: 0 0 9px rgba(53,182,167,.45); }.health.loading i { background: var(--amber); }.health.error i { background: var(--red); }
.market-timing { display: grid; grid-template-columns: minmax(0, 1fr) 330px; margin-bottom: 18px; overflow: hidden; border: 1px solid #323a48; border-radius: 12px; background: linear-gradient(135deg, #111722, #0d1118); }
.market-timing.waiting { border-color: #55412b; background: linear-gradient(135deg, #1b1711, #0d1118 58%); }.market-timing.stabilizing { border-color: #315c78; background: linear-gradient(135deg, #111d29, #0d1118 58%); }.market-timing.entry_ready { border-color: #28786e; background: linear-gradient(135deg, #10251f, #0d1118 58%); }
.market-main { padding: 23px 24px; }.market-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.market-kicker { margin: 0 0 8px; color: #738195; font-size: 10px; letter-spacing: .08em; }.market-state-line { display: flex; align-items: center; gap: 10px; }.market-state-line > strong { font-size: 25px; }.ai-gate { padding: 5px 8px; border: 1px solid #5b4930; border-radius: 5px; color: #c3a36e; background: #211b12; font-size: 10px; }.ai-gate.allowed { border-color: #28786e; color: #66d2c2; background: #102925; }
.market-price { text-align: right; }.market-price strong { display: block; font: 650 30px/1 ui-monospace, monospace; }.market-price span { display: block; margin-top: 8px; font: 12px ui-monospace, monospace; }.market-reason { margin: 18px 0 0; color: #d9dee7; font-size: 14px; line-height: 1.65; }.market-action { margin: 5px 0 18px; color: #8f9bad; font-size: 11px; }
.market-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }.mini-chart-card { display: block; padding: 12px 12px 7px; border: 1px solid #29313e; border-radius: 8px; background: rgba(6,9,14,.56); text-decoration: none; }.mini-chart-card:hover { border-color: #496680; background: rgba(12,19,28,.72); }.mini-chart-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 3px 6px; }.mini-chart-card strong { font-size: 11px; }.mini-chart-card span { color: #687589; font-size: 9px; }.mini-chart { display: block; width: 100%; height: auto; min-height: 150px; overflow: visible; }.chart-grid { stroke: #202833; stroke-width: 1; vector-effect: non-scaling-stroke; }.chart-axis, .chart-time, .chart-empty { fill: #596579; font: 9px ui-monospace, monospace; }.chart-price-line { fill: none; stroke: #728199; stroke-width: 1.15; opacity: .72; vector-effect: non-scaling-stroke; }.chart-stroke { stroke: #d7a652; stroke-width: 2.1; vector-effect: non-scaling-stroke; }.chart-stroke.candidate { stroke-dasharray: 5 4; opacity: .88; }.chart-level { stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; vector-effect: non-scaling-stroke; }.chart-level.support { stroke: #4c9ed7; }.chart-level.invalidation { stroke: #4eb0a3; }.chart-level.recovery { stroke: #d9a957; }.chart-level.confirmation { stroke: #d86c67; }.chart-level-label { font: 8px ui-monospace, monospace; }.chart-level-label.support { fill: #67aede; }.chart-level-label.invalidation { fill: #63b9ae; }.chart-level-label.recovery { fill: #e0b66c; }.chart-level-label.confirmation { fill: #e27d78; }.chart-current { stroke: #f0b75d; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }.chart-current-dot { fill: #f0b75d; }.chart-current-label { fill: #f0c476; font: 9px ui-monospace, monospace; }
.market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.market-grid article { padding: 13px 14px; border: 1px solid #27303d; border-radius: 8px; background: rgba(7,10,15,.46); }.market-grid span, .market-grid small { display: block; color: #6f7a8d; font-size: 9px; }.market-grid strong { display: block; margin: 7px 0 5px; font: 600 15px/1 ui-monospace, monospace; }.market-side { padding: 20px; border-left: 1px solid #29313e; background: rgba(7,10,15,.4); }.market-side-head, .market-event-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.market-side-head strong { font-size: 12px; }.market-side-head span { color: #687488; font-size: 9px; }.sector-leaders { display: grid; gap: 7px; margin-top: 13px; }.sector-leaders > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 8px 10px; border: 1px solid #242c38; border-radius: 6px; background: #10151d; }.sector-leaders strong { color: #cbd2dd; font-size: 11px; }.sector-leaders span { color: var(--amber); font: 11px ui-monospace, monospace; }.sector-leaders small { grid-column: 1 / -1; color: #677285; font-size: 9px; }.sector-leaders p { color: var(--muted); font-size: 10px; }.market-event-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid #242b37; color: #697487; font-size: 9px; }.market-event-note strong { color: #aeb7c4; font-weight: 500; }
.notice { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid #4b3b25; border-radius: 10px; background: linear-gradient(100deg, #1c1710, #11151c); }.notice-number { min-width: 42px; color: var(--amber); font: 600 34px/1 ui-monospace, monospace; }.notice strong { font-size: 14px; }.notice p { margin: 5px 0 0; color: #a79c8b; font-size: 12px; line-height: 1.6; }
.summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }.summary article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }.summary span { display: block; color: var(--muted); font-size: 11px; }.summary strong { display: block; margin-top: 7px; font: 600 24px/1 ui-monospace, monospace; }
.board { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 19px 20px; border-bottom: 1px solid var(--line); }.board-head h2 { margin: 0; font-size: 17px; }.board-head p { max-width: 700px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.tabs { display: flex; gap: 6px; }.tabs button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #10141c; cursor: pointer; white-space: nowrap; font-size: 11px; }.tabs button.active { border-color: #426d9c; color: #fff; background: #18304c; }.tabs b { margin-left: 4px; color: #c4cfdd; font-weight: 500; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th { padding: 10px 12px; color: #6f798c; background: #0b0f16; text-align: left; font-weight: 500; white-space: nowrap; } td { padding: 12px; border-top: 1px solid #1c222d; color: #bdc4d0; vertical-align: middle; white-space: nowrap; } tbody tr:hover { background: #121925; }.stock { display: block; color: #f1f3f6; text-decoration: none; font-size: 13px; }.stock:hover { color: var(--blue); }.stock small { margin-left: 5px; color: #7d8798; font: 10px ui-monospace, monospace; }.market { display: block; margin-top: 4px; color: #626c7d; font-size: 9px; }.number { font-variant-numeric: tabular-nums; }.up { color: #ef7773; }.down { color: #43b7a9; }.badge { display: inline-block; padding: 4px 7px; border: 1px solid; border-radius: 5px; font-size: 10px; }.badge.setup_ready { border-color: #3e6d9c; color: #82baff; background: #10243a; }.badge.momentum_wait { border-color: #78602f; color: #e7b85c; background: #2a2110; }.badge.overheated { border-color: #7d3e3e; color: #ef8883; background: #2c1517; }.central-status { display: block; margin-top: 4px; color: #616b7d; font-size: 9px; }.action { color: #aab4c2; }.empty { padding: 60px 20px; color: var(--muted); text-align: center; }.error { margin: 14px 20px 0; padding: 12px; border: 1px solid #743d3d; border-radius: 6px; color: #efaaa6; background: #281516; font-size: 12px; }
.selection-time small { display: block; margin-top: 4px; color: #616b7d; font-size: 9px; }.event-board { margin-top: 18px; }.badge.event-selected { border-color: #4c626f; color: #a9c1cf; background: #152029; }.badge.event-triggered { border-color: #8a682e; color: #f0c36d; background: #2a2110; }.badge.event-confirmed { border-color: #28786e; color: #64d0c1; background: #102925; }.badge.event-invalidated { border-color: #844343; color: #ef8e89; background: #2c1517; }.badge.event-expired { border-color: #555c69; color: #969fad; background: #1a1e26; }.event-reason { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }.event-board .board-head { align-items: center; }
.badge.sector-sector_resonance { border-color: #9a6b2e; color: #f4c66f; background: #2b2110; }.badge.sector-sector_strong { border-color: #7a6132; color: #dec080; background: #251f14; }.badge.sector-sector_heating { border-color: #9b4d3d; color: #f09582; background: #2b1815; }.badge.sector-sector_cooling { border-color: #396b68; color: #76bbb4; background: #102523; }.badge.sector-sector_mixed, .badge.sector-independent { border-color: #4c586b; color: #a5afbe; background: #171d27; }.sector-detail, .plan-detail, .plan-invalid { display: block; margin-top: 5px; color: #737e90; font-size: 9px; line-height: 1.45; white-space: normal; }.plan-title { display: block; max-width: 250px; color: #d8dee8; font-size: 11px; white-space: normal; }.plan-detail { max-width: 300px; color: #9ba7b8; }.plan-invalid { max-width: 300px; color: #9a6d6c; }
.candidate-board { margin-top: 18px; }.badge.intraday-direct_launch, .badge.event-direct-launch { border-color: #7b4ab3; color: #d6a7ff; background: #241333; }.badge.intraday-confirmed { border-color: #28786e; color: #64d0c1; background: #102925; }.badge.intraday-triggered { border-color: #8a682e; color: #f0c36d; background: #2a2110; }.badge.intraday-minute_alert, .badge.event-minute-alert { border-color: #9b762c; color: #ffd67b; background: #30230d; }.badge.intraday-watching, .badge.intraday-data_wait { border-color: #3e6d9c; color: #82baff; background: #10243a; }.badge.intraday-invalidated { border-color: #844343; color: #ef8e89; background: #2c1517; }.badge.intraday-expired, .badge.intraday-excluded { border-color: #555c69; color: #969fad; background: #1a1e26; }.intraday-reason { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }.structure-link { color: var(--blue); text-decoration: none; }.structure-link:hover { text-decoration: underline; }
.board footer { display: flex; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--line); color: #687284; font-size: 10px; }
@media (max-width: 980px) { .page-header { padding: 0 14px; gap: 10px; }.brand { min-width: 0; flex: 1; }.page-header nav { display: none; } main { width: calc(100% - 24px); }.market-timing { grid-template-columns: 1fr; }.market-side { border-top: 1px solid #29313e; border-left: 0; }.summary { grid-template-columns: repeat(3, 1fr); }.board-head { align-items: flex-start; flex-direction: column; }.tabs { width: 100%; overflow-x: auto; }.hero { padding-top: 28px; } }
@media (max-width: 640px) { .brand small { display: none; } #refresh { padding: 0 10px; font-size: 11px; }.market-main { padding: 18px; }.market-state-head { flex-direction: column; }.market-price { text-align: left; }.market-charts { grid-template-columns: 1fr; }.mini-chart-card > div { align-items: flex-start; flex-direction: column; gap: 3px; }.market-grid { grid-template-columns: repeat(2, 1fr); }.market-state-line { align-items: flex-start; flex-direction: column; }.summary { grid-template-columns: repeat(2, 1fr); }.summary article:first-child { grid-column: span 2; }.notice { align-items: flex-start; }.table-wrap { overflow: visible; } table, tbody { display: block; } thead { display: none; } tr { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 14px; border-top: 1px solid var(--line); } td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 5px; border: 0; white-space: normal; } td::before { content: attr(data-label); color: #626c7d; font-size: 10px; } td:first-child, td:last-child { grid-column: 1 / -1; }.stock, .market, .central-status { text-align: right; }.board footer { gap: 10px; flex-direction: column; }.hero { align-items: flex-start; gap: 16px; flex-direction: column; } }