/* ================= 基础变量与全局 ================= */
:root {
  --bg-0: #03060e;
  --bg-1: #071021;
  --bg-2: #0b1a33;
  --panel-bg: linear-gradient(160deg, rgba(13, 28, 54, .92), rgba(6, 14, 30, .96));
  --line: rgba(0, 229, 255, .22);
  --line-strong: rgba(0, 229, 255, .45);
  --cyan: #00e5ff;
  --cyan-dim: rgba(0, 229, 255, .68);
  --gold: #ffc53d;
  --gold-bright: #ffd97a;
  --green: #3ee6a0;
  --red: #ff6272;
  --violet: #8f7bff;
  --text-hi: #eef8ff;
  --text: #bcd8ec;
  --text-dim: #7fa0bd;
  --num-font: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  /* 与 #app 同款氛围渐变：视口比 16:9 扁时两侧留边区域与画面视觉融合（等比缩放保持不变形） */
  background:
    radial-gradient(1200px 600px at 50% -8%, rgba(0, 141, 190, .16), transparent 60%),
    radial-gradient(900px 500px at 8% 108%, rgba(0, 229, 255, .07), transparent 60%),
    radial-gradient(900px 500px at 94% 106%, rgba(255, 197, 61, .05), transparent 60%),
    var(--bg-0);
  overflow: hidden;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--text);
}

/* 1920x1080 设计稿，整体缩放适配 */
#app {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  background:
    radial-gradient(1200px 600px at 50% -8%, rgba(0, 141, 190, .16), transparent 60%),
    radial-gradient(900px 500px at 8% 108%, rgba(0, 229, 255, .07), transparent 60%),
    radial-gradient(900px 500px at 94% 106%, rgba(255, 197, 61, .05), transparent 60%),
    var(--bg-0);
}

.page { display: none; width: 100%; height: 100%; flex-direction: column; }
.page.active { display: flex; animation: pageIn .5s ease both; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ================= 通用面板 ================= */
.panel {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 0 24px rgba(0, 229, 255, .04), 0 4px 18px rgba(0, 0, 0, .35);
}
.panel::before, .panel::after,
.panel .corner-b::before, .panel .corner-b::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.panel::before { left: -1px; top: -1px; border-left: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.panel::after { right: -1px; top: -1px; border-right: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.panel .corner-b::before { left: -1px; bottom: -1px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.panel .corner-b::after { right: -1px; bottom: -1px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }

.panel-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 7px;
  border-bottom: 1px solid rgba(0, 229, 255, .14);
  background: linear-gradient(90deg, rgba(0, 229, 255, .08), transparent 65%);
  font-size: 16px; font-weight: 600; letter-spacing: 1px; color: var(--text-hi);
  flex: none;
}
.panel-hd .dot {
  width: 8px; height: 8px; background: var(--cyan); border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
}
.panel-hd .dot.gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.panel-hd em {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 400;
  letter-spacing: 2px; color: var(--text-dim); font-family: var(--num-font);
}
.panel-bd { flex: 1; min-height: 0; position: relative; }

.chart { width: 100%; height: 100%; }

/* ================= 数字滚动通用 ================= */
.num-roll { font-family: var(--num-font); font-variant-numeric: tabular-nums; }

/* 涨跌 */
.trend { display: inline-flex; align-items: center; gap: 3px; font-family: var(--num-font); font-size: 13px; }
.trend .arrow { font-size: 12px; }
.trend.up { color: var(--red); }
.trend.down { color: var(--green); }

/* ================= 子页头部 ================= */
.sub-header {
  flex: none; height: 66px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 26px;
  background: linear-gradient(180deg, rgba(10, 24, 48, .95), rgba(6, 13, 28, .88));
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sub-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), rgba(0,229,255,.05) 55%, var(--gold));
  opacity: .55;
}
.sub-title { font-size: 26px; font-weight: 700; letter-spacing: 2px; color: var(--text-hi); display: flex; align-items: center; gap: 14px; }
.sub-title em {
  font-style: normal; font-size: 15px; font-weight: 600; color: var(--gold-bright);
  border: 1px solid rgba(255, 197, 61, .55); border-radius: 4px;
  padding: 3px 10px; letter-spacing: 3px;
  background: rgba(255, 197, 61, .08);
  text-shadow: 0 0 8px rgba(255, 197, 61, .5);
}
.btn-back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 22px; font-size: 15px; letter-spacing: 2px; color: var(--cyan);
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: rgba(0, 229, 255, .08);
  transition: all .25s;
  cursor: pointer;
}
.btn-back:hover { background: rgba(0, 229, 255, .2); box-shadow: 0 0 14px rgba(0, 229, 255, .35); }
.btn-back span { font-family: var(--num-font); }

.sub-main { flex: 1; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ================= 子页通用表格 ================= */
.tbl-wrap { width: 100%; height: 100%; overflow: hidden; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 10px; text-align: left; white-space: nowrap;
  color: var(--cyan-dim); font-weight: 600; letter-spacing: 1px;
  background: rgba(7, 20, 40, .97);
  border-bottom: 1px solid var(--line);
}
table.tbl td {
  padding: 7px 10px; white-space: nowrap; color: var(--text);
  border-bottom: 1px solid rgba(0, 229, 255, .07);
  font-family: var(--num-font); font-size: 13.5px;
}
table.tbl td.txt { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
table.tbl tr:nth-child(even) td { background: rgba(0, 229, 255, .025); }
table.tbl tr:hover td { background: rgba(0, 229, 255, .07); }
table.tbl tr.hl td { background: rgba(255, 197, 61, .1); border-bottom-color: rgba(255, 197, 61, .35); }
table.tbl tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

.pill {
  display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px;
  border: 1px solid; line-height: 18px;
}
.pill.ok { color: var(--green); border-color: rgba(62, 230, 160, .5); background: rgba(62, 230, 160, .08); }
.pill.warn { color: var(--gold); border-color: rgba(255, 197, 61, .5); background: rgba(255, 197, 61, .08); }
.pill.info { color: var(--cyan); border-color: rgba(0, 229, 255, .5); background: rgba(0, 229, 255, .08); }
.pill.mut { color: var(--text-dim); border-color: rgba(127, 160, 189, .4); background: rgba(127, 160, 189, .07); }

/* ================= 通用动效 ================= */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes scanMove { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }

/* ================= 年份切换（2026 / 2027） ================= */
.ys-group {
  display: flex; padding: 3px; border-radius: 999px;
  background: rgba(4, 26, 48, .72);
  border: 1px solid rgba(0, 229, 255, .25);
  box-shadow: 0 0 12px rgba(0, 229, 255, .12), inset 0 0 10px rgba(0, 229, 255, .06);
}
.ov-header .ys-group { position: absolute; right: 236px; top: 50%; transform: translateY(-50%); z-index: 5; }
.sub-header .ys-group { margin-left: 26px; align-self: center; }
.ys-btn {
  appearance: none; border: 0; outline: none; background: transparent; cursor: pointer;
  color: #8fb4d0; font: 600 13px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 2px; padding: 8px 18px; border-radius: 999px;
  transition: all .22s;
}
.ys-btn:hover { color: #e8f7ff; text-shadow: 0 0 8px rgba(0, 229, 255, .5); }
.ys-btn.active {
  background: linear-gradient(135deg, #00e5ff, #00b3d7); color: #04121f;
  text-shadow: none; box-shadow: 0 0 14px rgba(0, 229, 255, .5);
}

/* ================= 全局提示条 / 错误兜底面板（data-check 防白屏） ================= */
.dc-toast {
  position: fixed; left: 50%; bottom: 42px; z-index: 10000;
  transform: translate(-50%, 12px);
  opacity: 0; pointer-events: none;
  max-width: 72vw; padding: 10px 22px;
  background: rgba(6, 16, 32, .95); border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--text-hi); font-size: 13px; letter-spacing: .5px; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 229, 255, .15);
  transition: opacity .3s, transform .3s;
}
.dc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dc-toast.error {
  border-color: rgba(255, 111, 111, .6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 111, 111, .2);
}

.dc-fatal-mask {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 8, 16, .78); backdrop-filter: blur(2px);
}
.dc-fatal {
  width: 460px; max-width: 86vw; padding: 20px 22px 18px;
  background: rgba(6, 16, 32, .97); border: 1px solid rgba(255, 111, 111, .55); border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6), 0 0 16px rgba(255, 111, 111, .12);
}
.dc-fatal-hd { font-size: 16px; font-weight: 700; color: #ffb4b4; letter-spacing: 1px; margin-bottom: 10px; }
.dc-fatal-msg { font-size: 13px; color: var(--text); line-height: 1.7; word-break: break-all; max-height: 40vh; overflow: auto; }
.dc-fatal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.dc-fatal-btn {
  appearance: none; cursor: pointer; border-radius: 4px; font-size: 13px; letter-spacing: 2px;
  padding: 8px 18px; border: 1px solid var(--line-strong);
  background: rgba(0, 229, 255, .08); color: var(--cyan); transition: all .2s;
  font-family: inherit;
}
.dc-fatal-btn:hover { background: rgba(0, 229, 255, .18); }
.dc-fatal-btn.primary {
  background: linear-gradient(135deg, #00e5ff, #00b3d7); color: #04121f;
  font-weight: 600; border-color: transparent;
  box-shadow: 0 0 12px rgba(0, 229, 255, .35);
}

/* ================= 构建版本水印（右下角，排查 CDN 旧缓存用） ================= */
.build-tag {
  position: absolute; right: 12px; bottom: 8px; z-index: 60;
  font-family: var(--num-font); font-size: 10px; letter-spacing: 1px;
  color: rgba(127, 160, 189, .55); pointer-events: none; user-select: none;
}