/* ============================================================
   MIAPI theme-v2 · theme.css
   来源：从 theme-v2 原型（../prototype/index.html 的 <style>）拆分而来。
   规则：样式先改原型、手机验收通过后同步回本文件，保持两边一致。
   令牌：--brand 系列随 <html data-accent="brand|ocean|ink">；
         明暗随 <html data-theme="light|dark">。
   ============================================================ */

/* ============ 设计令牌（shadcn zinc 基调 + MIAPI 品牌强调色） ============ */
:root {
  --radius: 10px;
  --bg: #ffffff;
  --fg: #09090b;
  --card: #ffffff;
  --muted: #f4f4f5;
  --muted-fg: #71717a;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: rgba(9,9,11,.12);
  --sidebar: #fafafa;
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --red: #dc2626;
  --red-bg: #fef2f2;
  /* 品牌强调色（默认：MIAPI 品牌红橙，APP 同款） */
  --brand: #fa2c19;
  --brand-2: #fa6419;
  --brand-fg: #ffffff;
  --brand-soft: #fff2ef;
  --brand-ring: rgba(250,44,25,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
:root[data-accent="ocean"] {
  --brand: #0b5ea3;
  --brand-2: #2f83c9;
  --brand-soft: #eef5fb;
  --brand-ring: rgba(11,94,163,.3);
}
:root[data-accent="ink"] {
  --brand: #18181b;
  --brand-2: #3f3f46;
  --brand-soft: #f4f4f5;
  --brand-ring: rgba(24,24,27,.25);
}
:root[data-theme="dark"] {
  --bg: #09090b;
  --fg: #fafafa;
  --card: #101012;
  --muted: #18181b;
  --muted-fg: #a1a1aa;
  --border: #26262a;
  --input: #2c2c31;
  --ring: rgba(250,250,250,.14);
  --sidebar: #0c0c0e;
  --green: #4ade80;
  --green-bg: rgba(74,222,128,.1);
  --amber: #fbbf24;
  --amber-bg: rgba(251,191,36,.1);
  --red: #f87171;
  --red-bg: rgba(239,68,68,.1);
  --brand-soft: rgba(250,44,25,.12);
  --shadow-sm: none;
  --shadow: none;
}
:root[data-theme="dark"][data-accent="ocean"] { --brand-soft: rgba(11,94,163,.2); }
:root[data-theme="dark"][data-accent="ink"] { --brand: #e4e4e7; --brand-2: #a1a1aa; --brand-fg: #09090b; --brand-soft: #1c1c1f; }

/* ============ 基础 ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
svg.ic { width: 16px; height: 16px; flex: none; }
svg.ic.lg { width: 18px; height: 18px; }
svg.ic.sm { width: 14px; height: 14px; }
.muted { color: var(--muted-fg); }
.small { font-size: 12.5px; }

/* ============ 应用骨架 ============ */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }

/* 侧栏 */
.sidebar {
  width: 236px; flex: none;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 14px 12px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
  box-shadow: var(--shadow-sm);
}
.brand-mark.brand-logo { background: none; object-fit: contain; }
.brand-name { font-weight: 700; font-size: 15.5px; letter-spacing: .2px; }
.brand-sub { font-size: 11px; color: var(--muted-fg); margin-top: -1px; }
.nav { flex: 1; overflow-y: auto; padding: 2px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.nav-group-label { font-size: 11.5px; color: var(--muted-fg); padding: 0 10px 5px; letter-spacing: .4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; border-radius: 8px;
  color: var(--muted-fg); font-size: 13.5px; font-weight: 500;
  cursor: pointer; user-select: none; position: relative;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--muted); color: var(--fg); }
.nav-item.active { background: var(--muted); color: var(--fg); font-weight: 600; }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav-item .badge-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 99px; background: var(--brand); }
.side-user {
  border-top: 1px solid var(--border); padding: 12px 8px 4px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; border-radius: 0 0 10px 10px; transition: background .12s;
}
.side-user:hover { background: var(--muted); }
.side-user:active { background: color-mix(in srgb, var(--muted) 78%, var(--border)); }
#topAvatar { cursor: pointer; }
#topAvatar:hover { box-shadow: 0 0 0 2px var(--brand-ring); }

.avatar {
  width: 32px; height: 32px; border-radius: 99px; flex: none;
  background: var(--muted); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--muted-fg);
}
.side-user .who { min-width: 0; }
.side-user .who b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { font-size: 11.5px; color: var(--muted-fg); }

/* 主框架 */
.frame { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0);
}
.topbar .crumb { font-size: 13px; color: var(--muted-fg); display: flex; align-items: center; gap: 7px; }
.topbar .crumb b { color: var(--fg); font-weight: 600; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-fg); border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.icon-btn:hover { background: var(--muted); color: var(--fg); }
.icon-btn.bordered { border-color: var(--border); }
.spacer { flex: 1; }
.hamburger { display: none; }

/* 强调色切换小圆点（原型工具） */
.accent-pick { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 99px; }
.accent-dot { width: 15px; height: 15px; border-radius: 99px; border: 1.5px solid transparent; cursor: pointer; }
.accent-dot.on { border-color: var(--fg); box-shadow: inset 0 0 0 2px var(--bg); }
.accent-dot.a-brand { background: linear-gradient(135deg, #fa2c19, #fa6419); }
.accent-dot.a-ocean { background: linear-gradient(135deg, #0b5ea3, #2f83c9); }
.accent-dot.a-ink { background: linear-gradient(135deg, #18181b, #52525b); }

/* 主内容 */
.main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 26px 22px 64px; }
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -.2px; margin: 0; }
.page-head .sub { color: var(--muted-fg); font-size: 13px; margin-top: 3px; }
.page-head .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ============ 组件 ============ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-sm); }
.card .pad { padding: 18px 20px; }
.card-title { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.card-sub { font-size: 12.5px; color: var(--muted-fg); margin-top: 2px; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* KPI */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.kpi .top { display: flex; align-items: center; gap: 8px; color: var(--muted-fg); font-size: 12.5px; font-weight: 550; }
.kpi .top svg { color: var(--muted-fg); }
.kpi .val { font-size: 25px; font-weight: 720; letter-spacing: -.6px; line-height: 1.1; }
.kpi .val small { font-size: 13px; font-weight: 600; color: var(--muted-fg); letter-spacing: 0; margin-left: 3px; }
.kpi .foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-fg); }

/* 进度条 */
.progress { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .6s cubic-bezier(.22,1,.36,1); }
.progress.green > i { background: var(--green); }

/* 徽章 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1px;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted-fg);
}
.badge.solid { background: var(--brand); border-color: transparent; color: var(--brand-fg); }
.badge.soft { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.badge.green { background: var(--green-bg); border-color: transparent; color: var(--green); }
.badge.amber { background: var(--amber-bg); border-color: transparent; color: var(--amber); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: opacity .12s, background .12s, border-color .12s, transform .05s;
}
.btn:active { transform: translateY(.5px); }
.btn.primary { background: var(--brand); color: var(--brand-fg); box-shadow: var(--shadow-sm); }
.btn.primary:hover { opacity: .9; }
.btn.outline { border-color: var(--border); background: var(--bg); }
.btn.outline:hover { background: var(--muted); }
.btn.ghost { color: var(--muted-fg); }
.btn.ghost:hover { background: var(--muted); color: var(--fg); }
.btn.sm { height: 31px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }

/* 输入 */
.input {
  height: 36px; padding: 0 12px; width: 100%;
  border: 1px solid var(--input); border-radius: 9px; background: var(--bg);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.input::placeholder { color: var(--muted-fg); }

/* 列表行 */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 13.5px; font-weight: 600; }
.row .s { font-size: 12px; color: var(--muted-fg); margin-top: 1px; }

/* 状态点 */
.dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.dot.g { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.dot.a { background: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.15); }
.dot.r { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

/* 快捷操作 */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quick a {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 14px 13px; border: 1.5px solid var(--border); border-radius: 16px;
  background: var(--card); color: var(--fg);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.quick a:hover { border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quick a:active { transform: translateY(0) scale(.985); }
.quick .qi { width: 42px; height: 42px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.quick a.qk-green .qi { background: var(--green-bg); color: var(--green); }
.quick a.qk-amber .qi { background: var(--amber-bg); color: var(--amber); }
.quick a.qk-ink .qi { background: var(--muted); color: var(--muted-fg); }
.quick b { font-size: 14px; font-weight: 650; margin-top: 12px; }
.quick span.qs { font-size: 11.5px; color: var(--muted-fg); margin-top: 3px; }
.quick .qa { position: absolute; top: 15px; right: 14px; color: var(--muted-fg); opacity: .5; transition: transform .16s, opacity .16s, color .16s; }
.quick a:hover .qa { color: var(--brand); opacity: 1; transform: translateX(2px); }

/* ============ 购买订阅 ============ */
/* ============ 当前订阅卡（重新设计：信息分层 + 进度 + 装饰） ============ */
.hero {
  position: relative; overflow: hidden; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 75%, var(--card)), var(--card) 58%);
  padding: 17px 20px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.hero-deco { position: absolute; right: -54px; top: -58px; width: 200px; height: 200px; pointer-events: none; }
.hero-top { position: relative; display: flex; align-items: center; gap: 14px; }
.hero .h-ic { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent) inset; }
.hero .grow { flex: 1; min-width: 0; }

/* 通用弹性列（cfg-sub / 任何 flex 容器内的 .grow）：无全局规则时中文会被压成竖排 */
.grow { flex: 1 1 auto; min-width: 0; }
.hero h2 { margin: 0; font-size: 16.5px; font-weight: 750; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.hero p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-fg); line-height: 1.5; }
.hero p b { color: var(--fg); font-weight: 650; }
.hero-prog { position: relative; border-top: 1px dashed var(--border); padding-top: 12px; }
.hp-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.hp-row b { font-weight: 650; }
.hp-row .pct { margin-left: auto; color: var(--muted-fg); font-weight: 600; }
.hero-prog .progress { margin-top: 9px; height: 7px; }
.hero-link { position: relative; margin-left: auto; flex: none; }

/* ============ 玻璃膜系统（只用于固定栏与少量面板，保证滚动性能） ============ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 10% -6%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 65%),
    radial-gradient(520px 400px at 96% 10%, color-mix(in srgb, #4e82ff 6%, transparent), transparent 62%),
    radial-gradient(560px 440px at 46% 110%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 66%);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sidebar {
    background: color-mix(in srgb, var(--sidebar) 78%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.45);
    backdrop-filter: blur(16px) saturate(1.45);
  }
  .hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 62%, transparent), color-mix(in srgb, var(--card) 84%, transparent) 58%);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
  .pbanner {
    background: linear-gradient(180deg, color-mix(in srgb, var(--amber-bg) 78%, transparent), color-mix(in srgb, var(--card) 60%, transparent));
    -webkit-backdrop-filter: blur(12px) saturate(1.35);
    backdrop-filter: blur(12px) saturate(1.35);
  }
  .payCard, .uModal-card {
    background: color-mix(in srgb, var(--card) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.45);
    backdrop-filter: blur(20px) saturate(1.45);
  }
  body.auth-mode .card {
    background: color-mix(in srgb, var(--card) 78%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: var(--card); padding: 20px 20px 18px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.plan:hover { border-color: color-mix(in srgb, var(--fg) 22%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan .p-tag { position: absolute; top: -10px; left: 18px; }
.plan .p-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.plan .p-desc { font-size: 12px; color: var(--muted-fg); margin-top: 3px; min-height: 18px; }
.plan .p-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px; }
.plan .p-price .cur { font-size: 15px; font-weight: 700; }
.plan .p-price .n { font-size: 33px; font-weight: 780; letter-spacing: -1.2px; line-height: 1; }
.plan .p-price .per { font-size: 12.5px; color: var(--muted-fg); }
.plan .p-hint { font-size: 11.5px; color: var(--muted-fg); min-height: 16px; }
.plan .p-specs { margin: 14px 0 16px; border-top: 1px solid var(--border); }
.plan .spec { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.plan .spec svg { color: var(--muted-fg); }
.plan .spec .k { color: var(--muted-fg); }
.plan .spec .v { margin-left: auto; font-weight: 600; }
.plan .spacer-v { flex: 1; }

/* 配置订阅 */
.cfg-wrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
.cfg-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cfg-sub { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.cfg-sub .nm { font-size: 15px; font-weight: 700; }
.cfg-sub .meta { font-size: 12px; color: var(--muted-fg); margin-top: 2px; }
.periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.period {
  position: relative; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; background: var(--card);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.period:hover { border-color: color-mix(in srgb, var(--brand) 34%, var(--border)); }
.period.on { border-color: var(--brand); background: linear-gradient(150deg, color-mix(in srgb, var(--brand-soft) 88%, var(--card)), var(--card) 72%); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 9%, transparent); }
.period .pn { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.period .pp { font-size: 16px; font-weight: 760; margin-top: 5px; letter-spacing: -.3px; }
.period .pp small { font-size: 11px; font-weight: 500; color: var(--muted-fg); }
.period.on .pp { color: var(--brand); }
.period.on .pp small { color: inherit; opacity: .72; }
.period .pm { font-size: 11px; color: var(--muted-fg); margin-top: 2px; }
.period .save { position: absolute; top: 9px; right: 9px; }
.pn-ck { color: var(--brand); flex: none; }
.period.reset-tile { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; }
.coupon { display: flex; gap: 10px; margin-top: 12px; }
.sum { position: sticky; top: 74px; }
.sum .line { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; color: var(--muted-fg); }
.sum .line b { color: var(--fg); font-weight: 600; }
.sum .total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 13px; margin-top: 9px; border-top: 1px dashed var(--border); }
.sum .total .t { font-size: 13px; font-weight: 600; }
.sum .total .v { font-size: 26px; font-weight: 780; letter-spacing: -.8px; color: var(--brand); }
.sum .tip { font-size: 11.5px; color: var(--muted-fg); margin-top: 10px; display: flex; gap: 6px; align-items: flex-start; }

/* ============ 设计规范页 ============ */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.sw { border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.sw i { display: block; height: 44px; }
.sw span { display: block; font-size: 10.5px; color: var(--muted-fg); padding: 5px 7px; background: var(--card); }
.type-row { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); }
.type-row:first-child { border-top: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; }

/* ============ 移动端 ============ */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(9,9,11,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60;
}
body.drawer-open .drawer-mask { opacity: 1; pointer-events: auto; }
@media (max-width: 1023px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 70;
    height: 100dvh; width: 264px;
    transform: translateX(-102%); transition: transform .22s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
  }
  body.drawer-open .sidebar { transform: translateX(0); }
  .hamburger { display: flex; }
  .topbar { padding: 0 12px; padding-top: env(safe-area-inset-top, 0); }
  .main { padding: 18px 14px calc(56px + env(safe-area-inset-bottom, 0)); }
  .g4 { grid-template-columns: 1fr 1fr; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .cfg-wrap { grid-template-columns: 1fr; }
  .sum { position: static; }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .periods { grid-template-columns: repeat(2, 1fr); }
  .spec-grid { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; }
  .hero { flex-wrap: wrap; }
  .accent-pick { display: none; }
}
@media (max-width: 420px) {
  .kpi .val { font-size: 22px; }
  .periods { grid-template-columns: 1fr 1fr; }
  .hero-link { display: none; }
}

/* ============ 全部页面补充组件 ============ */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search { width: 230px; }
.seg { display: inline-flex; background: var(--muted); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { height: 30px; padding: 0 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; }
.seg button.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm); }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); font-size: 12.5px; color: var(--muted-fg); cursor: pointer; transition: .12s; user-select: none; }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.kv .k { color: var(--muted-fg); font-size: 12.5px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.kv .v { font-size: 13px; font-weight: 600; text-align: right; padding: 10px 0; border-bottom: 1px dashed var(--border); font-variant-numeric: tabular-nums; }

/* 流量柱状图 */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 148px; padding-top: 6px; }
.bar { flex: 1; background: var(--muted); border-radius: 4px 4px 2px 2px; min-height: 4px; transition: filter .12s; }
.bar.hi { background: linear-gradient(180deg, var(--brand), var(--brand-2)); }
.bar:hover { filter: brightness(.96); }
.bar-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-fg); margin-top: 7px; }

/* 节点卡片 */
.node-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.node-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; background: var(--card); transition: border-color .12s; }
.node-card:hover { border-color: color-mix(in srgb, var(--fg) 20%, var(--border)); }
.node-card .flag { width: 36px; height: 36px; border-radius: 10px; background: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }

/* 回程路由 */
.hops { margin-top: 4px; }
.hop { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.hop:first-child { border-top: 0; }
.hop .no { width: 22px; height: 22px; border-radius: 7px; background: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted-fg); flex: none; }
.hop .ip { font-variant-numeric: tabular-nums; color: var(--muted-fg); }
.hop .ms { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

/* 转盘 */
.wheel-wrap { display: flex; flex-direction: column; align-items: center; }
.wheel-stage { position: relative; width: 288px; height: 288px; }
.wheel-ptr { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 3; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 18px solid var(--brand); filter: drop-shadow(var(--shadow-sm)); }
.wheel {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -22.5deg, var(--brand-soft) 0 45deg, var(--bg) 45deg 90deg, var(--brand-soft) 90deg 135deg, var(--bg) 135deg 180deg, var(--brand-soft) 180deg 225deg, var(--bg) 225deg 270deg, var(--brand-soft) 270deg 315deg, var(--bg) 315deg 360deg);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform 4s cubic-bezier(.15,.9,.22,1);
}
.wheel-label { position: absolute; left: 50%; top: 50%; font-size: 11.5px; font-weight: 650; white-space: nowrap; color: var(--fg); }
.wheel-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 50%; z-index: 2;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-fg);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 750;
  box-shadow: 0 4px 16px var(--brand-ring); cursor: pointer; border: 4px solid var(--card);
}
.wheel-center:active { transform: translate(-50%,-50%) scale(.97); }

/* 签到日历 */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal .d { border: 1px solid var(--border); border-radius: 10px; padding: 9px 4px; text-align: center; font-size: 10.5px; color: var(--muted-fg); }
.cal .d b { display: block; font-size: 12.5px; color: var(--fg); margin-bottom: 2px; font-variant-numeric: tabular-nums; font-weight: 650; }
.cal .d.done { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.cal .d.today { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

/* 代码块 */
.code { position: relative; background: #0c0c0e; color: #e4e4e7; border-radius: 12px; padding: 13px 15px; font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: auto; word-break: break-all; }
.code .copy { position: absolute; right: 8px; top: 8px; height: 26px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.1); color: #e4e4e7; font-size: 11.5px; font-weight: 600; }
.code .copy:hover { background: rgba(255,255,255,.18); }

/* 工单会话 */
.msgs { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 78%; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.msg.them { background: var(--muted); align-self: flex-start; border-top-left-radius: 4px; }
.msg.me { background: var(--brand); color: var(--brand-fg); align-self: flex-end; border-top-right-radius: 4px; }
.msg .time { font-size: 10.5px; opacity: .65; margin-top: 5px; }

/* 开关 */
.switch { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--muted); border: 1px solid var(--border); cursor: pointer; transition: .15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: .15s; }
.switch.on { background: var(--brand); border-color: transparent; }
.switch.on::after { left: 18px; }

/* 危险按钮 */
.btn.danger { background: #dc2626; color: #fff; }
.btn.danger-outline { border-color: color-mix(in srgb, #dc2626 42%, var(--border)); color: #dc2626; }
.btn.danger-outline:hover { background: var(--red-bg); }

/* 登录/注册（整页） */
body.auth-mode .sidebar, body.auth-mode .topbar { display: none !important; }
/* ---------- 重设计 v3：宇航员伙伴 + 分栏布局 ----------
   注意：氛围背景必须挂整屏 fixed 层（body.auth-mode::before）——
   .main 有 max-width:1160px，挂在它上面会在左右两侧切出可见的接缝色带。 */
body.auth-mode .main {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: none; min-height: 100dvh; margin: 0;
  padding: 28px 18px; position: relative; overflow: hidden;
}
body.auth-mode .main > section { width: 100%; display: flex; justify-content: center; }
body.auth-mode::before {
  background:
    radial-gradient(780px 560px at 10% -6%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 64%),
    radial-gradient(640px 500px at 96% 8%, color-mix(in srgb, #4e82ff 8%, transparent), transparent 62%),
    radial-gradient(820px 620px at 55% 114%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 66%);
}
.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 62px; align-items: center; }
.auth-side { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.auth-brandline { display: flex; align-items: center; gap: 12px; }
.auth-brandline .brand-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 20px; }
.auth-brandline b { font-size: 19px; font-weight: 800; letter-spacing: .2px; display: block; }
.auth-brandline span { font-size: 12px; color: var(--muted-fg); display: block; margin-top: 2px; }
.mascot-box { width: 292px; max-width: 100%; margin: -2px 0 0 -10px; }
.mascot-box svg { display: block; width: 100%; height: auto; }
.auth-headline { font-size: 26px; font-weight: 780; letter-spacing: -.4px; line-height: 1.3; }
.auth-headline em { font-style: normal; background: linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-feats { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.auth-feat { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--muted-fg); }
.auth-feat .ib { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.auth-card { width: 100%; }
.auth-card .pad { padding: 26px 26px 24px; }

/* 分段选项卡 */
.auth-tabs { display: flex; background: var(--muted); border-radius: 12px; padding: 3px; gap: 2px; margin: 0 0 18px; }
.auth-tabs button { flex: 1; height: 38px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted-fg); transition: background .15s, color .15s, box-shadow .15s; }
.auth-tabs button.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm); }

/* 带图标输入 */
.ainput { position: relative; }
.ainput > svg.lead { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-fg); pointer-events: none; transition: color .15s; }
.ainput .input { height: 44px; padding-left: 39px; border-radius: 11px; }
.ainput:focus-within > svg.lead { color: var(--brand); }
.pin-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--muted-fg); transition: background .12s, color .12s; }
.pin-eye:hover { background: var(--muted); color: var(--fg); }
.pin-eye svg { width: 16px; height: 16px; }
.pin-eye .off { display: none; }
.pin-eye[data-on="1"] .on { display: none; }
.pin-eye[data-on="1"] .off { display: block; }
.ainput input.with-eye { padding-right: 42px; }
.ainput select.input { padding-left: 12px; }

/* 主按钮（渐变 + 悬浮质感） */
.auth-submit { height: 44px; border-radius: 11px; font-size: 14px; font-weight: 650; letter-spacing: .2px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0; box-shadow: 0 12px 26px -12px var(--brand-ring), inset 0 1px 0 rgba(255,255,255,.28); transition: filter .15s, transform .12s, box-shadow .2s; }
.auth-submit:hover { filter: brightness(1.05); box-shadow: 0 16px 30px -12px var(--brand-ring), inset 0 1px 0 rgba(255,255,255,.3); }
.auth-submit:active { transform: translateY(.5px); }
.auth-submit:disabled { filter: grayscale(.25) brightness(.96); }

/* 「安全验证」行（注册/找回）：承载极验交互与状态。
   原生按钮视觉隐藏（.geetest_holder opacity:0），弹层 .geetest_box_wrap 是其兄弟节点，不受影响；
   .gt-host 悬浮在行中心，为弹层提供几何锚点。 */
.gt-row { position: relative; display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; padding: 9px 12px 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--muted) 55%, transparent); cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .2s, background .25s; }
.gt-row:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.gt-row .gt-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); transition: background .25s, color .25s; }
.gt-row .gt-ic svg { width: 15px; height: 15px; }
.gt-row .gt-tx { flex: 1; min-width: 0; }
.gt-row .gt-tx b { display: block; font-size: 12.5px; font-weight: 700; }
.gt-row .gt-tx span { display: block; font-size: 11.5px; color: var(--muted-fg); margin-top: 1px; }
.gt-row .gt-go { flex: none; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 650; color: var(--brand); background: var(--brand-soft); transition: filter .12s; }
.gt-row .gt-go:hover { filter: brightness(.95); }
.gt-row .gt-go:disabled { opacity: .55; cursor: default; }
.gt-row.ok { border-color: color-mix(in srgb, var(--green) 42%, var(--border)); background: color-mix(in srgb, var(--green) 7%, transparent); }
.gt-row.ok .gt-ic { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.gt-row.ok .gt-go { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.gt-row.err { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.gt-row.err .gt-ic { background: var(--amber-bg); color: var(--amber); }
.gt-row.asking { cursor: progress; }
.gt-row.asking::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none; animation: gtRing 1.15s ease-out infinite; }
@keyframes gtRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 32%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
/* 极验宿主：铺满整行。
   隐藏策略（勿改）：只隐藏按钮的视觉部件（svg/mask/content/err_code），
   绝不整层隐藏 .geetest_holder —— 验证弹窗(.geetest_box_wrap)嵌套在 holder 内部，
   整体隐藏会连带藏掉弹窗，且钉死透明度会冻结 geetest 内部动画（弹窗永远停在 freeze_wait）。
   .geetest_btn_click 拉伸为整行透明点击层：行内任何点击都是真实可信点击，直接唤起弹窗。
   弹窗固定悬于行上方：bottom 偏移 = 100%(宿主高) + 205px(半弹层/193 + 间隙12)。 */
.gt-host { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* holder 在浅色方案下自带白色渐变「药丸」背景（深色方案没有）——必须抹掉，
   否则会整块盖住行内容（iPhone 浅色模式实机「空白大框」根因，已在复现确认）。
   max-height 防御 holder 在个别环境被拉高越界。 */
.gt-host .geetest_holder { width: 100% !important; height: 100% !important; max-height: 100% !important; background: none !important; box-shadow: none !important; border: 0 !important; }
.gt-host .geetest_holder > svg,
.gt-host .geetest_holder > .geetest_mask,
.gt-host .geetest_holder > .geetest_content,
.gt-host .geetest_holder > .geetest_err_code { opacity: 0 !important; pointer-events: none !important; }
.gt-host .geetest_holder > .geetest_btn_click { pointer-events: auto !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; cursor: pointer; }
.gt-host .geetest_box_wrap { pointer-events: auto; }
.gt-host .geetest_boxShow .geetest_box_wrap { top: auto !important; bottom: calc(100% + 205px) !important; }
.gt-row.ok .gt-host .geetest_btn_click, .gt-row.err .gt-host .geetest_btn_click { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .gt-row.asking::after { animation: none; } }

/* 宇航员伙伴（主题感知配色 + 循环动效；密码聚焦时「蒙眼」） */
.mascot { --mc-suit: #ffffff; --mc-face: #FFF7F1; --mc-line: #E3E5EE; --mc-eye: #262A36; --mc-cheek: rgba(250,44,25,.30); --mc-paw: #ffffff; width: 100%; height: auto; }
[data-theme="dark"] .mascot { --mc-suit: #1F222B; --mc-face: #2A2E3A; --mc-line: #383E4C; --mc-eye: #E9EBF4; --mc-cheek: rgba(250,100,25,.42); --mc-paw: #454C60; }
.mascot .m-char, .mascot .m-hand, .mascot .m-eye, .mascot .m-flame, .mascot .m-led, .mascot .m-star, .mascot .m-planet, .mascot .m-orbit, .mascot .m-scarf, .mascot .m-mouth-o, .mascot .m-spark, .mascot .m-blush { transform-box: fill-box; }
.mascot .m-char { animation: mFloat 4.6s ease-in-out infinite; }
@keyframes mFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mascot .m-hand { transition: transform .55s cubic-bezier(.34,1.56,.64,1); transform-origin: 50% 50%; }
.mascot .m-hand circle { fill: var(--mc-paw); }
.mascot.pw-mode .m-hand-l { transform: translate(22px,-63px) rotate(10deg); }
.mascot.pw-mode .m-hand-r { transform: translate(-22px,-63px) rotate(-10deg); }
.mascot.pw-mode .m-hand { filter: drop-shadow(0 3px 5px rgba(53,8,4,.14)); }
.mascot .m-eye { animation: mBlink 4.4s infinite; transform-origin: 50% 50%; }
@keyframes mBlink { 0%, 91.5%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } 94.5% { transform: scaleY(1); } }
.mascot .m-flame { animation: mFlame .8s ease-in-out infinite alternate; transform-origin: 50% 0%; }
@keyframes mFlame { from { transform: scaleY(.82); opacity: .72; } to { transform: scaleY(1.05); opacity: .95; } }
.mascot .m-led { animation: mLed 2.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes mLed { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.08); } }
.mascot .m-star { animation: mTwinkle 3s ease-in-out infinite; }
.mascot .m-star.s2 { animation-delay: .7s; }
.mascot .m-star.s3 { animation-delay: 1.4s; }
.mascot .m-star.s4 { animation-delay: 2.1s; }
@keyframes mTwinkle { 0%, 100% { opacity: .22; } 50% { opacity: .85; } }
.mascot .m-orbit { animation: mDash 9s linear infinite; }
@keyframes mDash { to { stroke-dashoffset: -66; } }
.mascot .m-planet { animation: mFloat 7s ease-in-out infinite; }
.mascot .m-scarf { animation: mSway 3.8s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes mSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
.mascot .m-blush { opacity: .55; transition: opacity .4s; }
.mascot.pw-mode .m-blush { opacity: 1; }
.mascot .m-mouth-main { transition: opacity .2s; }
.mascot .m-mouth-o { opacity: 0; transition: opacity .2s; transform-origin: 50% 50%; }
.mascot.pw-mode .m-mouth-main { opacity: 0; }
.mascot.pw-mode .m-mouth-o { opacity: 1; }
.mascot .m-spark { opacity: 0; transform-origin: 50% 50%; }
.mascot.pw-mode .m-spark { animation: mSpark 1.6s ease-in-out infinite; }
.mascot.pw-mode .m-spark.s2 { animation-delay: .5s; }
@keyframes mSpark { 0% { opacity: 0; transform: scale(.5) rotate(0deg); } 40% { opacity: .95; } 100% { opacity: 0; transform: scale(1.15) rotate(28deg); } }
@media (prefers-reduced-motion: reduce) {
  .mascot .m-char, .mascot .m-eye, .mascot .m-flame, .mascot .m-led, .mascot .m-star, .mascot .m-planet, .mascot .m-orbit, .mascot .m-scarf, .mascot.pw-mode .m-spark { animation: none !important; }
  .mascot .m-hand { transition: none; }
}

/* 认证页移动端（必须在基础定义之后） */
@media (max-width: 1023px) {
  body.auth-mode .main { padding: 22px 14px 30px; align-items: flex-start; }
  .auth-wrap { grid-template-columns: 1fr; max-width: 430px; gap: 12px; }
  .auth-side { align-items: center; gap: 9px; }
  .auth-brandline { gap: 10px; }
  .auth-brandline .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
  .auth-brandline b { font-size: 17px; }
  .auth-brandline span { display: none; }
  .mascot-box { width: 188px; margin: 0 auto; }
  .auth-headline { font-size: 18px; text-align: center; }
  .auth-feats { display: none; }
  .auth-card .pad { padding: 20px 18px 20px; }
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
[hidden] { display: none !important; }

/* ============ 服务解锁（线路质量页） ============ */
.unlock-chip { cursor: pointer; }
.unlock-chip:hover { border-color: var(--brand); color: var(--brand); }
.unlock-chip b { font-weight: 700; }
.um-scroll { overflow-x: auto; padding: 0 20px 8px; }
.um-grid { min-width: 640px; }
.um-hrow, .um-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.um-hrow { height: 38px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.um-row { height: 42px; transition: background .12s; }
.um-row:hover { background: var(--muted); }
.um-row:last-child { border-bottom: 0; }
.um-svc { width: 150px; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; min-width: 0; }
.um-svc svg { width: 20px; height: 20px; flex: none; }
.um-cell { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.um-hbtn { cursor: pointer; }
.um-hbtn:hover { color: var(--fg); }
.um-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.um-chip.ok { color: #1c9e62; background: rgba(43,164,113,.12); }
.um-chip.partial { color: #b8770f; background: rgba(232,160,60,.15); }
.um-chip.blocked { color: #c33c33; background: rgba(213,73,65,.10); }
.um-chip.unknown { color: var(--muted-fg); background: var(--muted); }
.um-chip .reg { font-weight: 500; font-size: 10.5px; opacity: .85; }
.uModal { position: fixed; inset: 0; z-index: 3010; background: rgba(9,9,11,.5); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility .18s; }
.uModal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.uModal-card { width: min(460px, 100%); max-height: 78vh; background: var(--card); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 18px 50px -12px rgba(0,0,0,.4); }
.uModal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 14px; }
.uModal-body { overflow: auto; padding: 8px 16px 14px; }
.uk-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.uk-row:last-child { border-bottom: 0; }
.uk-row svg { width: 22px; height: 22px; flex: none; }
.uk-info { flex: 1; min-width: 0; }
.uk-name { font-size: 13.5px; font-weight: 600; }
.uk-dt { font-size: 11px; color: var(--muted-fg); margin-top: 1px; }
.uk-st { font-size: 12px; font-weight: 600; flex: none; }
.uk-st.ok { color: #1c9e62; }
.uk-st.partial { color: #b8770f; }
.uk-st.blocked { color: #c33c33; }
.uk-st.unknown { color: var(--muted-fg); }

/* ============ 排版健壮性 + 动效系统 + SVG 装饰 ============ */
.badge, .btn, .chip, .seg button, .um-chip, .wgw-hub { white-space: nowrap; }
.num { white-space: nowrap; }
.kpi .val { white-space: nowrap; }
.kpi .foot { flex-wrap: wrap; row-gap: 5px; line-height: 1.45; }

/* 视图进入动画（切换页面时依次浮入） */
.anim-in > * { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; }
.anim-in > *:nth-child(1) { animation-delay: .01s; }
.anim-in > *:nth-child(2) { animation-delay: .06s; }
.anim-in > *:nth-child(3) { animation-delay: .11s; }
.anim-in > *:nth-child(4) { animation-delay: .16s; }
.anim-in > *:nth-child(5) { animation-delay: .21s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 流量柱生长动画 */
.anim-in .bars .bar { animation: growBar .65s cubic-bezier(.22,1,.36,1) both; transform-origin: bottom; }
@keyframes growBar { from { transform: scaleY(.15); opacity: .4; } }

/* 状态点呼吸 */
.dot.g { animation: dotPulse 2.8s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--green-bg); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); } }

/* 待支付徽标轻呼吸 */
.badge.amber { animation: softPulse 2.4s ease-in-out infinite; }
.badge.amber.plain { animation: none; }   /* 回程线路标记等静态场景 */
.badge.red { background: var(--red-bg); border-color: transparent; color: var(--red); }
/* 订阅卡规格格（2×2；与配置页规格设计语言一致）+ 当前套餐描边 */
.plan .p-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.plan .p-tile { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 11px; padding: 9px 10px; background: var(--bg); min-width: 0; }
.plan .p-tile > svg { flex: none; color: var(--muted-fg); }
.plan .p-tile b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan .p-tile i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted-fg); margin-top: 1px; }
.plan.current { border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 6%, transparent); }

/* 套餐规格（重设计：2×2 规格格 + 当前套餐信息条） */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.spec-tile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg); min-width: 0; }
.spec-tile .ib { width: 32px; height: 32px; border-radius: 9px; }
.spec-tile b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-tile i { display: block; font-style: normal; font-size: 11px; color: var(--muted-fg); margin-top: 1px; }
.spec-cur { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 600; }
.spec-cur svg { flex: none; }

/* 流量明细 v2：按天分组 + 行内节点信息 */
.tday { display: flex; align-items: center; justify-content: space-between; padding: 13px 0 5px; }
.tday .tk { font-size: 12.5px; font-weight: 700; }
.tday .tv { font-size: 11.5px; color: var(--muted-fg); }
.trow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--border); }
.tday + .trow { border-top: 0; }
.tflag { width: 30px; height: 30px; border-radius: 9px; background: var(--muted); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.tflag svg.fl { width: 21px; height: 14px; border-radius: 2.5px; display: block; }
.trow .grow .t { font-size: 13.5px; font-weight: 600; }
.trow .grow .s { font-size: 11.5px; color: var(--muted-fg); margin-top: 2px; }
.trow > b.num { font-size: 13.5px; font-weight: 700; flex: none; }
.trow > b.num small { font-size: 10.5px; color: var(--muted-fg); font-weight: 600; }

/* 签到页 v2：今日签到主卡 */
.ci-hero { display: flex; align-items: center; gap: 12px; }
.ci-hero-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.ci-hero-t { font-size: 12.5px; color: var(--muted-fg); }
.ci-hero-val { font-size: 30px; font-weight: 760; letter-spacing: -.6px; margin-top: 2px; line-height: 1.15; }
.ci-hero-val small { font-size: 14px; font-weight: 650; color: var(--muted-fg); margin-left: 4px; letter-spacing: 0; }
.ci-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--muted-fg); margin-top: 12px; }
.ci-meta b { color: var(--fg); }

/* 签到月历（真实记录 + 滑动换月） */
.cim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cim-nav { display: flex; gap: 6px; flex: none; }
.cim-monthbar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cim-monthbar b { font-size: 14px; font-weight: 700; }
.cim-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 10px; font-size: 11px; color: var(--muted-fg); text-align: center; }
.cim-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 6px; }
.cim-d { min-height: 50px; border-radius: 10px; border: 1px solid var(--border); padding: 5px 2px 4px; display: flex; flex-direction: column; align-items: center; }
.cim-d b { font-size: 12px; font-weight: 650; line-height: 1.3; }
.cim-d .rw { font-size: 9px; font-weight: 700; color: var(--brand); margin-top: 3px; white-space: nowrap; }
.cim-d.done { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.cim-d.done b { color: var(--brand); }
.cim-d.today { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.cim-d.other { border: 0; background: transparent; }
.cim-d.future { opacity: .45; }
.cim-in-l { animation: cimInL .24s ease-out; }
.cim-in-r { animation: cimInR .24s ease-out; }
@keyframes cimInL { from { transform: translateX(16px); opacity: 0; } }
@keyframes cimInR { from { transform: translateX(-16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cim-in-l, .cim-in-r { animation: none; } }

/* 我的延迟/速度 行（重新设计：名称+评级一行 / 标签+解锁一行 / 数值右列，手机不挤） */
.qrow { align-items: flex-start; }
.qrow .qtop { display: flex; align-items: center; gap: 8px; }
.qrow .qname { font-size: 14px; font-weight: 700; }
.qrow .qmid { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.qrow .qsub { font-size: 11.5px; color: var(--muted-fg); margin-top: 7px; }
.qrow .qright { flex: none; width: 92px; text-align: right; }
.qrow .qright .t { font-size: 15px; font-weight: 700; }
.qrow .qright .s { font-size: 12px; color: var(--muted-fg); margin-top: 3px; }

/* 「我的延迟」数值配色（阈值对齐 line_view：≤100 / ≤200 / >200） */
.mine-green { color: var(--green); }
.mine-amber { color: var(--amber); }
.mine-red { color: var(--red); }
.mine-dead { color: var(--muted-fg); }
.mine-testing { color: var(--muted-fg); opacity: .85; }
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* 进度条流光 */
.progress > i { position: relative; overflow: hidden; }
.progress > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-100%); animation: sheen 3s ease-in-out infinite; }
@keyframes sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(120%); } }

/* KPI 迷你折线（SVG 装饰） */
.kpi { position: relative; overflow: hidden; }
.kpi-spark { position: absolute; right: 12px; bottom: 10px; width: 92px; height: 26px; opacity: .55; pointer-events: none; }
.kpi-spark .spark-line { stroke-dasharray: 140; stroke-dashoffset: 140; }
.anim-in .kpi-spark .spark-line { animation: drawLine 1.4s cubic-bezier(.22,1,.36,1) .25s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* 图标底（文档卡等） */
.ib { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.ib.green { background: var(--green-bg); color: var(--green); }
.ib.amber { background: var(--amber-bg); color: var(--amber); }

/* 邀请卡装饰 */
.inv-deco { position: absolute; right: -18px; top: -18px; width: 120px; height: 120px; pointer-events: none; opacity: .8; }

/* （旧登录页浮动光斑与 auth-bg 已随重设计移除） */


@media (prefers-reduced-motion: reduce) {
  .anim-in > * , .anim-in .bars .bar, .dot.g, .badge.amber, .progress > i::after, .kpi-spark .spark-line, .auth-bg i { animation: none !important; }
  .kpi-spark .spark-line { stroke-dashoffset: 0; }
}

/* 订单行右侧操作区（窄屏折行时右对齐） */
.oright { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ============ 订单页重设计 + 状态点脉冲 ============ */
.orders { display: grid; gap: 12px; }
@media (min-width: 1024px) { .orders { grid-template-columns: 1fr 1fr; } }
.ocard { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 14px 16px; transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; overflow: hidden; -webkit-user-select: none; user-select: none; }
.ocard:hover { border-color: color-mix(in srgb, var(--fg) 18%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
/* 移动端：点按不出现整块灰色高亮/文字框选，反馈只落在实际按下的按钮上 */
.ocard, .seg button, .iclient, .nav-item, .chip, .badge, .um-hbtn { -webkit-user-select: none; user-select: none; }
.btn, .seg button, .card, .ocard, .iclient, .nav-item, .chip, .icon-btn, .period, .quick a, .um-hbtn, .wgw-hub { -webkit-tap-highlight-color: transparent; }
.ocard.pending { border-color: color-mix(in srgb, #f59e0b 42%, var(--border)); background: linear-gradient(180deg, var(--amber-bg), var(--card) 65%); }
.ocard.canceled { opacity: .78; }
.o-top { display: flex; align-items: center; gap: 9px; }
.o-name { font-size: 14.5px; font-weight: 700; }
.o-amt { margin-left: auto; font-size: 17px; font-weight: 760; letter-spacing: -.3px; }
.ocard.canceled .o-amt { color: var(--muted-fg); font-weight: 600; }
.o-meta { margin-top: 7px; font-size: 12px; color: var(--muted-fg); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o-no { font-variant-numeric: tabular-nums; }
.o-foot { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 8px; }
.o-note { font-size: 11.5px; color: var(--muted-fg); margin-right: auto; }
.o-note.warn { color: #b8770f; font-weight: 600; }
.seg button b { font-size: 11px; font-weight: 700; opacity: .65; margin-left: 2px; }

/* 状态点雷达脉冲（线路/节点 全部生效） */
.dot { position: relative; }
.dot.g::after, .dot.a::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.dot.g::after { border: 1.5px solid var(--green); }
.dot.a::after { border: 1.5px solid #eab308; animation-delay: .4s; }
@keyframes dotPing { 0% { transform: scale(.55); opacity: .75; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

/* ============ 购买流程：待支付横幅 + 支付弹窗（对齐线上） ============ */
.pbanner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border)); background: linear-gradient(180deg, var(--amber-bg), transparent); margin-bottom: 16px; flex-wrap: wrap; }
.pb-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); display: flex; align-items: center; justify-content: center; flex: none; }
.pb-txt { flex: 1; min-width: 0; font-size: 13px; }
.pb-txt b { font-weight: 700; }
.pb-acts { display: flex; gap: 8px; }

.payModal { position: fixed; inset: 0; z-index: 3020; background: rgba(9,9,11,.55); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility .18s; }
.payModal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.payCard { width: min(400px, 100%); max-height: 88vh; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.45); }
.pay-head { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.pay-head .icon-btn { margin-left: auto; }
.pay-body { padding: 16px 18px 18px; }
.pay-line { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; color: var(--muted-fg); }
.pay-line b { color: var(--fg); font-weight: 600; }
.pay-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; margin-top: 8px; border-top: 1px dashed var(--border); }
.pay-total .k { font-size: 13px; font-weight: 600; }
.pay-total .v { font-size: 26px; font-weight: 780; letter-spacing: -.8px; color: var(--brand); }
.pay-method { display: flex; align-items: center; gap: 11px; border: 1px solid var(--brand); border-radius: 12px; padding: 11px 13px; margin-top: 14px; background: var(--brand-soft); }
.pay-method .pm-logo { width: 30px; height: 30px; border-radius: 8px; background: #1677ff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: none; }
.pay-method .pm-name { font-size: 13.5px; font-weight: 650; }
.pay-method small { display: block; color: var(--muted-fg); font-size: 11.5px; margin-top: 1px; font-weight: 400; }
.pay-method .badge { margin-left: auto; }
.pay-acts { display: grid; gap: 9px; margin-top: 18px; }

.qr-wrap { display: flex; flex-direction: column; align-items: center; padding: 4px 0 0; }
.qr-box { width: 188px; height: 188px; border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: #fff; position: relative; overflow: hidden; }
/* 扫码光线（原型同款：付款码 / 节点码 / 订阅码——品牌色光带上下往复扫过） */
.qr-scan { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: qrScan 2.4s ease-in-out infinite; }
@keyframes qrScan { 0%, 100% { top: 8%; } 50% { top: 90%; } }
@media (prefers-reduced-motion: reduce) { .qr-scan { animation: none; opacity: 0; } }

/* 同 .qr-mini：canvas/img/svg 一律钉在内容框内 */
.qr-box svg, .qr-box img, .qr-box canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.qr-scan { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); animation: qrScan 2.4s ease-in-out infinite; }
@keyframes qrScan { 0%, 100% { top: 12px; } 50% { top: 170px; } }
.qr-amt { font-size: 22px; font-weight: 760; margin-top: 13px; letter-spacing: -.4px; }
.qr-hint { font-size: 12px; color: var(--muted-fg); margin-top: 5px; }
.qr-count { margin-top: 11px; font-size: 12.5px; color: var(--muted-fg); display: flex; align-items: center; gap: 6px; }
.qr-count b { color: var(--brand); font-variant-numeric: tabular-nums; }

.pay-done { display: flex; flex-direction: column; align-items: center; padding: 12px 0 4px; text-align: center; }
.pay-check { width: 66px; height: 66px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; color: var(--green); animation: payPop .5s cubic-bezier(.2,1.4,.4,1); }
.pay-check svg { width: 34px; height: 34px; }
@keyframes payPop { from { transform: scale(.4); opacity: 0; } }
.pay-done h4 { margin: 14px 0 4px; font-size: 17px; font-weight: 750; }
.pay-done p { margin: 0; font-size: 12.5px; color: var(--muted-fg); }

/* ============ 订阅导入（对齐官方：复制链接 + 导入到各客户端 + 扫码） ============ */
.import-wrap { display: flex; gap: 18px; margin-top: 14px; align-items: flex-start; }
.import-left { flex: 1; min-width: 0; }
.sub-url { display: flex; gap: 10px; }
.sub-url .input { font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sub-url .btn { flex: none; }
.import-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-top: 12px; }
.iclient { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--card); transition: border-color .12s, transform .12s; text-align: left; }
.iclient:hover { border-color: color-mix(in srgb, var(--fg) 20%, var(--border)); transform: translateY(-1px); }
.iclient .icn { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; background: #fff; border: 1px solid var(--border); padding: 5px; }
.iclient .icn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.iclient b { font-size: 12.5px; font-weight: 650; display: block; }
.iclient span { font-size: 10.5px; color: var(--muted-fg); }
.import-qr { flex: none; width: 148px; }
.qr-mini { width: 148px; height: 148px; border: 1px solid var(--border); border-radius: 14px; padding: 9px; background: #fff; overflow: hidden; position: relative; }
/* QR 元素几何强制钉死：无论渲染出 canvas / img / svg，都必须精确落在内容框内
   （iOS Safari 上 img 无显式尺寸约束会被拉伸/多实例越出容器——曾实测二维码 125×273 拉伸盖住下方输入框与按钮）。
   display:block 不带 !important：库用内联 display:none 隐藏 canvas 时仍保持隐藏。 */
.qr-mini svg, .qr-mini img, .qr-mini canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.import-status { font-size: 12px; color: var(--green); margin-top: 10px; min-height: 16px; }

/* ============ 邀请中心（重设计：动画 SVG 网络插画 + 里程碑 + 步骤流 + 复制粒子） ============ */
.hero-inv { position: relative; overflow: hidden; display: flex; gap: 20px; align-items: center; margin-bottom: 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 18px 22px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-soft) 76%, var(--card)), var(--card) 62%); }
.hero-inv .grow { flex: 1 1 auto; min-width: 0; }
.hero-inv h2 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.2px; }
.hero-inv p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted-fg); line-height: 1.6; }
.inv-code-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.inv-code { font-size: 23px; font-weight: 800; letter-spacing: 2.5px; color: var(--brand); }
.inv-link-row { display: flex; gap: 10px; margin-top: 13px; flex-wrap: wrap; }
.inv-link-row .input { flex: 1; min-width: 200px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.inv-net { width: 196px; height: 152px; flex: none; }
.inet-line { fill: none; stroke: url(#invLine); stroke-width: 1.6; stroke-dasharray: 5 6; animation: dashFlow 1.5s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -22; } }
.inet-node { fill: var(--card); stroke: var(--brand); stroke-width: 1.6; animation: nodeGlow 2.4s ease-in-out infinite alternate; }
.inet-flow { fill: var(--brand); }
.inet-ring { fill: none; stroke: var(--brand); opacity: .4; transform-origin: 100px 75px; animation: corePulse 2.8s ease-out infinite; }
.inet-core { fill: var(--brand); }
.inet-core-text { fill: #fff; font-size: 13px; font-weight: 800; }
@keyframes nodeGlow { from { opacity: .55; } to { opacity: 1; } }
@keyframes corePulse { 0% { transform: scale(.65); opacity: .5; } 70%, 100% { transform: scale(1.4); opacity: 0; } }

/* 里程碑 */
.mile-bar { height: 8px; }
.mile-stops { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted-fg); margin-top: 7px; padding: 0 1px; }
.mile-stops span.gift { color: var(--brand); font-weight: 700; }
.anim-in .mile-bar > i { animation: growX .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes growX { from { transform: scaleX(0); } }
.mile-bar > i { transform-origin: left; }

/* 邀请记录逐行入场 */
.anim-in .inv-rows .row { animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; }
.anim-in .inv-rows .row:nth-child(1) { animation-delay: .22s; }
.anim-in .inv-rows .row:nth-child(2) { animation-delay: .29s; }
.anim-in .inv-rows .row:nth-child(3) { animation-delay: .36s; }
.anim-in .inv-rows .row:nth-child(4) { animation-delay: .43s; }
.anim-in .inv-rows .row:nth-child(5) { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .anim-in .inv-rows .row { animation: none; } }

/* 规则步骤流 */
.steps { display: flex; align-items: stretch; gap: 10px; }
.step { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; display: flex; gap: 11px; background: var(--card); transition: border-color .15s, transform .15s; }
.step:hover { border-color: color-mix(in srgb, var(--fg) 18%, var(--border)); transform: translateY(-1px); }
.step .ib { width: 34px; height: 34px; }
.step b { display: block; font-size: 13px; font-weight: 650; }
.step div span { font-size: 11.5px; color: var(--muted-fg); line-height: 1.5; display: block; margin-top: 2px; }
.step-arrow { width: 26px; height: 26px; align-self: center; flex: none; color: var(--brand); opacity: .8; }
.step-arrow .sa-down { display: none; }
.step-arrow path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-arrow .dash { stroke-dasharray: 3 3; animation: dashFlow 1.2s linear infinite; }

/* 复制粒子 */
.spark { position: fixed; width: 6px; height: 6px; border-radius: 99px; z-index: 9999; pointer-events: none; animation: sparkFly .72s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sparkFly { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35); opacity: 0; } }

/* 天数概率柱状图（按真实权重） */
.pchart { display: flex; align-items: flex-end; gap: 6px; height: 118px; padding-top: 22px; }
.pc-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; padding-bottom: 20px; }
.pc-bar em { position: absolute; top: -17px; font-style: normal; font-size: 9.5px; font-weight: 650; color: var(--muted-fg); opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s, color .15s; }
.pc-bar i { flex: none; display: block; width: 100%; border-radius: 6px 6px 3px 3px; transform-origin: bottom; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand) 55%, var(--brand-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: filter .15s, transform .15s; }
.pc-bar span { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted-fg); transition: color .15s; font-variant-numeric: tabular-nums; }
.pc-bar:hover i { filter: brightness(1.08) saturate(1.05); transform: scaleY(1.02); }
.pc-bar:hover em { opacity: 1; transform: translateY(0); color: var(--brand); }
.pc-bar:hover span { color: var(--fg); }
.pc-bar.hot i { background: linear-gradient(180deg, #ffd583, var(--amber) 68%, #b45309); }
.anim-in .pc-bar i { animation: growBar .62s cubic-bezier(.22,1,.36,1) both; }
@keyframes growBar { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .anim-in .pc-bar i { animation: none; } }

/* ============ 仪表盘升级：流量主视觉 + 图标循环动效 ============ */
.traffic-hero { position: relative; overflow: hidden; margin-bottom: 16px; border-radius: calc(var(--radius) + 6px); padding: 18px 20px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: #fff;
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring);
}
/* 底部多层流动波浪：像流量持续流动（无缝平移循环） */
.th-waves { position: absolute; left: 0; bottom: -6px; width: 200%; display: block; pointer-events: none; }
.th-waves path { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.6; }
.wv1 { height: 86px; opacity: .42; animation: waveMove 11s linear infinite; }
.wv2 { height: 62px; opacity: .30; animation: waveMove 7.5s linear infinite reverse; }
.wv3 { height: 44px; opacity: .22; animation: waveMove 5.6s linear infinite; }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.th-today { position: absolute; top: 14px; right: 16px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); font-size: 11.5px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.th-today b { font-weight: 700; }
.th-ring { position: relative; width: 104px; height: 104px; flex: none; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.24); stroke-width: 9; }
.ring-fg { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 35.9; filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); }
.anim-in .traffic-hero .ring-fg { animation: ringDraw 1.3s cubic-bezier(.22,1,.36,1) .15s both; }
@keyframes ringDraw { from { stroke-dashoffset: 326.7; } }
.th-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.th-ring-center b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.th-ring-center span { font-size: 10.5px; opacity: .85; margin-top: 3px; }
.th-main { flex: 1 1 auto; min-width: 0; position: relative; }
.th-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; opacity: .92; }
.th-label .ic { animation: animPulse 2.6s ease-in-out infinite; }
.th-num { display: flex; align-items: baseline; gap: 6px; margin: 9px 0 7px; }
.th-num b { font-size: 34px; font-weight: 820; letter-spacing: -1.4px; line-height: 1; }
.th-num small { font-size: 14px; font-weight: 600; opacity: .88; }
.th-meta { font-size: 12px; opacity: .82; line-height: 1.5; }
.th-meta b { font-weight: 650; }
.th-acts { display: flex; gap: 9px; margin-top: 13px; padding-top: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.22); }
.th-btn { height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.14); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s; }
.th-btn:hover { background: rgba(255,255,255,.26); }
/* 图标循环动效（KPI / 卡片标题 / 行内箭头 / 快捷操作） */
.anim-pulse { animation: animPulse 2.6s ease-in-out infinite; }
@keyframes animPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.anim-wiggle { animation: animWiggle 4s ease-in-out infinite; }
@keyframes animWiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 88% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } }
.anim-tick { animation: animTick 3.4s ease-in-out infinite; }
@keyframes animTick { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-4deg); } }
.anim-sway { animation: animSway 3.6s ease-in-out infinite; }
@keyframes animSway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }
.anim-nudge { animation: animNudge 2.6s ease-in-out infinite; }
@keyframes animNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.quick .qi { animation: animFloat 3.6s ease-in-out infinite; }
.quick a:nth-child(2) .qi { animation-delay: .5s; }
.quick a:nth-child(3) .qi { animation-delay: 1s; }
.quick a:nth-child(4) .qi { animation-delay: 1.5s; }
@keyframes animFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.anim-in .quick a { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; }
.anim-in .quick a:nth-child(2) { animation-delay: .07s; }
.anim-in .quick a:nth-child(3) { animation-delay: .14s; }
.anim-in .quick a:nth-child(4) { animation-delay: .21s; }
@media (max-width: 1023px) {
  .traffic-hero { flex-wrap: nowrap; align-items: center; gap: 13px; padding: 15px 16px 19px; }
  .th-ring { width: 82px; height: 82px; }
  .th-ring-center b { font-size: 18.5px; }
  .th-ring-center span { font-size: 9.5px; margin-top: 2px; }
  .th-num { margin: 6px 0 5px; }
  .th-num b { font-size: 28px; letter-spacing: -1px; }
  .th-meta { font-size: 11.5px; }
  .th-acts { margin-top: 10px; }
  .th-btn { height: 30px; padding: 0 12px; font-size: 12px; }
  .wv1 { height: 64px; }
  .wv2 { height: 48px; }
  .wv3 { height: 34px; }
  .th-today { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .th-waves, .anim-pulse, .anim-wiggle, .anim-tick, .anim-sway, .anim-nudge, .quick .qi { animation: none !important; } }

/* ============ 通知面板（顶栏铃铛） ============ */
.bell-badge { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 99px; background: #FF4D4F; color: #fff; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; border: 2px solid var(--bg); }
.notif-pop { position: fixed; top: 66px; right: 16px; z-index: 4000; width: min(356px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 50px -12px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s, visibility .18s, transform .18s; overflow: hidden; }
.notif-pop.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.np-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.np-head .btn { margin-left: auto; }
.np-list { max-height: 324px; overflow-y: auto; }
.np-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background .12s; }
.np-item:hover { background: var(--muted); }
.np-item:last-child { border-bottom: 0; }
.np-item .ib { width: 32px; height: 32px; border-radius: 9px; }
.np-item .t { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.np-item .s { font-size: 11.5px; color: var(--muted-fg); margin-top: 3px; line-height: 1.55; }
.np-item .time { font-size: 10.5px; color: var(--muted-fg); margin-top: 4px; }
.np-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--brand); flex: none; box-shadow: 0 0 0 3px var(--brand-soft); animation: softPulse 2.4s ease-in-out infinite; }
.np-item.read { opacity: .6; }
.np-item.read .np-dot { display: none; }
.np-foot { padding: 10px 16px; text-align: center; border-top: 1px solid var(--border); }
.np-empty { padding: 26px 0; text-align: center; color: var(--muted-fg); font-size: 12.5px; display: flex; flex-direction: column; align-items: center; }

/* 公告行（可点击打开详情） */
.notice-row { cursor: pointer; }
.notice-row .t { transition: color .12s; }
.notice-row:hover .t { color: var(--brand); }

/* ============ 节点状态页（升级设计） ============ */
.node-stats { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; }
/* 数据分格：在线节点 / 在线用户 / 平均延迟（三格等分，底部分行放最佳与检测时间） */
.ns2-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ns2-cell { padding: 13px 6px 11px; text-align: center; border-left: 1px solid var(--border); }
.ns2-cell:first-child { border-left: 0; }
.ns2-cell b { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; font-weight: 760; letter-spacing: -.4px; line-height: 1.1; }
.ns2-cell b small { font-size: 11px; font-weight: 650; color: var(--muted-fg); letter-spacing: 0; }
.ns2-cell i { display: block; font-style: normal; font-size: 11px; color: var(--muted-fg); margin-top: 3px; letter-spacing: .2px; }
.ns2-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted-fg); }
.ns2-foot b { color: var(--fg); font-weight: 650; }
.ns2-loading { padding: 16px 0; text-align: center; color: var(--muted-fg); font-size: 12.5px; }
.nodes-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.node-card { gap: 13px; }
.nc-flag { width: 42px; height: 42px; border-radius: 12px; background: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 21px; flex: none; box-shadow: inset 0 0 0 1px var(--border); }
.nc-flag svg { width: 26px; height: 18px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); }
.nc-main { flex: 1 1 auto; min-width: 0; }
.nc-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.nc-name .badge { font-size: 10px; height: 19px; padding: 0 7px; }
.nc-proto { font-size: 11.5px; color: var(--muted-fg); margin-top: 3px; }
.nc-load { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.nc-bar { width: 74px; height: 5px; border-radius: 99px; background: var(--muted); overflow: hidden; flex: none; }
.nc-bar > i { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.nc-bar > i.ok { background: linear-gradient(90deg, #22c55e, #4ade80); }
.nc-bar > i.mid { background: linear-gradient(90deg, #eab308, #facc15); }
.nc-bar > i.hot { background: linear-gradient(90deg, #ef4444, #f87171); }
.nc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.nc-lat { display: flex; align-items: center; gap: 6px; }
.nc-lat b { font-size: 17px; font-weight: 760; letter-spacing: -.4px; }
.nc-lat small { font-size: 11px; color: var(--muted-fg); }
.nc-speed { font-size: 11.5px; color: var(--muted-fg); }
.nc-acts { display: flex; gap: 7px; margin-top: 3px; }
.sig { width: 20px; height: 14px; }
.sig rect { fill: var(--green); transform-box: fill-box; transform-origin: bottom; }
.sig rect.off { fill: var(--muted); }
.sig.mid rect:not(.off) { fill: #eab308; }
.anim-in .node-grid .node-card { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; }
.anim-in .node-grid .node-card:nth-child(2) { animation-delay: .06s; }
.anim-in .node-grid .node-card:nth-child(3) { animation-delay: .12s; }
.anim-in .node-grid .node-card:nth-child(4) { animation-delay: .18s; }
.anim-in .sig rect { animation: growBar .55s cubic-bezier(.22,1,.36,1) both; }
.anim-in .sig rect:nth-child(2) { animation-delay: .06s; }
.anim-in .sig rect:nth-child(3) { animation-delay: .12s; }
.anim-in .sig rect:nth-child(4) { animation-delay: .18s; }
.anim-in .nc-bar > i { animation: growX .8s cubic-bezier(.22,1,.36,1) .15s both; }
@media (max-width: 1023px) {
  .nodes-toolbar { flex-direction: column; align-items: stretch; }
  .nodes-toolbar .search { width: 100%; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .chip-row .chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .anim-in .node-grid .node-card, .anim-in .sig rect, .anim-in .nc-bar > i { animation: none !important; } }

/* ============ 节点二维码弹窗 + 轻提示 ============ */
.qr-frame { padding: 12px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 26%, var(--card)), var(--card) 58%); box-shadow: 0 12px 32px -14px var(--brand-ring), inset 0 0 0 1px var(--border); }
.qr-link-row { display: flex; gap: 8px; margin-top: 14px; width: 100%; }
.qr-link-row .input { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -8px); z-index: 5000; padding: 9px 16px; border-radius: 99px; background: rgba(22,24,30,.92); color: #fff; font-size: 12.5px; box-shadow: 0 10px 26px rgba(0,0,0,.28); opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; max-width: 86vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ 个人中心（重设计） ============ */
.prof-hero { position: relative; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 18px 20px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 72%, var(--card)), var(--card) 60%); }
.ph-top { position: relative; display: flex; align-items: center; gap: 14px; }
.ph-avatar { width: 54px; height: 54px; border-radius: 16px; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; box-shadow: 0 8px 20px -8px var(--brand-ring); }
.ph-who { flex: 1 1 auto; min-width: 0; }
.ph-name { font-size: 15.5px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.ph-name .em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-meta { font-size: 12px; color: var(--muted-fg); margin-top: 4px; }
.ph-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 15px; border-top: 1px dashed var(--border); padding-top: 12px; }
.ph-stat { display: flex; flex-direction: column; gap: 3px; }
.ph-stat + .ph-stat { border-left: 1px dashed var(--border); padding-left: 14px; }
.ph-stat span { font-size: 11px; color: var(--muted-fg); }
.ph-stat b { font-size: 13.5px; font-weight: 700; }
@media (max-width: 1023px) { .ph-top { flex-wrap: wrap; } .ph-btn { width: 100%; } }
.pw-strength { display: flex; align-items: center; gap: 5px; }
.pw-strength i { height: 4px; border-radius: 99px; background: var(--muted); flex: 1; transition: background .2s; }
.pw-strength.s1 i:nth-child(1) { background: #ef4444; }
.pw-strength.s2 i:nth-child(-n+2) { background: #f59e0b; }
.pw-strength.s3 i:nth-child(-n+3) { background: #84cc16; }
.pw-strength.s4 i { background: #22c55e; }
.pw-strength em { font-size: 11px; color: var(--muted-fg); font-style: normal; margin-left: 4px; white-space: nowrap; }

/* 补充组件的移动端覆盖（必须放在基础定义之后） */
@media (max-width: 1023px) {
  .node-grid { grid-template-columns: 1fr; }
  .orow { flex-wrap: wrap; }
  .orow .oright { width: 100%; justify-content: flex-end; padding-top: 2px; }
  .wheel-stage { transform: scale(.92); }
  .hide-s { display: none; }
  .import-wrap { flex-direction: column-reverse; }
  .import-qr { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .import-clients { grid-template-columns: 1fr 1fr; }
  .sub-url { flex-direction: column; }
  .sub-url .btn { width: 100%; }
  .hero-inv { flex-direction: column-reverse; }
  .hero-inv .inv-net { align-self: center; }
  .steps { flex-direction: column; }
  .step-arrow { margin: -2px auto; }
  .step-arrow .sa-right { display: none; }
  .step-arrow .sa-down { display: block; }
}

/* ============ 幸运大转盘：悬浮球（可拖动）+ 悬浮弹窗（对齐原版） ============ */
.wfab { position: fixed; right: 22px; bottom: 28px; z-index: 1300; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; animation: wfabIn .55s cubic-bezier(.2,1.4,.4,1); }
.wfab.dragging { cursor: grabbing; }
.wfab-bob { animation: wfabBob 3s ease-in-out 1.2s infinite; }
.wfab-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: inherit;
  background: radial-gradient(circle at 35% 30%, #FFE9A8 0%, #FFC53D 55%, #F0A500 100%);
  box-shadow: 0 10px 26px rgba(240,165,0,.42), 0 3px 10px rgba(0,0,0,.22), inset 0 0 0 2.5px rgba(255,255,255,.55);
  transition: transform .18s ease; }
.wfab-btn:hover { transform: scale(1.07); }
.wfab-btn:active { transform: scale(.96); }
.wfab-btn svg { width: 30px; height: 30px; display: block; }
.wfab-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(255,197,61,.85); animation: wfabHalo 2.6s ease-out 1.6s infinite; pointer-events: none; }
.wfab-badge { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #FF4D4F; color: #fff; font-size: 12px; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
@keyframes wfabIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wfabBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes wfabHalo { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.42); opacity: 0; } 100% { transform: scale(1.42); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wfab, .wfab-bob, .wfab-btn::after { animation: none !important; } }
body.auth-mode .wfab { display: none; }

/* 悬浮弹窗（透明底板，转盘直接悬浮在页面上） */
.wmodal { position: fixed; inset: 0; z-index: 3008; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
.wmodal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.wm-stage { position: relative; width: min(90vw, 392px); filter: drop-shadow(0 20px 44px rgba(5,10,28,.5)); display: flex; flex-direction: column; align-items: center; }
.wm-x { position: absolute; top: -2px; right: -2px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(15,21,41,.7); color: #EDF2FF; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(5,10,28,.35); }
.wm-x:hover { background: rgba(15,21,41,.88); }
.wm-pill { margin-top: 18px; padding: 8px 16px; border-radius: 999px; background: rgba(15,21,41,.78); color: #EDF2FF; font-size: 12.5px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(5,10,28,.35); text-align: center; }
.wm-cta { display: block; margin-top: 14px; width: min(92vw, 300px); height: 44px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700; color: #3A2800; background: linear-gradient(180deg,#FFE08A,#FFC53D); box-shadow: 0 8px 22px rgba(255,197,61,.35); }
.wm-cta:active { transform: translateY(1px); }
.wm-result { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; background: transparent; z-index: 3; }
.wm-result.show { display: flex; }
.wm-rv { width: min(86%, 252px); background: linear-gradient(180deg,#1B2750 0%,#131D3C 100%); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 18px 16px 16px; text-align: center; box-shadow: 0 24px 60px rgba(2,6,18,.55), 0 4px 14px rgba(2,6,18,.35); animation: wmPop .38s cubic-bezier(.2,1.4,.4,1); }
@keyframes wmPop { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wm-rv-k { font-size: 12px; color: rgba(237,242,255,.6); }
.wm-rv-v { font-size: 27px; font-weight: 900; margin-top: 6px; color: #FFD666; letter-spacing: .5px; }
.wm-rv-v.lose { color: #9AA6C4; font-size: 21px; }
.wm-rv-n { font-size: 12px; color: rgba(237,242,255,.55); margin-top: 6px; }
.wm-rv-btn { margin-top: 14px; width: 100%; height: 38px; border: 0; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: #3A2800; background: linear-gradient(180deg,#FFE08A,#FFC53D); }
.wm-cf { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; animation: wmFall 1.5s cubic-bezier(.25,.6,.5,1) forwards; z-index: 4; pointer-events: none; }
@keyframes wmFall { 0% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(330px) rotate(260deg); opacity: 0; } }

/* 幸运大转盘（SVG 重绘：金边圈 + 流光灯珠；页面内嵌与弹窗共用） */
.wgw-stage { position: relative; width: 288px; height: 288px; }
.wgw-stage::before { content: ''; position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(circle, rgba(255,197,61,.22), rgba(255,197,61,0) 70%); pointer-events: none; }
.wgw-stage::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; box-shadow: 0 18px 34px rgba(5,10,28,.28); pointer-events: none; }
.wgw-rot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 4s cubic-bezier(.15,.9,.22,1); will-change: transform; }
.wgw-stud { fill: #FFF6DC; animation: wgwStud 1.7s ease-in-out infinite; }
@keyframes wgwStud { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.wgw-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; border: 3px solid #FFF8E7; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 42% 36%, #FFF3CE 0%, #FFC53D 55%, #F0A500 100%);
  color: #5A3A00; font-size: 17px; font-weight: 800; letter-spacing: 1px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(240,165,0,.5), 0 0 0 7px rgba(240,165,0,.20), inset 0 -3px 8px rgba(122,74,0,.28); z-index: 2; }
.wgw-hub:active { transform: translate(-50%,-50%) scale(.96); }
.wgw-ptr { position: absolute; left: 50%; top: -8px; width: 26px; height: 30px; transform: translateX(-50%); z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(5,10,28,.35)); }
@media (max-width: 420px) { .wgw-stage { transform: scale(.9); transform-origin: top center; } }
@media (prefers-reduced-motion: reduce) { .wgw-stud { animation: none; opacity: .85; } }


/* ===== 面板更新提示（版本心跳） ===== */
.upd-pill { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); z-index: 420; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: .1px; box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 45%, transparent), 0 2px 6px rgba(5, 10, 28, .18); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transform: translate(-50%, 10px); opacity: 0; animation: updIn .3s cubic-bezier(.2, .8, .3, 1) forwards; }
.upd-pill:active { transform: translate(-50%, 1px) scale(.97); }
.upd-pill .ic { color: #fff; animation: updSpin 2.6s linear infinite; }
.upd-pill b { font-weight: 800; }
@keyframes updIn { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes updSpin { to { transform: rotate(360deg); } }

/* ===== 套餐旗舰卡：当前套餐 / 性价比之选（深红渐变 + 玻璃件，与仪表盘主视觉同一套语言） ===== */
.plan-hero { border-color: transparent; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.26), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,214,128,.30), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #350804) 0%, var(--brand) 40%, var(--brand-2) 74%, #ffb066 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.30), 0 18px 40px -16px var(--brand-ring);
}
.plan-hero:hover { border-color: transparent; transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), inset 0 1px 0 rgba(255,255,255,.34), 0 22px 46px -16px var(--brand-ring);
}
.ph-deco { position: absolute; right: -34px; top: -36px; width: 240px; height: 240px; pointer-events: none; }
.ph-top { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.ph-mark { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ph-name { font-size: 19px; font-weight: 750; letter-spacing: .2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ph-sub { font-size: 12px; opacity: .78; margin-top: 3px; }
.ph-tag { flex: none; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34);
  font-size: 11px; font-weight: 700; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ph-price { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 3px; position: relative; }
.ph-price .cur { font-size: 17px; font-weight: 700; }
.ph-price .n { font-size: 42px; font-weight: 820; letter-spacing: -1.8px; line-height: 1; text-shadow: 0 2px 12px rgba(53,8,4,.20); }
.ph-price .per { font-size: 12.5px; opacity: .82; }
.ph-note { font-size: 11.5px; opacity: .74; }
.ph-note b { font-weight: 720; opacity: 1; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 10px; position: relative; }
.ph-tile { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 10px; min-width: 0;
  background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.ph-tile > svg { flex: none; opacity: .92; }
.ph-tile b { display: block; font-size: 13.5px; font-weight: 720; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-tile i { display: block; font-style: normal; font-size: 10.5px; opacity: .72; margin-top: 1px; }
.ph-perk { font-size: 11.5px; opacity: .66; position: relative; }
.plan-hero .badge { background: rgba(255,255,255,.16); color: #fff; border: 0; }
.plan-hero .p-hint { position: relative; }
.plan-hero .btn.block { height: 44px; border-radius: 12px; font-size: 14px; }
.btn.light { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 3px 10px rgba(53,8,4,.22); }
.btn.light:hover { opacity: .92; }
.btn.glass { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.30); }
.btn.glass:hover { background: rgba(255,255,255,.24); }
/* 补：全站多处引用但从未定义的浮动类 */
.anim-float { animation: animFloat 3.6s ease-in-out infinite; }
.anim-spin { animation: updSpin 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .anim-float, .anim-spin, .plan-hero .ic { animation: none !important; } }

/* ===== 订阅状态卡 v2（重新设计：身份行 + 三档信息格 + 用量条） ===== */
.hz-top { position: relative; display: flex; align-items: center; gap: 12px; }
.hz-mark { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 13%, var(--card)); color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); }
.hz-name { font-size: 17px; font-weight: 750; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.hz-sub { font-size: 12px; color: var(--muted-fg); margin-top: 4px; line-height: 1.5; }
.hz-live { display: inline-flex; align-items: center; gap: 5px; }
.hz-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: hzPulse 2.2s ease-in-out infinite; }
@keyframes hzPulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 24%, transparent); } 50% { box-shadow: 0 0 0 5.5px color-mix(in srgb, var(--green) 8%, transparent); } }
.hz-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: 10px 0; }
.hz-stat { padding: 0 12px; min-width: 0; }
.hz-stat:first-child { padding-left: 2px; }
.hz-stat + .hz-stat { border-left: 1px solid var(--border); }
.hz-stat i { display: block; font-style: normal; font-size: 11px; color: var(--muted-fg); }
.hz-stat b { display: block; font-size: 13px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-use { position: relative; }
.hz-use-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.hz-use-row .k { color: var(--muted-fg); }
.hz-use-row > b { font-weight: 650; }
.hz-use-row .pct { margin-left: auto; font-weight: 700; font-size: 11.5px; border-radius: 99px; padding: 2.5px 9px; }
.hz-use-row .pct.green { color: var(--green); background: var(--green-bg); }
.hz-use-row .pct.amber { color: var(--amber); background: var(--amber-bg); }
.hz-use-row .pct.red { color: var(--red); background: var(--red-bg); }
.hz-use .progress { margin-top: 9px; height: 7px; }
@media (max-width: 420px) { .hz-stat { padding: 0 8px; } .hz-stat b { font-size: 12.5px; } }

/* ===== 配置订阅 · 结算卡（深红渐变，与旗舰卡同语言） ===== */
.sum-hero { border-color: transparent; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.24), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,214,128,.28), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #350804) 0%, var(--brand) 40%, var(--brand-2) 74%, #ffb066 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.30), 0 18px 40px -16px var(--brand-ring);
}
.sh-label { font-size: 11.5px; opacity: .68; letter-spacing: .3px; }
.sh-plan { font-size: 17px; font-weight: 750; margin-top: 3px; }
.sh-div { border-top: 1px dashed rgba(255,255,255,.26); margin: 12px 0; }
.sum-hero .line { color: rgba(255,255,255,.74); }
.sum-hero .line b { color: #fff; }
.sum-hero .sh-disc { color: #FFE9A8; }
.sum-hero .total { border-top-color: rgba(255,255,255,.26); }
.sum-hero .total .t { color: rgba(255,255,255,.86); }
.sum-hero .total .v { color: #fff; font-size: 30px; text-shadow: 0 2px 12px rgba(53,8,4,.20); }
.sum-hero .sh-free { margin-top: 10px; color: #FFE9A8; font-weight: 600; }
.sum-hero .btn.light.block { height: 44px; border-radius: 12px; font-size: 14px; }
.sum-hero .tip { color: rgba(255,255,255,.62); }
.sum-hero .coupon { margin-top: 0; }
.sum-hero .coupon .input { background: #fff; border-color: rgba(255,255,255,.5); color: #16181d; }
.sum-hero .coupon .btn.outline { background: #fff; border-color: transparent; color: color-mix(in srgb, var(--brand) 88%, #7a1206); }
.sum-hero .coupon-on b { font-weight: 750; }
.sum-hero .coupon-on .btn.ghost { color: rgba(255,255,255,.88); }
.sum-hero .coupon-on .btn.ghost:hover { background: rgba(255,255,255,.14); }
.sum-hero .coupon-on .ic { color: #B9F6CA !important; }

/* ===== 账号快捷菜单 + 设置面板 ===== */
.acc-pop { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 56px); right: 12px; z-index: 4000;
  width: min(268px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 44px -12px rgba(5,10,28,.35), 0 2px 8px rgba(5,10,28,.10);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.acc-pop.open { opacity: 1; visibility: visible; transform: none; }
.acc-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.acc-head .avatar { width: 38px; height: 38px; font-size: 14px; background: var(--brand-soft); color: var(--brand); border: 0; }
.acc-head b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-head span { display: block; font-size: 11.5px; color: var(--muted-fg); margin-top: 2px; }
.acc-item { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--fg); -webkit-tap-highlight-color: transparent;
  transition: background .12s; }
.acc-item:hover { background: var(--muted); }
.acc-item:active { background: color-mix(in srgb, var(--muted) 78%, var(--border)); }
.acc-item > svg:first-child { color: var(--muted-fg); }
.acc-item .acc-go { color: var(--muted-fg); opacity: .7; }
.acc-item.danger, .acc-item.danger > svg:first-child { color: var(--red); }
.acc-sep { border-top: 1px solid var(--border); margin: 5px 2px; }
.uset { position: fixed; inset: 0; z-index: 4200; display: flex; align-items: center; justify-content: center;
  background: rgba(5,10,28,.42); opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; padding: 20px; }
.uset.open { opacity: 1; visibility: visible; }
.uset-card { width: min(360px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px; box-shadow: var(--shadow); transform: translateY(8px) scale(.98); transition: transform .18s; }
.uset.open .uset-card { transform: none; }
.uset-head { display: flex; align-items: center; justify-content: space-between; }
.uset-head b { font-size: 16px; font-weight: 750; }
.uset-sec { margin-top: 16px; }
.uset-t { font-size: 12.5px; font-weight: 650; color: var(--muted-fg); margin-bottom: 9px; }
.uset-hint { font-size: 11px; color: var(--muted-fg); margin-top: 8px; }
.uset-accs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.as-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 6px; border: 1.5px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; -webkit-tap-highlight-color: transparent; }
.as-opt:hover { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); }
.as-opt i { font-style: normal; font-size: 11px; color: var(--muted-fg); }
.as-opt.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 70%, var(--card)); }
.as-opt.on i { color: var(--fg); font-weight: 650; }

/* ===== 彩色卡片夜间模式：深红渐变降亮度（仪表盘主视觉 / 旗舰卡 / 结算卡） ===== */
[data-theme="dark"] .traffic-hero,
[data-theme="dark"] .db-hero,
[data-theme="dark"] .plan-hero,
[data-theme="dark"] .sum-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6);
}
[data-theme="dark"] .plan-hero:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16), 0 24px 48px -18px rgba(0,0,0,.65); }
[data-theme="dark"] .plan.featured { border-color: color-mix(in srgb, var(--brand) 46%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent); }

/* ===== 弹层滚动锁：任何遮罩类弹层打开时锁住底层页面（防"下一层级还能滑"）
   只锁 html（视口）。不能同时给 body 加 overflow:hidden：那样 body 会变成独立滚动容器，
   sticky 的顶栏 / 侧栏改为相对 body（scrollTop=0）定位，而视口仍停在原滚动位置 → 顶栏被顶出屏幕。
   scrollbar-gutter 预留滚动条位置，避免 Windows 等常显滚动条的系统在锁定时页面横向跳动。 ===== */
html { scrollbar-gutter: stable; }
html:has(body.drawer-open),
html:has(.wmodal.open),
html:has(.uModal.open),
html:has(.uset.open),
html:has(.payModal.open) { overflow: hidden; }
/* 内部滚动容器防滚动链穿透 */
.sidebar, .uModal-card, .uModal-body, .payCard, .wm-stage { overscroll-behavior: contain; }

/* ===== 下载客户端（品牌主卡 + 扫码下载 + 三步开始 + 本次更新 / 文件校验 + 其他设备；与旗舰卡同一套深红渐变语言） ===== */
.dl-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px; padding: 24px 26px; color: #fff; border-color: transparent;
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.26), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,214,128,.30), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #350804) 0%, var(--brand) 40%, var(--brand-2) 74%, #ffb066 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.30), 0 18px 40px -16px var(--brand-ring); }
[data-theme="dark"] .dl-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
.dl-deco { position: absolute; right: -24px; top: -40px; width: 380px; height: 274px; pointer-events: none; }
.dl-wave { transform-origin: 300px 44px; animation: dlWave 4.4s ease-out infinite; }
.dl-wave.w2 { animation-delay: 2.2s; }
@keyframes dlWave { from { transform: scale(1); opacity: .85; } to { transform: scale(1.85); opacity: 0; } }
.dl-flow { animation: dlFlow 1.6s linear infinite; }
@keyframes dlFlow { to { stroke-dashoffset: -20; } }
.dl-main { position: relative; flex: 1; min-width: 0; }
.dl-id { display: flex; align-items: center; gap: 14px; }
.dl-logo { flex: none; width: 62px; height: 62px; display: grid; place-items: center; }
.dl-logo img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(53,8,4,.32)); }
.dl-logo.fb { border-radius: 17px; font-size: 28px; font-weight: 820;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.22); }
.dl-name { font-size: 20px; font-weight: 760; letter-spacing: .1px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.dl-tag { padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34);
  font-size: 11px; font-weight: 700; letter-spacing: .2px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dl-sub { font-size: 12.5px; opacity: .8; margin-top: 4px; }
.dl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: 18px 0 16px; }
.dl-tile { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 11px; border-radius: 12px;
  background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.dl-tile > svg { flex: none; opacity: .92; }
.dl-tile > div { min-width: 0; }
.dl-tile b { display: block; font-size: 14px; font-weight: 740; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; }
.dl-tile i { display: block; font-style: normal; font-size: 10.5px; opacity: .72; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-acts .btn { height: 44px; padding: 0 20px; border-radius: 12px; font-size: 14px; }
.dl-go .ic { animation: dlBob 2.2s ease-in-out infinite; }
@keyframes dlBob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.dl-tip { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; opacity: .76; }
.dl-qr { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 14px 12px; border-radius: 18px;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dl-qr .qr-mini { border-color: transparent; box-shadow: 0 10px 24px -10px rgba(53,8,4,.5); }
.dl-qr .qr-scan { animation-name: dlScan; }
@keyframes dlScan { 0%, 100% { top: 10px; } 50% { top: 134px; } }
.dl-qr b { font-size: 13px; font-weight: 700; margin-top: 10px; }
.dl-qr span:not(.qr-scan) { font-size: 11px; opacity: .74; margin-top: 2px; }
.dl-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--border)); background: var(--amber-bg); }
.dl-note .ib { width: 34px; height: 34px; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 26%, transparent); }
.dl-note b { display: block; font-size: 13px; font-weight: 650; }
.dl-note .grow span { display: block; font-size: 12px; color: var(--muted-fg); margin-top: 2px; line-height: 1.55; }
.dl-log { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dl-log li { display: flex; gap: 10px; align-items: flex-start; }
.dl-log li .badge { flex: none; margin-top: 1px; }
.dl-log li p { margin: 0; min-width: 0; font-size: 13px; line-height: 1.7; }
.dl-log .dl-dot { flex: none; width: 6px; height: 6px; margin: 9px 4px 0; border-radius: 50%; background: var(--brand); }
.dl-logcard { display: flex; flex-direction: column; }
.dl-logcard > .pad { flex: 1; display: flex; flex-direction: column; }
.dl-upd { margin-top: auto; padding-top: 16px; }
.dl-upd p { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12px; line-height: 1.55; color: var(--muted-fg); }
.dl-upd .ic { flex: none; margin-top: 2px; }
.dl-file { margin-top: 10px; }
.dl-file .row { padding: 9px 0; }
.dl-file .k { flex: none; width: 52px; font-size: 12.5px; color: var(--muted-fg); }
.dl-file b { font-size: 13px; font-weight: 600; word-break: break-all; }
.dl-sha { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--muted); }
.dl-sha i { display: block; font-style: normal; font-size: 11px; font-weight: 650; letter-spacing: .3px; color: var(--muted-fg); }
.dl-sha code { display: block; margin-top: 3px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; color: var(--fg); }
.dl-sha .btn { flex: none; }
.dl-oh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-oh .btn { margin-left: auto; }
.dl-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.dl-plat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px 13px; }
.dl-plat.on { border-color: color-mix(in srgb, var(--brand) 42%, var(--border)); background: color-mix(in srgb, var(--brand-soft) 60%, var(--card)); }
.dl-plat-h { display: flex; align-items: center; gap: 8px; }
.dl-plat-h .ic { color: var(--muted-fg); }
.dl-plat-h b { font-size: 13.5px; font-weight: 650; }
.dl-plat-h .badge { margin-left: auto; }
.dl-clis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.dl-cli { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--card); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dl-cli img { width: 20px; height: 20px; border-radius: 6px; background: #fff; object-fit: contain; }
.dl-plats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
button.dl-cli { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg); padding-right: 8px; cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .15s; }
button.dl-cli:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand-soft) 70%, var(--card)); }
button.dl-cli:active { transform: scale(.96); }
button.dl-cli:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dl-cli-tag { font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 99px; background: var(--green-bg); color: var(--green); }
.dl-cli .dl-cli-go { width: 12px; height: 12px; color: var(--muted-fg); transition: color .15s, transform .15s; }
button.dl-cli:hover .dl-cli-go { color: var(--brand); transform: translateY(1px); }
/* 第三方客户端下载弹窗（沿用 .uModal 外壳）：本站下载 + 官方渠道 */
.dlm-card { width: min(480px, 100%); max-height: min(86vh, 760px); }
.dlm-card .uModal-head { padding: 14px 12px 14px 16px; }
.dlm-icn { flex: none; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.dlm-icn img { width: 100%; height: 100%; display: block; object-fit: contain; }
.dlm-ttl { min-width: 0; }
.dlm-ttl b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; font-weight: 720; line-height: 1.3; }
.dlm-ttl > span { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--muted-fg); }
.dlm-ttl .badge, .dlm-rt .badge { height: 19px; padding: 0 7px; font-size: 10.5px; }
.dlm-body { padding: 2px 16px 16px; }
.dlm-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--muted); font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.dlm-note svg.ic { margin-top: 2px; }
.dlm-note.warn { background: var(--amber-bg); color: var(--amber); }
.dlm-sec { margin-top: 16px; }
.dlm-sh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dlm-sh b { font-size: 13px; font-weight: 700; }
.dlm-sh span { font-size: 11.5px; color: var(--muted-fg); }
.dlm-list { display: flex; flex-direction: column; gap: 8px; }
.dlm-row { display: flex; align-items: center; gap: 11px; padding: 10px 10px 10px 11px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: inherit; text-decoration: none; }
a.dlm-row { transition: border-color .15s, background-color .15s; }
a.dlm-row:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: color-mix(in srgb, var(--brand-soft) 55%, var(--card)); }
.dlm-ri { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.dlm-ri.releases, .dlm-ri.site { background: var(--muted); color: var(--fg); }
.dlm-ri.appstore { background: color-mix(in srgb, #0a84ff 13%, var(--card)); color: #0a84ff; }
.dlm-ri.play { background: var(--green-bg); color: var(--green); }
.dlm-ri.msstore { background: color-mix(in srgb, #0078d4 13%, var(--card)); color: #0078d4; }
[data-theme="dark"] .dlm-ri.appstore { color: #4da3ff; }
[data-theme="dark"] .dlm-ri.msstore { color: #4aa5f0; }
.dlm-rt { flex: 1; min-width: 0; }
.dlm-rt b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.dlm-rt i { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); }
.dlm-row .btn { flex: none; }
.dlm-cp { width: 32px; height: 32px; }
.dlm-cp .cp-b { display: none; }
.dlm-cp.ok { color: var(--green); }
.dlm-cp.ok .cp-a { display: none; }
.dlm-cp.ok .cp-b { display: block; }
.dlm-ext { flex: none; display: grid; place-items: center; color: var(--muted-fg); transition: color .15s; }
a.dlm-row:hover .dlm-ext { color: var(--brand); }
.dlm-help { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--muted-fg); }
.dlm-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.dlm-foot .btn { flex: none; margin-left: auto; }
@media (max-width: 1023px) {
  .dl-hero { padding: 20px 18px; gap: 18px; }
  .dl-plats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dl-qr { display: none; }
  .dl-logo { width: 54px; height: 54px; }
  .dl-name { font-size: 18px; }
  .dl-tiles { gap: 6px; margin: 16px 0 14px; }
  .dl-tile { padding: 9px 10px; }
  .dl-tile > svg { display: none; }
  .dl-acts .btn { flex: 1 1 100%; }
  .dl-oh .btn { margin-left: 0; width: 100%; }
  .dl-plats.four { grid-template-columns: 1fr; }
  .dlm-body { padding: 2px 14px 14px; }
  .dlm-foot { flex-wrap: wrap; }
  .dlm-foot .btn { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dl-wave, .dl-flow, .dl-go .ic { animation: none !important; } .dl-wave { opacity: 0; } }

/* ===== 线路质量 · 近 24h 速率趋势图 ===== */
#qChart { position: relative; }
#qChart svg { display: block; width: 100%; height: auto; }
.q-tip { position: absolute; z-index: 6; pointer-events: none; background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 10px; font-size: 11.5px; color: var(--fg); box-shadow: var(--shadow-sm); white-space: nowrap; }
.q-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.q-tip b { font-weight: 700; }
.qLegend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 10px; font-size: 11.5px; color: var(--muted-fg); }
.qLegend span { display: inline-flex; align-items: center; gap: 6px; }
.qLegend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ============ 仪表盘 v2（views/dashboard.js，db- 前缀）
   手机单列 → ≥720px 两列（主卡通栏）→ ≥1200px 十二栅格（主卡 8 + 签到 4；用量 / 节点 / 公告三等分）
   Apple ID 共享卡始终通栏，账号卡片 1 → 2 → 3 列 ============ */
.db { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.db > * { min-width: 0; }
.db-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.anim-in > .db { animation: none; }
.anim-in .db-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.db .card .pad { padding: 16px; }

/* 问候栏 */
.db-hello { display: flex; align-items: center; gap: 12px; }
.db-hello .grow { flex: 1 1 auto; min-width: 0; }
.dbg-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; }
.dbg-ic.day { background: linear-gradient(135deg, #fff7e6, #ffe4c2); box-shadow: inset 0 0 0 1px rgba(245,158,11,.18); }
.dbg-ic.night { background: linear-gradient(135deg, #eef0ff, #dfe3ff); box-shadow: inset 0 0 0 1px rgba(99,102,241,.16); }
[data-theme="dark"] .dbg-ic.day { background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(249,115,22,.12)); }
[data-theme="dark"] .dbg-ic.night { background: linear-gradient(135deg, rgba(129,140,248,.18), rgba(99,102,241,.1)); }
.dbg-sun, .dbg-moon { width: 30px; height: 30px; display: block; }
.dbg-sun .rays { stroke: #f59e0b; stroke-width: 2.6; stroke-linecap: round; transform-origin: 24px 24px; animation: dbSpin 16s linear infinite; }
.dbg-sun .core { fill: #fbbf24; }
.dbg-moon .m { fill: #6366f1; }
[data-theme="dark"] .dbg-moon .m { fill: #a5b4fc; }
.dbg-moon .st { fill: #f59e0b; transform-box: fill-box; transform-origin: center; animation: dbTwinkle 2.6s ease-in-out infinite; }
.dbg-moon .s2 { animation-delay: 1.2s; }
@keyframes dbSpin { to { transform: rotate(360deg); } }
@keyframes dbTwinkle { 0%, 100% { opacity: .35; transform: scale(.65); } 50% { opacity: 1; transform: scale(1); } }
.db-hello h1 { margin: 0; font-size: 19px; font-weight: 720; letter-spacing: -.3px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12.5px; color: var(--muted-fg); min-width: 0; }
.dbg-sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-live { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted-fg); opacity: .45; }
.dbg-live.ok, .dbg-live.warn, .dbg-live.bad { opacity: 1; }
.dbg-live.ok { background: var(--green); color: var(--green); }
.dbg-live.warn { background: #eab308; color: #eab308; }
.dbg-live.bad { background: #ef4444; }
.dbg-live.ok::after, .dbg-live.warn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.dbg-acts { display: none; flex: none; gap: 8px; }

/* 账户主卡：与旗舰卡 / 下载主卡同一套品牌渐变；底部流动波浪沿用 .th-waves */
.db-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center;
  grid-template-areas: "head head" "ring main" "stats stats" "acts acts";
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring); }
.dbh-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dbh-glow { position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: dbGlow 7s ease-in-out infinite alternate; }
@keyframes dbGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }
.dbh-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 14px; }
.dbh-plan { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 11px 0 9px; border-radius: 99px; font-size: 12px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dbh-plan b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbh-state { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 9px; border-radius: 99px;
  background: #fff; color: #15803d; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(53,8,4,.16); }
.dbh-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dbh-state.ok i { animation: dbBlink 2s ease-in-out infinite; }
.dbh-state.warn { color: #b45309; }
.dbh-state.bad { color: #dc2626; }
.dbh-state.none { color: #52525b; }
@keyframes dbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.dbh-exp { margin-left: auto; flex: none; font-size: 11.5px; opacity: .88; white-space: nowrap; }
.dbh-ring { grid-area: ring; position: relative; width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.08); }
.dbh-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.dbr-track { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 10; }
.dbr-fg { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1), opacity .2s; filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); }
.dbr-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dbr-c b { font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.dbr-c span { margin-top: 4px; font-size: 10px; opacity: .86; }
.dbh-main { grid-area: main; min-width: 0; }
.dbh-k { font-size: 12px; font-weight: 600; opacity: .9; }
.dbh-num { display: flex; align-items: baseline; gap: 5px; margin: 5px 0 6px; white-space: nowrap; }
.dbh-num b { font-size: 31px; font-weight: 820; letter-spacing: -1.2px; line-height: 1; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.dbh-num small { font-size: 13px; font-weight: 650; opacity: .9; }
.dbh-meta { font-size: 12px; line-height: 1.45; opacity: .86; }
.dbh-meta b { font-weight: 650; }
.dbh-acts { grid-area: acts; display: flex; gap: 8px; margin-top: 12px; }
.dbh-btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; color: #fff; font-size: 13.5px; font-weight: 650; white-space: nowrap;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.dbh-btn:hover { background: rgba(255,255,255,.24); }
.dbh-btn:active { transform: translateY(1px); }
.dbh-btn.solid { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 4px 14px rgba(53,8,4,.22); }
.dbh-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(53,8,4,.26); }
.dbh-btn:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.dbh-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.dbh-st { min-width: 0; padding: 9px 4px 8px; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.dbh-st b { display: block; font-size: 15px; font-weight: 760; letter-spacing: -.3px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbh-st b small { margin-left: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.dbh-st span { display: block; margin-top: 2px; font-size: 10.5px; opacity: .8; white-space: nowrap; }

/* 每日签到 */
.db-ci .pad { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.dbc-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dbc-head .grow { flex: 1 1 auto; min-width: 0; }
.dbc-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f97316 60%, #ef4444); box-shadow: 0 6px 14px -6px rgba(249,115,22,.65); }
.dbc-ic .ic { width: 20px; height: 20px; }
.dbc-t { font-size: 14.5px; font-weight: 650; }
.dbc-s { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--muted-fg); min-width: 0; }
.dbc-s > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbc-s b { color: var(--fg); font-weight: 700; }
.dbc-flame { width: 14px; height: 14px; flex: none; fill: url(#dbFlameG); }
.dbc-val { flex: none; text-align: right; }
.dbc-val > b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; white-space: nowrap; }
.dbc-val > b small { margin-left: 2px; font-size: 11.5px; font-weight: 650; letter-spacing: 0; color: var(--muted-fg); }
.dbc-val > span { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted-fg); }
.dbc-val.ok > span { color: var(--green); }
.dbc-val.todo > b { font-size: 17px; color: var(--brand); }
.dbc-val.todo > span { color: var(--amber); }
.dbc-val.lock > b { font-size: 17px; color: var(--muted-fg); }
.dbc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dbc-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dbc-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 650; color: var(--muted-fg); background: var(--muted); }
.dbc-day > i { font-style: normal; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
.dbc-day.on .dbc-dot { color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 4px 10px -4px var(--brand-ring); }
.dbc-ck { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dbc-day.today > i { color: var(--fg); font-weight: 650; }
.dbc-day.today:not(.on) .dbc-dot { color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); animation: dbBreath 2.2s ease-in-out infinite; }
.dbc-day.today.on .dbc-dot { box-shadow: 0 0 0 3px var(--brand-soft), 0 4px 12px -4px var(--brand-ring); }
.dbc-week.live .dbc-dot { animation: dbPop .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--k, 0) * 45ms); }
.dbc-week.locked .dbc-day.today .dbc-dot { animation: none; color: var(--muted-fg); background: var(--muted); box-shadow: none; }
.dbc-day.pop .dbc-dot { animation: dbPop .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes dbBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes dbPop { from { transform: scale(.4); opacity: 0; } }
.dbc-act:empty { display: none; }
.dbc-act .btn { height: 38px; border-radius: 10px; font-size: 13px; gap: 6px; }
.dbc-act .btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring); }
.dbc-bonus { display: inline-flex; align-items: center; height: 20px; margin-left: 4px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 650; background: rgba(255,255,255,.22); }

/* 快捷入口 */
.db-acts { padding: 8px; }
.dba-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.dba { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px 2px 10px; border-radius: 12px; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.dba:hover { background: var(--muted); }
.dba:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.dba-ic { position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); transition: transform .2s cubic-bezier(.2,1.4,.4,1); }
.dba-ic .ic { width: 21px; height: 21px; }
[data-theme="dark"] .dba-ic { color: color-mix(in srgb, var(--c) 62%, #fff); background: color-mix(in srgb, var(--c) 17%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent); }
.dba:hover .dba-ic { transform: translateY(-2px); }
.dba:active .dba-ic { transform: scale(.94); }
.dba > b { max-width: 100%; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dba-tag { position: absolute; top: -7px; right: -13px; height: 17px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center;
  font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; color: #fff; background: var(--brand); box-shadow: 0 0 0 2px var(--card); }
.dba-tag.ver { background: #16a34a; }
.anim-in .dba { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.18s + var(--k, 0) * 35ms); }

/* 卡片头（用量 / 节点 / 公告 / 导入共用） */
.dbx-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.dbx-head .grow { flex: 1 1 auto; min-width: 0; }
.dbx-head .card-title > .ic { color: var(--brand); }
.dbx-head .card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-more { flex: none; height: 28px; margin: -3px -8px 0 0; padding: 0 6px 0 9px; gap: 2px; font-size: 12px; }
.dbx-more .ic { transition: transform .15s; }
.dbx-more:hover .ic { transform: translateX(2px); }
.dbx-empty { padding: 28px 0; text-align: center; font-size: 12.5px; color: var(--muted-fg); }

/* 近 7 天用量：柱高按列高的百分比；数值标签贴在柱顶（溢出到图表上方留白） */
.dbu-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dbu-selv { display: flex; align-items: baseline; gap: 4px; }
.dbu-selv b { font-size: 24px; font-weight: 800; letter-spacing: -.6px; line-height: 1; }
.dbu-selv small { font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.dbu-sel > span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.dbu-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.dbu-sum b { color: var(--fg); font-weight: 650; }
.dbu-chart { margin-top: 30px; }
.dbu-plot { position: relative; height: 104px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dbu-avg { position: absolute; left: 0; right: 0; bottom: var(--avg); height: 0; border-top: 1px dashed color-mix(in srgb, var(--muted-fg) 55%, transparent); pointer-events: none; z-index: 1; }
.dbu-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; -webkit-tap-highlight-color: transparent; }
.dbu-bar { display: block; width: 100%; max-width: 28px; height: var(--h); border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--brand) 15%, var(--muted)); transform-origin: bottom; transition: background .2s, box-shadow .2s; }
.dbu-col:hover .dbu-bar { background: color-mix(in srgb, var(--brand) 32%, var(--muted)); }
.dbu-col.sel .dbu-bar { background: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: 0 6px 14px -6px var(--brand-ring); }
.dbu-col.na .dbu-bar { background: transparent; box-shadow: none; border: 1.5px dashed var(--border); }
.dbu-v { position: absolute; left: -4px; right: -4px; bottom: calc(var(--h) + 5px); text-align: center; font-size: 10px; line-height: 1; color: var(--muted-fg); white-space: nowrap; transition: color .2s; }
.dbu-col.sel .dbu-v { color: var(--brand); font-weight: 700; }
.dbu-xs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; font-size: 11px; color: var(--muted-fg); text-align: center; }
.dbu-xs span { white-space: nowrap; }
.dbu-xs .sel { color: var(--fg); font-weight: 650; }
.anim-in .dbu-bar { animation: growBar .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.15s + var(--k, 0) * 45ms); }
.dbu-chart > .dbx-empty { margin-top: -30px; }

/* 节点实况 */
.dbn-list { display: flex; flex-direction: column; }
.dbn-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); }
.dbn-row:first-child { border-top: 0; padding-top: 0; }
.dbn-row:last-child { padding-bottom: 0; }
.dbn-flag { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--muted); color: var(--muted-fg); }
.dbn-flag svg.fl { width: 20px; height: 14px; display: block; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.dbn-row .grow { flex: 1 1 auto; min-width: 0; }
.dbn-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbn-sp { height: 4px; margin-top: 7px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.dbn-sp i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transform-origin: left; }
.anim-in .dbn-sp i { animation: growX .8s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.15s + var(--k, 0) * 60ms); }
.dbn-r { flex: none; text-align: right; }
.dbn-r b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.dbn-r b small { margin-left: 1px; font-size: 10.5px; font-weight: 600; color: var(--muted-fg); }
.dbn-r > span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-fg); }
.dbn-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.dbn-sig i { width: 3px; border-radius: 1px; background: var(--border); }
.dbn-sig i:nth-child(1) { height: 4px; }
.dbn-sig i:nth-child(2) { height: 6.5px; }
.dbn-sig i:nth-child(3) { height: 9px; }
.dbn-sig i:nth-child(4) { height: 11px; }
.dbn-sig.l1 i:nth-child(-n+1), .dbn-sig.l2 i:nth-child(-n+2), .dbn-sig.l3 i:nth-child(-n+3), .dbn-sig.l4 i { background: currentColor; }
.dbn-row.good .dbn-r b { color: var(--green); }
.dbn-row.mid .dbn-r b { color: var(--amber); }
.dbn-row.slow .dbn-r b, .dbn-row.bad .dbn-r b { color: var(--red); }
.dbn-row.bad .dbn-name, .dbn-row.idle .dbn-name { color: var(--muted-fg); }

/* 公告 */
.dbo-list { display: flex; flex-direction: column; gap: 2px; margin: -6px -8px; }
.dbo-row { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 10px; cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.dbo-row:hover { background: var(--muted); }
.dbo-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.dbo-row .grow { flex: 1 1 auto; min-width: 0; }
.dbo-row .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbo-row .s { margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbo-new { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: 1px; color: #fff; background: var(--brand); }
.dbo-d { flex: none; align-self: flex-start; margin-top: 2px; font-size: 11px; color: var(--muted-fg); }
.dbo-list > .dbx-empty { padding: 34px 0; }

/* 订阅导入（沿用 .import-* 组件，只补卡头与定位高亮） */
.dbi-head { align-items: center; }
.dbi-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 6px 14px -6px rgba(99,102,241,.6); }
.dbi-hint { flex: none; }
.db-import .import-wrap { margin-top: 0; }
.db-import.flash { animation: dbFlash 1.6s ease-out; }
@keyframes dbFlash { 0%, 100% { box-shadow: var(--shadow-sm); } 22% { box-shadow: 0 0 0 4px var(--brand-ring); } }
.dbi-noqr { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #a1a1aa; font-size: 11.5px; }
.dbi-noqr .ic { width: 26px; height: 26px; }
.db-import .iclient { min-width: 0; }
.dbi-txt { min-width: 0; }
.dbi-txt > b { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbi-txt > b i { font-style: normal; }
.dbi-txt > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbi-qrbtn { display: none; }
.dbi-qrbody { text-align: center; }
.dbi-qrbody .small { margin-top: 6px; }

.db-import .import-status:empty { min-height: 0; margin-top: 0; }

/* Apple ID 共享（.db-aid 卡 + dbaid- 子元素；密码只在「显示」后才进 DOM） */
.dbaid-head { align-items: center; }
.dbaid-head .card-sub b { color: var(--fg); font-weight: 700; }
.dbaid-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #3f3f46, #09090b); box-shadow: 0 6px 14px -6px rgba(9,9,11,.55); }
.dbaid-ic .ic { width: 19px; height: 19px; margin-top: -1px; }
[data-theme="dark"] .dbaid-ic { color: #09090b; background: linear-gradient(135deg, #fafafa, #a1a1aa); box-shadow: none; }
.db-aid.teaser .dbx-head { margin-bottom: 0; }
.db-aid.teaser .card-sub { white-space: normal; }
.dbaid-go { flex: none; }
.dbaid-tabs { display: flex; gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: var(--muted); overflow-x: auto; scrollbar-width: none; }
.dbaid-tabs::-webkit-scrollbar { display: none; }
.dbaid-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.dbaid-tab:hover { color: var(--fg); }
.dbaid-tab.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm); }
.dbaid-tab:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.dbaid-tab b { font-size: 11px; font-weight: 700; opacity: .6; }
.dbaid-flag { font-size: 15px; line-height: 1; }
.dbaid-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dbaid-row { min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 45%, var(--card)); }
.dbaid-row.off { opacity: .72; }
.dbaid-top { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.dbaid-top .grow { flex: 1 1 auto; min-width: 0; }
.dbaid-dot { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.dbaid-row.off .dbaid-dot { background: var(--muted-fg); box-shadow: 0 0 0 3px var(--muted); }
.dbaid-acc { font: 600 13.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: -.2px; overflow-wrap: anywhere; }
.dbaid-meta { margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); overflow-wrap: anywhere; }
.dbaid-rep { flex: none; margin: -2px 0 0 0; padding: 2px 4px; border-radius: 6px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; transition: color .15s, background .15s; }
.dbaid-rep:hover:not(:disabled) { color: var(--fg); background: var(--muted); }
.dbaid-rep.armed { color: var(--red); font-weight: 650; background: var(--red-bg); }
.dbaid-rep:disabled { opacity: .6; cursor: default; }
.dbaid-rep:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.dbaid-tag { flex: none; height: 20px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center; font-style: normal; font-size: 11px; font-weight: 650; color: var(--muted-fg); background: var(--muted); white-space: nowrap; }
.dbaid-pw { display: flex; align-items: center; gap: 8px; margin: 10px 0 0 17px; padding: 7px 10px; border-radius: 9px; background: var(--card); border: 1px dashed var(--border); min-width: 0; }
.dbaid-pw span { flex: none; font-size: 11.5px; color: var(--muted-fg); }
.dbaid-pw code { min-width: 0; font: 650 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.dbaid-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.dbaid-acts .btn { min-width: 0; padding: 0 6px; gap: 5px; }
.dbaid-acts .btn:disabled { opacity: .45; cursor: not-allowed; }
.dbaid-acts .btn:disabled:hover { background: var(--bg); }
.dbaid-acts .btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand); background: var(--brand-soft); }
.dbaid-code { margin-top: 6px; }
.dbaid-code .btn { width: 100%; justify-content: center; color: var(--brand); }
.dbaid-code .btn:disabled { opacity: .45; cursor: not-allowed; }
/* 验证码协助弹窗（.uModal 外壳） */
.aidc-lead { font-size: 12.5px; line-height: 1.55; color: var(--muted-fg); overflow-wrap: anywhere; }
.aidc-lead b { color: var(--fg); font-weight: 650; }
.aidc-wait { padding: 16px 0 6px; text-align: center; }
.aidc-clock { font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--fg); }
.aidc-steps { margin: 8px 0 14px; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.55; color: var(--muted-fg); }
.aidc-steps li { display: flex; gap: 8px; margin-top: 7px; }
.aidc-steps b { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); color: var(--muted-fg); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aidc-code { margin: 10px 0 12px; padding: 18px 12px; border-radius: 13px; background: var(--brand-soft); text-align: center; }
.aidc-code b { display: block; font-size: 40px; line-height: 1.1; letter-spacing: 8px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.aidc-code small { display: block; margin-top: 7px; font-size: 12px; color: var(--muted-fg); }
.aidc-note { font-size: 12px; line-height: 1.55; color: var(--muted-fg); }
.aidc-warn { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(247, 144, 9, .12); color: var(--muted-fg); font-size: 12px; line-height: 1.5; }
.aidc-acts { margin-top: 14px; display: grid; gap: 8px; }
.aidc-acts .btn { width: 100%; justify-content: center; }
@media (max-width: 359px) { .dbaid-code .btn .ic { display: none; } }
.dbaid-tips { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.dbaid-tbtn { display: flex; align-items: center; gap: 7px; width: 100%; height: 32px; padding: 0 4px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); transition: background .15s, color .15s; }
.dbaid-tbtn:hover { color: var(--fg); background: var(--muted); }
.dbaid-tbtn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.dbaid-tbtn span { flex: 1 1 auto; text-align: left; }
.dbaid-tbtn .dbi-chev { transition: transform .2s; }
.dbaid-tbtn[aria-expanded="true"] .dbi-chev { transform: rotate(180deg); }
.dbaid-tbody { margin: 6px 0 2px; padding: 0 4px 0 22px; font-size: 12px; line-height: 1.75; color: var(--muted-fg); }
.dbaid-tbody:not([hidden]) { animation: riseIn .35s cubic-bezier(.22,1,.36,1); }
@media (max-width: 359px) { .dbaid-acts .btn .ic { display: none; } }
@media (max-width: 479px) {
  .db-aid.teaser .dbaid-head { flex-wrap: wrap; }
  .db-aid.teaser .dbaid-go { width: 100%; }
}
@media (max-width: 719px) {
  .db-import .import-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .dbi-hint { display: none; }
  .dbi-txt > b i { display: none; }
  .db-import .import-qr { display: block; width: 100%; margin-top: 2px; }
  .dbi-qrbtn { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px;
    border: 1px dashed var(--border); color: var(--muted-fg); font-size: 12.5px; font-weight: 600; transition: background .15s, color .15s; }
  .dbi-qrbtn:hover { background: var(--muted); color: var(--fg); }
  .dbi-qrbtn span { flex: 1 1 auto; text-align: left; }
  .dbi-chev { transition: transform .2s; }
  .import-qr.open .dbi-chev { transform: rotate(180deg); }
  .dbi-qrbody { display: none; }
  .import-qr.open .dbi-qrbody { display: flex; flex-direction: column; align-items: center; margin-top: 12px; animation: riseIn .35s cubic-bezier(.22,1,.36,1); }
}
@media (min-width: 720px) {
  .db { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .db-hello, .db-hero, .db-notices, .db-import, .db-aid { grid-column: 1 / -1; }
  .dbaid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbaid-tabs { display: inline-flex; max-width: 100%; }
  .dbaid-tab { flex: none; }
  .db .card .pad { padding: 18px 20px; }
  .db-hello h1 { font-size: 21px; }
  .dbg-acts { display: flex; margin-left: auto; }
  .db-hero { padding: 20px 22px 22px; column-gap: 24px; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head head" "ring main acts" "stats stats stats"; }
  .dbh-head { margin-bottom: 16px; }
  .dbh-ring { width: 112px; height: 112px; }
  .dbr-c b { font-size: 26px; }
  .dbr-c span { font-size: 11px; }
  .dbh-num b { font-size: 40px; letter-spacing: -1.6px; }
  .dbh-num small { font-size: 15px; }
  .dbh-meta { font-size: 12.5px; }
  .dbh-acts { flex-direction: column; width: 152px; margin-top: 0; }
  .dbh-btn { flex: none; }
  .dbh-stats { gap: 8px; margin-top: 18px; }
  .dbh-st { padding: 11px 14px 10px; text-align: left; }
  .dbh-st b { font-size: 18px; }
  .dbh-st span { font-size: 11.5px; }
  .db-import .import-wrap { flex-direction: row; }
  .db-import .import-qr { width: 148px; display: block; }
  .db-import .sub-url { flex-direction: row; }
  .db-import .sub-url .btn { width: auto; }
  .db-import .import-clients { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
  .db.no-ci .db-acts { grid-column: 1 / -1; }
  .db.no-ci .dba-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .db { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .db-hello, .db-acts, .db-import, .db-aid { grid-column: 1 / -1; }
  .dbaid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-hero { grid-column: span 8; }
  .db-ci { grid-column: span 4; }
  .db-usage, .db-nodes, .db-notices { grid-column: span 4; }
  .db.no-notice .db-usage, .db.no-notice .db-nodes { grid-column: span 6; }
  .dba-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .db.no-ci .db-hero { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-in .db-blk, .anim-in .dba, .anim-in .dbu-bar, .anim-in .dbn-sp i, .dbc-week.live .dbc-dot, .dbc-day.today:not(.on) .dbc-dot, .dbc-day.pop .dbc-dot,
  .dbg-sun .rays, .dbg-moon .st, .dbh-glow, .dbh-state.ok i, .dbg-live::after, .db-import.flash, .dbaid-tbody { animation: none !important; }
  .dbr-fg { transition: none; }
}

/* ============ 节点状态 v2（views/nodes.js，nd- 前缀）
   雷达主卡：手机雷达在左、四格概览通栏 → ≥720px 雷达纵跨两行；节点卡自适应网格（单卡最小 340px，桌面三列） ============ */
.nd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nd > * { min-width: 0; }
.nd [hidden] { display: none !important; }
.nd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.anim-in > .nd { animation: none; }
.anim-in .nd-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* 雷达主卡 */
.nd-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center;
  grid-template-areas: "radar info" "stats stats";
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 6%, transparent), transparent 62%),
    var(--card); }
.nd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%); mask-image: linear-gradient(100deg, #000 10%, transparent 62%); }
.ndr { grid-area: radar; position: relative; width: 124px; height: 124px; }
.ndr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ndr-disc { fill: color-mix(in srgb, var(--brand) 5%, var(--card)); stroke: color-mix(in srgb, var(--brand) 30%, var(--border)); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ndr-ring { fill: none; stroke: color-mix(in srgb, var(--brand) 20%, var(--border)); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ndr-cross { fill: none; stroke: color-mix(in srgb, var(--brand) 12%, var(--border)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ndr-sweep { position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 262deg, color-mix(in srgb, var(--brand) 5%, transparent) 300deg, color-mix(in srgb, var(--brand) 30%, transparent) 359.5deg, transparent 360deg);
  animation: ndSweep var(--sweep, 4.8s) linear infinite; }
.ndr-sweep::after { content: ""; position: absolute; left: calc(50% - .75px); top: 0; width: 1.5px; height: 50%; border-radius: 2px;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand) 10%, transparent), var(--brand)); opacity: .7; }
@keyframes ndSweep { to { transform: rotate(360deg); } }
.ndr-me { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; color: var(--fg);
  background: currentColor; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px color-mix(in srgb, var(--fg) 18%, transparent); }
.ndr-me::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.ndr-lbls { position: absolute; inset: 0; display: none; pointer-events: none; }
.ndr-lbl { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 0 3px; border-radius: 4px; font-size: 9px; line-height: 12px; white-space: nowrap;
  color: var(--muted-fg); background: color-mix(in srgb, var(--card) 85%, transparent); }
.ndr-blips { position: absolute; inset: 0; }
/* 扫描线到达时点位放大一下 + 一圈脉冲；延迟由脚本按方位与当前扫描相位算出 */
.ndr-b { position: absolute; width: 0; height: 0; color: var(--muted-fg); }
.ndr-b.good { color: var(--green); }
.ndr-b.mid { color: #eab308; }
.ndr-b.slow, .ndr-b.bad { color: #ef4444; }
.ndr-b > i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--card);
  animation: ndHit var(--sweep, 4.8s) linear infinite; animation-delay: var(--d, 0s); }
.ndr-b > i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0;
  animation: ndPing var(--sweep, 4.8s) ease-out infinite; animation-delay: inherit; }
.ndr-b.off > i, .ndr-b.idle > i { background: var(--card); box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 2px var(--card); animation: none; }
.ndr-b.off > i::after, .ndr-b.idle > i::after, .ndr-b.bad > i::after { display: none; }
.ndr-b.bad > i { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgba(239,68,68,.3); }
@keyframes ndHit { 0% { transform: scale(1.5); } 14%, 100% { transform: scale(1); } }
@keyframes ndPing { 0% { transform: scale(.6); opacity: .9; } 32%, 100% { transform: scale(2.7); opacity: 0; } }
.ndr-b > em { position: absolute; left: 0; top: 7px; display: none; transform: translateX(-50%); padding: 0 4px; border-radius: 4px; pointer-events: none;
  font-style: normal; font-size: 9.5px; font-weight: 650; line-height: 14px; white-space: nowrap; color: var(--fg);
  background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 0 0 .5px var(--border); }
.ndr-b.la > em { left: -5px; transform: none; }
.ndr-b.ra > em { left: 5px; transform: translateX(-100%); }

.ndh-info { grid-area: info; min-width: 0; }
.ndh-eye { display: flex; align-items: center; gap: 7px; padding-right: 40px; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; }
.ndh-eye > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ndh-eye em { font-style: normal; }
.ndh-title { margin: 5px 0 0; font-size: 18px; font-weight: 750; letter-spacing: -.3px; line-height: 1.3; }
.ndh-sub { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted-fg); }
.ndh-sub span { display: block; }
.ndh-refresh { position: absolute; top: 12px; right: 12px; border-radius: 10px; background: var(--card); }
.ndh-refresh.spin .ic { animation: dbSpin .8s linear infinite; }
.ndh-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.ndh-st { min-width: 0; padding: 9px 4px 8px; border-radius: 11px; text-align: center;
  background: color-mix(in srgb, var(--muted) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
.ndh-st b { display: block; font-size: 15px; font-weight: 760; letter-spacing: -.3px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndh-st b small { margin-left: 1px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--muted-fg); }
.ndh-st span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted-fg); white-space: nowrap; }
.ndh-st.good b { color: var(--green); }
.ndh-st.mid b { color: var(--amber); }
.ndh-st.bad b { color: var(--red); }

/* 地区筛选 + 排序 */
.nd-bar { display: flex; flex-direction: column; gap: 10px; }
.nd-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nd-chips::-webkit-scrollbar { display: none; }
.nd-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  color: var(--muted-fg); background: var(--card); border: 1px solid var(--border); transition: background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.nd-chip:hover { color: var(--fg); background: var(--muted); }
.nd-chip:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.nd-chip svg.fl { width: 18px; height: 13px; display: block; border-radius: 2.5px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.nd-chip > i { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--muted-fg); background: var(--muted); }
.nd-chip.on { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.nd-chip.on > i { color: var(--brand-fg); background: var(--brand); }
.nd-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nd-count { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--muted-fg); white-space: nowrap; }
.nd-count b { color: var(--fg); font-weight: 700; }
.nd-tools.with-q .nd-count { display: none; }
.nd-search { position: relative; flex: 1 1 auto; min-width: 0; }
.nd-search .ic { position: absolute; left: 11px; top: 50%; margin-top: -7px; color: var(--muted-fg); pointer-events: none; }
.nd-search .input { padding-left: 32px; background: var(--card); }
.nd-sort { flex: none; }

/* 节点卡 */
.nd-list { display: flex; flex-direction: column; gap: 12px; }
.nd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.nd-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.nd-card:not(.nd-skel):hover { border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); box-shadow: 0 12px 30px -20px rgba(0,0,0,.3); }
.anim-in .nd-card.rise { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.12s + min(var(--k, 0), 12) * 50ms); }
.ndc-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ndc-flag { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); }
.ndc-flag svg.fl { width: 24px; height: 17px; display: block; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.ndc-id { flex: 1 1 auto; min-width: 0; }
.ndc-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ndc-name b { min-width: 0; font-size: 14px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndc-st { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700;
  color: var(--muted-fg); background: var(--muted); }
.ndc-st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ndc-st.ok { color: var(--green); background: var(--green-bg); }
.ndc-st.ok i { animation: dbBlink 2s ease-in-out infinite; }
.ndc-st.fail { color: var(--red); background: var(--red-bg); }
.ndc-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; overflow: hidden; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.ndc-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; }
.ndc-on { display: inline-flex; align-items: center; gap: 3px; }
.ndc-on .ic { width: 12px; height: 12px; }
.ndc-lat { flex: none; text-align: right; }
.ndc-lat > b { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 780; letter-spacing: -.4px; line-height: 1.2; white-space: nowrap; }
.ndc-lat > b small { margin-left: 1px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--muted-fg); }
.ndc-lat > span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.nd-card.good .ndc-lat > b { color: var(--green); }
.nd-card.mid .ndc-lat > b { color: var(--amber); }
.nd-card.slow .ndc-lat > b, .nd-card.bad .ndc-lat > b { color: var(--red); }
.nd-card.off .ndc-lat > b, .nd-card.idle .ndc-lat > b { color: var(--muted-fg); }
.nd-card.bad .ndc-lat > b, .nd-card.off .ndc-lat > b { font-size: 14.5px; letter-spacing: 0; }
.nd-card.off .ndc-flag svg.fl { filter: grayscale(.8); opacity: .7; }
.nd-card.off .ndc-name b { color: var(--muted-fg); }
.ndc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -2px; }
.ndc-chip { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--muted-fg); background: var(--muted); }
.ndc-chip .ic { width: 12px; height: 12px; }
.ndc-chip.best { color: var(--green); background: var(--green-bg); }
.ndc-chip.fast { color: var(--brand); background: var(--brand-soft); }
.ndc-chip.rate { color: var(--amber); background: var(--amber-bg); }
.ndc-chip.rate.low { color: var(--green); background: var(--green-bg); }
.ndc-chip.line { color: #0e7490; background: color-mix(in srgb, #06b6d4 11%, var(--card)); }
[data-theme="dark"] .ndc-chip.line { color: #67e8f9; background: rgba(6,182,212,.12); }

/* 近 24h 速度迷你图（纵轴全卡统一） */
.ndc-trend { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 62%, transparent); }
.ndc-tk { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
.ndc-tkr { display: inline-flex; align-items: center; gap: 7px; }
.ndc-tk b { color: var(--fg); font-weight: 700; }
.ndc-tk b.good { color: var(--green); }
.ndc-tk b.mid { color: var(--amber); }
.ndc-tk b.bad { color: var(--red); }
.ndc-spark { position: relative; height: 34px; margin-top: 7px; }
.ndc-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ndsp-l { fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ndsp-f { fill: url(#ndSpG); stroke: none; }
.ndsp-s0 { stop-color: var(--brand); stop-opacity: .22; }
.ndsp-s1 { stop-color: var(--brand); stop-opacity: 0; }
.ndc-spdot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; color: var(--brand); background: currentColor; box-shadow: 0 0 0 2px var(--card); }
.ndc-spdot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.nd-card.bad .ndsp-l, .nd-card.off .ndsp-l { stroke: var(--muted-fg); }
.nd-card.bad .ndsp-f, .nd-card.off .ndsp-f { opacity: .35; }
.nd-card.bad .ndc-spdot, .nd-card.off .ndc-spdot { color: var(--muted-fg); }
.nd-card.bad .ndc-spdot::after, .nd-card.off .ndc-spdot::after { display: none; }
.ndc-none { height: 34px; margin-top: 7px; display: grid; place-items: center; border-radius: 8px; border: 1px dashed var(--border); font-size: 11.5px; color: var(--muted-fg); }
.anim-in .nd-card.rise .ndc-spark svg { animation: ndReveal 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.28s + min(var(--k, 0), 12) * 50ms); }
.anim-in .nd-card.rise .ndc-spdot { animation: dbPop .45s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(1.1s + min(var(--k, 0), 12) * 50ms); }
@keyframes ndReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 解锁条 + 操作 */
.ndc-foot { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: auto; }
.ndc-uk { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 3px; height: 34px; margin-left: -6px; padding: 0 6px; overflow: hidden; border-radius: 9px;
  transition: background .15s; -webkit-tap-highlight-color: transparent; }
.ndc-uk:hover { background: var(--muted); }
.ndc-uk:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 0; }
.ndc-uk > i { position: relative; flex: 0 1 22px; width: 22px; min-width: 17px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.ndc-uk > i svg { width: 15px; height: 15px; display: block; }
.ndc-uk > i.blocked svg { filter: grayscale(1); opacity: .35; }
.ndc-uk > i.blocked::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: var(--red); transform: rotate(-45deg); }
.ndc-uk > i.partial::after { content: ""; position: absolute; right: -1px; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 1.5px var(--card); }
.ndc-uk > i.unknown svg { opacity: .5; }
.ndc-uk.none { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.ndc-uk.none:hover { background: none; }
.ndc-acts { flex: none; display: flex; gap: 6px; }
.ndc-btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--fg); background: var(--card); border: 1px solid var(--border);
  transition: background .15s, color .15s, border-color .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ndc-btn:hover:not(:disabled) { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.ndc-btn:active:not(:disabled) { transform: scale(.94); }
.ndc-btn:disabled { opacity: .4; cursor: not-allowed; }
.ndc-btn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.ndc-btn .ic { grid-area: 1 / 1; transition: transform .22s cubic-bezier(.2,1.4,.4,1), opacity .15s; }
.ndc-btn .ic.ok { opacity: 0; transform: scale(.4); color: var(--green); }
.ndc-btn.done { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.ndc-btn.done .ic:not(.ok) { opacity: 0; transform: scale(.4); }
.ndc-btn.done .ic.ok { opacity: 1; transform: none; }

/* 加载骨架 / 空态 / 开通引导 / 安全提示 */
.nd-skel { pointer-events: none; }
.nd-skel .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: ndShimmer 1.4s ease-in-out infinite; }
.nd-skel .sk-flag { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.nd-skel .sk-a { width: 56%; height: 14px; }
.nd-skel .sk-b { width: 36%; height: 11px; margin-top: 8px; }
.nd-skel .sk-c { width: 56px; height: 32px; flex: none; }
.nd-skel .sk-tr { height: 72px; border-radius: 12px; }
.nd-skel .sk-uk { flex: 1 1 auto; max-width: 190px; height: 22px; margin-right: auto; }
.nd-skel .sk-btn { width: 34px; height: 34px; flex: none; border-radius: 10px; }
@keyframes ndShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.nd-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 18px 32px; text-align: center;
  border-radius: 16px; background: var(--card); border: 1px dashed var(--border); }
.nde-ic { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.nde-ic .ic { width: 24px; height: 24px; }
.nd-empty > b { font-size: 15px; font-weight: 700; }
.nd-empty > p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted-fg); }
.nd-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 30%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); }
.nd-cta-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--brand-fg);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 14px -6px var(--brand-ring); }
.nd-cta .grow { flex: 1 1 auto; min-width: 0; }
.nd-cta .grow > b { display: block; font-size: 13.5px; font-weight: 700; }
.nd-cta .grow > span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.nd-cta .btn { flex: none; }
.nd-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 12px; line-height: 1.55; color: var(--muted-fg);
  background: color-mix(in srgb, var(--muted) 55%, transparent); }
.nd-note > .ic { flex: none; color: var(--green); }
.nd-note > span { flex: 1 1 auto; min-width: 0; }
.nd-note .btn { flex: none; gap: 4px; }

/* 单节点二维码弹窗（挂在 body 上） */
.nd-qrm .uModal-card { width: min(380px, 100%); max-height: 92vh; }
.ndq-flag { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); }
.ndq-flag svg.fl { width: 19px; height: 13px; display: block; border-radius: 2.5px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.ndq-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndq-body { display: flex; flex-direction: column; align-items: center; padding: 18px 18px 16px; }
.ndq-body .qr-box { width: 208px; height: 208px; }
.ndq-body .qr-scan { animation-name: ndqScan; }
@keyframes ndqScan { 0%, 100% { top: 12px; } 50% { top: 190px; } }
.ndq-tip { margin-top: 12px; font-size: 12.5px; color: var(--muted-fg); }
.ndq-warn { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; color: var(--amber); }
.ndq-err { height: 100%; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12px; color: #71717a; }

@media (max-width: 359px) {
  .nd-hero { padding: 14px; column-gap: 12px; }
  .ndr { width: 104px; height: 104px; }
  .ndh-eye { padding-right: 36px; }
  .ndh-eye em { display: none; }
  .ndh-title { font-size: 16px; }
  .ndh-st { padding: 8px 2px 7px; }
  .ndh-st b { font-size: 13.5px; }
  .ndh-st b small { font-size: 9.5px; }
  .nd-card { padding: 12px; }
  .ndc-uk { gap: 2px; }
  .ndc-uk > i { min-width: 15px; }
  .ndc-uk > i svg { width: 12px; height: 12px; }
}
@media (min-width: 720px) {
  .nd { gap: 16px; }
  .nd-hero { padding: 22px 24px; column-gap: 28px; grid-template-areas: "radar info" "radar stats"; }
  .ndr { width: 172px; height: 172px; }
  .ndr-lbls, .ndr-b > em { display: block; }
  .ndh-info { align-self: end; }
  .ndh-title { font-size: 22px; }
  .ndh-sub { font-size: 12.5px; }
  .ndh-sub span { display: inline; }
  .ndh-sub span + span::before { content: " · "; }
  .ndh-refresh { top: 16px; right: 16px; }
  .ndh-stats { align-self: start; gap: 8px; margin-top: 16px; }
  .ndh-st { padding: 11px 14px 10px; text-align: left; }
  .ndh-st b { font-size: 19px; }
  .ndh-st span { font-size: 11.5px; }
  .nd-bar { flex-direction: row; align-items: flex-start; gap: 12px; }
  .nd-chips { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .nd-tools { flex: none; margin-left: auto; }
  .nd-chips[hidden] + .nd-tools { flex: 1 1 auto; }
  .nd-search { flex: none; width: 210px; }
  .nd-grid { gap: 14px; }
  .nd-card { padding: 16px; }
}
[data-theme="dark"] .nd-hero { background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 62%),
    var(--card); }
[data-theme="dark"] .nd-card:not(.nd-skel):hover { box-shadow: none; }
[data-theme="dark"] .ndc-uk > i { background: color-mix(in srgb, var(--fg) 4%, var(--card)); }
@media (prefers-reduced-motion: reduce) {
  .anim-in .nd-blk, .anim-in .nd-card.rise, .anim-in .nd-card.rise .ndc-spark svg, .anim-in .nd-card.rise .ndc-spdot,
  .ndr-sweep, .ndr-me::after, .ndr-b > i, .ndr-b > i::after, .ndc-st.ok i, .ndc-spdot::after, .nd-skel .sk, .ndh-refresh.spin .ic, .ndq-body .qr-scan { animation: none !important; }
}

/* ============ 线路质量 v2（views/quality.js，ql- 前缀）
   主卡：推荐信息在上、回程线路图在下 → ≥960px 左右并排；用途四格手机 2×2、≥720px 一行；对比卡自适应网格（单卡最小 330px） ============ */
.ql { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ql > * { min-width: 0; }
.ql [hidden] { display: none !important; }
.ql-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.anim-in > .ql { animation: none; }
.anim-in .ql-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.ql .sk, .ql-ukm .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: ndShimmer 1.4s ease-in-out infinite; }

/* 主卡 */
.ql-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 14px 16px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "info" "map"; row-gap: 12px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 6%, transparent), transparent 62%),
    var(--card); }
.ql-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%); mask-image: linear-gradient(100deg, #000 10%, transparent 62%); }
.qlh-eye { grid-area: eye; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; }
.qlh-eyet { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qlh-eye em { font-style: normal; }
.qlh-refresh { margin: -4px -4px -4px auto; border-radius: 10px; background: var(--card); }
.qlh-refresh.spin .ic { animation: dbSpin .8s linear infinite; }
.qlh-info { grid-area: info; min-width: 0; }
/* 探针切换条（综合 / 单个探针；只有 ≥2 个探针时出现） */
.ql-src { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ql-src[hidden] { display: none; }
.qls-k { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--muted-fg); }
.qls-k .ic { width: 14px; height: 14px; }
.qls-seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.qls-seg::-webkit-scrollbar { display: none; }
.qls-seg button { flex: none; }
.qls-seg button:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.ql-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#qlGrid.ql-dim { opacity: .55; transition: opacity .2s; pointer-events: none; }
.qlh-kick { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.qlh-kick em { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-weight: 600; color: var(--muted-fg); }
.qlh-kick em::before { content: "·"; margin: 0 5px 0 1px; }
.qlh-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 8px 0 0; font-size: 22px; font-weight: 780; letter-spacing: -.4px; line-height: 1.2; }
.qlh-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.qlh-title small { flex: none; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted-fg); }
.qlh-title.plain { display: block; margin-top: 2px; font-size: 18px; letter-spacing: -.3px; line-height: 1.35; }
.qlh-flag { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--muted-fg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border), 0 4px 12px -6px rgba(0,0,0,.18); }
.qlh-flag svg.fl { width: 23px; height: 16px; display: block; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.qlh-sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-fg); }
.qlh-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.qlh-why span { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 650; white-space: nowrap;
  color: var(--fg); background: color-mix(in srgb, var(--card) 70%, var(--muted)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.qlh-why span .ic { width: 13px; height: 13px; color: var(--muted-fg); }
.qlh-why span.g { color: var(--green); background: var(--green-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent); }
.qlh-why span.g .ic { color: currentColor; }
.qlh-why span.m { color: var(--muted-fg); }
.qlh-why span.g.o { color: var(--green); background: color-mix(in srgb, var(--green-bg) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 12%, transparent); }
.qlh-act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.qlh-test { position: relative; overflow: hidden; flex: none; min-width: 138px; }
.qlh-test.run { cursor: progress; }
.qlh-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--brand-fg) 60%, transparent); transition: width .45s ease; }
.qlh-spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dbSpin .7s linear infinite; }
.qlh-tip { flex: 1 1 180px; min-width: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); }
.qlh-tip b { font-weight: 700; color: var(--fg); }

/* 回程线路图：金色流动 = 精品（CN2 GIA / 9929 / CMIN2），绿色实线 = 优化，虚线 = 普通 */
.qlm { grid-area: map; min-width: 0; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 78%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
.qlm-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 11px; font-weight: 650; color: var(--muted-fg); white-space: nowrap; }
.qlm-head em { font-style: normal; font-weight: 500; opacity: .8; }
.qlm-stage { position: relative; }
.qlm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.qlm-l { fill: none; stroke-linecap: round; transition: opacity .25s, stroke-width .25s, stroke-opacity .25s; }
.qlm-l.q { stroke: var(--muted-fg); stroke-opacity: .32; stroke-width: 1.1; stroke-dasharray: 2.5 4; }
.qlm-l.p { stroke: var(--green); stroke-opacity: .42; stroke-width: 1.6; }
.qlm-l.p.premium { stroke: #E0A100; stroke-opacity: .5; stroke-width: 1.8; }
.qlm-f { fill: none; stroke: #F0A500; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1.5 15; animation: qlFlow 1.6s linear infinite; transition: opacity .25s; }
@keyframes qlFlow { to { stroke-dashoffset: 16.5; } }
.qlm-c { position: absolute; left: 0; z-index: 1; height: 30px; margin-top: -15px; padding: 0 5px 0 9px; display: inline-flex; align-items: center; justify-content: space-between; gap: 4px;
  border-radius: 9px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--fg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: background .15s, color .15s, border-color .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.qlm-c:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.qlm-c:active { transform: scale(.96); }
.qlm-c:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.qlm-c i { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: inline-grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 750;
  color: var(--green); background: var(--green-bg); }
.qlm-c i.z { color: var(--muted-fg); background: var(--muted); }
.qlm-c i.pm { color: #6B4200; background: #FFE29A; }
[data-theme="dark"] .qlm-c i.pm { color: #3a2600; background: #F5C451; }
.qlm-c.on { color: var(--brand-fg); background: var(--brand); border-color: var(--brand); }
.qlm-c.on i { color: var(--brand); background: var(--brand-fg); }
.qlm-n { position: absolute; right: 0; z-index: 1; height: 28px; margin-top: -14px; padding: 0 8px 0 7px; display: flex; align-items: center; gap: 6px;
  border-radius: 9px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: opacity .25s, border-color .25s, box-shadow .25s; }
.qlm-n svg.fl { width: 17px; height: 12px; flex: none; display: block; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.qlm-n svg.ic { width: 14px; height: 14px; color: var(--muted-fg); }
.qlm-n b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: inherit; }
.qlm-n .d { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--muted-fg); opacity: .5; }
.qlm-n.ok .d { background: var(--green); opacity: 1; }
.qlm-n.fail .d { background: var(--red); opacity: 1; }
.qlm-n.best { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: 0 0 0 3px var(--brand-soft); }
.qlm-n.more { justify-content: center; font-weight: 600; color: var(--muted-fg); background: color-mix(in srgb, var(--muted) 60%, var(--card)); box-shadow: none; transition: opacity .25s, color .15s; -webkit-tap-highlight-color: transparent; }
.qlm-n.more:hover { color: var(--fg); }
.qlm.sel .qlm-l, .qlm.sel .qlm-f { opacity: .1; }
.qlm.sel-ct .c-ct, .qlm.sel-cu .c-cu, .qlm.sel-cm .c-cm { opacity: 1; }
.qlm.sel-ct .qlm-l.p.c-ct, .qlm.sel-cu .qlm-l.p.c-cu, .qlm.sel-cm .qlm-l.p.c-cm { stroke-opacity: .7; stroke-width: 2; }
.qlm.sel .qlm-n:not(.more) { opacity: .5; }
.qlm.sel-ct .qlm-n.r-ct, .qlm.sel-cu .qlm-n.r-cu, .qlm.sel-cm .qlm-n.r-cm { opacity: 1; border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.qlm-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-height: 22px; margin-top: 8px; font-size: 11px; color: var(--muted-fg); }
.qlm-cap .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qlm-cap .lg i { width: 16px; height: 0; border-top: 2px solid var(--green); border-radius: 2px; }
.qlm-cap .lg.q i { border-top: 1.5px dashed var(--muted-fg); opacity: .7; }
.qlm-cap .lg.pm i { border-top: 2.4px dotted #F0A500; }
.qlm-cap .lg em { font-style: normal; opacity: .8; }
.qlm-cap .cur { font-weight: 650; color: var(--fg); }
.qlm-cap .cur.g { color: var(--green); }
.qlm-x { margin-left: auto; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--muted-fg); }
.qlm-x:hover { color: var(--fg); background: var(--muted); }

/* 按用途推荐 */
.ql-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qlp { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px; border-radius: 14px; text-align: left;
  color: var(--fg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
button.qlp:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
button.qlp:active { transform: scale(.98); }
.qlp:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.qlp-k { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; color: var(--muted-fg); white-space: nowrap; }
.qlp-ic { width: 24px; height: 24px; flex: none; border-radius: 8px; display: grid; place-items: center; }
.qlp-ic .ic { width: 14px; height: 14px; }
.qlp-ic.lat { color: #d97706; background: color-mix(in srgb, #f59e0b 14%, var(--card)); }
.qlp-ic.spd { color: var(--brand); background: var(--brand-soft); }
.qlp-ic.stab { color: var(--green); background: var(--green-bg); }
.qlp-ic.uk { color: #7c3aed; background: color-mix(in srgb, #8b5cf6 13%, var(--card)); }
.qlp-n { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font-size: 14.5px; font-weight: 740; letter-spacing: -.2px; }
.qlp-n svg.fl { width: 18px; height: 13px; flex: none; display: block; border-radius: 2.5px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.qlp-n svg.ic { width: 15px; height: 15px; color: var(--muted-fg); }
.qlp-n b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.qlp-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted-fg); }
.qlp-v b { font-size: 15px; font-weight: 760; letter-spacing: -.3px; color: var(--fg); }
.qlp-v em { font-style: normal; }
.qlp.none .qlp-n b { color: var(--muted-fg); }

/* 区块标题 + 通用卡 */
.ql-sh { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; }
.ql-sh > div:first-child { min-width: 0; }
.ql-sh h2 { margin: 0; font-size: 15px; font-weight: 720; letter-spacing: -.2px; }
.ql-sh p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); }
.ql-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ql-cmp { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 72px; }
.ql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }

/* 线路对比卡 */
.qlc { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; scroll-margin: 90px 0;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.qlc:not(.ql-skel):hover { border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); box-shadow: 0 12px 30px -20px rgba(0,0,0,.3); }
.qlc.rec { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); }
.anim-in .qlc.rise { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.12s + min(var(--k, 0), 12) * 50ms); }
.ql .qlc.flash { animation: qlFlash 1.6s ease-out; }
@keyframes qlFlash { 0%, 35% { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); } }
.qlc-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qlc-flag { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); }
.qlc-flag svg.fl { width: 24px; height: 17px; display: block; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.qlc-id { flex: 1 1 auto; min-width: 0; }
.qlc-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.qlc-name b { min-width: 0; font-size: 14px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlc-rec { flex: none; height: 18px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 750;
  color: var(--brand-fg); background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.qlc-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; overflow: hidden; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.qlc-sub span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qlc-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; }
.qlc-st { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700;
  color: var(--muted-fg); background: var(--muted); }
.qlc-st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.qlc-st.ok { color: var(--green); background: var(--green-bg); }
.qlc-st.ok i { animation: dbBlink 2s ease-in-out infinite; }
.qlc-st.fail { color: var(--red); background: var(--red-bg); }
.qlc-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0; border-radius: 12px; background: color-mix(in srgb, var(--muted) 62%, transparent); }
.qlc-mi { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 10px; }
.qlc-mi + .qlc-mi { border-left: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.qlc-mi > span { font-size: 10.5px; color: var(--muted-fg); white-space: nowrap; }
.qlc-v { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; min-height: 22px; }
.qlc-v b { display: inline-flex; align-items: baseline; font-size: 16.5px; font-weight: 770; letter-spacing: -.4px; line-height: 1.25; white-space: nowrap; }
.qlc-v b small { margin-left: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--muted-fg); }
.qlc-v b.good { color: var(--green); }
.qlc-v b.mid { color: var(--amber); }
.qlc-v b.bad { color: var(--red); }
.qlc-v b.none { color: var(--muted-fg); }
.qlc-v b.sm { font-size: 13px; letter-spacing: 0; }
.qlc-v b.run { align-items: center; gap: 5px; font-size: 12px; font-weight: 650; letter-spacing: 0; color: var(--brand); }
.qlc-v b.run .qlh-spin { width: 11px; height: 11px; border-width: 1.6px; }
.qlc-v em { height: 17px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 750; line-height: 17px; white-space: nowrap; }
.qlc-v em.green { color: var(--green); background: var(--green-bg); }
.qlc-v em.amber { color: var(--amber); background: var(--amber-bg); }
.qlc-v em.red { color: var(--red); background: var(--red-bg); }
.qlc-mt { height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 650; color: var(--fg); background: var(--card); border: 1px solid var(--border);
  transition: color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.qlc-mt:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.qlc-route { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.qlc-lk { flex: none; font-size: 11px; color: var(--muted-fg); }
/* 回程三枚（每家运营商：名称 + 线路 + 档位）：精品金 / 优化绿 / 普通灰 */
.qlc-rts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; flex: 1; }
.qlc-rt { height: 22px; padding: 0 3px 0 7px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap;
  color: var(--muted-fg); background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.qlc-rt em { font-style: normal; font-weight: 600; opacity: .8; }
.qlc-rt b { font-weight: 760; color: var(--fg); }
.qlc-rt i { font-style: normal; font-size: 10px; font-weight: 750; height: 16px; padding: 0 5px; border-radius: 5px; display: inline-flex; align-items: center; background: var(--card); }
.qlc-rt i sup { font-size: 9px; line-height: 0; margin-left: 1px; vertical-align: 2px; }
.qlc-rt.none { padding-right: 8px; opacity: .6; }
.qlc-rt.premium { color: #8a5a00; background: linear-gradient(160deg, #FFF6DA, #FFE8A8); box-shadow: inset 0 0 0 1px rgba(201,138,0,.38); }
.qlc-rt.premium b { color: #6B4200; }
.qlc-rt.premium i { color: #fff; background: linear-gradient(135deg, #F0A500, #D98A00); }
.qlc-rt.opt { color: var(--green); background: var(--green-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); }
.qlc-rt.opt b { color: var(--green); }
.qlc-rt.opt i { color: var(--green); background: var(--card); }
.qlc-rt.normal i { color: var(--muted-fg); }
.qlc-rt.me { box-shadow: inset 0 0 0 1.5px currentColor; }
[data-theme="dark"] .qlc-rt.premium { color: #F5C451; background: linear-gradient(160deg, rgba(255,197,61,.16), rgba(255,197,61,.08)); box-shadow: inset 0 0 0 1px rgba(255,197,61,.32); }
[data-theme="dark"] .qlc-rt.premium b { color: #FFE29A; }
[data-theme="dark"] .qlc-rt.premium i { color: #3a2600; background: linear-gradient(135deg, #FFD670, #F0A500); }
.qlc-na { font-size: 11.5px; color: var(--muted-fg); }
.qlc-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qlc-bar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 8px; }
.qlc-bar > span { font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlc-bar > b { font-size: 12.5px; font-weight: 740; white-space: nowrap; }
.qlc-bar > b small { font-size: 10px; font-weight: 600; color: var(--muted-fg); }
.qlc-bar > i { grid-column: 1 / -1; height: 5px; border-radius: 99px; overflow: hidden; background: var(--muted); }
.qlc-bar > i > em { display: block; height: 100%; border-radius: inherit; background: var(--muted-fg); transform-origin: left center; }
.qlc-bar.good > b { color: var(--green); }
.qlc-bar.mid > b { color: var(--amber); }
.qlc-bar.bad > b { color: var(--red); }
.qlc-bar.good > i > em { background: var(--green); }
.qlc-bar.mid > i > em { background: #f59e0b; }
.qlc-bar.bad > i > em { background: #ef4444; }
.qlc-bar.cn > i > em { background: linear-gradient(90deg, #38bdf8, #4C8DFF); }
.anim-in .qlc.rise .qlc-bar > i > em { animation: growX .9s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.3s + min(var(--k, 0), 12) * 50ms); }
.qlc-uk { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; margin: auto -6px -4px; padding: 0 6px; border-radius: 10px; text-align: left;
  color: var(--fg); transition: background .15s; -webkit-tap-highlight-color: transparent; }
button.qlc-uk:hover { background: var(--muted); }
.qlc-uk:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 0; }
.qlc-uki { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.qlc-uki > i { position: relative; flex: 0 1 22px; width: 22px; min-width: 17px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.qlc-uki > i svg { width: 15px; height: 15px; display: block; }
.qlc-uki > i.blocked svg { filter: grayscale(1); opacity: .35; }
.qlc-uki > i.blocked::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: var(--red); transform: rotate(-45deg); }
.qlc-uki > i.partial::after { content: ""; position: absolute; right: -1px; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 1.5px var(--card); }
.qlc-uki > i.unknown svg { opacity: .5; }
.qlc-ukn { flex: none; display: inline-flex; align-items: center; gap: 1px; font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
.qlc-ukn b { font-weight: 750; color: var(--fg); }
.qlc-ukn .ic { margin-left: 3px; }
.qlc-uk.none { height: auto; margin: auto 0 0; padding: 0; font-size: 11.5px; color: var(--muted-fg); }
.ql-skel { pointer-events: none; }
.ql-skel .sk-flag { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.ql-skel .sk-a { width: 56%; height: 14px; }
.ql-skel .sk-b { width: 36%; height: 11px; margin-top: 8px; }
.ql-skel .sk-m { height: 62px; border-radius: 12px; }
.ql-skel .sk-r { height: 14px; }
.ql-skel .sk-r.short { width: 62%; }

/* 近 24h 速率 */
.qlt-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.qlt-lg { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 650;
  color: var(--fg); background: var(--card); border: 1px solid var(--border); transition: color .15s, background .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.qlt-lg:hover { background: var(--muted); }
.qlt-lg:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.qlt-lg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.qlt-lg.off { color: var(--muted-fg); border-style: dashed; }
.qlt-lg.off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.qlt-chart { position: relative; height: 190px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.qlt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.qlt-gl { stroke: var(--fg); stroke-opacity: .07; stroke-width: 1; }
.qlt-g0 { stroke: var(--fg); stroke-opacity: .18; stroke-width: 1; }
.qlt-ax { font-size: 10.5px; fill: var(--muted-fg); font-variant-numeric: tabular-nums; }
.qlt-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qlt-gap { fill: none; stroke-width: 1.4; stroke-dasharray: 3 4; stroke-opacity: .55; }
.qlt-end { stroke: var(--card); stroke-width: 2; }
.anim-in .qlt-plot.draw { animation: ndReveal 1.2s cubic-bezier(.22,1,.36,1) both; animation-delay: .3s; }
.qlt-x { position: absolute; top: 10px; bottom: 22px; width: 0; border-left: 1px dashed color-mix(in srgb, var(--fg) 35%, transparent); pointer-events: none; }
.qlt-dots { position: absolute; inset: 0; pointer-events: none; }
.qlt-dots i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.qlt-tip { position: absolute; top: 4px; z-index: 2; min-width: 128px; padding: 8px 10px; border-radius: 11px; pointer-events: none; font-size: 11.5px;
  background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--border); box-shadow: 0 12px 28px -12px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.qlt-tip .h { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 650; color: var(--muted-fg); }
.qlt-tip div { display: flex; align-items: center; gap: 6px; line-height: 1.7; white-space: nowrap; }
.qlt-tip div i { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.qlt-tip div span { flex: 1 1 auto; min-width: 0; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; }
.qlt-tip div b { font-weight: 750; font-variant-numeric: tabular-nums; }
.qlt-tip div small { margin-left: 2px; font-size: 10px; color: var(--muted-fg); }
.qlt-tip .na { color: var(--muted-fg); }
.qlt-empty, .qlt-none { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12px; color: var(--muted-fg); }
.qlt-empty { border: 1px dashed var(--border); border-radius: 12px; }

/* 服务解锁 / 大陆下载矩阵：首列吸附，线路多时横向滑动 */
.qlx-scroll { overflow-x: auto; margin: 0 -14px; padding: 0 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.qlx-scroll.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.qlx { display: grid; grid-template-columns: 102px repeat(var(--n, 1), minmax(72px, 1fr)); min-width: min-content; }
.qlx-c { min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-size: 12px; border-bottom: 1px solid var(--border); }
.qlx-c.lab { position: sticky; left: 0; z-index: 1; justify-content: flex-start; gap: 6px; padding: 0 6px 0 0; font-weight: 650; white-space: nowrap; background: var(--card); }
.qlx-c.lab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qlx-c.lab svg { width: 16px; height: 16px; flex: none; }
.qlx-c.hd { height: 54px; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); }
.qlx-hb { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; max-width: 100%; padding: 5px 6px; border-radius: 8px; font-size: 12px; font-weight: 700;
  line-height: 1.2; color: var(--fg); transition: background .15s; -webkit-tap-highlight-color: transparent; }
.qlx-hb:hover { background: var(--muted); }
.qlx-hb:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 0; }
.qlx-hb svg.fl { width: 16px; height: 11px; flex: none; display: block; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.qlx-hb svg.ic { width: 14px; height: 14px; color: var(--muted-fg); }
.qlx-hb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.qlx-c.ft { height: 36px; border-bottom: 0; font-size: 11.5px; color: var(--muted-fg); }
.qlx-c.ft b { font-weight: 750; color: var(--fg); }
.qlx-u { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.qlx-u .ic { width: 12px; height: 12px; }
.qlx-u.ok { color: var(--green); background: var(--green-bg); }
.qlx-u.partial { color: var(--amber); background: var(--amber-bg); }
.qlx-u.blocked { color: var(--red); background: var(--red-bg); }
.qlx-u.unknown { color: var(--muted-fg); background: var(--muted); }
.qlx-s { min-width: 50px; height: 26px; padding: 0 8px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--fg); background: rgba(22,163,74,var(--a, .1)); }
.qlx-s.top { font-weight: 800; box-shadow: inset 0 0 0 1.2px rgba(22,163,74,.55); }
.qlx-s.none { color: var(--muted-fg); background: none; }
.qlx-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; line-height: 1.6; color: var(--muted-fg); }
.qlx-foot span { display: inline-flex; align-items: center; gap: 5px; }
.qlx-foot i { width: 8px; height: 8px; border-radius: 3px; }
.qlx-foot i.ok { background: var(--green); }
.qlx-foot i.partial { background: #f59e0b; }
.qlx-foot i.blocked { background: #ef4444; }
.qlx-foot .at { margin-left: auto; }

/* 单线明细弹窗（挂在 body 上） */
.ql-ukm .uModal-card { width: min(440px, 100%); max-height: 86vh; }
.qlk-flag { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); }
.qlk-flag svg.fl { width: 19px; height: 13px; display: block; border-radius: 2.5px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.qlk-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlk-name small { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted-fg); }
.qlk-body { padding: 2px 16px 16px; }
.qlk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 2px; }
.qlk-h b { flex: none; font-size: 13px; font-weight: 700; }
.qlk-h span { min-width: 0; font-size: 11px; text-align: right; color: var(--muted-fg); }
.qlk-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.qlk-list .qlk-row:last-child { border-bottom: 0; }
.qlk-row > svg { width: 22px; height: 22px; flex: none; }
.qlk-info { flex: 1 1 auto; min-width: 0; }
.qlk-info b { display: block; font-size: 13.5px; font-weight: 650; }
.qlk-info span { display: block; margin-top: 1px; font-size: 11px; color: var(--muted-fg); }
.qlk-cns { display: grid; gap: 2px; padding-top: 4px; }
.qlk-cn { display: grid; grid-template-columns: 70px minmax(0, 1fr) 78px; align-items: center; gap: 10px; height: 30px; font-size: 12px; }
.qlk-cn > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted-fg); }
.qlk-cn > i { height: 6px; border-radius: 99px; overflow: hidden; background: var(--muted); }
.qlk-cn > i > em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #4C8DFF); transform-origin: left center; animation: growX .8s cubic-bezier(.22,1,.36,1) both; }
.qlk-cn > b { text-align: right; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qlk-cn > b small { font-size: 10px; font-weight: 600; color: var(--muted-fg); }
.qlk-cn.none > b { font-weight: 500; color: var(--muted-fg); }
.qlk-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 8px; text-align: center; font-size: 12.5px; color: var(--muted-fg); }
.qlk-skel { padding-top: 8px; }
.qlk-skel .sk-row { border-bottom: 0; }
.qlk-skel .sk-i { width: 22px; height: 22px; flex: none; border-radius: 6px; }
.qlk-skel .sk-t { flex: 1 1 auto; max-width: 120px; height: 13px; margin-right: auto; }
.qlk-skel .sk-c { width: 62px; height: 22px; flex: none; border-radius: 7px; }

/* 名词说明 */
.ql-faq { border-radius: 14px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.ql-faq summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 650; color: var(--muted-fg); -webkit-tap-highlight-color: transparent; }
.ql-faq summary::-webkit-details-marker { display: none; }
.ql-faq summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .2s; }
.ql-faq[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.ql-faq summary:hover { color: var(--fg); }
.ql-faq summary:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.ql-faq dl { display: grid; gap: 12px; margin: 0; padding: 2px 14px 14px; }
.ql-faq dt { font-size: 12.5px; font-weight: 700; color: var(--fg); }
.ql-faq dd { margin: 3px 0 0; font-size: 12px; line-height: 1.65; color: var(--muted-fg); }

@media (max-width: 359px) {
  .ql-hero { padding: 12px 14px 14px; }
  .qlh-eye em { display: none; }
  .qlh-title { gap: 8px; font-size: 19px; }
  .qlh-flag { width: 32px; height: 32px; border-radius: 10px; }
  .qlm { padding: 10px; }
  .qlm-head em { display: none; }
  .qlp { padding: 10px; }
  .qlp-v em { display: none; }
  .qlc { padding: 12px; }
  .qlc-mi { padding: 0 8px; }
  .qlc-v b { font-size: 15px; }
  .qlc-rt { padding-left: 6px; gap: 4px; }
  .qlc-uki { gap: 2px; }
  .qlc-uki > i { min-width: 15px; }
  .qlc-uki > i svg { width: 12px; height: 12px; }
  .qlx { grid-template-columns: 92px repeat(var(--n, 1), minmax(72px, 1fr)); }
}
@media (min-width: 720px) {
  .ql { gap: 16px; }
  .ql-hero { padding: 18px 22px 22px; row-gap: 14px; }
  .qlh-title { font-size: 26px; }
  .qlh-flag { width: 40px; height: 40px; border-radius: 12px; }
  .qlh-flag svg.fl { width: 26px; height: 18px; }
  .ql-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .qlp { padding: 14px; }
  .ql-grid { gap: 14px; }
  .qlc { padding: 16px; }
  .ql-card { padding: 18px 20px; }
  .qlx-scroll { margin: 0 -20px; padding: 0 20px; }
  .qlx { grid-template-columns: 150px repeat(var(--n, 1), minmax(92px, 1fr)); }
  .qlx-c.lab { gap: 8px; }
  .qlx-c.lab svg { width: 18px; height: 18px; }
  .qlt-chart { height: 230px; }
}
@media (min-width: 960px) {
  .ql-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "eye eye" "info map"; column-gap: 28px; align-items: center; }
}
[data-theme="dark"] .ql-hero { background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 62%),
    var(--card); }
[data-theme="dark"] .qlc:not(.ql-skel):hover { box-shadow: none; }
[data-theme="dark"] .qlc-uki > i { background: color-mix(in srgb, var(--fg) 4%, var(--card)); }
[data-theme="dark"] .qlx-s { background: rgba(74,222,128,var(--a, .1)); }
[data-theme="dark"] .qlx-s.top { box-shadow: inset 0 0 0 1.2px rgba(74,222,128,.5); }
[data-theme="dark"] .qlp-ic.lat { color: #fbbf24; }
[data-theme="dark"] .qlp-ic.uk { color: #a78bfa; }
@media (prefers-reduced-motion: reduce) {
  .anim-in .ql-blk, .anim-in .qlc.rise, .anim-in .qlc.rise .qlc-bar > i > em, .anim-in .qlt-plot.draw, .ql .qlc.flash, .qlk-cn > i > em,
  .qlh-spin, .qlh-refresh.spin .ic, .qlc-st.ok i, .ql .sk, .ql-ukm .sk { animation: none !important; }
  .qlm-f { display: none; }
}

/* ============ 购买订阅 v2（views/plans.js，pl- 前缀；支付弹窗 py- 见文末）
   主卡：手机文案在上、订阅卡/插画在下 → ≥960px 左右并排；套餐卡自适应网格（手机 1 列 / ≥720px 2 列 / 3 款 ≥1080px 3 列）；
   配置页：手机单列（周期 → 结算卡 → 套餐包含）→ ≥1020px 左内容右结算（结算卡吸附） ============ */
.pl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pl > * { min-width: 0; }
.pl [hidden] { display: none !important; }
.anim-in > .pl { animation: none; }
.anim-in .pl-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.pl .sk, .plv .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: ndShimmer 1.4s ease-in-out infinite; }

/* ---------- 主卡（选购导语 + 订阅卡 / 插画） ---------- */
.pl-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: center;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 6%, transparent), transparent 62%),
    var(--card); }
.pl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%); mask-image: linear-gradient(100deg, #000 10%, transparent 62%); }
.plh-txt { min-width: 0; }
.plh-eye { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 650; color: var(--brand); background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent); }
.plh-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.plh-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.plh-title { margin: 12px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.plh-title em { font-style: normal; background: linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plh-sub { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); }
.plh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.plh-chips span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--fg); background: color-mix(in srgb, var(--card) 70%, var(--muted)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.plh-chips span .ic { width: 13px; height: 13px; color: var(--brand); }
.plh-side { min-width: 0; display: flex; justify-content: center; }
.plh-side > * { width: 100%; max-width: 430px; }
/* 插画：叠卡素材浮入 + 星光闪烁（无订阅时展示） */
.plh-art { display: block; width: min(288px, 90%); margin: 2px auto; }
.pla-c { transform-box: fill-box; transform-origin: center; animation: plaIn .7s cubic-bezier(.22,1,.36,1) both; }
.pla-c1 { animation-delay: .05s; }
.pla-c2 { animation-delay: .16s; }
.pla-c3 { animation-delay: .27s; }
@keyframes plaIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.pla-s { transform-box: fill-box; transform-origin: center; animation: plaTwinkle 2.6s ease-in-out infinite; }
.pla-s.s2 { animation-delay: .5s; }
.pla-s.s3 { animation-delay: 1.1s; }
.pla-s.s4 { animation-delay: 1.7s; }
@keyframes plaTwinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.08); } }

/* ---------- 我的订阅卡（深红渐变，与仪表盘主视觉同一套语言） ---------- */
.plm { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 16px 18px; color: #fff;
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.26), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,214,128,.30), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #350804) 0%, var(--brand) 40%, var(--brand-2) 74%, #ffb066 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.30), 0 18px 40px -16px var(--brand-ring); }
.plm-deco { position: absolute; right: -30px; top: -44px; width: 200px; height: 120px; pointer-events: none; fill: rgba(255,255,255,.10); }
.plm-shine { position: absolute; top: 0; bottom: 0; width: 55%; pointer-events: none; transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: plmShine 5.6s ease-in-out infinite; }
@keyframes plmShine { 0%, 58% { transform: translateX(-130%) skewX(-14deg); } 78%, 100% { transform: translateX(240%) skewX(-14deg); } }
.plm-top, .plm-name, .plm-meta, .plm-use, .plm-acts { position: relative; }
.plm-top { display: flex; align-items: center; gap: 9px; }
.plm-mk { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.plm-mk .brand-mark { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; box-shadow: none; }
.plm-mk .brand-mark.brand-logo { width: 26px; height: 26px; }
.plm-k { font-size: 12.5px; font-weight: 650; opacity: .95; }
.plm-st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; white-space: nowrap;
  font-size: 11px; font-weight: 700; background: rgba(255,255,255,.17); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.plm-st i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #fff; }
.plm-ok .plm-st i { background: #8CF2AE; animation: plmPulse 2.2s ease-in-out infinite; }
.plm-soon .plm-st i { background: #FFD166; animation: plmPulse 2.2s ease-in-out infinite; }
.plm-exp .plm-st i { background: #FFA9A0; }
@keyframes plmPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,.22); } 50% { box-shadow: 0 0 0 5.5px rgba(255,255,255,.06); } }
.plm-name { margin-top: 11px; font-size: 20px; font-weight: 780; letter-spacing: -.3px; line-height: 1.25; }
.plm-meta { margin-top: 4px; font-size: 12px; opacity: .82; }
.plm-meta b.num { font-weight: 760; opacity: 1; }
.plm-use { margin-top: 13px; }
.plm-ur { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; opacity: .88; }
.plm-ur b { font-weight: 750; opacity: 1; }
.plm-bar { margin-top: 7px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.plm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,.96), #FFE1B0); transition: width .5s ease; }
.plm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plm-note { font-size: 11.5px; opacity: .78; line-height: 1.5; }

/* ---------- 待支付横幅 ---------- */
.pl-pend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border));
  background: linear-gradient(180deg, var(--amber-bg), transparent); }
.pl-pend.flash { animation: plPendFlash .8s ease; }
@keyframes plPendFlash { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 22%, transparent); } }
.plp-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--amber-bg); color: var(--amber); display: grid; place-items: center; flex: none; }
.plp-tx { flex: 1; min-width: 180px; font-size: 12.5px; }
.plp-tx b { display: block; font-size: 13.5px; font-weight: 700; }
.plp-tx b em { font-style: normal; color: var(--brand); font-weight: 750; }
.plp-tx span { display: block; margin-top: 3px; color: var(--muted-fg); font-size: 11.5px; }
.plp-acts { display: flex; gap: 8px; flex: none; }

/* ---------- 套餐区（标题 + 周期切换 + 卡片网格） ---------- */
.pl-sec { min-width: 0; }
.pls-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pls-t h2 { margin: 0; font-size: 17px; font-weight: 760; letter-spacing: -.2px; }
.pls-t p { margin: 3px 0 0; font-size: 12px; color: var(--muted-fg); }
.pl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--muted); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pl-seg::-webkit-scrollbar { display: none; }
.pl-seg button { display: inline-flex; align-items: center; gap: 1px; height: 32px; padding: 0 12px; border-radius: 9px; white-space: nowrap;
  font-size: 12.5px; font-weight: 650; color: var(--muted-fg); transition: color .15s, background .15s; }
.pl-seg button:hover { color: var(--fg); }
.pl-seg button.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm); }
.pl-seg button em { font-style: normal; font-size: 9.5px; font-weight: 750; margin-left: 4px; padding: 1px 5px; border-radius: 6px; color: var(--green); background: var(--green-bg); }
.pl-seg button.on em { color: #fff; background: var(--green); }

.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.anim-in .pl-grid .pl-card { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--k, 0) * 60ms + 80ms); }
.pl-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 16px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s, transform .16s; }
.pl-card:hover { border-color: color-mix(in srgb, var(--fg) 20%, var(--border)); box-shadow: var(--shadow); transform: translateY(-2px); }
.pl-card.featured { border-color: color-mix(in srgb, var(--brand) 52%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent), var(--shadow-sm); }
.pl-card.cur { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.plc-rib { position: absolute; top: -11px; left: 16px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px 0 8px; border-radius: 99px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .2px; color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 4px 12px -4px var(--brand-ring), inset 0 0 0 1px rgba(255,255,255,.22); }
.plc-head { min-width: 0; }
.plc-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; row-gap: 5px; min-width: 0; }
.plc-name b { font-size: 16px; font-weight: 770; letter-spacing: -.2px; }
.plc-tag { flex: none; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: var(--muted-fg); background: var(--muted); }
.plc-tag.cur { color: var(--brand); background: var(--brand-soft); }
.plc-sum { margin-top: 4px; font-size: 12px; color: var(--muted-fg); line-height: 1.55; }
.plc-price { display: flex; align-items: baseline; gap: 4px; margin-top: 15px; }
.plc-price .cur { font-size: 16px; font-weight: 750; color: var(--brand); }
.plc-price .n { font-size: 38px; font-weight: 820; letter-spacing: -1.6px; line-height: 1; color: var(--brand); }
.plc-price .u { font-size: 12.5px; color: var(--muted-fg); }
.plc-price.swap { animation: plcSwap .3s ease; }
@keyframes plcSwap { from { opacity: .3; transform: translateY(4px) scale(.96); } }
.plc-note { margin-top: 6px; min-height: 17px; font-size: 11.5px; color: var(--muted-fg); }
.plc-note b { color: var(--green); font-weight: 700; }
.plc-cap { display: flex; align-items: center; gap: 6px; margin-top: 11px; padding: 7px 10px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--amber); background: var(--amber-bg); }
.plc-cap b { font-weight: 780; }
.plc-cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; margin-top: 14px;
  border-radius: 11px; font-size: 13.5px; font-weight: 700; transition: opacity .15s, transform .15s, box-shadow .15s, background .15s; }
.plc-cta.go { color: var(--brand-fg); background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 16px -6px var(--brand-ring); }
.plc-cta.go:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 9px 20px -7px var(--brand-ring); }
.plc-cta.soft { color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent); }
.plc-cta.soft:hover { background: color-mix(in srgb, var(--brand-soft) 72%, var(--card)); }
.plc-cta.off { color: var(--muted-fg); background: var(--muted); cursor: not-allowed; }
.plc-fh { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 11px; font-weight: 650; letter-spacing: .3px; color: var(--muted-fg); }
.plc-fh::before, .plc-fh::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.plc-feats, .plv-feats { margin: 6px 0 0; padding: 0; list-style: none; }
.plc-feats li, .plv-feats li { display: flex; align-items: flex-start; gap: 9px; padding: 6.5px 0; font-size: 12.5px; color: var(--muted-fg); line-height: 1.5; }
.plc-feats li.spec, .plv-feats li.spec { color: var(--fg); }
.plc-feats li.spec > span:last-child, .plv-feats li.spec > span:last-child { font-weight: 650; }
.plc-ck { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  color: var(--brand); background: var(--brand-soft); }
.plc-ck .ic { width: 11px; height: 11px; }
.plc-feats li.spec .plc-ck, .plv-feats li.spec .plc-ck { color: var(--green); background: var(--green-bg); }

/* ---------- 购买须知（FAQ 折叠） ---------- */
.pl-faq { border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); padding: 16px 18px 8px; }
.plf-h { display: flex; align-items: center; gap: 11px; padding-bottom: 6px; }
.plf-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.plf-h b { display: block; font-size: 14px; font-weight: 750; }
.plf-h span:last-child { display: block; font-size: 11.5px; color: var(--muted-fg); margin-top: 2px; }
.plf-list { min-width: 0; }
.plf-it + .plf-it { border-top: 1px dashed var(--border); }
.plf-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 0; text-align: left; font-size: 13px; font-weight: 650; }
.plf-q .ic { color: var(--muted-fg); transition: transform .22s ease; }
.plf-it.open .plf-q .ic { transform: rotate(180deg); }
.plf-it.open .plf-q { color: var(--brand); }
.plf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.plf-a > div { overflow: hidden; }
.plf-it.open .plf-a { grid-template-rows: 1fr; }
.plf-a p { margin: 0; padding: 0 0 13px; font-size: 12.5px; line-height: 1.7; color: var(--muted-fg); }

/* ---------- 空态 / 错误态 ---------- */
.pl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 20px 40px;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.ple-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); margin-bottom: 4px; }
.ple-ic .ic { width: 22px; height: 22px; }
.pl-empty b { font-size: 14.5px; font-weight: 750; }
.pl-empty > span { font-size: 12px; color: var(--muted-fg); }
.pl-empty .btn { margin-top: 8px; }

/* ---------- 配置订阅（plv-）：顶部 + 左内容 / 右结算 ---------- */
.pl-cv { max-width: 1020px; margin: 0 auto; }
.plv-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plv-back { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 6px; margin-left: -6px; border-radius: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--muted-fg); transition: background .15s, color .15s; }
.plv-back:hover { background: var(--muted); color: var(--fg); }
.plv-crumb { font-size: 12.5px; color: var(--muted-fg); }
.plv-crumb b { color: var(--fg); font-weight: 650; }
.plv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.plv > * { min-width: 0; }
.pl-box { min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.plb-h { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.plb-h b { font-size: 14px; font-weight: 750; }
.plb-h small { margin-left: auto; font-size: 11.5px; color: var(--muted-fg); }
.plb-n { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  color: var(--brand-fg); background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.plb-i { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.plv-head { display: flex; align-items: center; gap: 13px; }
.plv-mk { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--brand-fg);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 14px -6px var(--brand-ring); }
.plv-ht { flex: 1; min-width: 0; }
.plv-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; row-gap: 5px; }
.plv-name b { font-size: 16.5px; font-weight: 770; letter-spacing: -.2px; }
.plv-sum { margin-top: 4px; font-size: 12px; color: var(--muted-fg); line-height: 1.55; }
.plv-warn { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; padding: 8px 11px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-bg); }
.plv-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.plv-po { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 11px 12px 10px;
  border: 1.5px solid var(--border); border-radius: 13px; background: var(--card); cursor: pointer;
  transition: border-color .13s, background .13s, box-shadow .13s, transform .13s; }
.plv-po:hover:not(.off) { border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); transform: translateY(-1px); }
.plv-po.on { border-color: var(--brand); background: linear-gradient(150deg, color-mix(in srgb, var(--brand-soft) 90%, var(--card)), var(--card) 74%);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 9%, transparent); }
.plv-po.off { opacity: .55; cursor: not-allowed; }
.po-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.po-r { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--fg) 26%, var(--border)); position: relative; transition: border-color .13s; }
.plv-po.on .po-r, .plv-rs.on .po-r { border-color: var(--brand); }
.plv-po.on .po-r::after, .plv-rs.on .po-r::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--brand); }
.po-l { font-size: 13px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-save { margin-left: auto; flex: none; padding: 1.5px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 750; color: var(--green); background: var(--green-bg); }
.po-p { margin-top: 8px; font-size: 16.5px; font-weight: 780; letter-spacing: -.3px; }
.plv-po.on .po-p { color: var(--brand); }
.po-m { margin-top: 2px; font-size: 11px; color: var(--muted-fg); }
.plv-or { display: flex; align-items: center; gap: 10px; margin: 15px 0 10px; font-size: 11px; color: var(--muted-fg); }
.plv-or::before, .plv-or::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.plv-rs { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px;
  border: 1.5px solid var(--border); border-radius: 13px; background: var(--card); cursor: pointer; transition: border-color .13s, background .13s, box-shadow .13s; }
.plv-rs:hover:not(.on) { border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); }
.plv-rs.on { border-color: var(--brand); background: linear-gradient(150deg, color-mix(in srgb, var(--brand-soft) 90%, var(--card)), var(--card) 74%);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 9%, transparent); }
.rs-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.rs-t { flex: 1; min-width: 0; }
.rs-t b { display: block; font-size: 13px; font-weight: 700; }
.rs-t small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-fg); }
.rs-p { flex: none; font-size: 15px; font-weight: 780; }
.plv-rs.on .rs-p { color: var(--brand); }

/* 结算卡（右侧吸附） */
.plv-sum { min-width: 0; }
.pls-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.pls-card .plb-h b { font-size: 15px; }
.pls-pick { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--muted) 70%, transparent); }
.pls-pn { font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-pp { margin-left: auto; flex: none; font-size: 11.5px; color: var(--muted-fg); }
.pls-eff { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 9px 11px; border-radius: 11px;
  font-size: 12px; line-height: 1.55; color: var(--fg); background: var(--brand-soft); }
.pls-eff .ic { flex: none; margin-top: 2px; color: var(--brand); }
.pls-eff b.num { font-weight: 750; }
.pls-cpn { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 4px 4px 4px 11px;
  border: 1.5px solid var(--border); border-radius: 12px; transition: border-color .15s; }
.pls-cpn:focus-within { border-color: color-mix(in srgb, var(--brand) 46%, var(--border)); }
.pls-cpn > .ic { flex: none; color: var(--muted-fg); }
.pls-cpn input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: transparent; font-size: 12.5px; }
.pls-cpn input::placeholder { color: color-mix(in srgb, var(--muted-fg) 78%, transparent); }
.pls-cpn > button { flex: none; height: 30px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--brand); transition: background .15s; }
.pls-cpn > button:hover { background: var(--brand-soft); }
.pls-cpn.on { border-color: color-mix(in srgb, var(--green) 42%, var(--border)); background: color-mix(in srgb, var(--green-bg) 60%, transparent); }
.pls-cpn.on > .ic { color: var(--green); }
.pls-cpn.on span { font-size: 12px; line-height: 1.5; }
.pls-cpn.on b { font-weight: 750; }
.pls-cpn.on b.num { color: var(--green); }
.pls-x { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted-fg); transition: background .15s, color .15s; }
.pls-x:hover { background: var(--muted); color: var(--fg); }
.pls-lines { margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--border); }
.pls-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6.5px 0; font-size: 12.5px; color: var(--muted-fg); }
.pls-l b { font-weight: 650; color: var(--fg); }
.pls-l.g b, .pls-l.g span { color: var(--green); }
.pls-l.m { font-size: 11.5px; }
.pls-l.m b { font-weight: 600; color: var(--muted-fg); }
.pls-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--border); }
.pls-total > span { font-size: 12.5px; font-weight: 700; }
.pls-total b.num { font-size: 27px; font-weight: 820; letter-spacing: -1px; color: var(--brand); display: inline-flex; align-items: baseline; }
.pls-total b.num small { font-size: 15px; font-weight: 750; margin-right: 2px; }
.pls-fee { margin-top: 8px; font-size: 11px; color: var(--muted-fg); line-height: 1.5; }
.pls-fee.ok { display: flex; align-items: center; gap: 5px; color: var(--green); font-weight: 650; font-size: 11.5px; }
.pls-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 8px 11px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.5; font-weight: 600; color: var(--amber); background: var(--amber-bg); }
.pls-hint .ic { flex: none; margin-top: 1.5px; }
.pls-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 14px;
  border-radius: 12px; font-size: 14.5px; font-weight: 750; color: var(--brand-fg);
  background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring);
  transition: opacity .15s, transform .15s, box-shadow .15s; }
.pls-go:hover:not(:disabled) { opacity: .94; transform: translateY(-1px); box-shadow: 0 11px 22px -8px var(--brand-ring); }
.pls-go:disabled { background: var(--muted); color: var(--muted-fg); box-shadow: none; cursor: not-allowed; }
.pls-safe { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; font-size: 11px; color: var(--muted-fg); }
.pls-safe .ic { width: 12px; height: 12px; }

/* 配置页桌面：左内容右结算（结算卡吸附） */
@media (min-width: 1020px) {
  .plv { grid-template-columns: minmax(0, 1fr) 348px; grid-template-areas: "head sum" "per sum" "inc sum"; align-items: start; }
  .plv-head { grid-area: head; }
  .plv-per { grid-area: per; }
  .plv-inc { grid-area: inc; }
  .plv-sum { grid-area: sum; position: sticky; top: 76px; }
}
@media (min-width: 560px) {
  .plv-pos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 列表页桌面：手机单列 → ≥720px 两列 → 3 款套餐且 ≥1080px 三列 */
@media (min-width: 720px) {
  .pl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 22px; padding: 22px 24px; }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pl-grid[data-n="1"] { grid-template-columns: minmax(0, 460px); }
}
@media (min-width: 1080px) {
  .pl-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .plc-price .n { font-size: 33px; }
  .pls-total b.num { font-size: 24px; }
}
@media (max-width: 360px) {
  .plv-po { padding: 10px 10px 9px; }
  .po-l { font-size: 12.5px; }
  .po-save { padding: 1px 5px; font-size: 9px; }
}

/* ============ 支付弹窗 v2（lib/pay.js，py- 前缀；骨架 .payModal/.payCard/.pay-head/.pay-body 复用既有） ============ */
.py-sum { text-align: center; padding: 2px 0 13px; }
.py-sum-k { font-size: 12px; color: var(--muted-fg); }
.py-sum-k b { color: var(--fg); }
.py-sum-v { margin-top: 5px; font-size: 36px; font-weight: 820; letter-spacing: -1.4px; color: var(--brand); display: inline-flex; align-items: baseline; }
.py-sum-v small { font-size: 17px; font-weight: 750; margin-right: 3px; }
.py-sum-no { margin-top: 7px; font-size: 11px; color: var(--muted-fg); }
.py-lines { border-top: 1px dashed var(--border); padding-top: 5px; }
.py-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6.5px 0; font-size: 12.5px; color: var(--muted-fg); }
.py-l b { font-weight: 650; color: var(--fg); }
.py-l.g b, .py-l.g span { color: var(--green); }
.py-l.t { margin-top: 5px; padding-top: 12px; border-top: 1px dashed var(--border); }
.py-l.t span { font-size: 13px; font-weight: 700; color: var(--fg); }
.py-l.t b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; color: var(--brand); }
.py-mh { margin: 15px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted-fg); }
.py-ms { display: grid; gap: 8px; }
.py-m { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); transition: border-color .13s, background .13s, box-shadow .13s; }
.py-m:hover { border-color: color-mix(in srgb, var(--brand) 34%, var(--border)); }
.py-m.on { border-color: var(--brand); background: linear-gradient(150deg, color-mix(in srgb, var(--brand-soft) 88%, var(--card)), var(--card) 78%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent); }
.py-ml { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  color: var(--muted-fg); background: var(--muted); }
.py-ml .ic { width: 16px; height: 16px; }
.py-ml.ali { color: #fff; font-size: 15px; font-weight: 800; background: #1677ff; }
.py-ml.img { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.py-ml.img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; }
.py-ml.sm { display: inline-grid; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; margin-right: 6px; vertical-align: -5px; }
.py-mt { flex: 1; min-width: 0; }
.py-mt b { display: block; font-size: 13.5px; font-weight: 680; }
.py-mt small { display: block; margin-top: 1.5px; font-size: 11px; color: var(--muted-fg); }
.py-r { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fg) 20%, var(--border)); position: relative; transition: border-color .13s; }
.py-m.on .py-r { border-color: var(--brand); }
.py-m.on .py-r::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--brand); }
.py-ms-wait { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 10px; font-size: 12.5px; color: var(--muted-fg); }
.py-ms-wait::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dbSpin .7s linear infinite; }
.py-acts { display: grid; gap: 9px; margin-top: 18px; }
.py-go { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 750;
  color: var(--brand-fg); background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring);
  transition: opacity .15s, transform .15s; }
.py-go:hover:not(:disabled) { opacity: .94; transform: translateY(-1px); }
.py-go:disabled { background: var(--muted); color: var(--muted-fg); box-shadow: none; cursor: not-allowed; }
.py-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.py-row > .btn { width: 100%; }

/* 扫码 / 跳转支付 */
.py-qr { display: flex; flex-direction: column; align-items: center; text-align: center; }
.py-qr-h { font-size: 13px; color: var(--muted-fg); }
.py-qr-h b { color: var(--fg); }
.py-qr-f { position: relative; margin: 13px 0 3px; }
.py-qr-f .qr-box { width: 190px; height: 190px; }
.py-cn { position: absolute; width: 22px; height: 22px; pointer-events: none; color: var(--brand); }
.py-cn.tl { left: -7px; top: -7px; border-top: 2.5px solid currentColor; border-left: 2.5px solid currentColor; border-top-left-radius: 8px; }
.py-cn.tr { right: -7px; top: -7px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; border-top-right-radius: 8px; }
.py-cn.bl { left: -7px; bottom: -7px; border-bottom: 2.5px solid currentColor; border-left: 2.5px solid currentColor; border-bottom-left-radius: 8px; }
.py-cn.br { right: -7px; bottom: -7px; border-bottom: 2.5px solid currentColor; border-right: 2.5px solid currentColor; border-bottom-right-radius: 8px; }
.py-qr-amt { margin-top: 10px; font-size: 26px; font-weight: 820; letter-spacing: -1px; color: var(--brand); display: inline-flex; align-items: baseline; }
.py-qr-amt small { font-size: 14px; font-weight: 750; margin-right: 2px; }
.py-wait { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; color: var(--muted-fg); }
.py-wait i { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dbSpin .7s linear infinite; }
.py-wait span { font-size: 12.5px; }
.py-wait small { flex-basis: 100%; text-align: center; font-size: 11px; opacity: .85; }
.py-link { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 11px;
  font-size: 13px; font-weight: 700; color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
  transition: background .15s; }
.py-link:hover { background: color-mix(in srgb, var(--brand-soft) 72%, var(--card)); }
.py-url-ic { width: 58px; height: 58px; margin: 8px auto 14px; border-radius: 50%; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.py-url-ic .ic { width: 24px; height: 24px; }
.py-url-t { font-size: 16px; font-weight: 760; }
.py-url-s { margin-top: 5px; font-size: 12px; color: var(--muted-fg); }

/* 支付完成 / 已取消 */
.py-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 2px; }
.py-ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--green-bg); animation: payPop .5s cubic-bezier(.2,1.4,.4,1); }
.py-ok svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.py-ok svg .c { stroke-dasharray: 145; stroke-dashoffset: 145; animation: pyDraw .45s ease forwards; }
.py-ok svg .k { stroke-dasharray: 42; stroke-dashoffset: 42; animation: pyDraw .3s ease .38s forwards; }
@keyframes pyDraw { to { stroke-dashoffset: 0; } }
.py-done.off .py-ok { color: var(--red); background: var(--red-bg); }
.py-done h4 { margin: 15px 0 4px; font-size: 17px; font-weight: 780; }
.py-done p { margin: 0; font-size: 12.5px; color: var(--muted-fg); }
.py-done .py-acts { width: 100%; margin-top: 18px; }

/* 支付弹窗 · 夜间与降级 */
[data-theme="dark"] .plm {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) {
  .anim-in .pl-blk, .anim-in .pl-grid .pl-card, .pl .sk, .plv .sk, .plm-shine, .plh-dot::after, .plm-st i,
  .pla-c, .pla-s, .py-ms-wait::before, .py-wait i, .py-ok, .py-ok svg .c, .py-ok svg .k { animation: none !important; }
  .pla-c { opacity: 1 !important; transform: none !important; }
  .pla-s { opacity: .9 !important; }
  .plf-a { transition: none; }
}

/* ============ 登录注册 v2（views/auth.js）
   桌面：左品牌主卡（深红渐变 + 宇航员）右表单卡 → ≤1023px 单列（品牌卡收成一行问候条） ============ */
.auth-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 22px; max-width: 1020px; align-items: stretch; }
.auth-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  border-radius: 22px; padding: 26px; color: #fff;
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.26), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,214,128,.30), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #350804) 0%, var(--brand) 40%, var(--brand-2) 74%, #ffb066 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.30), 0 18px 40px -16px var(--brand-ring); }
.auh-deco { position: absolute; right: -26px; top: -34px; width: 220px; height: 140px; pointer-events: none; fill: rgba(255,255,255,.10); }
.auh-shine { position: absolute; top: 0; bottom: 0; width: 55%; pointer-events: none; transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: plmShine 6.4s ease-in-out infinite; }
.auh-top { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.auh-mk { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.auh-mk .brand-mark { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; box-shadow: none; }
.auh-mk .brand-mark.brand-logo { object-fit: contain; }
.auh-brand { min-width: 0; }
.auh-brand b { display: block; font-size: 16.5px; font-weight: 780; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auh-brand span { display: block; margin-top: 2px; font-size: 11.5px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auh-main { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 18px 0 14px; min-width: 0; }
.auh-title { font-size: 27px; font-weight: 800; letter-spacing: -.4px; line-height: 1.32; }
.auh-title em { font-style: normal; background: linear-gradient(120deg, #fff, #FFD9A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auh-sub { margin: 10px 0 0; max-width: 350px; font-size: 12.5px; line-height: 1.65; opacity: .8; }
.auh-main .mascot-box { width: 252px; max-width: 82%; margin: 16px auto 0; }
/* 品牌卡上的宇航员固定用浅色配色（深红渐变上深色套装会糊底，勿跟随暗色翻转） */
.auth-hero .mascot { --mc-suit: #ffffff; --mc-face: #FFF7F1; --mc-line: #E3E5EE; --mc-eye: #262A36; --mc-cheek: rgba(250,44,25,.32); --mc-paw: #ffffff; }
.auh-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.auh-chips span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 9px; white-space: nowrap;
  font-size: 11.5px; font-weight: 620; background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.auh-chips .ic { width: 13px; height: 13px; opacity: .92; }

/* 表单卡 */
.auth-card { border-radius: 22px; }
.auth-card .pad { padding: 24px 24px 22px; }
.ac-head { margin: 0 0 16px; }
.ac-head b { display: block; font-size: 18px; font-weight: 780; letter-spacing: -.2px; }
.ac-head span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-fg); }
.ac-aux { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.ac-aux button { padding: 2px 2px; font-size: 12.5px; font-weight: 620; color: var(--brand); }
.ac-aux button:hover { text-decoration: underline; }
.auth-alt { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--muted-fg); }
.auth-alt button { padding: 2px 4px; color: var(--brand); font-weight: 650; }
.auth-alt button:hover { text-decoration: underline; }
.auth-card .field label { font-size: 12.5px; }

/* 移动端：品牌卡收成一行问候条（标题在左、宇航员在右；卖点与副文案省略） */
@media (max-width: 1023px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 430px; }
  .auth-hero { padding: 16px 16px 14px; border-radius: 18px; }
  .auh-deco { width: 150px; right: -34px; top: -44px; }
  .auh-shine { display: none; }
  .auh-top { gap: 10px; }
  .auh-mk { width: 38px; height: 38px; border-radius: 11px; }
  .auh-mk .brand-mark { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
  .auh-brand b { font-size: 15px; }
  .auh-brand span { display: none; }
  .auh-main { flex-direction: row; align-items: center; gap: 10px; margin: 12px 0 0; }
  .auh-ht { flex: 1; min-width: 0; }
  .auh-title { font-size: 18px; line-height: 1.35; }
  .auh-title br { display: none; }
  .auh-sub { display: none; }
  .auh-main .mascot-box { width: 106px; max-width: none; margin: 0 0 0 auto; flex: none; }
  .auh-chips { display: none; }
  .auth-card { border-radius: 18px; }
  .auth-card .pad { padding: 20px 18px; }
}
[data-theme="dark"] .auth-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) {
  .auh-shine { animation: none; opacity: 0; }
}

/* ============ 我的订单 v2（views/orders.js，od- 前缀） ============ */
/* ============ 我的订单 v2（views/orders.js，od- 前缀；联调期独立文件，发布时并入 theme.css）
   列表：订单概览主卡（手机 文案 → 待支付卡 → 三格统计；≥720px 左文案+统计 / 右待支付卡）→ 状态分段 → 订单卡网格（1 → 2 → 3 列）
   详情：手机单列（状态卡 → 收据 → 进度 → 工单）→ ≥1024px 左收据 / 右侧栏 ============ */
.od-root.od-root { animation: none; }
.od { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  --od-amber: #d97706; --od-green: var(--green); --od-blue: #2563eb; --od-gray: var(--muted-fg); }
[data-theme="dark"] .od { --od-amber: #fbbf24; --od-blue: #60a5fa; }
.od > * { min-width: 0; }
.od[data-anim] .od-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.od .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: odShimmer 1.4s ease-in-out infinite; }
@keyframes odShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.od-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.od a:focus-visible, .od button:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }

/* ---------- 主卡：订单概览 ---------- */
.od-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; grid-template-areas: "txt" "side" "stats";
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 6%, transparent), transparent 62%),
    var(--card); }
.od-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%); mask-image: linear-gradient(100deg, #000 10%, transparent 62%); }
.odh-txt { grid-area: txt; min-width: 0; }
.odh-side { grid-area: side; min-width: 0; }
.odh-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: end; }
.odh-eye { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; color: var(--brand); }
.odh-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.odh-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.odh-dot.warn { background: var(--od-amber); color: var(--od-amber); }
.od-hero.has-pend .odh-eye { color: var(--od-amber); }
.od-ref { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--muted-fg);
  background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px var(--border); transition: color .15s, background .15s; }
.od-ref:hover:not(:disabled) { color: var(--fg); background: var(--muted); }
.od-ref:disabled { cursor: default; }
.od-ref.spin .ic { animation: odSpin .8s linear infinite; }
@keyframes odSpin { to { transform: rotate(360deg); } }
.odh-title { margin: 10px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.odh-title em { font-style: normal; background: linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.odh-sub { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); }
.od-st { min-width: 0; padding: 10px 12px 9px; border-radius: 12px;
  background: color-mix(in srgb, var(--muted) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
.od-st b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.od-st span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
/* 待支付卡（品牌渐变，与仪表盘主卡 / 我的订阅卡同一套语言） */
.od-pay { position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; padding: 15px 16px 14px; color: #fff;
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.26), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,214,128,.30), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #350804) 0%, var(--brand) 40%, var(--brand-2) 74%, #ffb066 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.30), 0 16px 36px -16px var(--brand-ring); }
.od-pay-glow { position: absolute; z-index: -1; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: odGlow 7s ease-in-out infinite alternate; }
@keyframes odGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-22px, 16px) scale(1.12); } }
.odp-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.odp-k { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.17); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.odp-no { margin-left: auto; font-size: 11px; opacity: .82; white-space: nowrap; }
.odp-name { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 15px; font-weight: 750; min-width: 0; }
.odp-name span { font-size: 12px; font-weight: 600; opacity: .85; white-space: nowrap; }
.odp-amt { margin-top: 2px; font-size: 34px; font-weight: 820; letter-spacing: -1.4px; line-height: 1.1; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.odp-amt small { font-size: 16px; font-weight: 750; margin-right: 2px; letter-spacing: 0; }
.odp-cd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11.5px; opacity: .92; }
.odp-cd b { font-size: 15px; font-weight: 780; letter-spacing: .3px; }
.odp-bar { margin-top: 6px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.odp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,.96), #FFE1B0); transition: width 1s linear; }
.odp-acts { display: flex; gap: 8px; margin-top: 13px; }
.od-hbtn { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 11px; color: #fff; font-size: 13px; font-weight: 650; white-space: nowrap;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); transition: background .15s, transform .15s, box-shadow .15s; }
.od-hbtn:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.od-hbtn.solid { flex: 1.6 1 auto; background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 4px 14px rgba(53,8,4,.22); }
.od-hbtn.solid:hover:not(:disabled) { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(53,8,4,.26); }
.od-hbtn.ghost { flex: 0 0 auto; background: transparent; box-shadow: none; padding: 0 8px; opacity: .9; }
.od-hbtn.od-warn { background: #fff; color: #b91c1c; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.od-hbtn:disabled { opacity: .6; cursor: not-allowed; }
.od .od-pay a:focus-visible, .od .od-pay button:focus-visible { outline-color: rgba(255,255,255,.9); }

/* 无待支付：安静的提示块 */
.od-calm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 72%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
.odc-art { width: 46px; height: 46px; flex: none; }
.odc-art .a1 { fill: var(--muted); stroke: var(--border); stroke-width: 1.5; }
.odc-art .a2 { fill: none; stroke: color-mix(in srgb, var(--muted-fg) 55%, transparent); stroke-width: 3; stroke-linecap: round; }
.odc-art .a3 { fill: var(--green); }
.odc-art .a4 { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.odc-t { flex: 1; min-width: 0; }
.odc-t b { display: block; font-size: 13.5px; font-weight: 720; }
.odc-t span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); }
.od-calm .btn { flex: none; }

/* ---------- 订单记录：标题 + 状态分段 ---------- */
.ods-h { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.ods-t h2 { margin: 0; font-size: 17px; font-weight: 760; letter-spacing: -.2px; }
.ods-t p { margin: 3px 0 0; font-size: 12px; color: var(--muted-fg); }
.od-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 11px; background: var(--muted); }
.od-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 32px; padding: 0 6px; border-radius: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--muted-fg); white-space: nowrap; transition: color .15s, background .15s, box-shadow .15s; }
.od-seg button:hover { color: var(--fg); }
.od-seg button.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.od-seg button b { min-width: 18px; height: 17px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 750; color: var(--muted-fg); background: color-mix(in srgb, var(--card) 70%, var(--muted)); }
.od-seg button.on b { color: var(--brand-fg); background: var(--brand); }
.od-seg button[data-f="pending"].on b { background: var(--od-amber); color: #fff; }
.od-seg button:focus-visible { outline-offset: -2px; }
[data-theme="dark"] .od-seg button.on { background: color-mix(in srgb, var(--fg) 9%, var(--card)); }
/* ---------- 订单卡 ---------- */
.od-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.od-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 15px 13px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s, transform .16s; }
.od-card.rise { animation: riseIn .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--k, 0) * 45ms); }
.od-card:not(.od-skel):hover { border-color: color-mix(in srgb, var(--fg) 20%, var(--border)); box-shadow: var(--shadow); transform: translateY(-2px); }
.od-card.k-pending { border-color: color-mix(in srgb, var(--od-amber) 42%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--od-amber) 7%, var(--card)), var(--card) 62%); }
.od-card.k-canceled .odo-amt b, .od-card.k-canceled .odo-link { color: var(--muted-fg); }
.odo-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.odo-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.od-card.t-amber .odo-ic { color: var(--od-amber); background: color-mix(in srgb, var(--od-amber) 13%, transparent); }
.od-card.t-green .odo-ic { color: var(--od-green); background: var(--green-bg); }
.od-card.t-blue .odo-ic { color: var(--od-blue); background: color-mix(in srgb, var(--od-blue) 12%, transparent); }
.od-card.t-gray .odo-ic { color: var(--muted-fg); background: var(--muted); }
.odo-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.odo-link { font-size: 14.5px; font-weight: 740; letter-spacing: -.1px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odo-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.od .odo-link:focus-visible { outline: none; }
.od .odo-link:focus-visible::after { box-shadow: 0 0 0 2px var(--brand-ring); }
.odo-sub { margin-top: 1px; font-size: 11.5px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--muted-fg); background: var(--muted); }
.od-pill i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.od-pill.t-amber { color: var(--od-amber); background: color-mix(in srgb, var(--od-amber) 13%, transparent); }
.od-pill.t-green { color: var(--od-green); background: var(--green-bg); }
.od-pill.t-blue { color: var(--od-blue); background: color-mix(in srgb, var(--od-blue) 12%, transparent); }
.od-pill.t-amber i::after, .od-pill.t-blue i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.odo-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 13px; min-width: 0; }
.odo-amt { min-width: 0; }
.odo-ak { display: block; font-size: 11px; color: var(--muted-fg); }
.odo-amt b { display: block; margin-top: 1px; font-size: 26px; font-weight: 820; letter-spacing: -1px; line-height: 1.1; }
.odo-amt b small { font-size: 14px; font-weight: 750; margin-right: 1px; letter-spacing: 0; }
.od-card.k-pending .odo-amt b { color: var(--brand); }
.odo-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11px; color: var(--muted-fg); text-align: right; }
.odo-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); min-height: 31px; }
.odo-note { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted-fg); }
.odo-note.warn { color: var(--od-amber); font-weight: 650; }
.odo-note.warn b { font-weight: 780; }
.odo-acts { position: relative; z-index: 2; flex: none; display: flex; gap: 6px; margin-left: auto; }
.odo-go { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 650; color: var(--muted-fg); transition: color .15s, gap .15s; }
.od-card:hover .odo-go { color: var(--brand); gap: 6px; }
.od .btn.od-warn { color: #fff; background: var(--red); border-color: var(--red); }
.od-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; margin-top: 12px; border-radius: 12px;
  font-size: 12.5px; font-weight: 650; color: var(--muted-fg); border: 1px dashed color-mix(in srgb, var(--fg) 16%, var(--border)); transition: color .15s, background .15s; }
.od-more:hover { color: var(--fg); background: var(--muted); }
.od-more b { color: var(--fg); }

/* ---------- 空态 / 错误态 ---------- */
.od-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 20px 40px;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.ode-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); margin-bottom: 4px; }
.ode-ic .ic { width: 22px; height: 22px; }
.od-empty.is-err .ode-ic { color: var(--red); background: var(--red-bg); }
.od-empty b { font-size: 14.5px; font-weight: 750; }
.od-empty > span { font-size: 12px; color: var(--muted-fg); }
.od-empty > .btn, .ode-acts { margin-top: 8px; }
.ode-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* ---------- 详情：顶部 + 栅格 ---------- */
.od-dv { max-width: 640px; margin: 0 auto; width: 100%; }
.od-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.od-back { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 6px; margin-left: -6px; border-radius: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--muted-fg); transition: background .15s, color .15s; }
.od-back:hover { background: var(--muted); color: var(--fg); }
.od-crumb { font-size: 12.5px; color: var(--muted-fg); }
.od-crumb b { color: var(--fg); font-weight: 650; }
.od-dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; grid-template-areas: "st" "rc" "tl" "hp"; }
.od-dgrid > * { min-width: 0; }
.od-scard { grid-area: st; }
.od-rcpt { grid-area: rc; }
.od-tl { grid-area: tl; }
.od-help { grid-area: hp; }

/* ---------- 收据卡 ---------- */
.od-rcpt { position: relative; padding: 18px 18px 14px; border-radius: 18px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -26px rgba(0,0,0,.22); }
[data-theme="dark"] .od-rcpt { box-shadow: inset 0 0 0 1px var(--border); }
.od-rcpt.od-skel { padding: 22px 20px 26px; }
.odr-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.odr-mk { flex: none; display: grid; place-items: center; }
.odr-mk .brand-mark { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; box-shadow: none; }
.odr-mk .brand-mark.brand-logo { width: 30px; height: 30px; }
.odr-ht { flex: 1; min-width: 0; }
.odr-ht b { display: block; font-size: 13.5px; font-weight: 750; }
.odr-ht span { display: block; font-size: 11px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odr-hero { position: relative; margin-top: 16px; padding: 18px 12px 16px; border-radius: 14px; text-align: center; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--muted) 55%, transparent); }
.odr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1.3px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(60% 90% at 50% 0%, #000, transparent); mask-image: radial-gradient(60% 90% at 50% 0%, #000, transparent); }
.odr-k { font-size: 11.5px; font-weight: 650; color: var(--muted-fg); }
.odr-big { margin-top: 4px; font-size: 40px; font-weight: 830; letter-spacing: -1.8px; line-height: 1.05; color: var(--fg); }
.odr-big small { font-size: 19px; font-weight: 750; margin-right: 2px; letter-spacing: 0; }
.od-rcpt.t-amber .odr-big { color: var(--brand); }
.od-rcpt.t-gray .odr-big { color: var(--muted-fg); }
.odr-plan { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 13px; }
.odr-plan b { font-weight: 720; }
.odr-plan span { font-size: 12px; color: var(--muted-fg); }
.odr-stamp { position: absolute; right: 8px; top: 6px; width: 64px; height: 64px; transform: rotate(-16deg); opacity: .72; pointer-events: none; }
.odr-stamp circle { fill: none; stroke: var(--od-green); stroke-width: 3; }
.odr-stamp circle.in { stroke-width: 1.2; stroke-dasharray: 3 3; }
.odr-stamp text { fill: var(--od-green); font-size: 19px; font-weight: 800; letter-spacing: 1px; }
.od-rcpt.t-gray .odr-stamp circle, .od-rcpt.t-blue .odr-stamp circle { stroke: var(--muted-fg); }
.od-rcpt.t-gray .odr-stamp text, .od-rcpt.t-blue .odr-stamp text { fill: var(--muted-fg); }
/* 撕线：虚线 + 两侧半圆缺口（缺口用页面底色覆盖卡片描边） */
.odr-cut { position: relative; height: 0; margin: 18px -18px 4px; border-top: 1.5px dashed color-mix(in srgb, var(--fg) 14%, var(--border)); }
.odr-cut::before, .odr-cut::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border); }
.odr-cut::before { left: -9px; clip-path: inset(0 0 0 50%); }
.odr-cut::after { right: -9px; clip-path: inset(0 50% 0 0); }
.odr-sec { padding-top: 12px; }
.odr-h { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--muted-fg); margin-bottom: 4px; }
.odr-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; color: var(--muted-fg); }
.odr-l b { font-weight: 650; color: var(--fg); }
.odr-l.g b, .odr-l.g span { color: var(--od-green); }
.odr-l.m b { font-weight: 600; color: var(--muted-fg); font-size: 12px; }
.odr-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.odr-total > span { font-size: 13px; font-weight: 720; }
.odr-total b { font-size: 22px; font-weight: 820; letter-spacing: -.6px; color: var(--brand); }
.odr-total b small { font-size: 13px; font-weight: 750; margin-right: 1px; }
.odr-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.5;
  color: var(--fg); background: var(--green-bg); }
.odr-note .ic { flex: none; margin-top: 1.5px; color: var(--od-green); }
.odr-note b { font-weight: 750; }
.odr-info { margin: 0; }
.odr-i { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 12.5px; }
.odr-i dt { flex: none; color: var(--muted-fg); }
.odr-i dd { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 8px; text-align: right; font-weight: 600; }
.odr-no { min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .2px; word-break: break-all; white-space: normal; }
.odr-copy { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 7px;
  font-size: 11.5px; font-weight: 650; color: var(--brand); background: var(--brand-soft); transition: opacity .15s; }
.odr-copy:hover { opacity: .85; }
.odr-copy .ic { width: 12px; height: 12px; }
.odr-foot { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); text-align: center; font-size: 11px; color: var(--muted-fg); letter-spacing: .3px; }
/* ---------- 详情：状态卡 ---------- */
.od-scard { padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.od-scard.t-amber { border-color: color-mix(in srgb, var(--od-amber) 40%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--od-amber) 8%, var(--card)), var(--card) 70%); }
.od-scard.t-green { background: linear-gradient(180deg, color-mix(in srgb, var(--od-green) 6%, var(--card)), var(--card) 70%); }
.odsc-h { display: flex; align-items: flex-start; gap: 11px; }
.odsc-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); }
.od-scard.t-amber .odsc-ic { color: var(--od-amber); background: color-mix(in srgb, var(--od-amber) 14%, transparent); }
.od-scard.t-green .odsc-ic { color: var(--od-green); background: var(--green-bg); }
.od-scard.t-blue .odsc-ic { color: var(--od-blue); background: color-mix(in srgb, var(--od-blue) 12%, transparent); }
.odsc-t { flex: 1; min-width: 0; }
.odsc-t b { display: block; font-size: 15px; font-weight: 760; }
.odsc-t span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.ods-cd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted-fg); }
.ods-cd b { font-size: 22px; font-weight: 800; letter-spacing: .2px; color: var(--od-amber); }
.ods-bar { margin-top: 6px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--od-amber) 14%, var(--muted)); overflow: hidden; }
.ods-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--od-amber), #f59e0b); transition: width 1s linear; }
.odsc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.odsc-acts .btn { flex: 1 1 auto; height: 40px; border-radius: 11px; }
.od .btn.od-go { flex: 2 1 auto; color: var(--brand-fg); background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring); }
.od .btn.od-go:hover:not(:disabled) { opacity: .94; }
.od .btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 详情：订单进度时间线 ---------- */
.od-tl, .od-help { padding: 15px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.odt-h { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.odt-h .ic { color: var(--brand); }
.odt-h b { font-size: 14px; font-weight: 750; }
.odt-list { margin: 0; padding: 0; list-style: none; }
.odt-s { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.odt-s:last-child { padding-bottom: 0; }
.odt-s:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--border); }
.odt-s.done:not(:last-child)::before { background: color-mix(in srgb, var(--od-green) 45%, var(--border)); }
.odt-dot { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: var(--muted-fg); background: var(--card); box-shadow: inset 0 0 0 2px var(--border); }
.odt-dot .ic { width: 12px; height: 12px; }
.odt-s.done .odt-dot { color: #fff; background: var(--od-green); box-shadow: none; }
.odt-s.now .odt-dot { color: var(--od-amber); box-shadow: inset 0 0 0 2px var(--od-amber); }
.odt-s.now .odt-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: currentColor; }
.odt-s.now .odt-dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.odt-s.off .odt-dot { color: var(--muted-fg); background: var(--muted); box-shadow: none; }
.odt-c { min-width: 0; padding-top: 1px; }
.odt-c b { display: block; font-size: 13px; font-weight: 700; }
.odt-s.todo .odt-c b { color: var(--muted-fg); font-weight: 600; }
.odt-c > span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.odt-c > span:empty { display: none; }

/* ---------- 详情：工单入口 ---------- */
.od-help { display: flex; align-items: center; gap: 11px; }
.odhp-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.odhp-t { flex: 1; min-width: 0; }
.odhp-t b { display: block; font-size: 13px; font-weight: 720; }
.odhp-t span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted-fg); line-height: 1.5; }
.od-help .btn { flex: none; }

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .od-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "txt side" "stats side"; column-gap: 22px; row-gap: 18px; padding: 22px 24px; }
  .od-hero:not(:has(.odh-side)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "stats"; }
  .odh-side { align-self: center; }
  .od-calm { flex-direction: column; align-items: flex-start; padding: 16px; }
  .odc-art { width: 54px; height: 54px; }
  .od-calm .btn { margin-top: 2px; }
  .ods-h { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
  .od-seg { display: inline-grid; grid-template-columns: repeat(4, auto); }
  .od-seg button { padding: 0 12px; }
  .od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .od-st { padding: 12px 14px 11px; }
  .od-st b { font-size: 21px; }
}
@media (min-width: 1024px) {
  .od-dv { max-width: 1020px; }
  .od-dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "rc st" "rc tl" "rc hp" "rc ."; align-items: start; }
  .od-rcpt { padding: 22px 24px 16px; }
  .odr-cut { margin-left: -24px; margin-right: -24px; }
  .odr-big { font-size: 46px; }
}
@media (min-width: 1200px) {
  .od-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .od-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .odh-title { font-size: 26px; }
}
@media (max-width: 380px) {
  .od-hero { padding: 16px 14px; }
  .odh-title { font-size: 21px; }
  .od-st { padding: 9px 9px 8px; }
  .od-st b { font-size: 16px; }
  .od-seg button { font-size: 12px; gap: 3px; padding: 0 3px; }
  .od-seg button b { min-width: 16px; padding: 0 4px; }
  .odp-amt { font-size: 30px; }
  .od-hbtn { padding: 0 9px; font-size: 12.5px; }
  .odo-amt b { font-size: 23px; }
  .odr-big { font-size: 34px; }
  .od-rcpt { padding: 16px 14px 12px; }
  .odr-cut { margin-left: -14px; margin-right: -14px; }
}

/* ---------- 夜间 / 降级 ---------- */
[data-theme="dark"] .od-hero { background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 62%),
    var(--card); }
[data-theme="dark"] .od-pay {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
[data-theme="dark"] .od-hbtn.solid { background: rgba(255,255,255,.92); }
[data-theme="dark"] .od-card:not(.od-skel):hover { box-shadow: none; }
[data-theme="dark"] .odr-stamp { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .od[data-anim] .od-blk, .od-card.rise, .od .sk, .odh-dot::after, .od-ref.spin .ic, .od-pay-glow,
  .od-pill i::after, .odt-s.now .odt-dot::before { animation: none !important; }
  .od-card, .odp-bar i, .ods-bar i, .odo-go { transition: none; }
  .od-card:not(.od-skel):hover { transform: none; }
}

/* ============ 流量明细 v2（views/traffic.js，tf- 前缀） ============ */
/* ============ 流量明细 v2（views/traffic.js，tf- 前缀；联调期独立文件，发布时合并进 theme.css）
   手机单列 → ≥720px 区块通栏（KPI 三列）→ ≥1200px 十二栅格（主卡 8 + KPI 竖排 4；趋势 8 + 排行 4；明细通栏）
   主卡与仪表盘主视觉同一套品牌渐变 + 白色用量环；柱色只用 --brand 的深浅（任何强调色 / 明暗都成立） ============ */
.tf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  --tf-dn: color-mix(in srgb, var(--brand) 52%, var(--muted)); --tf-up: color-mix(in srgb, var(--brand) 22%, var(--muted));
  --tf-dn-hi: var(--brand); --tf-up-hi: color-mix(in srgb, var(--brand) 40%, var(--card)); }
.tf > * { min-width: 0; }
.tf [hidden] { display: none !important; }
.anim-in > .tf { animation: none; }
.anim-in .tf-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.tf .card .pad { --px: 16px; padding: 16px var(--px); }

/* 骨架 */
.tf-sk { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: tfShimmer 1.4s ease-in-out infinite; }
.tf-sk.big { width: 62%; height: 24px; margin: 2px 0; }
.tf-sk.light { background: linear-gradient(90deg, rgba(255,255,255,.16) 30%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 70%); background-size: 300% 100%; }
@keyframes tfShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 主卡：本周期用量 ---------- */
.tf-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center;
  grid-template-areas: "head head" "ring main" "stats stats" "pace pace" "acts acts";
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring); }
.tf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(250deg, #000 6%, transparent 52%); mask-image: linear-gradient(250deg, #000 6%, transparent 52%); }
.tfh-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tfh-glow { position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: tfGlow 7s ease-in-out infinite alternate; }
@keyframes tfGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }
.tfh-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 14px; }
.tfh-title { margin: 0; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 720; letter-spacing: -.1px; white-space: nowrap; }
.tfh-plan { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 3px 0 10px; border-radius: 99px; font-size: 11.5px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tfh-plan b { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfh-plan i { flex: none; height: 18px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; font-style: normal; font-size: 10.5px; font-weight: 700;
  background: #fff; color: #15803d; box-shadow: 0 2px 8px rgba(53,8,4,.16); }
.tfh-plan i.tfh-st-warn { color: #b45309; }
.tfh-plan i.tfh-st-bad { color: #dc2626; }
.tfh-plan i.tfh-st-none { color: #52525b; }
.tfh-exp { margin-left: auto; flex: none; font-size: 11.5px; opacity: .88; white-space: nowrap; }
.tfh-ring { grid-area: ring; position: relative; width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tfh-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.tfr-track { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 10; }
.tfr-fg { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1), opacity .2s; filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); }
.tfr-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tfr-c b { font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.tfr-c span { margin-top: 4px; font-size: 10px; opacity: .86; }
.tfh-main { grid-area: main; min-width: 0; }
.tfh-k { font-size: 12px; font-weight: 600; opacity: .9; }
.tfh-num { display: flex; align-items: baseline; gap: 5px; margin: 5px 0 6px; white-space: nowrap; }
.tfh-num b { font-size: 31px; font-weight: 820; letter-spacing: -1.2px; line-height: 1; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.tfh-num small { font-size: 13px; font-weight: 650; opacity: .9; }
.tfh-meta { font-size: 12px; line-height: 1.5; opacity: .9; }
.tfh-meta b { font-weight: 700; }
.tfh-retry { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: 6px; padding: 0 9px; border-radius: 99px; vertical-align: middle;
  color: #fff; font-size: 11.5px; font-weight: 650; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.tfh-retry:hover { background: rgba(255,255,255,.28); }
.tfh-retry:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.tfh-acts { grid-area: acts; display: flex; gap: 8px; margin-top: 12px; }
.tfh-btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; color: #fff; font-size: 13.5px; font-weight: 650; white-space: nowrap;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.tfh-btn:hover { background: rgba(255,255,255,.24); }
.tfh-btn:active { transform: translateY(1px); }
.tfh-btn.solid { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 4px 14px rgba(53,8,4,.22); }
.tfh-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(53,8,4,.26); }
.tfh-btn:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.tfh-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.tfh-st { min-width: 0; padding: 9px 4px 8px; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.tfh-st b { display: block; font-size: 14px; font-weight: 760; letter-spacing: -.3px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfh-st b small { margin-left: 1px; font-size: 10px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.tfh-st span { display: block; margin-top: 2px; font-size: 10.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfh-pace { grid-area: pace; display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 11px; border-radius: 11px;
  font-size: 12px; line-height: 1.5; background: rgba(53,8,4,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tfh-pace .ic { flex: none; margin-top: 2px; opacity: .9; }
.tfh-pace b { font-weight: 700; }
.tfh-pace.warn { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.tf-hero.is-load .tfr-c b, .tf-hero.is-load .tfh-num b { opacity: .55; }
[data-theme="dark"] .tf-hero { background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
[data-theme="dark"] .tf-hero::before { background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); }
/* ---------- KPI 三格 ---------- */
.tf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tf-kpi { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 11px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); --c: var(--brand); }
.tf-kpi:nth-child(2) { --c: #f59e0b; }
.tf-kpi:nth-child(3) { --c: #3b82f6; }
.tf-kpi.is-load { gap: 9px; }
.tfk-k { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; }
.tfk-ic { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.tfk-ic .ic { width: 13px; height: 13px; }
[data-theme="dark"] .tfk-ic { color: color-mix(in srgb, var(--c) 70%, #fff); background: color-mix(in srgb, var(--c) 18%, var(--card)); }
.tfk-v { display: flex; align-items: baseline; gap: 3px; min-width: 0; white-space: nowrap; }
.tfk-v b { font-size: 19px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.tfk-v small { font-size: 11px; font-weight: 650; color: var(--muted-fg); }
.tfk-f { min-width: 0; font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfk-f em { font-style: normal; font-weight: 700; }
.tfk-f em.up { color: var(--amber); }
.tfk-f em.down { color: var(--green); }

/* ---------- 卡片头（趋势 / 排行 / 明细共用） ---------- */
.tf-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.tf-head .grow { flex: 1 1 auto; min-width: 0; }
.tf-head .card-title > .ic { color: var(--brand); }
.tf-head .card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfc-seg { flex: none; }
.tfc-seg button { height: 28px; padding: 0 11px; font-size: 12px; }
.tfc-seg button:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.tfl-cnt { flex: none; margin-top: 1px; }

/* ---------- 用量趋势 ---------- */
.tfc-read { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 66px; }
.tfc-rl { min-width: 0; }
.tfc-rv { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tfc-rv b { font-size: 24px; font-weight: 800; letter-spacing: -.6px; line-height: 1; }
.tfc-rv small { font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.tfc-rk { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfc-rs { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 11px; color: var(--muted-fg); }
.tfc-rs span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tf-sw { width: 8px; height: 8px; flex: none; border-radius: 2.5px; }
.tf-sw.dn { background: var(--tf-dn-hi); }
.tf-sw.up { background: var(--tf-up-hi); }
.tfc-sum { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.tfc-sum b { color: var(--fg); font-weight: 650; }
.tfc-jump { display: inline-flex; align-items: center; gap: 2px; height: 24px; margin: 2px -6px -2px 0; padding: 0 6px; border-radius: 7px;
  font-size: 11.5px; font-weight: 650; color: var(--brand); transition: background .15s; }
.tfc-jump:hover { background: var(--brand-soft); }
.tfc-jump:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.tfc-jump .ic { width: 13px; height: 13px; }
.tfc-box { position: relative; margin-top: 30px; }
.tfc-plot { position: relative; height: 148px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--g, 3px); }
.tfc-plot.r7 { --g: 12px; }
.tfc-grid { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px) 0 0 / 100% 25%; }
.tfc-grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); }
.tfc-avg { position: absolute; left: 0; right: 0; bottom: var(--avg); height: 0; z-index: 2; pointer-events: none;
  border-top: 1px dashed color-mix(in srgb, var(--fg) 38%, transparent); }
.tfc-avg em { position: absolute; left: 0; bottom: 2px; padding: 0 4px; border-radius: 4px; font-style: normal; font-size: 9.5px; font-weight: 650; line-height: 14px;
  color: var(--muted-fg); background: color-mix(in srgb, var(--card) 86%, transparent); }
.tfc-mon { position: absolute; top: -8px; bottom: 0; left: var(--x); width: 0; z-index: 1; pointer-events: none; border-left: 1px dashed var(--border); }
.tfc-mon em { position: absolute; top: -10px; left: 3px; font-style: normal; font-size: 9.5px; font-weight: 650; color: var(--muted-fg); white-space: nowrap; }
.tfc-col { position: relative; z-index: 3; height: 100%; min-width: 0; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px;
  -webkit-tap-highlight-color: transparent; }
.tfc-col::before { content: ""; position: absolute; inset: -4px -1px 0; border-radius: 7px; background: transparent; transition: background .15s; }
.tfc-plot.r7 .tfc-col::before { inset: -6px -5px 0; border-radius: 10px; }
.tfc-col:hover::before, .tfc-col.pv::before { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.tfc-col.sel::before { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.tfc-col:focus-visible { outline: none; }
.tfc-col:focus-visible::before { box-shadow: 0 0 0 2px var(--brand-ring); }
.tfc-stk { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 30px; height: var(--h); border-radius: 4px 4px 2px 2px; overflow: hidden;
  transform-origin: bottom; transition: filter .15s; }
.tfc-plot.r7 .tfc-stk { border-radius: 7px 7px 3px 3px; }
.tfc-up { flex: none; height: var(--pu); background: var(--tf-up); transition: background .2s; }
.tfc-dn { flex: 1 1 auto; background: var(--tf-dn); transition: background .2s; }
.tfc-col.today .tfc-up, .tfc-col.sel .tfc-up, .tfc-col.pv .tfc-up { background: var(--tf-up-hi); }
.tfc-col.today .tfc-dn, .tfc-col.sel .tfc-dn, .tfc-col.pv .tfc-dn { background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
.tfc-col.sel .tfc-stk { box-shadow: 0 6px 14px -6px var(--brand-ring); }
.tfc-col.zero .tfc-stk { height: 2px; background: var(--border); }
.tfc-col.zero .tfc-up, .tfc-col.zero .tfc-dn { display: none; }
.tfc-col.na .tfc-stk { background: transparent; border: 1.5px dashed var(--border); border-radius: 4px; }
.tfc-col.na .tfc-up, .tfc-col.na .tfc-dn { display: none; }
.tfc-tip { position: absolute; left: 50%; bottom: calc(var(--h) + 6px); z-index: 4; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; pointer-events: none;
  font-size: 10.5px; font-weight: 700; line-height: 19px; white-space: nowrap; color: #fff; background: var(--fg); box-shadow: 0 4px 10px -4px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .15s; }
.tfc-col.l .tfc-tip { left: 0; transform: none; }
.tfc-col.r .tfc-tip { left: auto; right: 0; transform: none; }
.tfc-col.sel .tfc-tip, .tfc-col.pv .tfc-tip { opacity: 1; }
.tfc-plot.r30:has(.tfc-col.pv) .tfc-col.sel:not(.pv) .tfc-tip { opacity: 0; }
.tfc-plot.r7 .tfc-tip { opacity: 1; color: var(--muted-fg); background: transparent; box-shadow: none; font-weight: 600; }
.tfc-plot.r7 .tfc-col.sel .tfc-tip, .tfc-plot.r7 .tfc-col.pv .tfc-tip { color: #fff; background: var(--fg); }
[data-theme="dark"] .tfc-tip { color: #09090b; }
[data-theme="dark"] .tfc-plot.r7 .tfc-tip { color: var(--muted-fg); }
[data-theme="dark"] .tfc-plot.r7 .tfc-col.sel .tfc-tip, [data-theme="dark"] .tfc-plot.r7 .tfc-col.pv .tfc-tip { color: #09090b; }
.tfc-xs { position: relative; height: 16px; margin-top: 8px; font-size: 10.5px; color: var(--muted-fg); }
.tfc-xs span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); white-space: nowrap; transition: color .15s; }
.tfc-xs span.l { transform: none; left: 0; }
.tfc-xs span.r { transform: none; left: auto; right: 0; }
.tfc-xs span.today { color: var(--fg); font-weight: 650; }
.tfc-xs span.sel { color: var(--brand); font-weight: 700; }
.tfc-none { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 5; padding: 4px 12px; border-radius: 99px; white-space: nowrap;
  font-size: 12px; color: var(--muted-fg); background: var(--card); box-shadow: 0 0 0 1px var(--border); }
.tfc-skel { height: 172px; display: flex; align-items: flex-end; gap: 6px; padding-bottom: 24px; }
.tfc-skel .tf-sk { flex: 1 1 0; height: auto; border-radius: 6px 6px 2px 2px; }
.tfc-box.is-err { margin-top: 0; }
.anim-in .tfc-stk { animation: growBar .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.12s + var(--k, 0) * 16ms); }
/* ---------- 节点用量排行 ---------- */
.tf-flag { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; overflow: hidden; color: var(--muted-fg); background: var(--muted); }
.tf-flag svg.fl { width: 20px; height: 14px; display: block; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.tf-flag.muted { color: var(--muted-fg); }
.tf-rate { flex: none; height: 17px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--amber); background: var(--amber-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 22%, transparent); }
.tf-tag { flex: none; height: 17px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; font-style: normal; font-size: 10.5px; font-weight: 600;
  color: var(--muted-fg); background: var(--muted); }
.tfr-strip { display: flex; gap: 2px; height: 8px; margin-bottom: 14px; border-radius: 99px; overflow: hidden; background: var(--muted); }
.tfr-strip i { flex: 0 0 var(--w); min-width: 3px; background: var(--c); transform-origin: left; }
.anim-in .tfr-strip i { animation: growX .7s cubic-bezier(.22,1,.36,1) both; }
.tfr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tfr-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.tfr-row:first-child { border-top: 0; padding-top: 0; }
.tfr-row .grow { flex: 1 1 auto; min-width: 0; }
.tfr-row.is-load { border-top: 0; }
.tfr-no { width: 14px; flex: none; text-align: center; font-size: 12px; font-weight: 750; color: var(--muted-fg); }
.tfr-row:nth-child(-n+3) .tfr-no { color: var(--c); }
.tfr-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tfr-name { min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfr-v { flex: none; margin-left: auto; font-size: 13px; font-weight: 750; white-space: nowrap; }
.tfr-v small { font-size: 10.5px; font-weight: 600; color: var(--muted-fg); }
.tfr-bar { height: 5px; margin-top: 7px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.tfr-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; }
.anim-in .tfr-bar i { animation: growX .8s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.15s + var(--k, 0) * 50ms); }
.tfr-meta { margin-top: 5px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfr-meta b { color: var(--fg); font-weight: 700; }
.tfr-more { margin-top: 10px; }
.tfr-more:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }

/* ---------- 每日明细（日期头吸顶到顶栏下方） ---------- */
.tfl-day { position: relative; }
.tfl-day + .tfl-day { margin-top: 6px; }
.tfl-head { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 calc(var(--px) * -1); padding: 9px var(--px); min-height: 42px;
  background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border); }
.tfl-day:first-child .tfl-head { border-top: 1px solid var(--border); }
.tfl-date { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.tfl-date b { font-size: 13.5px; font-weight: 750; letter-spacing: -.2px; }
.tfl-date i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); }
.tfl-day.today .tfl-date i { height: 18px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; align-self: center;
  color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 700; }
.tfl-sum { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.tfl-sum em { font-style: normal; font-size: 11px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; }
.tfl-sum b { flex: none; font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
.tfl-sum b small { font-size: 10.5px; font-weight: 600; color: var(--muted-fg); letter-spacing: 0; }
.tfl-rows { margin: 0; padding: 0; list-style: none; }
.tfl-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.tfl-row + .tfl-row { border-top: 1px dashed var(--border); }
.tfl-row.is-load + .tfl-row.is-load { border-top: 0; }
.tfl-row .grow { flex: 1 1 auto; min-width: 0; }
.tfl-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tfl-name b { min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfl-sub { margin-top: 3px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfl-names { margin-top: 2px; font-size: 11px; color: var(--muted-fg); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfl-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tfl-v b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.tfl-v b small { font-size: 10.5px; font-weight: 600; color: var(--muted-fg); }
.tfl-pct { font-size: 10.5px; font-weight: 600; color: var(--muted-fg); }
.tfl-day.flash .tfl-rows { animation: tfFlash 1.6s ease-out; border-radius: 10px; }
@keyframes tfFlash { 0%, 100% { background: transparent; } 20% { background: var(--brand-soft); } }
.tfl-more { display: flex; justify-content: center; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 4px; }
.tfl-more .btn { gap: 8px; }
.tfl-rest { font-size: 11.5px; font-weight: 500; color: var(--muted-fg); }
/* ---------- 空态 / 错误态 ---------- */
.tf-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px 28px; text-align: center;
  border-radius: 14px; border: 1px dashed var(--border); background: color-mix(in srgb, var(--muted) 35%, transparent); }
.tfs-ic { width: 46px; height: 46px; margin-bottom: 4px; border-radius: 14px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.tfs-ic .ic { width: 22px; height: 22px; }
.tf-state.err .tfs-ic { color: var(--amber); background: var(--amber-bg); }
.tf-state > b { font-size: 14px; font-weight: 700; }
.tf-state > span { font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.tf-state .btn { margin-top: 8px; gap: 6px; }
.tf-state.mini { padding: 22px 14px 20px; }
.tf-state.mini .tfs-ic { width: 38px; height: 38px; border-radius: 12px; color: var(--muted-fg); background: var(--muted); }
.tf-state.mini .tfs-ic .ic { width: 18px; height: 18px; }

/* ---------- 响应式 ---------- */
@media (max-width: 359px) {
  .tf-hero { padding: 14px; column-gap: 12px; }
  .tfh-ring { width: 80px; height: 80px; }
  .tfr-c b { font-size: 18px; }
  .tfh-num b { font-size: 26px; }
  .tfh-exp { display: none; }
  .tfh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tfh-btn { padding: 0 8px; font-size: 13px; }
  .tf-kpis { gap: 6px; }
  .tf-kpi { padding: 10px 9px; }
  .tfk-ic { display: none; }
  .tfk-v b { font-size: 17px; }
  .tf .card .pad { --px: 14px; }
  .tfc-sum span:nth-child(2) { display: none; }
  .tfl-sum em { display: none; }
}
@media (max-width: 479px) {
  .tf-head .card-sub { white-space: normal; }
  .tfc-plot { height: 132px; }
  .tfc-plot.r7 { --g: 8px; }
  .tfc-plot.r30 { --g: 2px; }
}
@media (min-width: 720px) {
  .tf { gap: 16px; }
  .tf .card .pad { --px: 20px; padding: 18px var(--px); }
  .tf-hero { padding: 20px 22px 22px; column-gap: 24px; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head head" "ring main acts" "stats stats stats" "pace pace pace"; }
  .tfh-head { margin-bottom: 16px; }
  .tfh-title { font-size: 15px; }
  .tfh-ring { width: 112px; height: 112px; }
  .tfr-c b { font-size: 26px; }
  .tfr-c span { font-size: 11px; }
  .tfh-num b { font-size: 40px; letter-spacing: -1.6px; }
  .tfh-num small { font-size: 15px; }
  .tfh-meta { font-size: 12.5px; }
  .tfh-acts { flex-direction: column; width: 152px; margin-top: 0; }
  .tfh-btn { flex: none; }
  .tfh-stats { gap: 8px; margin-top: 18px; }
  .tfh-st { padding: 11px 14px 10px; text-align: left; }
  .tfh-st b { font-size: 18px; }
  .tfh-st b small { font-size: 11px; }
  .tfh-st span { font-size: 11.5px; }
  .tfh-pace { margin-top: 10px; font-size: 12.5px; }
  .tf-kpis { gap: 12px; }
  .tf-kpi { padding: 16px 18px; gap: 8px; }
  .tfk-k { font-size: 12.5px; }
  .tfk-ic { width: 26px; height: 26px; border-radius: 8px; }
  .tfk-ic .ic { width: 15px; height: 15px; }
  .tfk-v b { font-size: 26px; letter-spacing: -.8px; }
  .tfk-v small { font-size: 12.5px; }
  .tfk-f { font-size: 11.5px; }
  .tfc-plot { height: 172px; }
  .tfc-plot.r7 { --g: 22px; }
  .tfc-plot.r30 { --g: 5px; }
  .tfc-xs { font-size: 11px; }
}
@media (min-width: 1200px) {
  .tf { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tf-hero { grid-column: span 8; }
  .tf-kpis { grid-column: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .tf-kpi { justify-content: center; padding: 12px 18px; gap: 6px; }
  .tfk-v b { font-size: 24px; }
  .tf-chart { grid-column: span 8; }
  .tf-rank { grid-column: span 4; }
  .tf-log { grid-column: 1 / -1; }
  /* 排行卡更高时，趋势卡的柱图把多出来的高度吃掉，不留空白 */
  .tf-chart .pad { height: 100%; display: flex; flex-direction: column; }
  .tfc-box { flex: 1 1 auto; display: flex; flex-direction: column; }
  .tfc-plot { flex: 1 1 auto; height: auto; min-height: 196px; }
  .tfc-box > .tf-state, .tfc-box > .tfc-skel { flex: 1 1 auto; }
}
[data-theme="dark"] .tf { --tf-dn: color-mix(in srgb, var(--brand) 46%, var(--muted)); --tf-up: color-mix(in srgb, var(--brand) 22%, #3f3f46);
  --tf-up-hi: color-mix(in srgb, var(--brand) 45%, #fff); }
[data-theme="dark"] .tf-flag svg.fl { box-shadow: 0 0 0 .5px rgba(255,255,255,.14); }
@media (prefers-reduced-motion: reduce) {
  .anim-in .tf-blk, .anim-in .tfc-stk, .anim-in .tfr-strip i, .anim-in .tfr-bar i, .tf-sk, .tfh-glow, .tfl-day.flash .tfl-rows { animation: none !important; }
  .tfr-fg { transition: none; }
}
.tfk-wide { display: none; }
@media (min-width: 720px) { .tfk-wide { display: inline; } }

/* ============ 邀请中心 v2（views/invite.js，iv2- 前缀） ============ */
/* ============ 邀请中心 v2（views/invite.js，iv2- 前缀）
   手机单列 → ≥720px 两列（主卡 / 进度 / 记录通栏；步骤与概率并排）
   → ≥1200px 十二栅格（主卡 8 + 进度 4；左 5 步骤 + 概率 / 右 7 记录） ============ */
.iv2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.iv2 > * { min-width: 0; }
.iv2 [hidden] { display: none !important; }
.iv2 .card .pad { padding: 16px; }
.iv2-side { display: contents; }
.anim-in > .iv2 { animation: none; }
.anim-in .iv2-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.iv2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 邀请主卡（品牌渐变 + 径向光斑 + 细点阵） ---------- */
.iv2-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "stats";
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring); }
.iv2-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(250deg, #000 6%, transparent 52%); mask-image: linear-gradient(250deg, #000 6%, transparent 52%); }
.iv2h-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.iv2h-glow { position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: iv2Glow 7s ease-in-out infinite alternate; }
@keyframes iv2Glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }
.iv2h-main { grid-area: main; min-width: 0; }
.iv2h-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.iv2h-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 99px; font-size: 12px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.iv2h-tag b { font-weight: 700; }
.iv2h-vip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 99px; min-width: 0;
  background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); font-size: 11.5px; font-weight: 650; box-shadow: 0 2px 8px rgba(53,8,4,.16); white-space: nowrap; }
.iv2h-vip b { font-weight: 800; }
.iv2h-vip em { font-style: normal; font-weight: 500; opacity: .75; }
.iv2h-title { margin: 12px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.iv2h-sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .9; }

/* 邀请链接面板（玻璃件） */
.iv2h-link { margin-top: 14px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.iv2h-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; opacity: .92; }
.iv2h-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.iv2h-in { width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; outline: none;
  font: 600 12.5px/40px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.1px; color: #1f0a06;
  background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(53,8,4,.12); text-overflow: ellipsis; }
.iv2h-in::placeholder { color: #8a6a63; font-family: inherit; font-weight: 500; }
.iv2h-in:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 10px rgba(53,8,4,.12); }
.iv2h-acts { display: flex; gap: 8px; }
.iv2h-btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; color: #fff; font-size: 13.5px; font-weight: 650; white-space: nowrap;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  transition: background .15s, transform .15s, box-shadow .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.iv2h-btn:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.iv2h-btn:active:not(:disabled) { transform: translateY(1px); }
.iv2h-btn.solid { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 4px 14px rgba(53,8,4,.22); }
.iv2h-btn.solid:hover:not(:disabled) { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(53,8,4,.26); }
.iv2h-btn:disabled, .iv2h-mini:disabled { opacity: .55; cursor: not-allowed; }
.iv2h-btn:focus-visible, .iv2h-mini:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.iv2h-code { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.28); }
.iv2h-code > span { flex: none; font-size: 12px; opacity: .85; }
.iv2h-code > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.iv2h-mini { flex: none; margin-left: auto; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border-radius: 8px;
  font-size: 12px; font-weight: 650; color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transition: background .15s; }
.iv2h-mini:hover:not(:disabled) { background: rgba(255,255,255,.24); }

/* 三格战绩 */
.iv2h-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.iv2h-st { min-width: 0; padding: 9px 4px 8px; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.iv2h-st > b { display: block; font-size: 18px; font-weight: 780; letter-spacing: -.4px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv2h-st > b small { margin-left: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.iv2h-st > span { display: block; margin-top: 2px; font-size: 11px; opacity: .82; white-space: nowrap; }

/* 网络插画（≥720px 显示） */
.iv2h-art { grid-area: art; display: none; align-items: center; justify-content: center; min-width: 0; }
.iv2h-net { width: 100%; max-width: 210px; height: auto; display: block; overflow: visible; }
.iv2n-lines path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; animation: iv2Flow 1.6s linear infinite; }
.iv2n-nodes circle { fill: rgba(255,255,255,.2); stroke: #fff; stroke-width: 1.6; animation: iv2Node 2.4s ease-in-out infinite alternate; }
.iv2n-nodes circle:nth-child(2) { animation-delay: .5s; }
.iv2n-nodes circle:nth-child(3) { animation-delay: 1s; }
.iv2n-nodes circle:nth-child(4) { animation-delay: 1.5s; }
.iv2n-nodes circle:nth-child(5) { animation-delay: .8s; }
.iv2n-ring { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .5; transform-box: fill-box; transform-origin: center; animation: iv2Ring 2.8s ease-out infinite; }
.iv2n-core { fill: #fff; filter: drop-shadow(0 6px 14px rgba(53,8,4,.3)); }
.iv2n-gift { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes iv2Flow { to { stroke-dashoffset: 20; } }
@keyframes iv2Node { from { opacity: .55; } to { opacity: 1; } }
@keyframes iv2Ring { 0% { transform: scale(.7); opacity: .6; } 70%, 100% { transform: scale(1.45); opacity: 0; } }

/* ---------- 卡片通用 ---------- */
.iv2x-head { display: flex; align-items: center; gap: 11px; min-width: 0; margin-bottom: 14px; }
.iv2x-head .grow { flex: 1 1 auto; min-width: 0; }
.iv2x-head .card-sub { overflow: hidden; text-overflow: ellipsis; }
.iv2x-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 6px 14px -6px var(--brand-ring); }
.iv2x-ic.amber { background: linear-gradient(135deg, #fbbf24, #f97316); box-shadow: 0 6px 14px -6px rgba(249,115,22,.6); }
.iv2x-ic.green { background: linear-gradient(135deg, #34d399, #16a34a); box-shadow: 0 6px 14px -6px rgba(22,163,74,.55); }
.iv2x-ic .ic { width: 18px; height: 18px; }
.iv2-pill { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; white-space: nowrap;
  color: var(--muted-fg); background: var(--muted); }
.iv2-pill.brand { color: var(--brand); background: var(--brand-soft); }
.iv2-pill.ok { color: var(--green); background: var(--green-bg); }
.iv2-pill.wait, .iv2-pill.warn { color: var(--amber); background: var(--amber-bg); }
.iv2-pill.info { color: #2563eb; background: color-mix(in srgb, #2563eb 10%, var(--card)); }
[data-theme="dark"] .iv2-pill.info { color: #93b4ff; background: rgba(78,130,255,.14); }
/* ---------- 365 天累计进度 ---------- */
.iv2-cap .pad { height: 100%; display: flex; flex-direction: column; }
.iv2c-num { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.iv2c-num b { font-size: 32px; font-weight: 820; letter-spacing: -1.2px; line-height: 1; }
.iv2c-num small { font-size: 13px; font-weight: 600; color: var(--muted-fg); }
.iv2c-bar { position: relative; height: 10px; margin-top: 14px; border-radius: 99px; background: var(--muted); }
.iv2c-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, var(--brand-2), var(--brand)); box-shadow: 0 4px 12px -4px var(--brand-ring); transition: width 1.1s cubic-bezier(.22,1,.36,1); }
.iv2c-bar.full > i { background: linear-gradient(90deg, #fbbf24, #f97316); box-shadow: 0 4px 12px -4px rgba(249,115,22,.55); }
.iv2c-ticks { position: absolute; inset: 0; pointer-events: none; }
.iv2c-ticks i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--border); }
.iv2c-ticks i.on { background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent); }
.iv2c-lbls { position: relative; height: 16px; margin-top: 7px; font-size: 10.5px; color: var(--muted-fg); }
.iv2c-lbls span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv2c-lbls span.end { transform: translateX(-100%); }
.iv2c-lbls span.on { color: var(--brand); font-weight: 700; }
.iv2c-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; }
.iv2c-facts > div { min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); }
.iv2c-facts dt { font-size: 11px; color: var(--muted-fg); }
.iv2c-facts dd { margin: 1px 0 0; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.iv2c-facts dd b { font-size: 16px; font-weight: 760; letter-spacing: -.3px; color: var(--fg); }
.iv2c-note { margin: 12px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.55; color: var(--muted-fg); background: var(--muted); }
.iv2c-note b { color: var(--fg); font-weight: 700; }

/* ---------- 拿奖励三步 ---------- */
.iv2s-list { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.iv2s-list::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; border-left: 2px dashed color-mix(in srgb, var(--brand) 32%, var(--border)); }
.iv2s-it { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.iv2s-n { position: relative; z-index: 1; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 0 0 4px var(--card), 0 6px 12px -6px var(--brand-ring); }
.iv2s-it b { display: block; font-size: 13.5px; font-weight: 650; line-height: 28px; }
.iv2s-it .grow span { display: block; margin-top: -2px; font-size: 12px; line-height: 1.55; color: var(--muted-fg); }
.anim-in .iv2s-n { animation: iv2Pop .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.2s + var(--k, 0) * 90ms); }
@keyframes iv2Pop { from { transform: scale(.4); opacity: 0; } }
.iv2s-tips { margin: 14px 0 0; padding: 11px 12px 11px 28px; border-radius: 10px; background: var(--muted); font-size: 12px; line-height: 1.7; color: var(--muted-fg); }
.iv2s-tips li::marker { color: color-mix(in srgb, var(--brand) 60%, var(--muted-fg)); }

/* ---------- 天数概率 ---------- */
.iv2o-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.iv2o-chip { min-width: 0; padding: 8px 8px 7px; border-radius: 10px; text-align: center; background: var(--muted); }
.iv2o-chip b { display: block; font-size: 16px; font-weight: 780; letter-spacing: -.3px; line-height: 1.2; color: var(--fg); }
.iv2o-chip span { display: block; margin-top: 1px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
.iv2o-chip.hot b { color: #d97706; }
[data-theme="dark"] .iv2o-chip.hot b { color: var(--amber); }
.iv2o-chart { margin-top: 12px; }
.iv2o-bars { margin: 0; padding: 4px 0 0; list-style: none; height: 116px; display: grid; grid-template-columns: repeat(var(--n, 15), minmax(0, 1fr)); gap: 3px; align-items: end; }
.iv2o-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 18px; min-width: 0; }
.iv2o-col > i { display: block; width: 100%; max-width: 22px; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 85%, #fff), var(--brand)); }
.iv2o-col.hot > i { background: linear-gradient(180deg, #fcd34d, #f59e0b); }
.iv2o-x { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; line-height: 14px; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.iv2o-col:nth-child(even) .iv2o-x { opacity: .55; }
.anim-in .iv2o-col > i { animation: growBar .62s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.2s + var(--k, 0) * 28ms); }
.iv2o-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.iv2o-note b { color: var(--fg); font-weight: 650; }
/* ---------- 邀请记录 ---------- */
.iv2-recs .pad { height: 100%; display: flex; flex-direction: column; }
#iv2Rows { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.iv2r-filter { display: flex; gap: 6px; margin: -2px 0 10px; overflow-x: auto; scrollbar-width: none; }
.iv2r-filter::-webkit-scrollbar { display: none; }
.iv2r-fb { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; color: var(--muted-fg); background: var(--muted); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.iv2r-fb b { font-size: 11px; font-weight: 700; opacity: .7; }
.iv2r-fb:hover { color: var(--fg); }
.iv2r-fb.on { color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.iv2r-fb:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.iv2r-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.iv2r-row { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 0; border-top: 1px solid var(--border); }
.iv2r-row:first-child { border-top: 0; padding-top: 4px; }
.iv2r-row:last-child { padding-bottom: 0; }
.anim-in .iv2r-list:not(.iv2-skel) .iv2r-row { animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--k, 0) * 35ms); }
.iv2r-row .grow { flex: 1 1 auto; min-width: 0; }
.iv2r-av { position: relative; width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-size: 13px; font-weight: 750; color: var(--muted-fg); background: var(--muted); }
.iv2r-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted-fg); box-shadow: 0 0 0 2px var(--card); }
.iv2r-row.ok .iv2r-av { color: var(--brand); background: var(--brand-soft); }
.iv2r-row.ok .iv2r-dot { background: var(--green); }
.iv2r-row.wait .iv2r-av { color: var(--amber); background: var(--amber-bg); }
.iv2r-row.wait .iv2r-dot { background: #f59e0b; color: #f59e0b; }
.iv2r-row.info .iv2r-av { color: #2563eb; background: color-mix(in srgb, #2563eb 10%, var(--card)); }
.iv2r-row.info .iv2r-dot { background: #3b82f6; color: #3b82f6; }
[data-theme="dark"] .iv2r-row.info .iv2r-av { color: #93b4ff; background: rgba(78,130,255,.14); }
.iv2r-row.off .iv2r-mail { color: var(--muted-fg); }
.iv2r-row.wait .iv2r-dot::after, .iv2r-row.info .iv2r-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.iv2r-mail { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv2r-meta { margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv2r-md { display: none; }
.iv2r-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.iv2r-r time { font-size: 11px; color: var(--muted-fg); }
.iv2r-gain { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; color: var(--brand); }
.iv2r-gain > span { display: inline-flex; align-items: baseline; gap: 2px; }
.iv2r-gain b { font-size: 14px; font-weight: 780; letter-spacing: -.2px; }
.iv2r-gain small { font-size: 11px; font-weight: 600; opacity: .85; }
.iv2r-gain i { margin: 0 3px; font-style: normal; color: var(--muted-fg); opacity: .6; }
.iv2r-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); text-align: center; font-size: 11.5px; color: var(--muted-fg); }

/* ---------- 空态 / 错误 / 未开放 / 骨架 ---------- */
.iv2-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 26px 12px 22px; }
.iv2-empty b { font-size: 14px; font-weight: 720; }
.iv2-empty > span { max-width: 300px; font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.iv2-empty .btn { margin-top: 8px; gap: 6px; }
.iv2e-art { width: 120px; height: 84px; margin-bottom: 4px; }
.iv2e-art .a1 { fill: var(--muted); stroke: var(--border); stroke-width: 1.2; }
.iv2e-art .a2 { fill: color-mix(in srgb, var(--brand) 18%, var(--muted)); }
.iv2e-art .a3 { fill: color-mix(in srgb, var(--fg) 10%, var(--muted)); }
.iv2e-art .a4 { fill: var(--brand); }
.iv2e-art .a5 { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.iv2e-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); margin-bottom: 4px; }
.iv2e-ic .ic { width: 22px; height: 22px; }
.iv2-empty.err .iv2e-ic { color: var(--red); background: var(--red-bg); }
.iv2-off { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 20px 44px;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.iv2-off b { font-size: 15px; font-weight: 750; }
.iv2-off > span:not(.iv2e-ic) { font-size: 12.5px; color: var(--muted-fg); }
.iv2-off .btn { margin-top: 8px; gap: 6px; }
.iv2-skel .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: iv2Shimmer 1.4s ease-in-out infinite; }
.iv2-skel .sk-av { width: 34px; height: 34px; flex: none; border-radius: 11px; }
.iv2-skel .sk-a { width: 52%; height: 13px; }
.iv2-skel .sk-b { width: 34%; height: 10px; margin-top: 8px; }
.iv2-skel .sk-c { width: 62px; height: 22px; flex: none; border-radius: 99px; }
@keyframes iv2Shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* 数据未到：主卡数字与链接弱化 */
.iv2:not(.ready) .iv2h-st > b, .iv2:not(.ready) .iv2c-num b, .iv2:not(.ready) .iv2h-code > b { opacity: .55; }
/* ---------- 响应式 ---------- */
@media (max-width: 479px) {
  .iv2r-gain { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.25; }
  .iv2r-gain > i { display: none; }
  .iv2r-r time { display: none; }
  .iv2r-md { display: inline; }
}
@media (max-width: 359px) {
  .iv2h-title { font-size: 21px; }
  .iv2h-btn { padding: 0 10px; font-size: 13px; }
  .iv2h-mini span { display: none; }
  .iv2h-mini { padding: 0 8px; }
  .iv2r-fb { padding: 0 9px; gap: 4px; font-size: 12px; }
  .iv2r-filter { gap: 4px; }
}
@media (min-width: 720px) {
  .iv2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .iv2-hero, .iv2-cap, .iv2-recs, .iv2-off { grid-column: 1 / -1; }
  .iv2 .card .pad { padding: 18px 20px; }
  .iv2-hero { padding: 22px 22px 20px; column-gap: 24px; grid-template-columns: minmax(0, 1fr) 176px; grid-template-areas: "main art" "stats stats"; }
  .iv2h-art { display: flex; }
  .iv2h-title { font-size: 27px; }
  .iv2h-sub { font-size: 13px; }
  .iv2h-row { flex-direction: row; align-items: center; }
  .iv2h-in { flex: 1 1 auto; }
  .iv2h-acts { flex: none; }
  .iv2h-btn { flex: none; }
  .iv2h-stats { gap: 8px; margin-top: 16px; }
  .iv2h-st { padding: 11px 14px 10px; text-align: left; }
  .iv2h-st > b { font-size: 22px; }
  .iv2h-st > span { font-size: 11.5px; }
  .iv2c-num b { font-size: 36px; }
}
@media (min-width: 1200px) {
  .iv2 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .iv2-hero { grid-column: span 8; }
  .iv2-cap { grid-column: span 4; }
  .iv2-side { display: flex; flex-direction: column; gap: 16px; grid-column: span 5; min-width: 0; }
  .iv2-recs { grid-column: span 7; }
  .iv2-off { grid-column: 1 / -1; }
  .iv2c-num { margin-top: auto; }
  .iv2c-note { margin-top: auto; }
  .iv2c-lbls { margin-bottom: 0; }
  .iv2c-facts { margin-top: 16px; }
}

/* ---------- 夜间模式：主卡降亮度（与仪表盘主卡同一套深红渐变） ---------- */
[data-theme="dark"] .iv2-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
[data-theme="dark"] .iv2-hero::before { background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px); }
[data-theme="dark"] .iv2h-btn.solid, [data-theme="dark"] .iv2h-vip { color: #9E2C12; }
[data-theme="dark"] .iv2n-gift { stroke: #9E2C12; }
[data-theme="dark"] .iv2h-in { background: rgba(255,255,255,.9); }
[data-theme="dark"] .iv2s-n { box-shadow: 0 0 0 4px var(--card); }
[data-theme="dark"] .iv2c-ticks i { background: var(--card); }

@media (prefers-reduced-motion: reduce) {
  .anim-in .iv2-blk, .iv2h-glow, .iv2n-lines path, .iv2n-nodes circle, .iv2n-ring, .anim-in .iv2s-n, .anim-in .iv2o-col > i,
  .anim-in .iv2r-list .iv2r-row, .iv2r-row .iv2r-dot::after, .iv2-skel .sk { animation: none !important; }
  .iv2c-bar > i, .iv2h-btn { transition: none; }
}

/* ============ 每日签到 v2（views/checkin.js，ck- 前缀） ============ */
/* ============ 每日签到 v2（views/checkin.js，ck- 前缀；联调期独立文件，发布时合并进 theme.css）
   手机单列 → ≥720px 两列（主卡 / 月历 / 规则通栏，统计 + 加成并排）→ ≥1200px 十二栅格（主卡 8 + 统计 4；月历 8 + 加成 / 规则 4） ============ */
.ck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ck > * { min-width: 0; }
.ck [hidden] { display: none !important; }
.ck-in .ck-blk, .ck-loading .ck-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.ck .card .pad { padding: 16px; }
/* 侧栏（加成 + 规则）：<1200px 拆散回主网格，≥1200px 成为右列 */
.ck-side { display: contents; }
.ck-cal { order: 2; }
.ck-rules { order: 3; }
.ck-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ck .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: ckShimmer 1.4s ease-in-out infinite; }
@keyframes ckShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 签到主卡（品牌渐变 + 光斑 + 点阵） ---------- */
.ck-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center;
  grid-template-areas: "head head" "streak main" "act act" "week week" "foot foot";
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring); }
[data-theme="dark"] .ck-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
.ckh-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ckh-glow { position: absolute; right: -80px; top: -100px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: ckGlow 7s ease-in-out infinite alternate; }
.ckh-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(250deg, #000 6%, transparent 48%); mask-image: linear-gradient(250deg, #000 6%, transparent 48%); }
@keyframes ckGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }

.ckh-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ckh-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 11px 0 9px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ckh-state { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 9px; border-radius: 99px;
  background: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(53,8,4,.16); white-space: nowrap; }
.ckh-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ckh-state.ok { color: #15803d; }
.ckh-state.todo { color: #b45309; }
.ckh-state.todo i { animation: ckBlink 2s ease-in-out infinite; }
.ckh-state.lock { color: #52525b; }
@keyframes ckBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.ckh-date { margin-left: auto; min-width: 0; font-size: 11.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 连签火焰 + 天数大字 */
.ckh-streak { grid-area: streak; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.22); }
.ckh-fl { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.ck-flame { width: 30px; height: 30px; display: block; transform-origin: 50% 90%; }
.ck-flame .o { fill: rgba(255,255,255,.5); }
.ck-flame .i { fill: rgba(255,255,255,.75); }
.ckh-streak.lit .ck-flame { animation: ckFlicker 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255,220,140,.75)); }
.ckh-streak.lit .ck-flame .o { fill: #fff; }
.ckh-streak.lit .ck-flame .i { fill: #fcd34d; }
@keyframes ckFlicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.05, .97) rotate(-2deg); } 60% { transform: scale(.97, 1.04) rotate(2deg); } }
.ckh-sn { display: flex; align-items: baseline; gap: 3px; line-height: 1; white-space: nowrap; }
.ckh-sn b { font-size: 34px; font-weight: 820; letter-spacing: -1.2px; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.ckh-sn small { font-size: 13px; font-weight: 650; opacity: .9; }
.ckh-sk { margin-top: 5px; font-size: 11.5px; opacity: .86; white-space: nowrap; }

/* 今日奖励 */
.ckh-main { grid-area: main; min-width: 0; }
.ckh-k { font-size: 12px; font-weight: 600; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckh-num { display: flex; align-items: baseline; gap: 4px; margin: 5px 0 5px; white-space: nowrap; min-width: 0; }
.ckh-num b { font-size: clamp(20px, 6.6vw, 26px); font-weight: 820; letter-spacing: -1px; line-height: 1; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.ckh-num small { font-size: 12.5px; font-weight: 650; opacity: .9; flex: none; }
.ckh-num.pop b { animation: ckPop .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes ckPop { 0% { transform: scale(.6); opacity: .2; } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ckh-note { font-size: 11.5px; line-height: 1.45; opacity: .86; }
/* 签到大按钮：手机通栏胶囊 → ≥720px 圆形 + 脉冲环 */
.ckh-act { grid-area: act; min-width: 0; display: flex; justify-content: center; }
.ckh-btn { position: relative; width: 100%; height: 48px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; font-size: 15px; font-weight: 750; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s, background .15s; }
.ckh-btn.go { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 6px 18px rgba(53,8,4,.24); }
[data-theme="dark"] .ckh-btn.go { color: #9E2C12; }
.ckh-btn.go:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(53,8,4,.28); }
.ckh-btn.go:active { transform: translateY(1px) scale(.98); }
.ckh-btn.go.busy { cursor: progress; opacity: .92; }
.ckh-btn.done, .ckh-btn.lock { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ckh-btn.done { cursor: default; }
.ckh-btn.lock:hover { background: rgba(255,255,255,.24); }
.ckh-btn:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; }
.ckh-bi { display: inline-grid; place-items: center; flex: none; }
.ckh-bi .ic { width: 19px; height: 19px; }
.ckh-btn .ck-ckm { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ckh-ring { display: none; }
.ckh-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ckSpin .7s linear infinite; }
@keyframes ckSpin { to { transform: rotate(360deg); } }
.ckh-btn.go:not(.busy)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--brand) 14%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; animation: ckShine 2.8s ease-in-out infinite; }
@keyframes ckShine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }

/* 近 7 天 */
.ckh-week { grid-area: week; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 12px 0 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.18); }
.ckw-d { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.ckw-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 650;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.ckw-d > i { font-style: normal; font-size: 10.5px; opacity: .78; white-space: nowrap; }
.ckw-d.on .ckw-dot { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 4px 10px rgba(53,8,4,.2); }
[data-theme="dark"] .ckw-d.on .ckw-dot { color: #9E2C12; }
.ckw-dot .ck-ckm { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ckw-d.today > i { opacity: 1; font-weight: 700; }
.ckw-d.today:not(.on) .ckw-dot { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); border: 0; animation: ckBreath 2.2s ease-in-out infinite; }
.ck-hero.lock .ckw-d.today:not(.on) .ckw-dot { animation: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.ckw-d.today.on .ckw-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.28), 0 4px 10px rgba(53,8,4,.2); }
.ck-in .ckw-dot { animation: ckDotIn .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.12s + var(--k, 0) * 45ms); }
.ckw-d.pop .ckw-dot { animation: ckPop .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes ckBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ckDotIn { from { transform: scale(.4); opacity: 0; } }
.ckh-foot { grid-area: foot; margin-top: -4px; font-size: 11.5px; opacity: .82; line-height: 1.5; }
.ckh-foot b { font-weight: 700; }

/* 骨架主卡 */
.ck-hero.sk-hero { display: flex; flex-direction: column; gap: 12px; min-height: 236px; }
.ck-hero.sk-hero .sk { background: linear-gradient(90deg, rgba(255,255,255,.14) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.14) 70%); background-size: 300% 100%; }
.ck-hero.sk-hero .sk.a { width: 42%; height: 24px; border-radius: 99px; }
.ck-hero.sk-hero .sk.b { width: 64%; height: 46px; }
.ck-hero.sk-hero .sk.c { width: 100%; height: 46px; border-radius: 14px; }
.ck-hero.sk-hero .sk.d { width: 100%; height: 44px; }

/* ---------- 统计三格 ---------- */
.ck-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; gap: 2px; }
.ck-st { min-width: 0; padding: 10px 8px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.ck-st + .ck-st { box-shadow: -1px 0 0 var(--border); border-radius: 0; }
.ckst-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); }
[data-theme="dark"] .ckst-ic { color: color-mix(in srgb, var(--c) 62%, #fff); background: color-mix(in srgb, var(--c) 17%, var(--card)); }
.ckst-ic .ic { width: 16px; height: 16px; }
.ckst-t { min-width: 0; }
.ckst-t > span { display: block; font-size: 12px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckst-t > i { display: block; margin-top: 1px; font-style: normal; font-size: 10.5px; color: color-mix(in srgb, var(--muted-fg) 80%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckst-v { display: flex; align-items: baseline; gap: 2px; min-width: 0; white-space: nowrap; }
.ckst-v .num { font-size: 20px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.ckst-v small { flex: none; font-size: 11px; font-weight: 650; color: var(--muted-fg); }
.ck-stats > .sk { height: 92px; margin: 4px; }
/* ---------- 连签加成 ---------- */
.ck-bonus { padding: 16px; }
.ckb-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ckb-top .grow { flex: 1 1 auto; min-width: 0; }
.ckb-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #fbbf24, #f97316 60%, #ef4444); box-shadow: 0 6px 14px -6px rgba(249,115,22,.65); }
.ckb-ic .ck-flame { width: 22px; height: 22px; }
.ckb-ic .ck-flame .o { fill: #fff; }
.ckb-ic .ck-flame .i { fill: #fde68a; }
.ckb-t { font-size: 14.5px; font-weight: 650; }
.ckb-s { margin-top: 2px; font-size: 12px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckb-v { flex: none; display: flex; align-items: baseline; gap: 2px; white-space: nowrap; color: #ea580c; }
[data-theme="dark"] .ckb-v { color: #fb923c; }
.ckb-v b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.ckb-v small { font-size: 11.5px; font-weight: 650; }
.ckb-v.zero { color: var(--muted-fg); }
.ckb-bar { display: flex; gap: 3px; height: 8px; margin-top: 14px; }
.ckb-bar i { display: block; height: 100%; border-radius: 99px; min-width: 0; }
.ckb-bar .b { background: color-mix(in srgb, var(--brand) 18%, var(--muted)); }
.ckb-bar .s { background: linear-gradient(90deg, #fbbf24, #f97316); box-shadow: 0 2px 8px -2px rgba(249,115,22,.6); }
.ck-in .ckb-bar i { animation: ckGrowX .8s cubic-bezier(.22,1,.36,1) both; animation-delay: .25s; transform-origin: left; }
@keyframes ckGrowX { from { transform: scaleX(0); } }
.ckb-leg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted-fg); }
.ckb-leg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ckb-leg i { width: 8px; height: 8px; border-radius: 3px; }
.ckb-leg i.b { background: color-mix(in srgb, var(--brand) 30%, var(--muted)); }
.ckb-leg i.s { background: #f97316; }
.ckb-tip { margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: var(--muted-fg); }
.ckb-warn { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.5;
  color: var(--amber); background: var(--amber-bg); }
.ckb-warn .ic { margin-top: 2px; }

/* ---------- 月历 ---------- */
.ck-cal .pad:focus { outline: none; }
.ckc-head { display: flex; align-items: flex-start; gap: 10px; }
.ckc-head .grow { flex: 1 1 auto; min-width: 0; }
.ckc-head .card-title > .ic { color: var(--brand); }
.ckc-head .card-sub { line-height: 1.5; }
.ckc-nav { display: flex; gap: 6px; flex: none; }
.ckc-nav .icon-btn:disabled { opacity: .38; cursor: not-allowed; }
.ckc-nav .icon-btn:disabled:hover { background: transparent; color: var(--muted-fg); }
.ckc-nav .icon-btn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.ckc-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.ckc-bar > b { font-size: 15px; font-weight: 750; white-space: nowrap; }
.ckc-sum { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--muted-fg); }
.ckc-sum > span { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 3px; border-radius: 99px; background: var(--muted); white-space: nowrap; }
.ckc-sum b { color: var(--fg); font-weight: 700; }
.ckc-back { height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 650; color: var(--brand); background: var(--brand-soft); white-space: nowrap; }
.ckc-back:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.ckc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px; font-size: 11px; color: var(--muted-fg); text-align: center; }
.ckc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.ckc-grid.in-l { animation: ckInL .26s ease-out; }
.ckc-grid.in-r { animation: ckInR .26s ease-out; }
@keyframes ckInL { from { opacity: 0; transform: translateX(18px); } }
@keyframes ckInR { from { opacity: 0; transform: translateX(-18px); } }
.ckc-d { position: relative; min-width: 0; min-height: 48px; padding: 6px 1px 4px; border-radius: 10px; border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--card); }
.ckc-d b { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.ckc-d .rw { max-width: 100%; overflow: hidden; font-size: 9.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--brand); letter-spacing: -.2px; }
.ckc-d .rw.t { color: var(--brand); font-weight: 650; }
.ckc-d.blank { border: 0; background: transparent; }
.ckc-d.done { border-color: color-mix(in srgb, var(--brand) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--card)), color-mix(in srgb, var(--brand) 6%, var(--card))); }
.ckc-d.done b { color: var(--brand); }
/* 连签链：同一行相邻两天都签到时用细条连起来 */
.ckc-d.chain::before { content: ""; position: absolute; left: -7px; top: 50%; width: 9px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 32%, transparent); }
.ckc-d.today { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.ckc-d.today.todo b { color: var(--brand); }
.ckc-d.miss { border-style: dashed; background: transparent; }
.ckc-d.miss b { color: color-mix(in srgb, var(--muted-fg) 75%, transparent); font-weight: 500; }
.ckc-d.na { border-color: transparent; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.ckc-d.na b { color: var(--muted-fg); font-weight: 500; }
.ckc-d.future { border-color: transparent; background: transparent; }
.ckc-d.future b { color: var(--muted-fg); opacity: .5; font-weight: 500; }
.ckc-d.pop { animation: ckPop .7s cubic-bezier(.2,1.5,.4,1); }
.ckc-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted-fg); }
.ckc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ckc-leg i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--border); }
.ckc-leg i.done { border-color: color-mix(in srgb, var(--brand) 22%, transparent); background: color-mix(in srgb, var(--brand) 12%, var(--card)); }
.ckc-leg i.today { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent); }
.ckc-leg i.miss { border-style: dashed; }
.ckc-note { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); }
.ck-cal .sk-t { width: 40%; height: 20px; }
.ckc-sk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 18px; }
.ckc-sk .sk { height: 46px; border-radius: 10px; }
/* ---------- 签到规则（折叠） ---------- */
.ck-rules { padding: 6px; }
.ckr-h { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 10px; text-align: left; transition: background .15s; }
.ckr-h:hover { background: var(--muted); }
.ckr-h:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.ckr-h .grow { flex: 1 1 auto; min-width: 0; }
.ckr-h b { display: block; font-size: 14px; font-weight: 700; }
.ckr-h .grow > span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.ckr-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.ck-chev { color: var(--muted-fg); transition: transform .22s ease; }
.ck-rules.open .ck-chev { transform: rotate(180deg); }
.ckr-a { padding: 0 10px 8px; }
.ckr-a:not([hidden]) { animation: riseIn .35s cubic-bezier(.22,1,.36,1); }
.ckr-a dl { margin: 0; }
.ckr-it { padding: 10px 0; }
.ckr-it + .ckr-it { border-top: 1px dashed var(--border); }
.ckr-it dt { font-size: 13px; font-weight: 650; }
.ckr-it dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted-fg); }

/* ---------- 空态 / 错误态 ---------- */
.ck-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 20px 40px;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.cke-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--muted-fg); background: var(--muted); margin-bottom: 4px; }
.ck-empty.err .cke-ic { color: var(--red); background: var(--red-bg); }
.cke-ic .ic { width: 22px; height: 22px; }
.ck-empty b { font-size: 14.5px; font-weight: 750; }
.ck-empty > span { font-size: 12px; color: var(--muted-fg); }
.ck-empty .btn { margin-top: 8px; gap: 6px; }

/* ---------- 响应式 ---------- */
@media (max-width: 359px) {
  .ck-hero { padding: 14px; column-gap: 10px; }
  .ckh-date { display: none; }
  .ckh-streak { padding-right: 10px; gap: 8px; }
  .ckh-fl { width: 44px; height: 44px; border-radius: 14px; }
  .ckh-sn b { font-size: 30px; }
  .ckh-num b { font-size: 22px; }
  .ckw-dot { width: 27px; height: 27px; }
  .ckst-v .num { font-size: 17px; }
  .ck-st { padding: 10px 6px; }
  .ckc-d { min-height: 44px; padding: 5px 0 4px; }
  .ck-cal .pad { padding: 14px 10px; }
  .ckc-grid { gap: 3px; }
  .ckc-d.chain::before { left: -4px; width: 5px; }
  .ckc-d .rw { font-size: 9px; letter-spacing: -.4px; }
}
@media (min-width: 720px) {
  .ck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ck-hero, .ck-cal, .ck-rules, .ck-empty { grid-column: 1 / -1; }
  .ck .card .pad { padding: 18px 20px; }
  .ck-hero { padding: 20px 22px 18px; column-gap: 22px; row-gap: 16px;
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "head head head" "streak main act" "week week week" "foot foot foot"; }
  .ckh-streak { padding-right: 22px; gap: 14px; }
  .ckh-fl { width: 64px; height: 64px; border-radius: 20px; }
  .ck-flame { width: 38px; height: 38px; }
  .ckh-sn b { font-size: 46px; letter-spacing: -1.8px; }
  .ckh-sn small { font-size: 15px; }
  .ckh-num b { font-size: 36px; letter-spacing: -1.4px; }
  .ckh-num small { font-size: 14px; }
  .ckh-note { font-size: 12.5px; }
  /* 圆形大按钮 + 脉冲环 */
  .ckh-btn { width: 112px; height: 112px; padding: 0; border-radius: 50%; flex-direction: column; gap: 4px; font-size: 14px; }
  .ckh-bi .ic, .ckh-btn .ck-ckm { width: 26px; height: 26px; }
  .ckh-btn.go::after { border-radius: 50%; }
  .ckh-btn.go:not(.busy) .ckh-ring { display: block; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7);
    pointer-events: none; animation: ckRing 2.4s ease-out infinite; }
  .ckh-btn.go .ckh-ring.r2 { animation-delay: 1.2s; }
  .ckh-btn.go:hover { transform: translateY(-2px) scale(1.03); }
  .ckh-spin { width: 22px; height: 22px; }
  .ckw-dot { width: 34px; height: 34px; font-size: 12.5px; }
  .ckw-d > i { font-size: 11px; }
  .ckh-foot { margin-top: -6px; }
  .ck-stats { padding: 8px; }
  .ck-st { padding: 12px; }
  .ckst-v .num { font-size: 24px; }
  .ck-bonus { padding: 18px 20px; }
  .ckc-grid { gap: 6px; }
  .ckc-d { min-height: 58px; padding-top: 8px; gap: 5px; }
  .ckc-d b { font-size: 13.5px; }
  .ckc-d .rw { font-size: 11px; }
  .ckc-d.chain::before { left: -8px; width: 10px; }
}
@keyframes ckRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
@media (min-width: 1200px) {
  .ck { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ck-hero { grid-column: 1 / span 8; grid-row: 1; }
  .ck-stats { grid-column: 9 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-content: stretch; }
  .ck-st { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
  .ck-st + .ck-st { box-shadow: 0 -1px 0 var(--border); }
  .ckst-ic { width: 38px; height: 38px; border-radius: 12px; }
  .ckst-ic .ic { width: 18px; height: 18px; }
  .ckst-t { flex: 1 1 auto; }
  .ckst-t > span { font-size: 12.5px; color: var(--fg); font-weight: 600; }
  .ckst-t > i { font-size: 11px; color: var(--muted-fg); }
  .ckst-v { flex: none; }
  .ck-cal { grid-column: 1 / span 8; grid-row: 2; align-self: start; }
  .ck-side { grid-column: 9 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .ckc-d { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-in .ck-blk, .ck-loading .ck-blk, .ck .sk, .ckh-glow, .ckh-state.todo i, .ckh-streak.lit .ck-flame, .ckh-num.pop b, .ckh-spin,
  .ckh-btn.go::after, .ckh-btn .ckh-ring, .ck-in .ckw-dot, .ckw-d.today:not(.on) .ckw-dot, .ckw-d.pop .ckw-dot, .ck-in .ckb-bar i,
  .ckc-grid.in-l, .ckc-grid.in-r, .ckc-d.pop, .ckr-a:not([hidden]) { animation: none !important; }
  .ckh-btn { transition: none; }
}

/* ============ 使用文档 v2（views/docs.js，dc- 前缀） ============ */
/* ============ 使用文档 v2（views/docs.js，dc- 前缀）
   列表：帮助中心主卡（卡片底 + 径向光斑 + 点阵）→ 快速开始（分类卡 2 → 3 → 4 列）→ 文章列表卡 → 工单引导
   文章：面包屑 → 标题区 → 目录 + 正文（≥1200px 目录右侧吸附，以下折叠在正文上方）→ 上下篇 → 工单引导 ============ */
.dc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dc > * { min-width: 0; }
.dc [hidden] { display: none !important; }
.anim-in > .dc { animation: none; }
.anim-in .dc-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.dc-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dc .grow { flex: 1 1 auto; min-width: 0; }
.dc-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 16px; }

/* 主卡：帮助中心头 */
.dc-hero, .dc-ahead { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 18px 16px 16px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 7%, transparent), transparent 62%),
    var(--card); }
.dc-hero::before, .dc-ahead::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%); mask-image: linear-gradient(100deg, #000 10%, transparent 62%); }
.dch-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dch-glow { position: absolute; right: -80px; top: -110px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 16%, transparent), transparent); animation: dcGlow 7s ease-in-out infinite alternate; }
@keyframes dcGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }
.dch-art { position: absolute; right: 18px; top: 16px; color: color-mix(in srgb, var(--brand) 16%, transparent); }
.dch-art .ic { width: 96px; height: 96px; stroke-width: 1.4; }
.dch-top { display: flex; align-items: flex-start; gap: 12px; }
.dch-eye { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 650;
  color: var(--brand); background: var(--brand-soft); }
.dc-hero h1 { margin: 10px 0 0; font-size: 22px; font-weight: 760; letter-spacing: -.4px; line-height: 1.3; }
.dch-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-fg); line-height: 1.5; }
.dch-num { flex: none; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; text-align: right; margin-top: 30px; }
.dch-num b { font-size: 32px; font-weight: 820; letter-spacing: -1.2px; line-height: 1; color: var(--fg); }
.dch-num small { font-size: 13px; font-weight: 650; color: var(--muted-fg); }
.dch-num span { grid-column: 1 / -1; margin-top: 4px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
/* 大搜索框 */
.dch-search { position: relative; display: flex; align-items: center; margin-top: 16px; height: 48px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--input); box-shadow: 0 8px 24px -16px rgba(0,0,0,.25); transition: border-color .15s, box-shadow .15s; }
.dch-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.dch-sic { flex: none; display: grid; place-items: center; width: 44px; color: var(--muted-fg); }
.dch-sic .ic { width: 18px; height: 18px; }
.dch-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px 0 0; border: 0; outline: 0; background: transparent;
  color: var(--fg); font: inherit; font-size: 14.5px; -webkit-appearance: none; appearance: none; }
.dch-search input::placeholder { color: var(--muted-fg); }
.dch-search input::-webkit-search-cancel-button, .dch-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.dch-clear { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 4px; border-radius: 9px; color: var(--muted-fg); }
.dch-clear:hover { background: var(--muted); color: var(--fg); }
.dch-clear:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 0; }
.dch-kbd { display: none; flex: none; margin-right: 10px; height: 24px; padding: 0 8px; border-radius: 7px; align-items: center;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted-fg); background: var(--muted); box-shadow: inset 0 -1px 0 var(--border); }
.dch-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 12px; color: var(--muted-fg); }
.dch-hot > span { flex: none; }
.dch-hot a { min-width: 0; max-width: 100%; height: 26px; padding: 0 10px; border-radius: 99px; display: inline-flex; align-items: center;
  color: var(--fg); background: color-mix(in srgb, var(--muted) 80%, transparent); border: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s, color .15s; }
.dch-hot a:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.dch-hot a:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
/* 区块标题 */
.dc-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 10px; }
.dc-sec-h h2 { margin: 0; font-size: 15px; font-weight: 700; }
.dc-sec-h span { font-size: 12px; color: var(--muted-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 快速开始：分类卡 */
.dc-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dc-qcard { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border-radius: 14px; text-align: left;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--fg);
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.dc-qcard:hover { border-color: color-mix(in srgb, var(--c, var(--brand)) 35%, var(--border)); transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(0,0,0,.35); }
.dc-qcard:active { transform: none; }
.dc-qcard:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.dc-qcard.on { border-color: color-mix(in srgb, var(--c) 55%, var(--border)); background: color-mix(in srgb, var(--c) 6%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.dc-qic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent); transition: transform .2s cubic-bezier(.2,1.4,.4,1); }
.dc-qic .ic { width: 20px; height: 20px; }
.dc-qcard:hover .dc-qic { transform: scale(1.06); }
[data-theme="dark"] .dc-qic { color: color-mix(in srgb, var(--c) 62%, #fff); background: color-mix(in srgb, var(--c) 18%, var(--card)); }
.dc-qtx { display: flex; flex-direction: column; min-width: 0; }
.dc-qtx b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-qtx span { margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.dc-qon { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; color: #fff; background: var(--c); }
.dc-qon .ic { width: 11px; height: 11px; stroke-width: 3; }
.dc-qcard.on .dc-qon { display: grid; }

/* 文章列表卡 */
.dc-list { padding: 6px 6px 8px; }
.dc-list-h { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px; }
.dc-list-h h2 { display: inline; margin: 0; font-size: 15px; font-weight: 700; }
.dc-count { margin-left: 8px; font-size: 12px; color: var(--muted-fg); }
.dc-list-h .btn { flex: none; }
.dc-group + .dc-group { margin-top: 6px; }
.dc-group-h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font-size: 12px; font-weight: 650; color: var(--muted-fg); letter-spacing: .2px; }
.dc-group-h i { width: 6px; height: 6px; border-radius: 2px; background: var(--c); }
.dc-group-h span { font-weight: 500; opacity: .75; }
.dc-rows { list-style: none; margin: 0; padding: 0; }
.dc-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px; border-radius: 12px; color: var(--fg); transition: background .15s; -webkit-tap-highlight-color: transparent; }
.dc-row:hover { background: var(--muted); }
.dc-row:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.dc-row-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--card)); }
[data-theme="dark"] .dc-row-ic { color: color-mix(in srgb, var(--c) 62%, #fff); background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.dc-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dc-row-t { font-size: 14px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.dc-row-s { margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dc-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted-fg); }
.dc-row-go { flex: none; align-self: center; color: var(--muted-fg); opacity: .6; transition: transform .15s, opacity .15s; }
.dc-row:hover .dc-row-go { opacity: 1; transform: translateX(2px); color: var(--brand); }
.dc mark { padding: 0 1px; border-radius: 3px; color: inherit; background: color-mix(in srgb, #facc15 45%, transparent); }
[data-theme="dark"] .dc mark { background: color-mix(in srgb, #facc15 32%, transparent); }
.dc-tag { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 650;
  color: color-mix(in srgb, var(--c, var(--brand)) 88%, #000); background: color-mix(in srgb, var(--c, var(--brand)) 11%, transparent); white-space: nowrap; }
[data-theme="dark"] .dc-tag { color: color-mix(in srgb, var(--c, var(--brand)) 60%, #fff); background: color-mix(in srgb, var(--c, var(--brand)) 20%, transparent); }
/* 空态 / 错误态 */
.dc-empty, .dc-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 16px 28px; text-align: center; }
.dc-empty { margin: 4px; border-radius: 14px; border: 1px dashed var(--border); }
.dc-empty-ic { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.dc-empty-ic .ic { width: 24px; height: 24px; }
.dc-empty > b, .dc-state > b { max-width: 100%; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.dc-empty > p, .dc-state > p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted-fg); }
.dc-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* 工单引导 */
.dc-cta { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 30%, var(--card))); border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border)); }
.dc-cta-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 6px 14px -6px var(--brand-ring); }
.dc-cta .grow { display: flex; flex-direction: column; }
.dc-cta b { font-size: 14px; font-weight: 700; }
.dc-cta .grow span { margin-top: 2px; font-size: 12px; color: var(--muted-fg); line-height: 1.5; }
.dc-cta .btn { flex: none; }

/* 骨架 */
.dc-sk { display: block; height: 13px; border-radius: 7px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: dcShimmer 1.4s ease-in-out infinite; }
@keyframes dcShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.dc-sk-s { height: 10px; margin-top: 10px; }
.dc-sk-row { display: flex; gap: 12px; padding: 12px 10px; }
.dc-sk-row + .dc-sk-row { border-top: 1px solid var(--border); }
.dc-sk-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; }
.dc-sk-q { pointer-events: none; }
.dc-sk-qi { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.dc-sk-q .grow .dc-sk + .dc-sk { margin-top: 8px; }
.dc-prose-sk { padding: 20px 16px; }
.dc-prose-sk .dc-sk-s { height: 12px; margin-top: 14px; }

/* ---------- 文章页 ---------- */
.dc-crumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dc-back { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--muted-fg); border: 1px solid var(--border); background: var(--card); transition: color .15s, background .15s; }
.dc-back:hover { color: var(--fg); background: var(--muted); }
.dc-back:focus-visible, .dc-crumb a:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.dc-crumb ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted-fg); }
.dc-crumb li { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.dc-crumb li:not(:first-child)::before { content: "/"; margin: 0 7px; opacity: .55; }
.dc-crumb li:last-child { flex: 1 1 auto; }
.dc-crumb li > * { overflow: hidden; text-overflow: ellipsis; }
.dc-crumb a { color: var(--muted-fg); border-radius: 4px; transition: color .15s; }
.dc-crumb a:hover { color: var(--brand); }
.dc-crumb [aria-current] span { color: var(--fg); font-weight: 600; }
.dc-ahead { padding: 18px 16px; }
.dc-ahead h1 { margin: 12px 0 0; font-size: 21px; font-weight: 760; letter-spacing: -.4px; line-height: 1.35; overflow-wrap: anywhere; }
.dc-ameta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted-fg); }
.dc-ameta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dc-share { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  color: var(--muted-fg); border: 1px solid var(--border); background: var(--card); transition: color .15s, border-color .15s; }
.dc-share:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.dc-share:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
/* 目录 + 正文 */
.dc-abody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.dc-toc { min-width: 0; border-radius: 14px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }
.dc-toc-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 14px; border-radius: 14px; font-size: 13px; font-weight: 650; color: var(--fg); }
.dc-toc-btn span { flex: 1 1 auto; text-align: left; }
.dc-toc-btn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.dc-chev { transition: transform .2s; color: var(--muted-fg); }
.dc-toc.open .dc-chev { transform: rotate(180deg); }
.dc-toc-h { display: none; align-items: center; gap: 7px; padding: 0 0 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted-fg); letter-spacing: .3px; }
.dc-toc-list { display: none; margin: 0; padding: 0 8px 10px; list-style: none; }
.dc-toc.open .dc-toc-list { display: block; animation: riseIn .3s cubic-bezier(.22,1,.36,1); }
.dc-toc-list button { display: block; width: 100%; padding: 7px 10px 7px 12px; border-radius: 8px; text-align: left; font-size: 12.5px; line-height: 1.45;
  color: var(--muted-fg); box-shadow: inset 2px 0 0 transparent; transition: color .15s, background .15s, box-shadow .15s; overflow-wrap: anywhere; }
.dc-toc-list .lv3 button { padding-left: 24px; font-size: 12px; }
.dc-toc-list button:hover { color: var(--fg); background: var(--muted); }
.dc-toc-list button.on { color: var(--brand); font-weight: 650; background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); }
.dc-toc-list button:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }

/* 正文排版 */
.dc-prose { padding: 20px 16px 22px; font-size: 14.5px; line-height: 1.85; color: var(--fg); overflow-wrap: anywhere; }
.dc-prose > :first-child { margin-top: 0; }
.dc-prose > :last-child { margin-bottom: 0; }
.dc-prose p { margin: 0 0 14px; }
.dc-prose h2, .dc-prose h3, .dc-prose h4 { scroll-margin-top: 76px; line-height: 1.4; letter-spacing: -.2px; outline: 0; }
.dc-prose h2 { margin: 28px 0 12px; padding-top: 16px; font-size: 18px; font-weight: 750; border-top: 1px solid var(--border); }
.dc-prose > h2:first-child { padding-top: 0; border-top: 0; }
.dc-prose h3 { margin: 22px 0 8px; font-size: 15.5px; font-weight: 700; }
.dc-prose h4 { margin: 18px 0 6px; font-size: 14.5px; font-weight: 700; }
.dc-prose h2:focus-visible, .dc-prose h3:focus-visible { box-shadow: -8px 0 0 -5px var(--brand); }
.dc-prose ul, .dc-prose ol { margin: 0 0 14px; padding-left: 22px; }
.dc-prose li { margin: 4px 0; }
.dc-prose li::marker { color: var(--brand); font-weight: 650; }
.dc-prose a { color: var(--brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
.dc-prose a:hover { text-decoration-color: currentColor; }
.dc-prose a:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; border-radius: 3px; }
.dc-prose strong, .dc-prose b { font-weight: 700; }
.dc-prose blockquote { margin: 0 0 14px; padding: 10px 14px; border-radius: 0 10px 10px 0; border-left: 3px solid var(--brand); background: var(--brand-soft); color: var(--fg); }
.dc-prose blockquote > :last-child { margin-bottom: 0; }
.dc-prose hr { margin: 24px 0; border: 0; border-top: 1px dashed var(--border); }
.dc-prose :not(pre) > code { padding: 1px 6px; border-radius: 6px; font: 600 .88em/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--muted); border: 1px solid var(--border); }
.dc-prose img { display: block; max-width: 100%; height: auto; margin: 6px auto 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--muted); }
.dc-prose p > img { display: inline-block; margin: 6px 0; }
.dc-prose img.dc-img-bad { min-width: 120px; min-height: 64px; padding: 8px; font-size: 12px; color: var(--muted-fg); }
.dc-prose details { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); }
.dc-prose summary { cursor: pointer; font-weight: 650; }
.dc-none { color: var(--muted-fg); font-size: 13px; }
/* 代码块 */
.dc-code { margin: 0 0 16px; border-radius: 12px; overflow: hidden; background: #0f1115; border: 1px solid #1f2229; }
.dc-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 6px 0 12px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9ca3af; background: #171a20; border-bottom: 1px solid #1f2229; text-transform: lowercase; }
.dc-copy { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; font: 600 11.5px/1 inherit; font-family: inherit; color: #d1d5db; transition: background .15s, color .15s; }
.dc-copy:hover { background: rgba(255,255,255,.08); color: #fff; }
.dc-copy:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 0; }
.dc-code pre { margin: 0; padding: 12px 14px 14px; overflow-x: auto; color: #e5e7eb; font: 500 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; overflow-wrap: normal; }
.dc-code pre:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.dc-code code { font: inherit; white-space: pre; }
/* 表格：容器横向滚动 */
.dc-table { margin: 0 0 16px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.dc-table:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.dc-table table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13px; line-height: 1.6; overflow-wrap: normal; }
.dc-table th, .dc-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.dc-table th { font-weight: 650; white-space: nowrap; background: var(--muted); }
.dc-table tr:last-child td { border-bottom: 0; }
.dc-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--muted) 45%, transparent); }
/* 上下篇 */
.dc-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dc-pg { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card);
  color: var(--fg); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s; }
.dc-pg:hover { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); transform: translateY(-1px); }
.dc-pg:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.dc-pg > span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted-fg); }
.dc-pg > b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-pg.next { text-align: right; align-items: flex-end; }
.dc-pg-ph { display: none; }

/* 窄屏：工单引导按钮换行 */
@media (max-width: 419px) {
  .dc-cta { flex-wrap: wrap; }
  .dc-cta .grow { flex-basis: calc(100% - 52px); }
  .dc-cta .btn { width: 100%; }
  .dch-num b { font-size: 28px; }
  .dc-hero h1 { font-size: 20px; }
  .dch-art { display: none; }
}
@media (max-width: 359px) {
  .dc-qgrid { gap: 8px; }
  .dc-qcard { padding: 10px; gap: 9px; }
  .dc-qic { width: 34px; height: 34px; border-radius: 10px; }
  .dc-row-ic { display: none; }
}
@media (min-width: 720px) {
  .dc { gap: 16px; }
  .dc-card { padding: 20px; }
  .dc-hero { padding: 26px 26px 22px; }
  .dc-hero h1 { font-size: 26px; }
  .dch-sub { font-size: 13px; }
  .dch-art { right: 150px; top: 18px; }
  .dch-art .ic { width: 120px; height: 120px; }
  .dch-num { margin-top: 34px; }
  .dch-num b { font-size: 40px; letter-spacing: -1.6px; }
  .dch-search { height: 54px; max-width: 680px; }
  .dch-search input { font-size: 15px; }
  .dch-kbd { display: inline-flex; }
  .dc-qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .dc-qcard { padding: 14px; }
  .dc-list { padding: 8px 10px 10px; }
  .dc-cta { padding: 16px 18px; }
  .dc-ahead { padding: 24px 26px; }
  .dc-ahead h1 { font-size: 25px; }
  .dc-prose { padding: 26px 30px 30px; font-size: 15px; }
  .dc-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-pg-ph { display: block; }
}
@media (min-width: 1024px) {
  .dc-qgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 1200px) {
  .dc-abody.has-toc { grid-template-columns: minmax(0, 1fr) 248px; gap: 18px; }
  .dc-abody.has-toc .dc-toc { order: 2; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding-top: 14px; background: transparent; border-color: transparent; box-shadow: none; }
  .dc-abody.has-toc .dc-toc-btn { display: none; }
  .dc-abody.has-toc .dc-toc-h { display: flex; }
  .dc-abody.has-toc .dc-toc-list { display: block; padding: 0; border-left: 1px solid var(--border); }
  .dc-abody.has-toc .dc-toc-list button { border-radius: 0 8px 8px 0; }
  .dc-prose { padding: 30px 40px 36px; }
}

/* 夜间模式 */
[data-theme="dark"] .dch-search { box-shadow: none; }
[data-theme="dark"] .dc-qcard:hover, [data-theme="dark"] .dc-pg:hover { box-shadow: none; }
[data-theme="dark"] .dc-code { background: #0b0c0f; border-color: var(--border); }
[data-theme="dark"] .dc-code-bar { background: #131418; border-color: var(--border); }
[data-theme="dark"] .dc-prose blockquote { background: color-mix(in srgb, var(--brand) 10%, transparent); }
[data-theme="dark"][data-accent="ink"] .dc-prose blockquote { background: var(--muted); }
[data-theme="dark"] .dch-art { color: color-mix(in srgb, var(--brand) 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .anim-in .dc-blk, .dch-glow, .dc-sk, .dc-toc.open .dc-toc-list { animation: none !important; }
  .dc-qcard, .dc-qic, .dc-row-go, .dc-pg, .dc-chev { transition: none; }
  .dc-qcard:hover, .dc-pg:hover { transform: none; }
}

/* ============ 个人中心 v2（views/profile.js，pf2- 前缀） ============ */
/* ============ 个人中心 v2（views/profile.js，pf2- 前缀）
   手机单列 → ≥720px 两列（主卡 / 订阅卡通栏，设置两卡并排）→ ≥1200px 十二栅格（主卡 7 + 订阅 5；设置两卡各 6）
   改密 / 二次确认弹层挂 body，外壳复用 .uModal（全局滚动锁），手机为底部弹层 ============ */
.pf2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pf2 > * { min-width: 0; }
.pf2 [hidden], .pf2-m [hidden] { display: none !important; }
.anim-in > .pf2 { animation: none; }
.anim-in .pf2-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.pf2-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 身份主卡：与仪表盘主卡同一套品牌渐变 + 光斑 + 点阵 ---------- */
.pf2-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 16px; min-height: 252px;
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring); }
.pf2h-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pf2h-glow { position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: pf2Glow 7s ease-in-out infinite alternate; }
.pf2h-glow.g2 { right: auto; top: auto; left: -70px; bottom: -120px; width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(255,214,128,.26), rgba(255,214,128,0)); animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes pf2Glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }
.pf2h-dots { position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 100%); mask-image: linear-gradient(100deg, transparent 38%, #000 100%); }
.pf2h-mark { position: absolute; right: 4px; bottom: -52px; z-index: -1; font-size: 196px; font-weight: 900; line-height: 1; letter-spacing: -8px;
  color: rgba(255,255,255,.09); pointer-events: none; -webkit-user-select: none; user-select: none; }

.pf2h-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf2h-top .grow { flex: 1 1 auto; min-width: 0; }
.pf2h-av { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 19px; font-weight: 800;
  color: color-mix(in srgb, var(--brand) 86%, #7a1206); background: linear-gradient(145deg, #fff, rgba(255,255,255,.84));
  box-shadow: 0 6px 16px rgba(53,8,4,.22), inset 0 0 0 1px rgba(255,255,255,.6); }
.pf2h-email { font-size: 16.5px; font-weight: 750; letter-spacing: -.2px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2h-meta { margin-top: 2px; font-size: 11.5px; opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2h-meta i { font-style: normal; margin: 0 5px; opacity: .6; }
.pf2h-state { display: inline-flex; align-items: center; gap: 5px; flex: none; align-self: flex-start; height: 22px; padding: 0 9px; border-radius: 99px;
  background: #fff; color: #15803d; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(53,8,4,.16); }
.pf2h-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pf2h-state.ok i { animation: pf2Blink 2s ease-in-out infinite; }
.pf2h-state.warn { color: #b45309; }
.pf2h-state.bad { color: #dc2626; }
@keyframes pf2Blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.pf2h-mid { margin-top: 18px; }
.pf2h-bal { min-width: 0; }
.pf2h-k { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; opacity: .92; }
.pf2h-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 650;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); white-space: nowrap; }
.pf2h-num { display: flex; align-items: baseline; gap: 3px; margin: 6px 0 5px; white-space: nowrap; }
.pf2h-num small { font-size: 17px; font-weight: 700; opacity: .9; }
.pf2h-num b { font-size: 34px; font-weight: 820; letter-spacing: -1.2px; line-height: 1; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.pf2h-note { font-size: 12px; opacity: .84; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2h-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pf2h-btn { min-width: 0; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; color: #fff; font-size: 13.5px; font-weight: 650; white-space: nowrap;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.pf2h-btn:hover { background: rgba(255,255,255,.24); }
.pf2h-btn:active { transform: translateY(1px); }
.pf2h-btn.solid { background: #fff; color: color-mix(in srgb, var(--brand) 86%, #7a1206); box-shadow: 0 4px 14px rgba(53,8,4,.22); }
.pf2h-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(53,8,4,.26); }
.pf2h-btn:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }

.pf2h-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.pf2h-st { min-width: 0; padding: 9px 11px 8px; border-radius: 11px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.pf2h-st dt { font-size: 10.5px; opacity: .8; white-space: nowrap; }
.pf2h-st dd { margin: 2px 0 0; font-size: 15px; font-weight: 760; letter-spacing: -.3px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2h-st dd small { margin-left: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.pf2h-st.txt dd { letter-spacing: 0; }

/* 主卡错误态 */
.pf2h-err { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 220px; align-content: center; }
.pf2h-err .grow { flex: 1 1 180px; min-width: 0; }
.pf2h-err b { display: block; font-size: 15.5px; font-weight: 750; }
.pf2h-err .grow > span { display: block; margin-top: 3px; font-size: 12.5px; opacity: .86; overflow-wrap: anywhere; }
.pf2h-err-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.pf2h-err-ic .ic { width: 22px; height: 22px; }
.pf2h-err .pf2h-btn { flex: none; }

/* 骨架（主卡上用白色半透明，卡片上用 muted） */
.pf2-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: pf2Shimmer 1.4s ease-in-out infinite; }
.pf2-hero .pf2-sk { background: linear-gradient(90deg, rgba(255,255,255,.14) 30%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.14) 70%); background-size: 300% 100%; }
@keyframes pf2Shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.pf2-sk-av { width: 48px; height: 48px; flex: none; border-radius: 15px; }
.pf2-sk-a { width: 62%; height: 15px; }
.pf2-sk-b { width: 38%; height: 11px; margin-top: 8px; }
.pf2-sk-num { width: 132px; height: 32px; margin-top: 10px; border-radius: 10px; }
.pf2-sk-st { height: 34px; }
.pf2-hero .pf2h-st:has(.pf2-sk) { padding: 0; background: none; box-shadow: none; }
.pf2-sk-url { height: 62px; border-radius: 12px; }
.pf2-sk-btn { height: 38px; border-radius: 10px; }

/* ---------- 卡片通用：卡头 + 图标块 ---------- */
.pf2-sub, .pf2-set { padding: 16px; }
.pf2-ch { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pf2-ch .grow { flex: 1 1 auto; min-width: 0; }
.pf2-ct { margin: 0; font-size: 14.5px; font-weight: 680; line-height: 1.35; }
.pf2-cs { margin-top: 1px; font-size: 12px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-tile { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; --c: var(--brand);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.pf2-tile .ic { width: 18px; height: 18px; }
.pf2-tile.sm { width: 32px; height: 32px; border-radius: 10px; color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent);
  background: color-mix(in srgb, var(--c) 11%, var(--card)); }
.pf2-tile.sm .ic { width: 16px; height: 16px; }
.pf2-tile.t-violet { --c: #7c3aed; }
.pf2-tile.t-green { --c: #16a34a; }
.pf2-tile.t-amber { --c: #d97706; }
.pf2-tile.t-blue { --c: #2563eb; }
.pf2-tile.t-red { --c: #dc2626; }
.pf2-tile.t-ink { --c: #52525b; }
[data-theme="dark"] .pf2-tile.sm { color: color-mix(in srgb, var(--c) 62%, #fff); background: color-mix(in srgb, var(--c) 17%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent); }
[data-theme="dark"] .pf2-tile.t-ink { --c: #a1a1aa; }
/* ---------- 订阅地址卡 ---------- */
.pf2-sub { display: flex; flex-direction: column; transition: box-shadow .4s; }
.pf2-sub.flash { box-shadow: 0 0 0 4px var(--brand-ring); transition: box-shadow .12s; }
.pf2-eye { flex: none; margin: -4px -6px 0 0; }
.pf2-eye:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.pf2-sb { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; min-width: 0; }
.pf2s-url { padding: 11px 12px; border-radius: 12px; border: 1px dashed var(--border); background: color-mix(in srgb, var(--muted) 55%, var(--card));
  font: 500 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color: var(--fg); white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.pf2s-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf2s-acts .btn { min-width: 0; height: 38px; border-radius: 10px; gap: 6px; }
.pf2s-acts .btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring); }
.pf2s-tip { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.55; color: var(--muted-fg); }
.pf2s-tip .ic { margin-top: 2px; color: var(--green); }
.pf2s-tip.warn, .pf2s-tip.warn .ic { color: var(--amber); }
.pf2s-tip:last-child { margin-top: auto; padding-top: 2px; }
.pf2-state { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 16px; text-align: center; border-radius: 14px; border: 1px dashed var(--border); }
.pf2-state-ic { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.pf2-state-ic.bad { color: var(--red); background: var(--red-bg); }
.pf2-state-ic .ic { width: 21px; height: 21px; }
.pf2-state b { font-size: 14px; font-weight: 700; }
.pf2-state p { margin: 0 0 8px; font-size: 12px; color: var(--muted-fg); overflow-wrap: anywhere; }
.pf2-state .btn { gap: 5px; }

/* ---------- 设置列表 ---------- */
.pf2-group { margin-top: 12px; }
.pf2-group + .pf2-group { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.pf2-gt { margin: 0 0 4px 2px; font-size: 11.5px; font-weight: 650; color: var(--muted-fg); }
.pf2-gt.danger { color: var(--red); }
.pf2-row { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 -8px; width: calc(100% + 16px); padding: 10px 8px;
  border-radius: 12px; text-align: left; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.pf2-row:hover { background: var(--muted); }
.pf2-row:active { background: color-mix(in srgb, var(--muted) 78%, var(--border)); }
.pf2-row:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.pf2-row .grow { flex: 1 1 auto; min-width: 0; }
.pf2-row .grow > b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.pf2-row .grow > span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-row .pf2-go { color: var(--muted-fg); opacity: .6; transition: transform .15s, opacity .15s; }
.pf2-row:hover .pf2-go { opacity: 1; transform: translateX(2px); }
.pf2-row.danger .grow > b { color: var(--red); }
.pf2-row.danger:hover { background: var(--red-bg); }
.pf2-row[aria-busy="true"] { cursor: progress; }
.pf2-sw { position: relative; width: 40px; height: 24px; flex: none; border-radius: 99px; background: var(--border); transition: background .2s; }
.pf2-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .22s cubic-bezier(.2,1.2,.4,1); }
.pf2-row[aria-checked="true"] .pf2-sw { background: var(--brand); }
.pf2-row[aria-checked="true"] .pf2-sw i { transform: translateX(16px); }
.pf2-row[aria-busy="true"] .pf2-sw { opacity: .6; }
[data-theme="dark"] .pf2-sw { background: #3f3f46; }
[data-theme="dark"][data-accent="ink"] .pf2-row[aria-checked="true"] .pf2-sw i { background: #18181b; }
/* ---------- 弹层（.uModal 外壳 + pf2-m）：桌面居中对话框，手机底部弹层 ---------- */
.pf2-m .pf2-mc { position: relative; width: min(420px, 100%); max-height: min(640px, calc(100vh - 36px)); overflow: hidden;
  transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.22,1,.36,1); }
.pf2-m.open .pf2-mc { transform: none; }
.pf2-grab { display: none; }
.pf2-mh { display: flex; align-items: center; gap: 11px; padding: 16px 14px 12px 18px; }
.pf2-mh .grow { flex: 1 1 auto; min-width: 0; }
.pf2-mh .grow > b { display: block; font-size: 15.5px; font-weight: 750; }
.pf2-mh .grow > span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted-fg); }
.pf2-mh .icon-btn { align-self: flex-start; }
.pf2-mb { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 18px 6px; }
.pf2-mf { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); }
.pf2-mf .btn { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 11px; }
.pf2-mf .btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring); }
.pf2-mf .btn:disabled { opacity: .6; cursor: progress; }

.pf2-f { margin-top: 12px; }
.pf2-f label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.pf2-pw { position: relative; }
.pf2-pw .input { height: 42px; padding-right: 44px; border-radius: 11px; }
.pf2-pw .input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.pf2-peek { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted-fg); transition: background .12s, color .12s; }
.pf2-peek:hover { background: var(--muted); color: var(--fg); }
.pf2-peek:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 0; }
.pf2-peek[aria-pressed="true"] { color: var(--brand); }
.pf2-err { min-height: 0; font-size: 11.5px; color: var(--red); }
.pf2-err:not(:empty) { margin-top: 5px; }
.pf2-meter { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pf2-meter .pf2-bars { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pf2-meter .pf2-bars i { height: 4px; border-radius: 99px; background: var(--muted); transition: background .2s; }
.pf2-meter[data-s="1"] .pf2-bars i:nth-child(-n+1) { background: #ef4444; }
.pf2-meter[data-s="2"] .pf2-bars i:nth-child(-n+2) { background: #f59e0b; }
.pf2-meter[data-s="3"] .pf2-bars i:nth-child(-n+3) { background: #84cc16; }
.pf2-meter[data-s="4"] .pf2-bars i { background: #22c55e; }
.pf2-meter em { flex: none; font-style: normal; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
.pf2-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pf2-rules li { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 99px; font-size: 11.5px; color: var(--muted-fg); background: var(--muted); transition: color .15s, background .15s; }
.pf2-rules li .ic { opacity: .35; transition: opacity .15s; }
.pf2-rules li.ok { color: var(--green); background: var(--green-bg); }
.pf2-rules li.ok .ic { opacity: 1; }

/* 二次确认 */
.pf2-cf .pf2-mc { width: min(380px, 100%); }
.pf2-cfb { display: flex; flex-direction: column; align-items: center; padding: 22px 22px 16px; text-align: center; }
.pf2-cf-ic { width: 48px; height: 48px; margin-bottom: 12px; border-radius: 15px; display: grid; place-items: center; color: var(--red); background: var(--red-bg); }
.pf2-cf-ic .ic { width: 22px; height: 22px; }
.pf2-cfb > b { font-size: 16px; font-weight: 750; }
.pf2-cf-d { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--muted-fg); }
.pf2-cf-d b { color: var(--fg); font-weight: 650; }
.pf2-cf .pf2-mf { border-top: 0; padding-top: 4px; }

@media (max-width: 719px) {
  .pf2-m.uModal { align-items: flex-end; padding: 0; }
  .pf2-m .pf2-mc { width: 100%; max-height: calc(100vh - 48px); border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0); transform: translateY(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); }
  .pf2-m.open .pf2-mc { transform: none; }
  .pf2-grab { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: var(--border); }
  .pf2-mh { padding-top: 10px; }
  .pf2-cf .pf2-mc { width: 100%; }
}
/* ---------- 响应式 ---------- */
@media (max-width: 359px) {
  .pf2-hero { padding: 14px; }
  .pf2h-av { width: 42px; height: 42px; font-size: 17px; border-radius: 13px; }
  .pf2h-email { font-size: 15px; }
  .pf2h-num b { font-size: 30px; }
  .pf2h-btn { padding: 0 8px; font-size: 13px; }
  .pf2h-btn .ic { display: none; }
  .pf2s-acts .btn .ic { display: none; }
}
@media (min-width: 560px) {
  .pf2h-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .pf2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pf2-hero, .pf2-sub { grid-column: 1 / -1; }
  .pf2-hero { padding: 22px 24px; }
  .pf2h-av { width: 56px; height: 56px; font-size: 22px; border-radius: 17px; }
  .pf2h-email { font-size: 18px; }
  .pf2h-meta { font-size: 12px; }
  .pf2h-mid { display: flex; align-items: flex-end; gap: 20px; margin-top: 22px; }
  .pf2h-bal { flex: 1 1 auto; }
  .pf2h-num b { font-size: 42px; letter-spacing: -1.6px; }
  .pf2h-num small { font-size: 19px; }
  .pf2h-acts { flex: none; width: 300px; margin-top: 0; }
  .pf2h-stats { gap: 8px; margin-top: 18px; }
  .pf2h-st { padding: 11px 14px 10px; }
  .pf2h-st dt { font-size: 11.5px; }
  .pf2h-st dd { font-size: 17px; }
  .pf2h-mark { font-size: 240px; bottom: -64px; right: 12px; }
  .pf2-sub, .pf2-set { padding: 18px 20px; }
  .pf2-sb { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .pf2-sb > .pf2s-tip, .pf2-sb > .pf2-state, .pf2-sb > .pf2-sr { grid-column: 1 / -1; }
  .pf2s-acts { grid-template-columns: repeat(2, auto); }
  .pf2s-acts .btn { padding: 0 16px; }
  .pf2-sb > .pf2-sk-url { height: 44px; }
  .pf2-sb .pf2-sk-btn { width: 104px; }
  .pf2s-tip:last-child { margin-top: 0; }
}
@media (min-width: 1200px) {
  .pf2 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pf2-hero { grid-column: span 7; }
  .pf2-sub { grid-column: span 5; }
  .pf2-set { grid-column: span 6; }
  .pf2h-acts { width: 260px; }
  .pf2-sb { display: flex; align-items: stretch; }
  .pf2s-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf2-sb > .pf2-sk-url { height: 84px; }
  .pf2-sb .pf2-sk-btn { width: auto; }
  .pf2s-tip:last-child { margin-top: auto; }
}

/* ---------- 夜间模式：主卡降亮度（与仪表盘主卡同一组深红渐变） ---------- */
[data-theme="dark"] .pf2-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
[data-theme="dark"] .pf2h-dots { background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); }
[data-theme="dark"] .pf2h-mark { color: rgba(255,255,255,.05); }
[data-theme="dark"] .pf2h-av, [data-theme="dark"] .pf2h-btn.solid { color: #9E2C12; }
[data-theme="dark"] .pf2h-btn.solid { background: rgba(255,255,255,.92); }
[data-theme="dark"] .pf2s-url { background: color-mix(in srgb, var(--muted) 70%, var(--card)); }

@media (prefers-reduced-motion: reduce) {
  .anim-in .pf2-blk, .pf2h-glow, .pf2h-state.ok i, .pf2-sk { animation: none !important; }
  .pf2-sub, .pf2-sub.flash, .pf2-m .pf2-mc, .pf2-sw, .pf2-sw i, .pf2-row .pf2-go { transition: none !important; }
}

/* ============ 我的工单 v2（views/ticket.js，tk- 前缀） ============ */
/* ============ 我的工单 v2（views/ticket.js，tk- 前缀；联调期独立文件，发布时并入 theme.css）
   列表页：手机单列 → ≥720px 主卡插画 / 文案 / 按钮三栏 → ≥1200px 十二栅格（工单列表 8 + 提交建议 4）
   会话页：单列居中（≤880px），工单头卡 + 聊天卡；输入框吸附视口底部；新建工单 / 关闭确认弹层沿用 .uModal 外壳 ============ */
.tk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tk > * { min-width: 0; }
.tk [hidden] { display: none !important; }
.anim-in > .tk { animation: none; }
.anim-in .tk-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.tk .card .pad { padding: 16px; }
.tk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tk-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.tk-head .grow { flex: 1 1 auto; min-width: 0; }
.tk-head .card-title > .ic { color: var(--brand); }
.tk-head .card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-spin { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: tkSpin .7s linear infinite; vertical-align: -2px; }
@keyframes tkSpin { to { transform: rotate(360deg); } }

/* 客服支持主卡：卡片底 + 品牌径向光斑 + 细点阵（与节点雷达主卡同一套语言） */
.tk-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center;
  grid-template-areas: "art info" "acts acts" "stats stats";
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--brand-2) 7%, transparent), transparent 62%),
    var(--card); }
.tk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 8%, transparent 60%); mask-image: linear-gradient(100deg, #000 8%, transparent 60%); }
.tkh-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tkh-glow { position: absolute; right: -80px; top: -110px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent); animation: tkGlow 8s ease-in-out infinite alternate; }
@keyframes tkGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-28px, 20px) scale(1.12); } }
.tkh-art { grid-area: art; position: relative; width: 76px; height: 76px; flex: none; }
.tkh-tile { position: absolute; left: 6px; top: 8px; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -10px var(--brand-ring); }
.tkh-tile .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.tkh-bub { position: absolute; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; background: var(--card);
  box-shadow: 0 0 0 1px var(--border), 0 6px 14px -8px rgba(0,0,0,.25); animation: tkFloat 4.2s ease-in-out infinite; }
.tkh-bub.b1 { right: -6px; top: 0; width: 30px; height: 20px; flex-direction: column; align-items: flex-start; padding: 0 6px; border-bottom-left-radius: 3px; }
.tkh-bub.b1 i { display: block; height: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 55%, var(--muted-fg)); }
.tkh-bub.b1 i:first-child { width: 16px; }
.tkh-bub.b1 i:last-child { width: 10px; opacity: .6; }
.tkh-bub.b2 { left: -4px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 0 0 2.5px var(--card), 0 6px 12px -6px rgba(22,163,74,.6); animation-delay: -2.1s; }
.tkh-bub.b2 .ic { width: 13px; height: 13px; }
@keyframes tkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tkh-info { grid-area: info; min-width: 0; }
.tkh-eye { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); min-width: 0; }
.tkh-eye > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkh-title { margin: 5px 0 0; font-size: 18px; font-weight: 750; letter-spacing: -.3px; line-height: 1.3; }
.tkh-sub { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-fg); }
.tkh-acts { grid-area: acts; display: flex; gap: 8px; margin-top: 14px; }
.tkh-btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; font-size: 13.5px; font-weight: 650; white-space: nowrap; color: var(--fg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border); transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.tkh-btn:hover { background: var(--muted); }
.tkh-btn:active { transform: translateY(1px); }
.tkh-btn.solid { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px var(--brand-ring); }
.tkh-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px var(--brand-ring); }
.tkh-btn:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }
.tkh-btn .ic { color: inherit; }
.tkh-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.tkh-st { min-width: 0; padding: 9px 4px 8px; border-radius: 11px; text-align: center;
  background: color-mix(in srgb, var(--muted) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
.tkh-st b { display: block; font-size: 18px; font-weight: 780; letter-spacing: -.4px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkh-st b small { margin-left: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--muted-fg); }
.tkh-st span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
.tkh-st.on b { color: var(--amber); }
.tkh-st.hot b { color: var(--brand); }

/* 工单列表 */
.tk-tabs { display: flex; gap: 2px; margin-bottom: 8px; padding: 3px; border-radius: 10px; background: var(--muted); }
.tk-tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--muted-fg); white-space: nowrap; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.tk-tab:hover { color: var(--fg); }
.tk-tab.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.tk-tab:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.tk-tab b { font-size: 11px; font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums; }
.tk-rows { display: flex; flex-direction: column; margin: 0 -8px; }
.tk-row { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 8px; border-radius: 12px; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.tk-row + .tk-row::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px solid var(--border); }
.tk-row:hover { background: var(--muted); }
.tk-row:hover::before, .tk-row:hover + .tk-row::before, .tk-row.new::before, .tk-row.new + .tk-row::before { border-color: transparent; }
.tk-row:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.anim-in .tk-row:not(.tk-skel) { animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.12s + var(--k, 0) * 35ms); }
.tkr-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c, var(--brand));
  background: color-mix(in srgb, var(--c, var(--brand)) 11%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--brand)) 16%, transparent); }
.tkr-ic .ic { width: 18px; height: 18px; }
.tkr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tkr-t { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-row.closed .tkr-t { color: var(--muted-fg); font-weight: 600; }
.tkr-new { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 17px; vertical-align: 1px; color: #fff; background: var(--brand); }
.tkr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 11.5px; color: var(--muted-fg); }
.tkr-meta > span { white-space: nowrap; }
.tkr-cat { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 650;
  color: color-mix(in srgb, var(--c, var(--brand)) 82%, var(--fg)); background: color-mix(in srgb, var(--c, var(--brand)) 10%, transparent); }
.tkr-id { font-variant-numeric: tabular-nums; }
.tkr-side { flex: none; display: flex; align-items: center; gap: 6px; }
.tkr-go { color: var(--muted-fg); transition: transform .15s; }
.tk-row:hover .tkr-go { transform: translateX(2px); color: var(--fg); }
/* 有新回复：左侧品牌竖条 + 浅底 */
.tk-row.new { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
.tk-row.new::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.tk-row.new:hover { background: var(--brand-soft); }
/* 状态点：待回复（琥珀 + 脉冲）/ 已回复（绿）/ 已关闭（灰） */
.tk-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.tk-pill i { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.tk-pill.wait { color: var(--amber); background: var(--amber-bg); }
.tk-pill.wait i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.tk-pill.replied { color: var(--green); background: var(--green-bg); }
.tk-pill.closed { color: var(--muted-fg); background: var(--muted); }

/* 骨架 / 空态 */
.tk-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: tkShimmer 1.4s ease-in-out infinite; }
@keyframes tkShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.tk-skel { pointer-events: none; }
.tk-sk.sk-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; }
.tk-sk.sk-a { width: 62%; height: 14px; }
.tk-sk.sk-b { width: 40%; height: 11px; margin-top: 4px; }
.tk-sk.sk-p { width: 58px; height: 24px; flex: none; border-radius: 99px; }
.tk-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 8px; padding: 30px 16px 28px; text-align: center;
  border-radius: 14px; border: 1px dashed var(--border); }
.tke-ic { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.tke-ic .ic { width: 24px; height: 24px; }
.tk-empty > b { font-size: 15px; font-weight: 700; }
.tk-empty > p { margin: 0 0 10px; max-width: 320px; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); }

/* 提交建议 */
.tk-tips .card-title > .ic { color: #f59e0b; }
.tkt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tkt-step { display: flex; gap: 11px; min-width: 0; }
.tkt-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: var(--brand); background: var(--brand-soft); font-variant-numeric: tabular-nums; }
.tkt-step .grow { flex: 1 1 auto; min-width: 0; }
.tkt-step b { display: block; font-size: 13px; font-weight: 650; line-height: 24px; }
.tkt-step p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted-fg); }
.tkt-link { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12px; font-weight: 650; color: var(--brand); border-radius: 6px; }
.tkt-link:hover .ic { transform: translateX(2px); }
.tkt-link .ic { transition: transform .15s; }
.tkt-link:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }
.tkt-warn { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.55;
  color: var(--amber); background: var(--amber-bg); }
.tkt-warn .ic { margin-top: 2px; }
/* ---------- 会话页 ---------- */
.tk-chat { width: 100%; max-width: 880px; margin: 0 auto; gap: 12px; }
.tkc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tkc-back { flex: none; margin-left: -8px; }
.tkc-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted-fg); }
.tkc-head { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 14px 16px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--c, var(--brand)) 9%, transparent), transparent 60%), var(--card); }
.tkc-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, #000 4%, transparent 46%); mask-image: linear-gradient(100deg, #000 4%, transparent 46%); }
.tkc-hrow { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.tkc-hrow .grow { flex: 1 1 auto; min-width: 0; }
.tkc-title { margin: 0 0 6px; font-size: 16px; font-weight: 720; letter-spacing: -.2px; line-height: 1.4; overflow-wrap: anywhere; }
.tkc-hside { flex: none; }
.tkc-hacts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tkc-hint { flex: 1 1 200px; min-width: 0; font-size: 12px; color: var(--muted-fg); }
.tkc-hacts .btn { flex: none; }
.tkc-close .ic { color: var(--green); }
.tkc-hrow .tk-sk.sk-a { width: 58%; height: 16px; margin-top: 2px; }
.tkc-hrow .tk-sk.sk-b { width: 36%; margin-top: 9px; }

/* 聊天卡：线程 + 吸附输入框 */
.tkc-card { overflow: visible; }
.tkc-thread { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 12px; min-height: 220px; }
.tkc-thread > .tk-empty { margin: 16px 0; }
.tkc-day { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); }
.tkc-day::before, .tkc-day::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.tkc-day span { flex: none; padding: 2px 10px; border-radius: 99px; background: var(--muted); }
.tkc-msg { display: flex; align-items: flex-end; gap: 8px; min-width: 0; margin-top: 10px; }
.tkc-msg.cont { margin-top: 0; }
.tkc-msg.me { justify-content: flex-end; }
.tkc-av { width: 30px; height: 30px; flex: none; align-self: flex-start; margin-top: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 4px 10px -5px var(--brand-ring); }
.tkc-msg.cont .tkc-av { visibility: hidden; height: 0; margin-top: 0; }
.tkc-av .ic { width: 16px; height: 16px; }
.tkc-col { display: flex; flex-direction: column; min-width: 0; max-width: min(78%, 560px); }
.tkc-msg.me .tkc-col { align-items: flex-end; }
.tkc-who { margin: 0 4px 4px; font-size: 11.5px; font-weight: 650; color: var(--muted-fg); }
.tkc-bub { padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.tkc-msg.them .tkc-bub { background: var(--muted); color: var(--fg); border-top-left-radius: 5px; }
.tkc-msg.them.cont .tkc-bub { border-top-left-radius: 16px; border-bottom-left-radius: 5px; }
.tkc-msg.me .tkc-bub { color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--brand-2))); border-top-right-radius: 5px; box-shadow: 0 6px 14px -10px var(--brand-ring); }
.tkc-msg.me.cont .tkc-bub { border-top-right-radius: 16px; border-bottom-right-radius: 5px; }
.tkc-bub a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.tkc-msg.them .tkc-bub a { color: var(--brand); }
.tkc-bub a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 3px; }
.tkc-time { display: inline-flex; align-items: center; gap: 5px; margin: 4px 4px 0; font-size: 10.5px; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.tkc-time .tk-spin { width: 10px; height: 10px; border-width: 1.5px; }
.tkc-msg.pending .tkc-bub { opacity: .72; }
.anim-in .tkc-msg { animation: none; }
.tkc-msg.pending { animation: tkPop .3s cubic-bezier(.22,1,.36,1); }
@keyframes tkPop { from { opacity: 0; transform: translateY(6px); } }
.tkc-none { padding: 40px 0; text-align: center; font-size: 12.5px; color: var(--muted-fg); }
.tkc-end { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 2px; font-size: 11.5px; color: var(--muted-fg); text-align: center; }
.tkc-end.wait i { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--amber); color: var(--amber); }
.tkc-end.wait i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dotPing 2.4s ease-out infinite; }
.tkc-sk { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.tkc-sk.me { justify-content: flex-end; }
.tk-sk.sk-av { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.tk-sk.sk-bub { height: 52px; border-radius: 16px; }
.tk-sk.sk-bub.w1 { width: 62%; }
.tk-sk.sk-bub.w2 { width: 46%; height: 40px; }
.tk-sk.sk-bub.w3 { width: 54%; height: 64px; }

/* 输入框：吸附视口底部（卡内 sticky，滚到卡片末尾自然归位） */
.tkc-composer { position: sticky; bottom: 0; z-index: 5; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); border-radius: 0 0 calc(var(--radius) + 2px) calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.tkc-box { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 14px; border: 1px solid var(--input); background: var(--bg);
  transition: border-color .12s, box-shadow .12s; }
.tkc-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.tkc-input { flex: 1 1 auto; min-width: 0; min-height: 34px; max-height: 168px; padding: 7px 0; border: 0; outline: none; resize: none; background: transparent;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.tkc-input::placeholder { color: var(--muted-fg); }
.tkc-input[readonly] { opacity: .6; }
.tkc-send { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 14px -8px var(--brand-ring); transition: opacity .15s, transform .15s; }
.tkc-send .ic { width: 17px; height: 17px; margin: 1px 1px 0 0; }
.tkc-send:hover:not(:disabled) { transform: translateY(-1px); }
.tkc-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.tkc-send.busy { opacity: .85; cursor: progress; }
.tkc-send:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }
.tkc-meta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 4px 0; font-size: 11px; color: var(--muted-fg); }
.tkc-count { font-variant-numeric: tabular-nums; }
.tkc-count.warn { color: var(--red); font-weight: 650; }
.tkc-locked { display: flex; align-items: center; gap: 10px; padding: 4px 2px; min-width: 0; }
.tkc-locked > .ic { width: 20px; height: 20px; flex: none; color: var(--muted-fg); }
.tkc-locked .grow { flex: 1 1 auto; min-width: 0; }
.tkc-locked b { display: block; font-size: 13px; font-weight: 650; }
.tkc-locked span { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.5; color: var(--muted-fg); }
.tkc-locked .btn { flex: none; }
/* 会话页把幸运转盘悬浮球默认位置抬到输入框之上（拖动过的位置是行内样式，不受影响） */
body.tk-chatting .wfab { bottom: 184px; }
/* ---------- 新建工单对话框（.uModal 外壳；手机为底部抽屉） ---------- */
.tk-new .uModal-card { width: min(540px, 100%); max-height: min(88vh, 720px); overflow: hidden; }
.tk-new.open .uModal-card { animation: tkDlgIn .28s cubic-bezier(.22,1,.36,1); }
@keyframes tkDlgIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tkn-hic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.tkn-hic .ic { width: 15px; height: 15px; }
.tkn-steps { padding: 12px 16px 0; }
.tkn-ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.tkn-st { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.tkn-st + .tkn-st::before { content: ""; flex: 1 1 auto; min-width: 10px; height: 2px; border-radius: 2px; background: var(--border); }
.tkn-st.done + .tkn-st::before, .tkn-st.cur::before { background: color-mix(in srgb, var(--brand) 55%, var(--border)); }
.tkn-st { flex: 1 1 auto; }
.tkn-st:first-child { flex: none; }
.tkn-n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--muted); color: var(--muted-fg); font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.tkn-n .ic { width: 12px; height: 12px; }
.tkn-st.cur { color: var(--fg); }
.tkn-st.cur .tkn-n { color: #fff; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tkn-st.done .tkn-n { color: var(--brand); background: var(--brand-soft); }
.tkn-l { white-space: nowrap; }
.tkn-body { flex: 1 1 auto; padding: 14px 16px 16px; }
.tkn-lead { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.tkn-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tkn-cat { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px; border-radius: 14px; text-align: left;
  border: 1px solid var(--border); background: var(--card); transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.tkn-cat:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--border)); transform: translateY(-1px); }
.tkn-cat:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }
.tkn-cat.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.tkn-cic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.tkn-cic .ic { width: 19px; height: 19px; }
.tkn-cat .grow { flex: 1 1 auto; min-width: 0; }
.tkn-cat b { display: block; font-size: 13.5px; font-weight: 650; }
.tkn-cat .grow > span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted-fg); }
.tkn-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--border); transition: border .15s; }
.tkn-cat.on .tkn-radio { border: 5.5px solid var(--c); }
.tkn-ctx { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-width: 0; }
.tkn-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; height: 28px; padding: 0 10px; border-radius: 99px;
  font-size: 12px; font-weight: 650; color: color-mix(in srgb, var(--c, var(--brand)) 82%, var(--fg)); background: color-mix(in srgb, var(--c, var(--brand)) 10%, var(--card)); transition: background .15s; }
.tkn-chip.subj { color: var(--fg); background: var(--muted); }
.tkn-chip b { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkn-chip > span { flex: none; font-weight: 500; color: var(--muted-fg); }
.tkn-chip:hover > span { color: var(--fg); text-decoration: underline; }
.tkn-chip:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.tkn-lbl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 650; }
.tkn-lbl span { font-size: 11.5px; font-weight: 500; color: var(--muted-fg); }
.tkn-field { position: relative; }
.tkn-in { height: 42px; padding-right: 64px; font-size: 14px; color: var(--fg); }
.tkn-ta { display: block; height: 168px; min-height: 120px; max-height: 44vh; padding: 10px 12px 26px; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--fg); }
.tkn-in[aria-invalid="true"], .tkn-ta[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.tkn-cnt { position: absolute; right: 11px; bottom: 9px; font-size: 11px; color: var(--muted-fg); pointer-events: none; font-variant-numeric: tabular-nums;
  padding: 0 2px; background: var(--bg); border-radius: 4px; }
.tkn-in + .tkn-cnt { bottom: auto; top: 50%; transform: translateY(-50%); }
.tkn-cnt.hint { color: var(--amber); }
.tkn-cnt.warn { color: var(--red); font-weight: 650; }
.tkn-err { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--red); }
.tkn-sugs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--muted-fg); }
.tkn-sug { height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--fg); border: 1px solid var(--border); background: var(--card); transition: background .15s, border-color .15s; }
.tkn-sug:hover { background: var(--muted); }
.tkn-sug:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.tkn-tips { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; padding: 0; }
.tkn-tips li { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 11.5px; color: var(--muted-fg); background: var(--muted); }
.tkn-notice { display: flex; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--amber) 85%, var(--fg)); background: var(--amber-bg); border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); }
.tkn-notice > .ic { margin-top: 3px; color: var(--amber); }
.tkn-notice .grow { min-width: 0; overflow-wrap: anywhere; }
.tkn-nlink { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 12.5px; font-weight: 700; color: var(--amber); border-radius: 4px; }
.tkn-nlink:hover { text-decoration: underline; }
.tkn-nlink:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.tkn-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.tkn-kbd { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkn-foot .btn { flex: none; }
.tkn-next { min-width: 112px; }
.tkn-next:disabled { opacity: .7; cursor: progress; }

/* 关闭确认 */
.tk-cfm .uModal-card { width: min(380px, 100%); }
.tk-cfm.open .uModal-card { animation: tkDlgIn .24s cubic-bezier(.22,1,.36,1); }
.tkf-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 20px 6px; text-align: center; }
.tkf-ic { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px; display: grid; place-items: center; color: var(--amber); background: var(--amber-bg); }
.tkf-ic .ic { width: 22px; height: 22px; }
.tkf-body b { font-size: 15.5px; font-weight: 700; }
.tkf-body p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); }
.tkf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 20px 20px; }
@keyframes tkSheetIn { from { transform: translateY(40px); opacity: .4; } }

/* 夜间模式 */
[data-theme="dark"] .tkr-ic, [data-theme="dark"] .tkn-cic { color: color-mix(in srgb, var(--c, var(--brand)) 62%, #fff); background: color-mix(in srgb, var(--c, var(--brand)) 17%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--brand)) 26%, transparent); }
[data-theme="dark"] .tkr-cat, [data-theme="dark"] .tkn-chip:not(.subj) { color: color-mix(in srgb, var(--c, var(--brand)) 60%, #fff); background: color-mix(in srgb, var(--c, var(--brand)) 16%, transparent); }
[data-theme="dark"] .tkh-tile, [data-theme="dark"] .tkc-av { background: linear-gradient(135deg, #9E2C12, #7C1B10); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
[data-theme="dark"] .tkh-btn.solid, [data-theme="dark"] .tkc-send { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 82%, #000), color-mix(in srgb, var(--brand-2) 78%, #000)); box-shadow: none; }
[data-theme="dark"] .tkc-msg.me .tkc-bub { background: color-mix(in srgb, var(--brand) 58%, #1c0b08); box-shadow: none; }
[data-theme="dark"] .tkh-bub { box-shadow: 0 0 0 1px var(--border); }
[data-theme="dark"] .tkh-bub.b2 { box-shadow: 0 0 0 2.5px var(--card); }
[data-theme="dark"] .tkn-st.cur .tkn-n { background: color-mix(in srgb, var(--brand) 82%, #000); }
[data-theme="dark"] .tkn-cat.on { background: color-mix(in srgb, var(--c) 12%, var(--card)); }

/* 小屏 */
@media (max-width: 719px) {
  .tk-new { align-items: flex-end; padding: 0; }
  .tk-new .uModal-card { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .tk-new.open .uModal-card { animation-name: tkSheetIn; }
  .tkc-input, .tkn-in, .tkn-ta { font-size: 16px; }
  .tkc-thread { padding: 14px 12px 10px; }
  .tkc-col { max-width: 84%; }
  .tkc-composer { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 479px) {
  .tkr-go, .tkr-id { display: none; }
  .tkc-lbl { display: none; }
  .tkn-kbd { display: none; }
  .tkn-foot { justify-content: flex-end; }
  .tkh-btn { font-size: 13px; padding: 0 8px; }
  .tk-row { gap: 10px; }
  .tkc-locked { flex-wrap: wrap; }
  .tkc-locked .btn { width: 100%; }
}
@media (max-width: 419px) {
  .tkn-st:not(.cur) .tkn-l { display: none; }
}

/* ≥720px：主卡三栏，列表与建议通栏 */
@media (min-width: 720px) {
  .tk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tk-hero, .tk-list, .tk-tips { grid-column: 1 / -1; }
  .tk .card .pad { padding: 18px 20px; }
  .tk-hero { padding: 22px 24px; column-gap: 22px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art info acts" "stats stats stats"; }
  .tkh-art { width: 92px; height: 92px; }
  .tkh-tile { left: 8px; top: 10px; width: 72px; height: 72px; border-radius: 22px; }
  .tkh-tile .ic { width: 34px; height: 34px; }
  .tkh-title { font-size: 21px; }
  .tkh-sub { font-size: 12.5px; max-width: 480px; }
  .tkh-acts { flex-direction: column; width: 148px; margin-top: 0; }
  .tkh-btn { flex: none; }
  .tkh-stats { gap: 8px; margin-top: 18px; }
  .tkh-st { padding: 11px 14px 10px; text-align: left; }
  .tkh-st b { font-size: 22px; }
  .tkh-st span { font-size: 11.5px; }
  .tk-tabs { display: inline-flex; max-width: 100%; }
  .tk-tab { flex: none; padding: 0 14px; }
  .tkt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
  .tkc-head { padding: 18px 20px; }
  .tkc-title { font-size: 18px; }
  .tkc-thread { padding: 20px 22px 14px; min-height: 320px; }
  .tkc-composer { padding: 12px 18px; }
}
/* ≥1200px：十二栅格，主卡统计并入首行；列表 8 + 建议 4 */
@media (min-width: 1200px) {
  .tk { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tk-hero { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) minmax(300px, 360px) auto; grid-template-areas: "art info stats acts"; }
  .tkh-stats { margin-top: 0; }
  .tk-list { grid-column: span 8; }
  .tk-tips { grid-column: span 4; align-self: start; }
  .tkt-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* 会话页始终单列（双类选择器压过上面的栅格） */
.tk.tk-chat { grid-template-columns: minmax(0, 1fr); }
.tk.tk-chat > * { grid-column: auto; }

@media (prefers-reduced-motion: reduce) {
  .anim-in .tk-blk, .anim-in .tk-row, .tkh-glow, .tkh-bub, .tk-pill.wait i::after, .tkc-end.wait i::after, .tk-sk, .tkc-msg.pending,
  .tk-new.open .uModal-card, .tk-cfm.open .uModal-card { animation: none !important; }
  .tk-spin { animation-duration: 1.6s; }
  .tkn-cat:hover, .tkh-btn.solid:hover, .tkc-send:hover:not(:disabled), .tk-row:hover .tkr-go { transform: none; }
}

/* ============ 幸运大转盘 v2（views/gift.js，gf- 前缀；转盘本体沿用共享 .wgw-*）
   手机单列 → ≥720px 主卡左右分栏、奖池 / 记录并排 → ≥1200px 十二栅格（主卡 8 + 三格 4；奖池 7 + 记录 5；规则通栏） ============ */
.gf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.gf > * { min-width: 0; }
.gf-in .gf-blk, .gf-loading .gf-blk { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.gf .card .pad { padding: 16px; }
.gf .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 35%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: gfShimmer 1.4s ease-in-out infinite; }
.gf-hero .sk { background: linear-gradient(90deg, rgba(255,255,255,.14) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.14) 70%); background-size: 300% 100%; }
@keyframes gfShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 主卡（品牌渐变 + 光斑 + 点阵） ---------- */
.gf-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 18px 16px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background:
    radial-gradient(120% 170% at 10% -24%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(90% 130% at 90% 4%, rgba(255,214,128,.34), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 38%, var(--brand-2) 72%, #ffb066 106%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 16px 36px -14px var(--brand-ring); }
[data-theme="dark"] .gf-hero {
  background:
    radial-gradient(120% 150% at 12% -20%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(96% 130% at 92% 0%, rgba(255,200,110,.16), transparent 52%),
    linear-gradient(135deg, #3F0D08 0%, #7C1B10 40%, #9E2C12 74%, #A84A1B 108%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px -18px rgba(0,0,0,.6); }
.gfh-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.gfh-glow { position: absolute; right: -80px; top: -100px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,0)); animation: gfGlow 7s ease-in-out infinite alternate; }
.gfh-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(250deg, #000 6%, transparent 48%); mask-image: linear-gradient(250deg, #000 6%, transparent 48%); }
@keyframes gfGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 18px) scale(1.12); } }

.gfh-wheel { position: relative; flex: none; width: 288px; height: 288px; display: grid; place-items: center; }
.gfh-halo { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,236,170,.34), rgba(255,236,170,0) 78%); pointer-events: none; }
.gf-hero .wgw-stage::after { box-shadow: 0 22px 40px rgba(53,8,4,.38); }
.gf-hero .wgw-hub:disabled { cursor: not-allowed; filter: saturate(.55) brightness(.96); }
.gf-hero .wgw-hub:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gf-skw { width: 260px; height: 260px; border-radius: 50% !important; }

.gfh-info { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.gfh-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gfh-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gfh-chip .ic { width: 14px; height: 14px; }
.gfh-state { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(53,8,4,.16); white-space: nowrap; }
.gfh-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gfh-state.ok { color: #15803d; }
.gfh-state.ok i { animation: gfBlink 2s ease-in-out infinite; }
.gfh-state.off { color: #b45309; }
.gfh-state.lock { color: #52525b; }
@keyframes gfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.gfh-k { margin-top: 14px; font-size: 12px; font-weight: 600; opacity: .9; }
.gfh-n { display: flex; align-items: baseline; gap: 4px; line-height: 1; margin-top: 4px; }
.gfh-n b { font-size: 46px; font-weight: 820; letter-spacing: -1.6px; text-shadow: 0 2px 12px rgba(53,8,4,.18); }
.gfh-n small { font-size: 14px; font-weight: 650; opacity: .9; }
.gfh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gfh-tile { min-width: 0; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); display: flex; flex-direction: column; gap: 3px; }
.gfh-tile span { font-size: 11.5px; opacity: .86; white-space: nowrap; }
.gfh-tile b { font-size: 18px; font-weight: 780; line-height: 1.1; white-space: nowrap; }
.gfh-tile b small { font-size: 11.5px; font-weight: 600; opacity: .8; }
.gfh-act { margin-top: 14px; }
.gfh-cta { width: 100%; min-height: 50px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 780; letter-spacing: .5px;
  background: linear-gradient(180deg, #FFF8E6, #FFE2A0); color: #7A3A00;
  box-shadow: 0 10px 22px -8px rgba(53,8,4,.5), inset 0 -2px 0 rgba(180,110,0,.25), inset 0 1px 0 #fff; transition: transform .15s ease, filter .15s ease; }
.gfh-cta .ic { width: 18px; height: 18px; }
.gfh-cta:hover:not(:disabled) { filter: brightness(1.03); transform: translateY(-1px); }
.gfh-cta:active:not(:disabled) { transform: translateY(1px); }
.gfh-cta:disabled { cursor: not-allowed; opacity: .78; }
.gfh-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gfh-tip { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.55; opacity: .86; }
.gf-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.2px solid rgba(122,58,0,.25); border-top-color: #7A3A00; animation: gfSpin .8s linear infinite; }
@keyframes gfSpin { to { transform: rotate(360deg); } }

/* 结果条 */
.gfh-res { display: none; margin-top: 12px; padding: 11px 12px; border-radius: 14px; align-items: center; gap: 10px;
  background: rgba(255,255,255,.95); color: var(--fg, #18181b); box-shadow: 0 10px 24px -10px rgba(53,8,4,.45); }
.gfh-res.show { display: flex; animation: gfPop .45s cubic-bezier(.2,1.3,.4,1) both; }
.gfh-res > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gfh-res b { font-size: 14px; font-weight: 750; color: #18181b; }
.gfh-res b em { font-style: normal; font-size: 18px; color: #c2410c; }
.gfh-res span { font-size: 11.5px; color: #71717a; }
.gfr-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; }
.gfr-ic .ic { width: 18px; height: 18px; }
.gfh-res.win .gfr-ic { background: linear-gradient(135deg, #FFE9A8, #FFC53D); color: #7A4A00; }
.gfh-res.lose .gfr-ic { background: #f4f4f5; color: #71717a; }
[data-theme="dark"] .gfh-res { background: rgba(24,24,27,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 24px -10px rgba(0,0,0,.6); }
[data-theme="dark"] .gfh-res b { color: #fafafa; }
[data-theme="dark"] .gfh-res b em { color: #fdba74; }
[data-theme="dark"] .gfh-res span { color: #a1a1aa; }
[data-theme="dark"] .gfh-res.lose .gfr-ic { background: #27272a; color: #a1a1aa; }
@keyframes gfPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- 三格 ---------- */
.gf-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.gfk-c { min-width: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.gfk-c + .gfk-c { border-left: 1px solid var(--border); }
.gfk-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.gfk-ic .ic { width: 15px; height: 15px; }
.gfk-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gfk-k { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfk-s { font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfk-v { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.gfk-v b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
.gfk-v small { font-size: 11.5px; color: var(--muted-fg); font-weight: 600; }
.gf .blue { background: color-mix(in srgb, #3b82f6 13%, transparent); color: #2563eb; }
.gf .amber { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #d97706; }
.gf .green { background: color-mix(in srgb, #22c55e 14%, transparent); color: #16a34a; }
.gf .brand { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); }
[data-theme="dark"] .gf .blue { color: #93c5fd; }
[data-theme="dark"] .gf .amber { color: #fcd34d; }
[data-theme="dark"] .gf .green { color: #86efac; }

/* ---------- 卡片通用头 ---------- */
.gf-ch { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.gf-cic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.gf-cic .ic { width: 17px; height: 17px; }
.gf-ct { margin: 0; font-size: 15px; font-weight: 750; }
.gf-cs { margin: 2px 0 0; font-size: 12px; color: var(--muted-fg); }

/* ---------- 奖池 ---------- */
.gfp-g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gfp-t { position: relative; min-width: 0; padding: 14px 6px 11px; border-radius: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .25s ease, transform .25s ease; }
.gfp-t b { font-size: 15px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfp-t span { font-size: 10.5px; color: var(--muted-fg); white-space: nowrap; }
.gfp-t.win { background: color-mix(in srgb, var(--brand) 7%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); }
.gfp-t.win b { color: var(--brand); }
.gfp-t.none b { color: var(--muted-fg); font-size: 13px; font-weight: 700; }
.gfp-t.top { background: linear-gradient(160deg, #FFF3CE, #FFD670); box-shadow: inset 0 0 0 1px rgba(201,138,0,.45), 0 6px 16px -8px rgba(240,165,0,.6); }
.gfp-t.top b { color: #7A4A00; }
.gfp-t.top span { color: #8a5a00; font-weight: 700; }
[data-theme="dark"] .gfp-t.top { background: linear-gradient(160deg, #4a3507, #6b4a0a); box-shadow: inset 0 0 0 1px rgba(255,197,61,.4); }
[data-theme="dark"] .gfp-t.top b { color: #FFE29A; }
[data-theme="dark"] .gfp-t.top span { color: #F5C451; }
.gfp-crown { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 20px; height: 16px; color: #F0A500; filter: drop-shadow(0 1px 2px rgba(122,74,0,.35)); }
.gfp-crown svg { width: 100%; height: 100%; display: block; }
.gfp-t.hit { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); transform: translateY(-2px); }
.gfp-t.top.hit { box-shadow: inset 0 0 0 2px #F0A500, 0 0 0 4px rgba(240,165,0,.25); }

/* ---------- 记录 ---------- */
.gfl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gfl-r { display: flex; align-items: center; gap: 11px; padding: 10px 0; min-width: 0; }
.gfl-r + .gfl-r { border-top: 1px dashed var(--border); }
.gfl-dot { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #FFE9A8, #FFC53D); color: #7A4A00; }
.gfl-dot .ic { width: 15px; height: 15px; }
.gfl-r.lose .gfl-dot { background: var(--muted); color: var(--muted-fg); }
.gfl-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gfl-m b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfl-m span { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; }
.gfl-v { flex: none; font-size: 15px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.gfl-v small { font-size: 11px; font-weight: 700; }
.gfl-tag { flex: none; font-size: 11px; font-weight: 650; color: var(--muted-fg); padding: 3px 8px; border-radius: 99px; background: var(--muted); }
.gf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 8px 14px; color: var(--muted-fg); font-size: 12px; }
.gf-empty b { color: var(--fg); font-size: 13.5px; }
.gf-empty-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--muted); margin-bottom: 6px; }

/* ---------- 规则 ---------- */
.gfr-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gfr-l li { display: flex; gap: 10px; align-items: flex-start; }
.gfr-l li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.gfr-l p { margin: 1px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); }
.gfr-l b { color: var(--fg); }

/* ---------- 空 / 错误态 ---------- */
.gf-state { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.gf-state b { font-size: 15px; }
.gf-state > span:not(.gf-state-ic) { font-size: 12.5px; color: var(--muted-fg); max-width: 320px; margin-bottom: 10px; }
.gf-state-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 11%, transparent); color: var(--brand); margin-bottom: 8px; }
.gf-state-ic .ic { width: 24px; height: 24px; }

/* ---------- 响应式 ---------- */
@media (max-width: 360px) {
  .gfh-wheel { width: 259px; height: 259px; }
  .gf-hero .wgw-stage { transform: scale(.9); }
  .gfp-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gfk-c { padding: 12px 9px; }
  .gfk-v b { font-size: 19px; }
}
@media (max-width: 420px) {
  /* 共享 .wgw-stage 在 ≤420px 会缩到 .9 且以顶部为原点；主卡里改为居中缩放，外框同步缩小 */
  .gf-hero .wgw-stage { transform-origin: center; }
  .gfh-wheel { width: 270px; height: 270px; }
}
@media (min-width: 720px) {
  .gf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf-hero, .gf-kpi, .gf-rules { grid-column: 1 / -1; }
  .gf-hero { flex-direction: row; align-items: center; gap: 28px; padding: 24px 28px; }
  .gfh-wheel { width: 300px; height: 300px; }
  .gfh-info { flex: 1; }
  .gfh-n b { font-size: 54px; }
  .gfp-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gfp-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gf-pool { grid-column: 1 / -1; }
  .gf-hist { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .gf { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gf-hero { grid-column: span 8; }
  .gf-kpi { grid-column: span 4; grid-template-columns: minmax(0, 1fr); align-content: stretch; }
  .gf-kpi .gfk-c { flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px; }
  .gf-kpi .gfk-c + .gfk-c { border-left: 0; border-top: 1px solid var(--border); }
  .gf-kpi .gfk-t { flex: 1; }
  .gf-kpi .gfk-v b { font-size: 24px; }
  .gf-pool { grid-column: span 7; }
  .gf-hist { grid-column: span 5; }
  .gf-rules { grid-column: 1 / -1; }
  .gfr-l { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .gfh-wheel { width: 320px; height: 320px; }
  .gf-hero .wgw-stage { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .gfh-glow, .gfh-state.ok i, .gf .sk, .gf-spin { animation: none; }
  .gf-in .gf-blk, .gf-loading .gf-blk, .gfh-res.show { animation: none; }
  .gfp-t, .gfh-cta { transition: none; }
}

/* ============ 访客主页 v2（views/home.js，hm- 前缀；未登录访问根路径时显示，已登录可经 #/home 访问）
   整页渲染：隐藏侧栏 / 顶栏；背景、地图配色随明暗与强调色变化 ============ */
body.home-mode .sidebar, body.home-mode .topbar, body.home-mode .wfab { display: none !important; }
body.home-mode .main { max-width: none; padding: 0; margin: 0; }
body.home-mode .app { display: block; }
.hm { position: relative; isolation: isolate; min-height: 100dvh; overflow-x: clip; }
.hm-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% -10%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 62%),
    radial-gradient(760px 540px at -6% 30%, color-mix(in srgb, #4e82ff 8%, transparent), transparent 64%),
    radial-gradient(900px 700px at 50% 120%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 66%),
    var(--bg); }
.hm-bg::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%); }
.hm-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px 40px; }

/* 进场 */
.hm-rv { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); }
.hm-rv.in { opacity: 1; transform: none; }

/* 导航 */
.hm-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 max(20px, calc((100vw - 1200px) / 2 + 20px));
  padding-top: env(safe-area-inset-top, 0); transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
.hm-nav.stuck { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 var(--border); }
.hm-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.hm-brand .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
.hm-brand b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .2px; line-height: 1.1; }
.hm-brand small { display: block; font-size: 11px; color: var(--muted-fg); }
.hm-links { display: flex; gap: 4px; margin-left: 12px; }
.hm-links a { height: 34px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted-fg); text-decoration: none; transition: color .15s, background .15s; }
.hm-links a:hover { color: var(--fg); background: var(--muted); }
.hm-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hm-act .btn { text-decoration: none; }
.hm-act .btn .ic { margin-left: 2px; }

/* 主视觉 */
.hm-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 0 18px; align-items: center; }
.hm-kick { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 99px; font-size: 12px; font-weight: 650;
  color: var(--fg); background: color-mix(in srgb, var(--card) 80%, transparent); box-shadow: inset 0 0 0 1px var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hm-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; display: inline-block; }
.hm-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: hmPing 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes hmPing { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.hm-copy h1 { margin: 16px 0 0; font-size: clamp(32px, 7.4vw, 56px); line-height: 1.12; font-weight: 820; letter-spacing: -1.2px; }
.hm-copy h1 em { font-style: normal; background: linear-gradient(110deg, var(--brand) 10%, var(--brand-2) 60%, #ffb066 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-lead { margin: 16px 0 0; max-width: 560px; font-size: 15px; line-height: 1.7; color: var(--muted-fg); }
.hm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hm-big { height: 46px; padding: 0 20px; border-radius: 12px; font-size: 14.5px; font-weight: 700; text-decoration: none; gap: 6px; }
.btn.primary.hm-big { box-shadow: 0 10px 24px -10px var(--brand-ring); }
.btn.primary.hm-big:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 14px 28px -10px var(--brand-ring); }
.hm-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; min-height: 20px; }
.hm-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-fg); }
.hm-trust span.g { color: var(--fg); }
.hm-trust .ic { width: 14px; height: 14px; }

/* 地图舞台 */
.hm-stage { position: relative; border-radius: 22px; padding: 14px; min-width: 0;
  background: color-mix(in srgb, var(--card) 72%, transparent); box-shadow: inset 0 0 0 1px var(--border), 0 30px 60px -30px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-theme="dark"] .hm-stage { background: color-mix(in srgb, #0d0d10 80%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 70px -30px rgba(0,0,0,.8), 0 0 80px -40px var(--brand-ring); }
.hm-map { position: relative; width: 100%; overflow: hidden; border-radius: 14px; }
.hm-cv { position: absolute; inset: 0; display: block; }
.hm-pins { position: absolute; inset: 0; pointer-events: none; }
.hm-hub, .hm-pin { position: absolute; width: 0; height: 0; }
.hm-hub i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent), 0 0 14px var(--brand); }
.hm-hub i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0; animation: hmPing 2.6s cubic-bezier(0,0,.2,1) infinite; animation-delay: var(--d); }
.hm-core { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--pc, #16a34a), 0 0 16px var(--pc, #16a34a); }
.hm-ping { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pc, #16a34a) 45%, transparent), transparent); animation: hmPulse 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes hmPulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.hm-pin.t-premium { --pc: #E09A00; }
.hm-pin.t-opt { --pc: #16a34a; }
.hm-pin.t-normal, .hm-pin.t-none { --pc: #71717a; }
.hm-pin.fail { --pc: #dc2626; }
[data-theme="dark"] .hm-pin.t-premium { --pc: #F5C451; }
[data-theme="dark"] .hm-pin.t-opt { --pc: #4ade80; }
.hm-lbl { position: absolute; left: 12px; top: -13px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px; white-space: nowrap;
  font-size: 11.5px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: inset 0 0 0 1px var(--border), 0 6px 16px -8px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: hmLbl .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d) + .4s); }
.hm-lbl.off { display: none; }
.hm-lbl b { font-weight: 750; }
.hm-lbl em { font-style: normal; font-weight: 700; color: var(--pc, var(--green)); font-variant-numeric: tabular-nums; }
.hm-lbl em.f { color: var(--red); }
@keyframes hmLbl { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hm-sbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; font-size: 11.5px; color: var(--muted-fg); }
.hm-hud { display: inline-flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; }
.hm-hud b { display: inline-flex; align-items: center; gap: 6px; color: #16a34a; font-weight: 800; letter-spacing: .8px; }
[data-theme="dark"] .hm-hud b { color: #4ade80; }
.hm-hud .hm-live { width: 6px; height: 6px; }
.hm-legend { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.hm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hm-legend i { width: 14px; height: 0; border-top: 2px solid; }
.hm-legend .pm i { border-color: #E09A00; }
.hm-legend .op i { border-color: #16a34a; }
.hm-legend .nm i { border-top: 1.5px dashed #a1a1aa; }
[data-theme="dark"] .hm-legend .pm i { border-color: #F5C451; }
[data-theme="dark"] .hm-legend .op i { border-color: #4ade80; }
.hm-map { background: radial-gradient(ellipse 70% 60% at 62% 45%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%); }

/* 指标 */
.hm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; }
.hm-kpi { position: relative; overflow: clip; min-width: 0; min-height: 118px; padding: 15px; border-radius: 16px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic k" "v v" "s s"; align-items: center; column-gap: 9px;
  background: color-mix(in srgb, var(--card) 78%, transparent); box-shadow: inset 0 0 0 1px var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hm-kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 12%, transparent), transparent); pointer-events: none; }
.hm-kpi > .sk { grid-column: 1 / -1; height: 70px; border-radius: 10px; }
.hm-ki { grid-area: ic; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.hm-ki .ic { width: 15px; height: 15px; }
.hm-kk { grid-area: k; font-size: 12.5px; font-weight: 650; color: var(--muted-fg); }
.hm-kv { grid-area: v; margin-top: 10px; display: flex; align-items: baseline; gap: 3px; font-size: 30px; font-weight: 820; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-kv small { font-size: 13px; font-weight: 650; color: var(--muted-fg); letter-spacing: 0; }
.hm-ks { grid-area: s; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted-fg); }

/* 区块通用 */
.hm-sec { margin-top: 56px; }
.hm-sh { margin-bottom: 18px; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: .3px; }
.hm-eyebrow .ic { width: 14px; height: 14px; }
.hm-sh h2 { margin: 6px 0 0; font-size: clamp(22px, 4.4vw, 30px); font-weight: 800; letter-spacing: -.6px; }
.hm-sh p { margin: 6px 0 0; font-size: 13px; color: var(--muted-fg); }

/* 实时线路表 */
.hm-board { display: flex; flex-direction: column; gap: 8px; }
.hm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id lat spd" "rt rt rt" "ok ok ok"; align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--card) 82%, transparent); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .2s, transform .2s; }
.hm-rid { grid-area: id; display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-rm.lat { grid-area: lat; }
.hm-rm.spd { grid-area: spd; }
.hm-rm.ok { grid-area: ok; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.hm-rm.ok > span { grid-column: 1; }
.hm-rm.ok .hm-bar { grid-column: 2; grid-row: 1; }
.hm-rm.ok b { grid-column: 3; grid-row: 1; font-size: 13px; }
.hm-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, var(--border)); transform: translateY(-1px); }
.hm-row.sk-row { display: block; }
.hm-row.sk-row .sk { height: 44px; border-radius: 10px; }
.hm-rf { flex: none; width: 34px; height: 24px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.hm-rf svg { width: 100%; height: 100%; display: block; }
.hm-rn { min-width: 0; }
.hm-rn b { display: block; font-size: 14.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rn span { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--muted-fg); }
.hm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-fg); }
.hm-dot.ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.hm-dot.fail { background: var(--red); }
.hm-rm { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.hm-rm.ok { align-items: stretch; }
.hm-rm > span { font-size: 10.5px; color: var(--muted-fg); }
.hm-rm b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-rm b small { font-size: 10.5px; font-weight: 650; color: var(--muted-fg); margin-left: 1px; }
.hm-rm b.good { color: var(--green); }
.hm-rm b.mid { color: var(--amber); }
.hm-rm b.bad { color: var(--red); }
.hm-bar { height: 5px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.hm-bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform-origin: left; animation: hmGrow 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d, 0s) + .2s); }
@keyframes hmGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hm-rt { grid-area: rt; display: flex; flex-wrap: wrap; gap: 5px; }
.hm-tier { height: 22px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; color: var(--muted-fg); background: var(--muted); }
.hm-tier em { font-style: normal; font-weight: 600; opacity: .75; }
.hm-tier.premium { color: #8a5a00; background: linear-gradient(160deg, #FFF6DA, #FFE8A8); box-shadow: inset 0 0 0 1px rgba(201,138,0,.32); }
.hm-tier.opt { color: var(--green); background: var(--green-bg); }
.hm-tier.none { opacity: .6; }
[data-theme="dark"] .hm-tier.premium { color: #F5C451; background: rgba(255,197,61,.12); box-shadow: inset 0 0 0 1px rgba(255,197,61,.28); }
.hm-empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--muted-fg); border-radius: 16px; background: color-mix(in srgb, var(--card) 80%, transparent); box-shadow: inset 0 0 0 1px var(--border); }

/* 能力 */
.hm-feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hm-feat { position: relative; overflow: hidden; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--card) 82%, transparent); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .25s, transform .25s; }
.hm-feat:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 32%, var(--border)), 0 18px 34px -22px var(--brand-ring); }
.hm-fi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.hm-fi .ic { width: 18px; height: 18px; }
.hm-feat b { display: block; margin-top: 14px; font-size: 15px; font-weight: 750; }
.hm-feat p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted-fg); }

/* 步骤 */
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: s; }
.hm-step { position: relative; padding: 18px 18px 18px 20px; border-radius: 16px; background: color-mix(in srgb, var(--card) 82%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
.hm-step .num { font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: .5px; }
.hm-step b { display: block; margin-top: 6px; font-size: 15px; font-weight: 750; }
.hm-step p { margin: 4px 0 0; font-size: 13px; color: var(--muted-fg); }

/* 收尾 */
.hm-final { position: relative; overflow: hidden; isolation: isolate; margin-top: 64px; padding: 44px 22px; border-radius: 24px; text-align: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, #350804) 0%, var(--brand) 40%, var(--brand-2) 78%, #ffb066 112%);
  box-shadow: 0 30px 60px -30px var(--brand-ring); }
[data-theme="dark"] .hm-final { background: linear-gradient(135deg, #3F0D08 0%, #7C1B10 42%, #9E2C12 76%, #A84A1B 110%); }
.hm-final-fx { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.3px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%); }
.hm-final h2 { margin: 0; font-size: clamp(22px, 4.6vw, 32px); font-weight: 820; letter-spacing: -.6px; }
.hm-final p { margin: 10px 0 0; font-size: 14px; opacity: .88; }
.hm-final .hm-cta { justify-content: center; }
.btn.hm-inv { background: #fff; color: #7a1a0c; box-shadow: 0 12px 26px -12px rgba(53,8,4,.6); }
.btn.hm-inv:hover { transform: translateY(-1px); }
.btn.hm-ghost { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.36); }
.btn.hm-ghost:hover { background: rgba(255,255,255,.2); }
.hm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 28px 2px 8px; font-size: 12px; color: var(--muted-fg); }

/* 响应式 */
@media (max-width: 639px) {
  .hm-links, .hm-login { display: none; }
  .hm-nav { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .hm-main { padding: 0 14px 30px; }
  .hm-stage { padding: 8px; border-radius: 18px; }
  .hm-sbar { padding: 4px 6px 8px; font-size: 11px; }
  .hm-legend { gap: 9px; }
  .hm-lbl { height: 22px; padding: 0 6px; gap: 4px; font-size: 10.5px; }
  .hm-kv { font-size: 26px; }
  .hm-rm b { font-size: 15px; }
}
@media (min-width: 640px) {
  .hm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hm-row { grid-template-columns: minmax(170px, 1.1fr) 84px 104px minmax(150px, 1fr) auto; grid-template-areas: "id lat spd ok rt"; padding: 14px 20px; }
  .hm-rm.ok { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 8px; }
  .hm-rm.ok > span { grid-column: 1; grid-row: 1; }
  .hm-rm.ok b { grid-column: 2; grid-row: 1; }
  .hm-rm.ok .hm-bar { grid-column: 1 / -1; grid-row: 2; }
  .hm-rt { justify-content: flex-end; }
  .hm-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-final { padding: 60px 30px; }
}
@media (min-width: 1080px) {
  .hm-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; padding: 48px 0 6px; }
  .hm-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-rv { opacity: 1; transform: none; transition: none; }
  .hm-live::after, .hm-hub i::after, .hm-ping, .hm-lbl, .hm-bar em { animation: none !important; }
  .hm-ping { opacity: .5; }
}

/* ===== 举报诈骗 v2（views/fraud_report.js，fr- 前缀） ===== */
.fr-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.fr-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fr-label{font-size:12.5px;font-weight:650;color:var(--fg)}
.fr-hint{font-size:11.5px;line-height:1.55;color:var(--muted-fg)}
.fr-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr-ta{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.55}
.fr-err{margin:0 0 12px;padding:9px 12px;border-radius:9px;background:rgba(211,51,51,.08);color:#c62828;font-size:12px;line-height:1.5}
.fr-ok{text-align:center;padding:18px 6px 6px}
.fr-ok-ic{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand)}
.fr-ok-ic .ic{width:24px;height:24px}
.fr-list{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.fr-list li{position:relative;padding-left:14px;font-size:12px;line-height:1.55;color:var(--muted-fg)}
.fr-list li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.fr-sep{height:1px;background:var(--border);margin:14px 0}
.fr-steps{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.fr-steps li{display:flex;gap:8px;font-size:12px;line-height:1.55;color:var(--muted-fg)}
.fr-steps li b{flex:0 0 auto;color:var(--fg);font-weight:650}
@media(max-width:900px){.fr-wrap{grid-template-columns:1fr}}
@media(max-width:600px){.fr-row{grid-template-columns:1fr}}

/* ===== DNS 污染检测 v2（views/dns_check.js，dg- 前缀） ===== */
.dg-hero{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dg-hero-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);flex:0 0 auto}
.dg-hero-ic .ic{width:20px;height:20px}
.dg-hero .grow{flex:1;min-width:180px}
.dg-progress{margin-top:10px;font-size:12px;color:var(--muted-fg)}
.dg-table{margin-top:10px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dg-tr{display:grid;grid-template-columns:1.6fr .8fr .7fr .9fr;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);font-size:12px}
.dg-tr:first-child{border-top:0}
.dg-th{background:var(--muted);font-size:11px;color:var(--muted-fg);font-weight:650}
.dg-name{display:flex;flex-direction:column;min-width:0}
.dg-name b{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-name em{font-style:normal;font-size:10.5px;color:var(--muted-fg);margin-top:1px}
.dg-pill{font-style:normal;display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650}
.dg-pill.ok{background:rgba(34,160,90,.12);color:#1d8a4e}
.dg-pill.bad{background:rgba(211,51,51,.12);color:#c62828}
.dg-pill.warn{background:rgba(230,160,40,.14);color:#a86a00}
.dg-pill.muted{background:var(--muted);color:var(--muted-fg)}
.dg-best{margin-top:12px;padding:11px 13px;border-radius:10px;background:var(--brand-soft);font-size:13px;line-height:1.5}
.dg-rec-list{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.dg-rec-item{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px}
.dg-rec-item code{font-size:11px;color:var(--muted-fg);word-break:break-all}
.dg-code{margin-top:10px;background:var(--muted);border-radius:10px;padding:10px 12px;overflow:auto}
.dg-code pre{margin:0;font-size:11.5px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dg-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dg-notes{margin:9px 0 0;padding-left:18px;font-size:12px;line-height:1.7;color:var(--muted-fg)}
.dg-empty{padding:18px 8px;text-align:center;font-size:12.5px;color:var(--muted-fg)}
@media(max-width:600px){.dg-tr{grid-template-columns:1.5fr .7fr .55fr .85fr;padding:9px 10px;font-size:11.5px}}

/* ===== DNS 使用教程（dg-step / dg-tabs / dg-pane） ===== */
.dg-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.dg-step{display:flex;gap:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.dg-step b{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:11px;display:flex;align-items:center;justify-content:center}
.dg-step div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dg-step strong{font-size:12px;font-weight:650;color:var(--fg)}
.dg-step span{font-size:11px;color:var(--muted-fg);line-height:1.45}
.dg-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.dg-tab{border:0;background:transparent;color:var(--muted-fg);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer;font-family:inherit}
.dg-tab:hover{background:var(--muted);color:var(--fg)}
.dg-tab.on{background:var(--brand-soft);color:var(--brand)}
.dg-pane{font-size:12.5px;line-height:1.7;color:var(--muted-fg)}
.dg-pane ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.dg-pane li{line-height:1.7}
.dg-pane code{padding:1px 5px;border-radius:5px;background:var(--muted);color:var(--fg);font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.dg-tip{margin:8px 0 0;font-size:11.5px;color:var(--muted-fg)}
.dg-faq{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.dg-faq details{border-radius:8px}
.dg-faq summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--fg);padding:7px 4px;list-style:none}
.dg-faq summary::-webkit-details-marker{display:none}
.dg-faq summary::before{content:"+";display:inline-block;width:14px;color:var(--muted-fg)}
.dg-faq details[open] summary::before{content:"−"}
.dg-faq p{margin:0 0 8px 18px;font-size:11.5px;line-height:1.7;color:var(--muted-fg)}
@media(max-width:700px){.dg-steps{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.dg-steps{grid-template-columns:1fr}}

/* ===== 本机 DNS 检查（dg-local） ===== */
.dg-local{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dg-local .grow{flex:1;min-width:200px}
.dg-local-box{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--muted);font-size:12.5px;line-height:1.6}
.dg-local-box span{color:var(--muted-fg)}
.dg-local-box b{color:var(--fg);font-weight:650;word-break:break-all}
.dg-local-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media(max-width:520px){.dg-local-box{grid-template-columns:84px minmax(0,1fr)}}
.ndsp-d { fill: var(--brand); }
.nd-card.bad .ndsp-d, .nd-card.off .ndsp-d { fill: var(--muted-fg); }

/* 多域名检测（DomainHub） */
.db-domains .dbd-list { margin-top: 10px; }
.dbd-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.dbd-row:first-child { border-top: 0; padding-top: 0; }
.dbd-row:last-child { padding-bottom: 0; }
.dbd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--border); }
.dbd-dot.ok { background: var(--green); }
.dbd-dot.warn { background: var(--amber); }
.dbd-dot.slow { background: #f97316; }
.dbd-dot.bad { background: var(--red); }
.dbd-main { flex: 1 1 auto; min-width: 0; }
.dbd-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbd-domain { margin-top: 2px; font-size: 11px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbd-lat { flex: none; min-width: 68px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--muted-fg); }
.dbd-lat.ok { color: var(--green); }
.dbd-lat.warn { color: var(--amber); }
.dbd-lat.slow { color: #f97316; }
.dbd-lat.bad { color: var(--red); }
.dbd-retest { flex: none; border: 0; background: transparent; color: var(--brand); font-size: 11px; cursor: pointer; padding: 2px 0 2px 4px; }
.dbd-retest:disabled { opacity: .4; cursor: default; }
.dbd-foot { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--muted-fg); }
@media (max-width: 520px) {
  .dbd-retest { display: none; }
  .dbd-lat { min-width: 58px; }
}

/* DomainHub：桌面 12 栅格下占 8 列，和公告并排；无公告时通栏 */
@media (min-width: 720px) {
  .db-domains { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .db-domains { grid-column: span 8; }
  .db.no-notice .db-domains { grid-column: 1 / -1; }
}

/* 宽屏下多域名列表两列，避免卡片过高、和公告卡高度失衡 */
@media (min-width: 1200px) {
  .db-domains .dbd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .db-domains .dbd-row { border-top: 0; padding: 9px 0; }
  .db-domains .dbd-row:nth-child(n+3) { border-top: 1px solid var(--border); }
  .db-domains .dbd-row:last-child { padding-bottom: 9px; }
}

/* 订阅导入：多线路选择 */
.sub-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.sub-lines-label { font-size: 11px; color: var(--muted-fg); margin-right: 2px; }
.sub-line { border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; line-height: 1.3; cursor: pointer; }
.sub-line:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.sub-line.on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }