/* 《多喜一家人》宣发作战指挥中心 · 设计系统
   视觉母题：海报的「深青丝绒幕布 + 红丝绒金穗 + 家和萬事兴金匾 + 黄色毛笔剧名」，片头的「年画红 + 团圆饭」。
   两套主题：stage（台上：电视大屏/手机，深色幕布）· playbill（台下：工作台，暖色戏单纸）。 */

@font-face { font-family: 'DuoxiCal'; src: url('/assets/fonts/MaShanZheng-sub.woff2') format('woff2'), url('/assets/fonts/MaShanZheng-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DuoxiNum'; src: url('/assets/fonts/barlow-condensed-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DuoxiNum'; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DuoxiNum'; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --f-cal: 'DuoxiCal', 'STKaiti', 'KaiTi', 'Kaiti SC', serif;
  --f-num: 'DuoxiNum', 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --f-ui: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;
  --r: 10px; --r-s: 6px;
  --lacquer: #8E1B1B; --lacquer-hi: #B3261E; --velvet-red: #5E0E12; --brass: #C99A3E; --brass-hi: #F2D28C;
}

/* 台上 · 深青丝绒幕布 */
.theme-stage {
  color-scheme: dark;
  --bg: #061a1c; --bg-2: #0a2427; --surface: #0E2A2D; --panel: rgba(8, 30, 33, 0.86); --panel-solid: #0F2D30; --panel-2: rgba(255, 255, 255, 0.035);
  --line: rgba(214, 171, 92, 0.30); --line-2: rgba(214, 171, 92, 0.16); --grid: rgba(255, 255, 255, 0.075);
  --ink: #F4EAD5; --ink-2: #C9C0AB; --ink-3: #8EA19E; --ink-4: #5E7471;
  --hero: #F7D88E; --hero-glow: rgba(242, 196, 92, 0.55);
  --c1: #BD8B28; --c2: #1A98AA; --c3: #D35A49; --c4: #9877DE; --c5: #3E9E6A; --muted-mark: #4C6462;
  --up: #FF5A4F; --down: #2DC28A; --ok: #34C38F; --warn: #F0B429; --crit: #FF4D4F;
  --hl: rgba(242, 196, 92, 0.13); --hl-line: rgba(242, 196, 92, 0.55);
}
/* 台下 · 戏单纸 */
.theme-playbill {
  color-scheme: light;
  --bg: #F3EDDF; --bg-2: #EDE5D2; --surface: #FBF6EA; --panel: #FFFCF5; --panel-solid: #FFFCF5; --panel-2: #F7F1E3;
  --line: #E3D7BD; --line-2: #EDE4D0; --grid: #ECE3D0;
  --ink: #2A1E14; --ink-2: #5C4D3D; --ink-3: #8C7D69; --ink-4: #B3A690;
  --hero: #8E1B1B; --hero-glow: transparent;
  --c1: #A8761A; --c2: #0B8DA3; --c3: #C2483A; --c4: #7A5CC9; --c5: #3F8550; --muted-mark: #C9BEA8;
  --up: #D93A2F; --down: #1E8E5E; --ok: #2E9D6E; --warn: #C98A12; --crit: #D93A2F;
  --hl: #FFF1C9; --hl-line: #E3B54A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-ui); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.num { font-family: var(--f-num); font-weight: 600; letter-spacing: 0.01em; }
.tnum { font-variant-numeric: tabular-nums; }
.cal { font-family: var(--f-cal); font-weight: 400; letter-spacing: 0.04em; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 平台 logo：官方图标原色，圆角保持一致 */
.plogo { display: inline-block; border-radius: 22%; object-fit: cover; flex: none; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); background: #fff; }

/* 金匾标题：红漆底 + 金边 + 毛笔字 */
.plaque { position: relative; display: inline-flex; align-items: center; gap: .5em; padding: .18em .9em .22em; color: var(--brass-hi);
  background: linear-gradient(180deg, #A42620 0%, #7E1515 55%, #6A1010 100%);
  border: 1px solid #D9A84E; border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 0 3px rgba(242,210,140,.35), 0 2px 0 rgba(0,0,0,.35);
  font-family: var(--f-cal); letter-spacing: .12em; text-shadow: 0 1px 0 rgba(0,0,0,.45); white-space: nowrap; }
.plaque::before, .plaque::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #E6BE6A; transform: rotate(45deg); box-shadow: 0 0 0 1px #7E1515; }
.plaque::before { left: -4px; } .plaque::after { right: -4px; }

.delta { display: inline-flex; align-items: baseline; gap: .25em; font-family: var(--f-num); font-weight: 600; white-space: nowrap; }
.delta em { font-style: normal; font-family: var(--f-ui); font-weight: 400; color: var(--ink-3); font-size: .82em; margin-right: .2em; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--ink-3); }

.chip { display: inline-flex; align-items: center; gap: .35em; padding: .12em .55em; border-radius: 999px; font-size: .8em; line-height: 1.5; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.chip.gold { color: var(--hero); border-color: var(--hl-line); background: var(--hl); }
.chip.red { color: #fff; background: var(--crit); border-color: transparent; }
.chip.green { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.chip.amber { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.chip.new { color: #fff; background: var(--c3); border-color: transparent; font-weight: 600; letter-spacing: .04em; }
.chip.boom { color: #3a2400; background: linear-gradient(90deg, #FFD36B, #F2A23A); border-color: transparent; font-weight: 600; }
.chip.takeoff { color: var(--c2); border-color: var(--c2); }

.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--ink-4); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.dot.warn { background: var(--warn); } .dot.err { background: var(--crit); } .dot.off { background: var(--ink-4); }
.dot.live { background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 .6em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.tween.flash { animation: numflash 1.6s ease-out; }
@keyframes numflash { 0% { text-shadow: 0 0 22px var(--hero-glow), 0 0 2px #fff; } 100% { } }

.spark { display: block; overflow: visible; }
.echart { width: 100%; height: 100%; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .45em 1em; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: .92em; line-height: 1.3; white-space: nowrap; }
.btn:hover { border-color: var(--hl-line); }
.btn.primary { background: linear-gradient(180deg, #A42620, #7E1515); color: #F7E3B5; border-color: #C9963F; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.sm { padding: .25em .65em; font-size: .82em; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; color: var(--ink-3); text-align: center; padding: 1.2em; }
.empty b { color: var(--ink-2); font-weight: 600; }

::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }

/* 祥云装饰（SVG mask，跟随主题色） */
.cloud { display: inline-block; width: 2.2em; height: 1.1em; background: currentColor; -webkit-mask: url('/assets/img/xiangyun.svg') center/contain no-repeat; mask: url('/assets/img/xiangyun.svg') center/contain no-repeat; opacity: .8; }