/* ==========================================================================
   数据大屏（live.html）—— 长亮展示专用
   延续液态玻璃风格，但排版更大、更适合远距离观看
   ========================================================================== */

.live-body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--t-ink);
  background: #f4f1ec;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- 背景光斑 ---- */
.live-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.live-bg .lb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  animation: lbFloat 26s ease-in-out infinite;
}
.live-bg .lb.a { width: 620px; height: 620px; left: -180px; top: -200px; background: radial-gradient(circle, #cfe0fb, transparent 68%); }
.live-bg .lb.b { width: 700px; height: 700px; right: -220px; top: -140px; background: radial-gradient(circle, #fbe8bd, transparent 68%); animation-delay: -8s; }
.live-bg .lb.c { width: 660px; height: 660px; right: 8%; bottom: -280px; background: radial-gradient(circle, #f8dccc, transparent 68%); animation-delay: -15s; }
.live-bg .lb.d { width: 600px; height: 600px; left: 12%; bottom: -260px; background: radial-gradient(circle, #d8efdd, transparent 68%); animation-delay: -4s; }
@keyframes lbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}

/* ---- 顶栏 ---- */
.live-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 34px 10px;
  flex-wrap: wrap;
}
.lt-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
.lt-title { min-width: 0; }
.lt-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-logo {
  width: 56px; height: 56px; border-radius: 17px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #f0b93c, #d2831a);
  box-shadow: 0 10px 26px -10px rgba(208,118,28,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
.lt-logo svg { width: 30px; height: 30px; }
.lt-title h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.lt-title p { margin: 3px 0 0; font-size: 13px; color: var(--t-ink-3); }

.lt-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lt-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--t-ink-2);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 14px -8px rgba(30,35,45,.4);
}
.lt-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #c9c9c9; }
.lt-chip.ok .dot { background: #4fbf7a; box-shadow: 0 0 0 4px rgba(79,191,122,.18); }
.lt-chip.bad .dot { background: #e25046; box-shadow: 0 0 0 4px rgba(226,80,70,.18); }
.lt-clock {
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--t-ink-2); padding: 0 6px;
}
.lt-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--t-ink-3); cursor: pointer;
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px -10px rgba(30,35,45,.5);
  transition: transform .3s var(--ease-spring), color .2s;
}
.lt-btn svg { width: 17px; height: 17px; pointer-events: none; }
.lt-btn:hover { transform: translateY(-1px) scale(1.05); color: var(--t-ink-2); }

/* ---- 主容器 ---- */
.live-main {
  position: relative; z-index: 2;
  padding: 12px 34px 34px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 2200px; margin: 0 auto;
}

/* ---- KPI 行 ---- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-card {
  position: relative; overflow: hidden;
  padding: 24px 26px 22px; border-radius: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.kpi-lbl { font-size: 14px; font-weight: 700; color: var(--t-ink-3); letter-spacing: .04em; }
.kpi-big {
  font-size: 76px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.kpi-big em { font-size: 26px; font-style: normal; font-weight: 700; color: var(--t-ink-3); }
.kpi-card.accent-sz .kpi-big { background: linear-gradient(160deg, #3f7fe8, #2358b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-card.accent-hk .kpi-big { background: linear-gradient(160deg, #e8a832, #c07410); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-card.accent-m .kpi-big { background: linear-gradient(160deg, #4fbf7a, #2b8f57); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-bar { height: 7px; border-radius: 999px; background: rgba(140,150,165,.18); overflow: hidden; }
.kpi-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #f3c76a, #d2831a);
  transition: width 1.1s cubic-bezier(.22,1,.36,1);
}
.accent-sz .kpi-bar i { background: linear-gradient(90deg, #7aa8f5, #2358b8); }
.accent-hk .kpi-bar i { background: linear-gradient(90deg, #f3c76a, #c07410); }
.accent-m .kpi-bar i { background: linear-gradient(90deg, #86d9a5, #2b8f57); }
.kpi-note { font-size: 12.5px; color: var(--t-ink-3); font-weight: 600; }

/* ---- 图表卡片 ---- */
.chart-card {
  position: relative; overflow: hidden;
  box-sizing: border-box;
  padding: 22px 24px; border-radius: 28px;
  display: flex; flex-direction: column; min-height: 0;
}
.row-2 { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }

.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; flex: 0 0 auto; }
.cc-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.005em; }
.cc-head p { margin: 3px 0 0; font-size: 12px; color: var(--t-ink-3); }
.cc-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--t-ink-2); }
.lg-item .dot { width: 9px; height: 9px; border-radius: 50%; }
.lg-item .dot.total { background: linear-gradient(150deg,#f0b93c,#d2831a); }
.lg-item .dot.sz { background: linear-gradient(150deg,#5b93f0,#2358b8); }
.lg-item .dot.hk { background: linear-gradient(150deg,#f0b93c,#c07410); }

.chart-box { flex: 1; min-height: 210px; position: relative; }
.chart-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 折线 */
.lc-grid { stroke: rgba(140,150,165,.16); stroke-width: 1; }
.lc-axis { fill: var(--t-ink-3); font-size: 11px; font-weight: 700; }
.lc-area { opacity: .16; }
.lc-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lc-dot { r: 4; }
.lc-zero { fill: var(--t-ink-3); font-size: 11px; font-weight: 700; }

/* 环形 */
.donut-wrap { position: relative; flex: 1; display: grid; place-items: center; min-height: 200px; }
#donut {
  width: auto; height: auto;
  min-width: 130px; min-height: 130px;
  max-width: min(100%, 340px); max-height: 340px;
  flex: 0 1 auto;
}
#donut .donut-rings { transform: rotate(-90deg); transform-origin: 120px 120px; }
#donut circle { fill: none; stroke-linecap: round; }
#donut .d-center-val {
  fill: #d2831a; font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
#donut .d-center-lbl { fill: var(--t-ink-3); font-size: 12px; font-weight: 700; }
[data-theme="dark"] #donut .d-center-val { fill: #f0b93c; }
.d-bg { stroke: rgba(140,150,165,.13); stroke-width: 16; }
.d-sz { stroke: url(#gSz); stroke-width: 16; transition: stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1); }
.d-hk { stroke: url(#gHk); stroke-width: 13; transition: stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1); }

.donut-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dl-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.dl-row b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 柱状 */
.bc-bar { transition: height .9s cubic-bezier(.22,1,.36,1), y .9s cubic-bezier(.22,1,.36,1); }
.bc-lbl { fill: var(--t-ink-2); font-size: 12.5px; font-weight: 700; }
.bc-val { fill: var(--t-ink); font-size: 15px; font-weight: 800; }

/* 漏斗 */
.funnel {
  display: flex; flex-direction: column; gap: 9px;
  flex: 1 1 auto; min-height: 0; justify-content: center;
  overflow: hidden;
}
.fn-row { display: flex; align-items: center; gap: 10px; }
.fn-name { width: 72px; flex: none; font-size: 12px; font-weight: 700; color: var(--t-ink-2); }
.fn-track { flex: 1; height: 30px; min-height: 18px; border-radius: 10px; background: rgba(140,150,165,.13); overflow: hidden; position: relative; }
.fn-fill {
  height: 100%; border-radius: 10px; width: 0; min-width: 6px;
  background: linear-gradient(90deg, #f3c76a, #d2831a);
  transition: width .9s cubic-bezier(.22,1,.36,1);
  display: block;
}
.fn-row:nth-child(2) .fn-fill { background: linear-gradient(90deg, #9ec7f7, #4a83d8); }
.fn-row:nth-child(3) .fn-fill { background: linear-gradient(90deg, #9ee0b8, #3f9f68); }
.fn-row:nth-child(4) .fn-fill { background: linear-gradient(90deg, #b6a8ee, #6d58c9); }
.fn-val { width: 52px; flex: none; text-align: right; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- 小卡片行 ---- */
.row-4 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.mini-card {
  position: relative; overflow: hidden;
  padding: 16px 18px; border-radius: 22px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
}
.mc-lbl { font-size: 12px; font-weight: 700; color: var(--t-ink-3); grid-column: 1; }
.mc-val { grid-column: 1; display: flex; align-items: baseline; gap: 3px; }
.mc-val b { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mc-val em { font-size: 13px; font-style: normal; font-weight: 700; color: var(--t-ink-3); }
.mc-ring { grid-column: 2; grid-row: 1 / span 2; }
.mc-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.mc-ring circle { fill: none; stroke-linecap: round; }
.mr-bg { stroke: rgba(140,150,165,.16); stroke-width: 7; }
.mr-fg { stroke-width: 7; stroke-dasharray: 0 999; transition: stroke-dasharray 1s cubic-bezier(.22,1,.36,1); }
.mr-fg.sz { stroke: #4a83d8; }
.mr-fg.hk { stroke: #d2831a; }
.mr-fg.hq { stroke: #8b7fd4; }
.mr-fg.user { stroke: #3f9f68; }
.mr-fg.pass { stroke: #c9584f; }
.mr-fg.act { stroke: #2f9e8f; }

/* ---- 动态 ---- */
.live-log {
  position: relative; overflow: hidden; padding: 20px 24px; border-radius: 26px;
  display: flex; flex-direction: column; min-height: 0; box-sizing: border-box;
}
.ll-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex: 0 0 auto; }
.ll-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.ll-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #2f9e8b; }
.ll-live i { width: 7px; height: 7px; border-radius: 50%; background: #2f9e8b; animation: llPulse 1.6s ease-in-out infinite; }
@keyframes llPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.ll-list { display: flex; flex-direction: column; gap: 7px; }
.ll-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-ink-2); }
.ll-row .t { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--t-ink-3); flex: none; width: 92px; }
.ll-row .k { width: 6px; height: 6px; border-radius: 50%; background: #d2831a; flex: none; }
.ll-row .x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 加载 ---- */
.live-loading {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: rgba(246,243,238,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .5s, visibility .5s;
}
.live-loading.hide { opacity: 0; visibility: hidden; }
.ll-spin {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(210,131,26,.2); border-top-color: #d2831a;
  animation: llSpin .9s linear infinite;
}
@keyframes llSpin { to { transform: rotate(360deg); } }
.live-loading p { margin: 0; font-size: 13px; font-weight: 700; color: var(--t-ink-3); }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1500px) {
  .kpi-big { font-size: 62px; }
  .row-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-big { font-size: 56px; }
}
@media (max-width: 760px) {
  .live-top { padding: 14px 14px 4px; gap: 10px; }
  .lt-right { gap: 6px; flex-wrap: nowrap; }
  .lt-clock { font-size: 13px; padding: 0 2px; }
  .lt-chip { height: 28px; padding: 0 10px; font-size: 11px; }
  .lt-btn { width: 30px; height: 30px; }
  .lt-btn svg { width: 14px; height: 14px; }
  .lt-logo { width: 44px; height: 44px; border-radius: 13px; }
  .lt-logo svg { width: 24px; height: 24px; }
  .lt-title h1 { font-size: 17px; }
  .lt-title p { font-size: 11.5px; }
  .lt-clock { font-size: 16px; }
  .live-main { padding: 10px 16px 26px; gap: 12px; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 16px 16px 14px; border-radius: 20px; }
  .kpi-big { font-size: 40px; }
  .kpi-big em { font-size: 16px; }
  .kpi-lbl { font-size: 12px; }
  .kpi-note { font-size: 11px; }
  .chart-card { padding: 16px; border-radius: 20px; }
  .cc-head h2 { font-size: 15px; }
  .chart-box { min-height: 170px; }
  .row-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mini-card { padding: 12px; border-radius: 18px; }
  .mc-val b { font-size: 24px; }
  .mc-ring svg { width: 44px; height: 44px; }
  .live-log { padding: 16px; border-radius: 20px; }
  .ll-row .t { width: 72px; font-size: 10.5px; }
  .ll-row { font-size: 12px; }
}

/* ==========================================================================
   深色模式
   ========================================================================== */
[data-theme="dark"] .live-body { background: #14171c; }
[data-theme="dark"] .live-bg .lb { opacity: .26; }
[data-theme="dark"] .lt-chip,
[data-theme="dark"] .lt-btn { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px -10px rgba(0,0,0,.7); }
[data-theme="dark"] .live-loading { background: rgba(20,23,28,.9); }

/* ==========================================================================
   1080p 一屏完整显示（大屏展示模式）
   ========================================================================== */
@media (min-width: 1181px) {
  .live-body { min-height: 100vh; }
  .live-top { padding: 14px 28px 6px; }
  .lt-logo { width: 44px; height: 44px; border-radius: 14px; }
  .lt-logo svg { width: 24px; height: 24px; }
  .lt-title h1 { font-size: 21px; }
  .lt-title p { font-size: 12px; }
  .lt-clock { font-size: 19px; }

  /* 用 minmax 保证每个区块有最小高度；屏幕不够高时整页滚动，而不是把图表压成 0 */
  .live-main {
    padding: 6px 28px 16px;
    gap: 11px;
    display: grid;
    grid-template-rows: auto minmax(220px, 1.4fr) minmax(190px, 1fr) auto minmax(120px, auto);
    box-sizing: border-box;
    min-height: calc(100vh - 78px);
  }
  /* 只有在大屏够高时才锁定一屏 */
  @media (min-height: 900px) and (min-width: 1181px) {
    .live-body { height: 100vh; overflow: hidden; }
    .live-main { height: calc(100vh - 78px); }
  }
  /* 1080p：压缩 KPI 与小卡片，给图表腾空间 */
  @media (min-height: 1000px) {
    .row-3 .chart-card { padding: 12px 16px; }
    .funnel { gap: 6px; }
    .fn-track { height: 26px; }
    .fn-name { font-size: 11.5px; width: 66px; }
    .fn-val { font-size: 14px; width: 44px; }
    .kpi-card { padding: 13px 18px 12px; }
    .kpi-big { font-size: 52px; }
    .kpi-note { font-size: 11px; }
    .row-4 { gap: 8px; }
    .mini-card { padding: 9px 12px; }
    .mc-val b { font-size: 23px; }
    .mc-ring svg { width: 38px; height: 38px; }
    .live-log { padding: 11px 16px; }
    .ll-row { font-size: 11.5px; }
    .cc-head { margin-bottom: 6px; }
    .cc-head h2 { font-size: 14.5px; }
    .cc-head p { font-size: 10.5px; }
  }

  .kpi-row { gap: 12px; }
  .kpi-card { padding: 16px 20px 14px; border-radius: 22px; gap: 5px; }
  .kpi-lbl { font-size: 12.5px; }
  .kpi-big { font-size: 58px; }
  .kpi-big em { font-size: 20px; }
  .kpi-note { font-size: 11.5px; }
  .kpi-bar { height: 6px; }

  .row-2, .row-3 { gap: 12px; min-height: 0; }
  .chart-card { padding: 15px 18px; border-radius: 22px; min-height: 0; }
  .cc-head { margin-bottom: 8px; }
  .cc-head h2 { font-size: 15px; }
  .cc-head p { font-size: 11px; }
  .chart-box { min-height: 130px; }
  /* 环形区域随卡片高度自动收缩，绝不溢出 */
  .donut-wrap { min-height: 0; padding: 2px 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; }
  #donut { width: auto; height: 100%; max-width: 100%; max-height: 190px; flex: 0 1 auto; }
  .donut-legend { margin-top: 4px; gap: 4px; flex: 0 0 auto; }
  .dl-row { font-size: 11.5px; }
  .dl-row b { font-size: 13px; }

  .row-4 { gap: 10px; }
  .mini-card { padding: 11px 14px; border-radius: 18px; }
  .mc-lbl { font-size: 11px; }
  .mc-val b { font-size: 26px; }
  .mc-ring svg { width: 44px; height: 44px; }

  .live-log { padding: 13px 18px; border-radius: 20px; }
  .ll-head { margin-bottom: 7px; }
  .ll-head h2 { font-size: 14px; }
  .ll-list { gap: 4px; }
  .ll-row { font-size: 12px; }
  .ll-row .t { width: 84px; font-size: 11px; }
}

/* 超宽屏 */
/* 高分辨率大屏：环形图放大 */
@media (min-height: 1000px) and (min-width: 1181px) {
  .row-2 .chart-card:last-child { padding: 12px 16px; }
  .row-2 .chart-card:last-child .cc-head { margin-bottom: 2px; }
  .row-2 .chart-card:last-child .cc-head h2 { font-size: 14px; }
  .row-2 .chart-card:last-child .cc-head p { font-size: 10.5px; }
  .donut-wrap { flex: 1 1 auto; min-height: 0; }
  #donut { max-height: 100%; max-width: 100%; }
  .donut-legend { margin-top: 6px; gap: 5px; flex: 0 0 auto; }
  .dl-row { font-size: 12px; }
  .dl-row b { font-size: 14px; }
}

@media (min-width: 2000px) {
  .kpi-big { font-size: 72px; }
  .mc-val b { font-size: 32px; }
}


/* 中等高度屏幕（如 1440x900 / 1600x900）：漏斗行高收紧，避免溢出 */
/* 中等高度：动态区域限制高度并滚动 */
@media (min-width: 1181px) and (max-height: 999px) {
  .live-log { padding: 14px 18px; border-radius: 20px; }
  .ll-head { margin-bottom: 8px; }
  .ll-list { max-height: 120px; }
  .ll-row { font-size: 11.5px; }

  .funnel { gap: 5px; }
  .fn-track { height: 22px; }
  .fn-name { font-size: 11px; width: 62px; }
  .fn-val { font-size: 13.5px; width: 42px; }
  .row-3 .chart-card { padding: 12px 16px; }
}

/* ==========================================================================
   简繁切换按钮（与大站圆形玻璃一致）
   ========================================================================== */
.lt-lang { display: inline-flex; gap: 6px; }
.lt-round {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--t-ink-3);
  cursor: pointer;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.65), rgba(255,255,255,.10) 55%, rgba(255,255,255,.28)),
    rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 6px 16px -10px rgba(30,35,45,.5);
  transition: transform .3s var(--ease-spring), color .2s, background .25s, box-shadow .25s;
}
.lt-round:hover { transform: translateY(-1px) scale(1.05); color: var(--t-ink-2); }
.lt-round.on {
  color: #7a4a06;
  background: linear-gradient(160deg, #f7d488, #e0a332);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px -10px rgba(208,118,28,.9);
}
[data-theme="dark"] .lt-round {
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px -10px rgba(0,0,0,.7);
  color: var(--t-ink-2);
}
[data-theme="dark"] .lt-round.on { background: linear-gradient(160deg, #f0b93c, #d2831a); color: #3a2402; }

/* 刷新按钮旋转 */
#ltRefresh.spinning svg { animation: ltSpin .8s linear infinite; }
@keyframes ltSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   紧凑指标条（替代原来的 6 张大卡片）
   ========================================================================== */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.stat-item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px;
  min-width: 0;
}
.si-ico {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: rgba(140,150,165,.12);
  color: var(--t-ink-3);
}
.si-ico svg { width: 16px; height: 16px; }
.si-ico.sz { background: rgba(74,131,216,.14); color: #3a6ec4; }
.si-ico.hk { background: rgba(210,131,26,.14); color: #b5791a; }
.si-ico.hq { background: rgba(139,127,212,.15); color: #6d5cc0; }
.si-ico.user { background: rgba(63,159,104,.14); color: #2f8f57; }
.si-ico.pass { background: rgba(201,88,79,.13); color: #b8443b; }
.si-ico.act { background: rgba(47,158,143,.14); color: #238077; }
[data-theme="dark"] .si-ico.sz { color: #7fa8f0; }
[data-theme="dark"] .si-ico.hk { color: #f0bd63; }
[data-theme="dark"] .si-ico.hq { color: #b3a4f0; }
[data-theme="dark"] .si-ico.user { color: #6fd39a; }
[data-theme="dark"] .si-ico.pass { color: #f09088; }
[data-theme="dark"] .si-ico.act { color: #5fc9bd; }

.si-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.si-lbl { font-size: 11px; font-weight: 700; color: var(--t-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-val { display: flex; align-items: baseline; gap: 2px; line-height: 1.1; }
.si-val b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.si-val em { font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--t-ink-3); }

.si-ring { width: 36px; height: 36px; flex: none; }
.si-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.si-ring circle { fill: none; stroke-linecap: round; }
.sir-bg { stroke: rgba(140,150,165,.18); stroke-width: 5; }
.sir-fg { stroke-width: 5; stroke-dasharray: 0 999; transition: stroke-dasharray .9s cubic-bezier(.22,1,.36,1); }
.sir-fg.sz { stroke: #4a83d8; }
.sir-fg.hk { stroke: #d2831a; }
.sir-fg.hq { stroke: #8b7fd4; }
.sir-fg.user { stroke: #3f9f68; }
.sir-fg.pass { stroke: #c9584f; }
.sir-fg.act { stroke: #2f9e8f; }

/* ==========================================================================
   最新动态：多列自动排列，消灭右侧空白
   ========================================================================== */
.ll-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--t-ink-3); }
.ll-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 3px 26px;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ll-list::-webkit-scrollbar { width: 6px; }
.ll-list::-webkit-scrollbar-thumb { background: rgba(140,150,165,.3); border-radius: 3px; }
.ll-row { min-width: 0; }
.ll-row .x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1500px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .ll-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-item { padding: 9px 11px; border-radius: 14px; }
  .si-val b { font-size: 20px; }
  .si-ico { width: 26px; height: 26px; border-radius: 8px; }
  .si-ico svg { width: 14px; height: 14px; }
  .si-ring { width: 30px; height: 30px; }
  .ll-list { grid-template-columns: 1fr; }
  .lt-round { width: 30px; height: 30px; font-size: 11px; }
  .lt-lang { gap: 4px; }
}

/* 大屏：动态列数更多 */
@media (min-width: 1700px) {
  .ll-list { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* ==========================================================================
   圆环尺寸最终修正（追加规则，优先级最高）
   问题：全屏/大屏时圆环跟卡片等比放大，到 4K 时被撑到 780px，比例失衡
   方案：给圆环明确的最小/最大尺寸，用 clamp 在中间自适应
   ========================================================================== */
#donut {
  width: clamp(120px, 100%, 280px) !important;
  height: clamp(120px, 100%, 280px) !important;
  max-width: 280px !important;
  max-height: 280px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  flex: 0 0 auto !important;
}

/* 大屏：圆环最大 280px，多出的空间给图例和留白 */
@media (min-height: 1000px) and (min-width: 1181px) {
  .donut-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .donut-legend { margin-top: 8px; gap: 6px; flex: 0 0 auto; }
  .dl-row { font-size: 13px; }
  .dl-row b { font-size: 16px; }
}

/* 超宽超高屏（4K）：圆环可以稍大，但有硬上限 */
@media (min-width: 2200px) {
  #donut {
    width: clamp(150px, 100%, 340px) !important;
    height: clamp(150px, 100%, 340px) !important;
    max-width: 340px !important;
    max-height: 340px !important;
  }
}

/* 中等高度：圆环小一点，避免挤压 */
@media (min-width: 1181px) and (max-height: 999px) {
  #donut {
    width: clamp(110px, 100%, 200px) !important;
    height: clamp(110px, 100%, 200px) !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }
}

/* ==========================================================================
   双线对比卡片：环形居中、图例紧跟，消灭右侧空白
   ========================================================================== */
.chart-card:has(#donut) {
  display: flex;
  flex-direction: column;
}
.chart-card:has(#donut) .donut-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chart-card:has(#donut) .donut-legend {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--t-line);
}
.chart-card:has(#donut) .dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(140,150,165,.07);
  font-size: 12.5px;
}
[data-theme="dark"] .chart-card:has(#donut) .dl-row { background: rgba(255,255,255,.05); }
.chart-card:has(#donut) .dl-row b { font-size: 16px; font-weight: 800; }

/* 窄屏：图例改回单列 */
@media (max-width: 1180px) {
  .chart-card:has(#donut) .donut-legend { grid-template-columns: 1fr; }
}

/* 最后刷新时间 */
.lt-updated {
  font-size: 11.5px; font-weight: 700; color: var(--t-ink-3);
  white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .lt-updated { display: none; } }

/* 圆环更粗、更明显（进度低时也能看清比例） */
#donut .d-bg { stroke-width: 20 !important; }
#donut .d-sz { stroke-width: 20 !important; }
#donut .d-hk { stroke-width: 16 !important; }