:root {
  color-scheme: dark;
  --bg: #07100e;
  --panel: #0b1714;
  --panel-2: #0e1e1a;
  --line: rgba(170, 216, 195, 0.13);
  --text: #edf7f2;
  --muted: #82a096;
  --mint: #4ee0a1;
  --blue: #5da7ff;
  --amber: #f1b84b;
  --rose: #ff6b7e;
  --danger: #ff7c7c;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }

/* Author styles such as `.empty-state { display: flex; }` otherwise override
   the browser's default presentation of the HTML `hidden` attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(78, 224, 161, 0.14), transparent 35%),
    radial-gradient(circle at 100% 20%, rgba(93, 167, 255, 0.07), transparent 28%),
    var(--bg);
  font-family: Inter, "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 34px 34px;
}

.shell { position: relative; width: min(1500px, 100%); margin: 0 auto; padding: 30px 32px 24px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.eyebrow { color: var(--mint); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .19em; }
h1 { margin: 8px 0 5px; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -.04em; }
.subtitle { margin: 0; color: var(--muted); font-size: 14px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.state-badge { display: flex; align-items: center; gap: 9px; min-width: 108px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(11,23,20,.78); color: var(--muted); font-size: 13px; }
.state-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(241,184,75,.1); }
.state-badge.ready span { background: var(--mint); box-shadow: 0 0 0 5px rgba(78,224,161,.1); }
.state-badge.error span { background: var(--danger); box-shadow: 0 0 0 5px rgba(255,124,124,.1); }
button, .exports a { border: 0; font: inherit; cursor: pointer; }
button.primary { padding: 11px 17px; border-radius: 10px; background: var(--mint); color: #062118; font-weight: 800; transition: transform .16s ease, filter .16s ease; }
button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
button.primary:disabled { opacity: .5; cursor: wait; transform: none; }
button.secondary { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: #c4d8ce; background: rgba(14,30,26,.9); font-size: 12px; font-weight: 700; }
button.secondary:hover { border-color: rgba(78,224,161,.5); color: var(--mint); }
button.secondary:disabled { opacity: .5; cursor: wait; }

.meta-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; margin: 30px 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); box-shadow: var(--shadow); }
.meta-strip > div { min-width: 0; padding: 13px 16px; background: rgba(11,23,20,.96); }
.meta-strip span, .metric span, .metric small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.meta-strip strong { display: block; overflow: hidden; margin-top: 5px; color: #d9e9e1; font: 650 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.metric { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(140deg, rgba(14,30,26,.98), rgba(9,20,17,.98)); }
.metric::after { content: ""; position: absolute; inset: auto -30px -45px auto; width: 115px; height: 90px; border-radius: 50%; filter: blur(28px); opacity: .16; background: currentColor; }
.metric strong { display: block; margin: 10px 0 8px; color: currentColor; font: 750 clamp(23px, 3vw, 34px)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.04em; }
.metric.institution { color: var(--mint); }
.metric.main-force { color: var(--blue); }
.metric.large { color: var(--amber); }
.metric.retail { color: var(--rose); }
/* Neutral default; app.js overrides inline with 涨红跌绿 per the sign. */
.metric.index { color: #789087; }
.metric.grey { color: #b18cff; }
/* The 机构 card carries a second caption line (当日最高 / 较最高差额). */
.metric small + small { margin-top: 3px; font-size: 10px; letter-spacing: 0; }

/* Readout rows.  These live inside the ECharts tooltip, which is pinned to the
   chart's top-right corner and shown at the latest minute by default, so the
   rules are deliberately unscoped rather than hung off a container class. */
.hud-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 6px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(170, 216, 195, .12); color: #d9e9e1; font-weight: 700; }
.hud-head span { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.hud-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-top: 3px; line-height: 1.5; }
.hud-key { display: flex; align-items: center; gap: 6px; color: #9db3a9; line-height: 1.5; }
.hud-key i { display: inline-block; width: 15px; height: 3px; border-radius: 2px; flex: none; }
.hud-row b { font-weight: 700; color: #edf7f2; }
.hud-row em { font-style: normal; margin-left: 6px; }
/* The value stacks: number on top, and for 机构 the distance from the
   session high right-aligned beneath it rather than alongside. */
.hud-val { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* Shown only when the index row falls back to an earlier closed bar. */
.hud-at { margin-left: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }
/* 机构 only: distance from the session high as it stood at that minute. */
.hud-gap { color: #45c993; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hud-gap.high { color: #ff6f77; }

.chart-panel { position: relative; margin-top: 14px; padding: 20px 20px 8px; border: 1px solid var(--line); border-radius: 15px; background: rgba(11,23,20,.96); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-head h2 { margin: 0; font-size: 17px; }
.panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.exports { display: flex; gap: 8px; }
.exports a { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: #b6cbc1; text-decoration: none; font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.exports a:hover { border-color: rgba(78,224,161,.5); color: var(--mint); }
#chart { width: 100%; height: min(56vh, 560px); min-height: 390px; }
.empty-state { position: absolute; inset: 86px 20px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); background: rgba(11,23,20,.8); backdrop-filter: blur(3px); }
.empty-state strong { margin-top: 16px; color: var(--text); font-size: 15px; }
.empty-state span { margin-top: 5px; font-size: 12px; }
.loader { width: 34px; height: 34px; border: 2px solid rgba(78,224,161,.15); border-top-color: var(--mint); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-banner { margin-top: 12px; padding: 11px 14px; border: 1px solid rgba(255,124,124,.26); border-radius: 10px; color: #ffb4b4; background: rgba(91,25,25,.22); font-size: 12px; }

.sector-panel { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(11,23,20,.96); box-shadow: var(--shadow); }
.sector-title-row { display: flex; align-items: center; gap: 11px; }
.sector-actions { display: flex; align-items: center; gap: 10px; }
.mini-state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(5,14,11,.52); font-size: 10px; }
.mini-state span { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.mini-state.ready span { background: var(--mint); box-shadow: 0 0 0 3px rgba(78,224,161,.09); }
.mini-state.error span { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,124,124,.09); }
.sector-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 12px; padding: 10px 12px; border: 1px solid rgba(170,216,195,.08); border-radius: 9px; color: #668278; background: rgba(5,14,11,.45); font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.sector-meta strong { margin-left: 5px; color: #a9beb4; font-weight: 600; }
.sector-loading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 220px; color: var(--muted); }
.sector-loading .loader { width: 28px; height: 28px; flex: 0 0 auto; }
.sector-loading strong, .sector-loading span { display: block; }
.sector-loading strong { color: var(--text); font-size: 13px; }
.sector-loading span { margin-top: 5px; font-size: 11px; }
.sector-error { margin-bottom: 12px; padding: 9px 11px; border: 1px solid rgba(255,124,124,.24); border-radius: 8px; color: #ffaaaa; background: rgba(91,25,25,.18); font-size: 11px; }
.sector-tables { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sector-table-card { min-width: 0; overflow: hidden; border: 1px solid rgba(170,216,195,.1); border-radius: 11px; background: rgba(5,14,11,.42); }
.sector-table-title { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid rgba(170,216,195,.08); }
.sector-table-title h3 { margin: 0; color: #dcebe4; font-size: 13px; }
.sector-table-title span { color: #668278; font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.table-scroll { max-height: 720px; overflow: auto; scrollbar-color: rgba(130,160,150,.28) transparent; }
.sector-table-card table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sector-table-card th { position: sticky; z-index: 1; top: 0; padding: 8px 10px; color: #607b70; background: #08130f; font-size: 10px; font-weight: 600; text-align: right; }
.sector-table-card th:nth-child(1) { width: 58px; text-align: center; }
.sector-table-card th:nth-child(2) { width: 35%; text-align: left; }
.sector-table-card td { height: 36px; padding: 7px 10px; border-top: 1px solid rgba(170,216,195,.055); color: #a8bdb3; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; white-space: nowrap; }
.sector-table-card tbody tr:hover td { background: rgba(78,224,161,.035); }
.sector-table-card td.ordinal { color: #516a60; text-align: center; }
.sector-table-card td.sector-name { overflow: hidden; color: #d7e6df; font-family: Inter, "Microsoft YaHei UI", "PingFang SC", sans-serif; font-weight: 600; text-align: left; text-overflow: ellipsis; }
.sector-table-card td.positive { color: #ff6f77; }
.sector-table-card td.negative { color: #45c993; }
.sector-table-card td.zero { color: #789087; }
.sector-health { padding: 11px 2px 0; overflow: hidden; color: #536c62; font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 14px 2px 0; color: #5f786e; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Replay control bar (history playback). Injected by app.js under the chart head. */
.replay-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; padding: 9px 0 3px; border-top: 1px solid var(--line); }
.replay-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.replay-field select { background: #0e1e1a; color: #d9e9e1; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; }
.replay-slider { flex: 1 1 200px; min-width: 160px; accent-color: #b18cff; cursor: pointer; }
.replay-cursor { font: 700 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: #d9e9e1; min-width: 42px; text-align: center; }
.replay-hint { color: var(--muted); font-size: 12px; }
button.secondary.on { border-color: rgba(177,140,255,.6); color: #b18cff; background: rgba(177,140,255,.08); }

@media (max-width: 880px) {
  .shell { padding: 22px 16px; }
  .topbar { align-items: stretch; flex-direction: column; }
  .top-actions { justify-content: space-between; }
  .meta-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .meta-strip > div:last-child { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sector-tables { grid-template-columns: 1fr; }
  .table-scroll { max-height: 580px; }
  #chart { height: 430px; min-height: 350px; }
  footer { flex-direction: column; gap: 5px; }
}

@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .sector-actions { width: 100%; justify-content: space-between; }
  .sector-title-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .sector-panel { padding: 16px 12px; }
  .sector-table-card th, .sector-table-card td { padding-right: 7px; padding-left: 7px; }
  .sector-table-card th:nth-child(1) { width: 46px; }
  .sector-table-card th:nth-child(2) { width: 31%; }
  #chart { height: 380px; }
}