/*
 * 赛博宇宙 · 用户端高保真原型样式
 * 变量与取值依据 docs/2-设计/前端/UI规范.md（§1 颜色、§2 字体字号、§3 间距圆角与动效）。
 * 正式工程（web_wallet）沿用同名变量；本文件为原型用，零外部依赖。
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Orbitron:wght@700;900&display=swap");

:root {
  /* §1.1 基础色板 */
  --bg-color-page: #07070d;
  --bg-color: #0f1020;
  --bg-color-elevated: #171a30;
  --bg-color-overlay: rgba(3, 3, 8, 0.72);
  --color-primary: #00f0ff;
  --color-primary-dark: #00b8c4;
  --color-primary-soft: rgba(0, 240, 255, 0.12);
  --color-accent: #d300c5;
  --color-accent-soft: rgba(211, 0, 197, 0.14);
  --color-success: #05ffa1;
  --color-warning: #fcee0a;
  --color-danger: #ff3860;
  --color-info: #7c8ba6;
  --text-primary: #e8f6ff;
  --text-regular: #b6c2d9;
  --text-secondary: #7c8ba6;
  --text-placeholder: #4b5570;
  --text-on-primary: #07070d;
  --border-color: rgba(0, 240, 255, 0.28);
  --border-color-light: rgba(255, 255, 255, 0.1);
  --border-color-lighter: rgba(255, 255, 255, 0.05);
  --glow-primary: 0 0 12px rgba(0, 240, 255, 0.45);
  --glow-accent: 0 0 12px rgba(211, 0, 197, 0.45);
  --glow-danger: 0 0 10px rgba(255, 56, 96, 0.45);
  --gradient-brand: linear-gradient(90deg, #00f0ff 0%, #d300c5 100%);

  /* §2 字体 */
  --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-brand: "Orbitron", var(--font-cn);
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* §3 间距与圆角 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --border-radius: 2px;
  --chamfer-card: 10px;
  --chamfer-btn: 6px;
  --chamfer-dialog: 12px;
  --tabbar-height: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--bg-color-page);
  /* §3.3 背景纹理：32px 网格 + 2px 扫描线 */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 3px, 32px 32px, 32px 32px;
  background-attachment: fixed;
  color: var(--text-regular);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
a { color: var(--color-primary); text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── 页面框架 ─────────────────────────────────────────── */
.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 16px);
}
.header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 16px;
  background: rgba(7, 7, 13, 0.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color-light);
}
.wordmark {
  font-family: var(--font-brand); font-weight: 700; font-size: 18px; line-height: 24px;
  letter-spacing: 1px;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(211, 0, 197, 0.35));
}
.wallet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: var(--bg-color); color: var(--text-primary);
  border: 1px solid var(--border-color);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  font-size: 13px; cursor: pointer;
}
.wallet-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); }
.wallet-chip.warn { border-color: var(--color-warning); color: var(--color-warning); }
.wallet-chip.warn .dot { background: var(--color-warning); box-shadow: 0 0 6px var(--color-warning); }

.page { padding: 16px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.stake-head { align-items: center; min-height: 56px; }
.page-title { margin: 0; color: var(--text-primary); font-size: 20px; line-height: 28px; font-weight: 600; }
.stake-head .page-title { font-size: 28px; line-height: 36px; }
.page-title small { display: block; font-family: var(--font-brand); font-size: 10px; line-height: 14px; letter-spacing: 3px; color: var(--color-primary); opacity: 0.7; }
.page-links { display: flex; gap: 12px; font-size: 13px; }
.page-links a::after { content: " ›"; }

/* ── 卡片（§3.2 切角） ───────────────────────────────── */
.card {
  position: relative;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 24px 2px no-repeat border-box,
    linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
    linear-gradient(var(--border-color), var(--border-color)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, var(--chamfer-card) 100%, 0 calc(100% - var(--chamfer-card)));
}
/* 切角处的斜边描边（clip-path 会裁掉普通边框） */
.card::before, .card::after {
  content: ""; position: absolute; width: 14.14px; height: 2px; background: var(--border-color);
  transform: rotate(45deg); pointer-events: none;
}
.card::before { top: 4px; right: -2.07px; }
.card::after { bottom: 4px; left: -2.07px; }
.card-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; color: var(--text-primary); font-size: 16px; line-height: 24px; font-weight: 600; }
.card-title .extra { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--text-secondary); }

/* ── 指标 ─────────────────────────────────────────────── */
.label { color: var(--text-secondary); font-size: 12px; line-height: 18px; }
.amount-xl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); font-size: 28px; line-height: 34px; font-weight: 700; }
.amount-xl .unit, .amount-md .unit { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }
.amount-md { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); font-size: 16px; line-height: 24px; font-weight: 600; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color-light); }
.metrics .amount-md { font-size: 15px; }
.asset-metrics { grid-template-columns: 1fr 1fr; }
.metric-withdraw {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  align-items: center;
}
.metric-withdraw .label { grid-column: 1; grid-row: 1; }
.metric-withdraw .amount-md { grid-column: 1; grid-row: 2; }
.metric-withdraw .btn { grid-column: 2; grid-row: 2; justify-self: start; }
.metric-withdraw .reason { grid-column: 1; grid-row: 3; }
.hl { color: var(--color-primary); }

/* ── 按钮（§3.2 切角 6px） ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 20px; border: 0; cursor: pointer;
  font-size: 15px; line-height: 22px; font-weight: 600;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-btn)) 0, 100% var(--chamfer-btn), 100% 100%, var(--chamfer-btn) 100%, 0 calc(100% - var(--chamfer-btn)));
  transition: background-color 0.18s ease-out, filter 0.18s ease-out;
}
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-primary { background: var(--color-primary); color: var(--text-on-primary); filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.45)); }
.btn-primary:active { background: var(--color-primary-dark); }
.btn-ghost { background: var(--color-primary-soft); color: var(--color-primary); }
.btn[disabled] { background: var(--bg-color-elevated); color: var(--text-placeholder); filter: none; cursor: not-allowed; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 标签与提示条 ─────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--border-radius); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.tag-primary { color: var(--color-primary); background: var(--color-primary-soft); }
.tag-accent { color: var(--color-accent); background: var(--color-accent-soft); }
.tag-success { color: var(--color-success); }
.tag-warning { color: var(--color-warning); }
.tag-danger { color: var(--color-danger); }
.tag-info { color: var(--color-info); }

.alert { display: flex; gap: 8px; padding: 10px 12px; margin-bottom: 12px; background: var(--bg-color); border-left: 3px solid var(--color-warning); color: var(--text-regular); font-size: 13px; line-height: 20px; }
.alert b { color: var(--color-warning); }
.alert.danger { border-left-color: var(--color-danger); box-shadow: inset 0 0 0 1px rgba(255, 56, 96, 0.25), var(--glow-danger); }
.alert.danger b { color: var(--color-danger); }

.reason { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.reason::before { content: "!"; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--color-warning); color: var(--text-on-primary); font-size: 10px; line-height: 14px; text-align: center; font-weight: 700; }
.reason.danger::before { background: var(--color-danger); }
.reason.ok::before { content: "✓"; background: var(--color-success); }

/* ── 进度条（§1.2：轨道抬升层，填充品牌渐变） ─────────── */
.progress { height: 8px; background: var(--bg-color-elevated); position: relative; overflow: hidden; }
.progress > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gradient-brand); box-shadow: var(--glow-primary); }
.progress-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }

/* ── 日位（§1.2） ─────────────────────────────────────── */
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot {
  position: relative; height: 64px; padding: 6px 4px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: var(--bg-color); border: 1px solid var(--border-color);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  text-align: center;
}
.slot::before { content: ""; position: absolute; top: 2px; right: -1.24px; width: 8.49px; height: 2px; background: var(--slot-bc, var(--border-color)); transform: rotate(45deg); }
.slot .no { font-family: var(--font-mono); font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text-primary); }
.slot .st { font-size: 11px; line-height: 14px; color: var(--text-regular); white-space: nowrap; }
.slot.empty { --slot-bc: var(--border-color-light); border-style: dashed; border-color: var(--border-color-light); background: transparent; }
.slot.empty .no, .slot.empty .st { color: var(--text-secondary); }
.slot.due { --slot-bc: var(--color-warning); border-color: var(--color-warning); }
.slot.due .st { color: var(--color-warning); }
.slot.exited { --slot-bc: var(--text-placeholder); border-style: dashed; border-color: var(--text-placeholder); background: transparent; }
.slot.exited .no, .slot.exited .st { color: var(--text-placeholder); }
.slot.loan .st { color: var(--color-accent); }
.slot.today { --slot-bc: var(--color-primary); border-color: var(--color-primary); box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.35); }
.slot.today::after { content: "今日"; position: absolute; top: 0; left: 0; padding: 0 4px; background: var(--color-primary); color: var(--text-on-primary); font-size: 10px; line-height: 14px; font-weight: 700; }
.slot-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 11px; line-height: 16px; color: var(--text-secondary); }
.slot-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--border-color); }
.slot-legend i.empty { border-style: dashed; border-color: var(--border-color-light); }
.slot-legend i.due { border-color: var(--color-warning); }
.slot-legend i.exited { border-style: dashed; border-color: var(--text-placeholder); }
.slot-legend i.today { border-color: var(--color-primary); box-shadow: inset 0 0 4px var(--color-primary); }

/* ── 键值行 ───────────────────────────────────────────── */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 13px; line-height: 20px; }
.kv + .kv { border-top: 1px solid var(--border-color-lighter); }
.kv .k { color: var(--text-secondary); flex: none; }
.kv .v { color: var(--text-primary); text-align: right; word-break: break-all; }

/* ── 底部标签栏 ───────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 480px; margin: 0 auto;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(10, 11, 22, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-color-light);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-secondary); font-size: 11px; line-height: 14px; }
.tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tabbar a.active { color: var(--color-primary); }
.tabbar a.active svg { filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7)); }

/* ── 底部弹层 / 弹窗 ──────────────────────────────────── */
.mask { position: fixed; inset: 0; z-index: 50; background: var(--bg-color-overlay); display: none; align-items: flex-end; justify-content: center; }
.mask.open { display: flex; }
.sheet {
  width: 100%; max-width: 480px; max-height: 88vh; overflow: auto;
  background: var(--bg-color-elevated);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-color);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-dialog)) 0, 100% var(--chamfer-dialog), 100% 100%, 0 100%);
  animation: up 0.2s ease-out;
}
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.sheet h3 { margin: 0 0 4px; color: var(--text-primary); font-size: 18px; line-height: 26px; font-weight: 600; }
.sheet .sub { margin: 0 0 16px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.sheet .actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 16px; }
.sheet .close { float: right; background: none; border: 0; color: var(--text-secondary); font-size: 20px; line-height: 26px; cursor: pointer; }

.field label { display: block; margin-bottom: 6px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.field input {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--bg-color); color: var(--text-primary);
  border: 1px solid var(--border-color-light); border-radius: var(--border-radius);
  font-family: var(--font-mono); font-size: 13px; outline: none;
}
.field input:focus { border-color: var(--color-primary); box-shadow: var(--glow-primary); }
.field input.err { border-color: var(--color-danger); }
.field .help { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.field .help.err { color: var(--color-danger); }

/* ── 轻提示 ───────────────────────────────────────────── */
.toast { position: fixed; left: 50%; top: 80px; z-index: 60; transform: translateX(-50%); max-width: 320px; padding: 10px 16px; background: var(--bg-color-elevated); color: var(--text-primary); border: 1px solid var(--color-success); box-shadow: 0 0 12px rgba(5, 255, 161, 0.35); font-size: 13px; line-height: 20px; display: none; }
.toast.show { display: block; animation: up 0.2s ease-out; }
.toast.err { border-color: var(--color-danger); box-shadow: var(--glow-danger); }

/* ── 加载骨架 / 失败 / 空状态 ─────────────────────────── */
.skeleton { height: 16px; margin: 8px 0; background: linear-gradient(90deg, var(--bg-color-elevated) 0%, rgba(0, 240, 255, 0.12) 50%, var(--bg-color-elevated) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton.lg { height: 34px; width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.state-block { padding: 32px 16px; text-align: center; color: var(--text-secondary); }
.state-block .icon { font-family: var(--font-brand); font-size: 28px; line-height: 36px; color: var(--color-danger); text-shadow: var(--glow-danger); }

@media (prefers-reduced-motion: reduce) {
  .skeleton, .btn .spin, .sheet, .toast.show { animation: none; }
}

.slot { height: 72px; }
.slot { padding-top: 16px; }
/* 有效订单的日位：实底，状态文字与编号同色 */
.slot.active { background: var(--color-primary-soft); }
.slot.active .no, .slot.active .st { color: var(--color-primary); }
.slot.loan { background: var(--color-accent-soft); }
.slot.loan .no { color: var(--color-accent); }
.slot { justify-content: center; gap: 2px; }

/* 页头右侧：钱包按钮 + 语言切换 */
.header-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: var(--bg-color); color: var(--text-regular);
  border: 1px solid var(--border-color-light);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.icon-btn:active { color: var(--color-primary); border-color: var(--color-primary); }
.lang-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  height: 48px; padding: 0 12px; margin-bottom: 8px; cursor: pointer;
  background: var(--bg-color); color: var(--text-primary); border: 1px solid var(--border-color-light);
  font-size: 15px; text-align: left;
}
.lang-item.on { border-color: var(--color-primary); color: var(--color-primary); box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.2); }
.lang-item.on::after { content: "✓"; }
/* 窄屏（360～430px）页头不换行 */
.header { gap: 8px; }
.wordmark { font-size: 15px; letter-spacing: 0.5px; white-space: nowrap; min-width: 0; overflow: hidden; }
.header-right { gap: 6px; flex: none; }
.wallet-chip { padding: 0 8px; gap: 5px; font-size: 12px; white-space: nowrap; }
.header .btn-sm { padding: 0 12px; white-space: nowrap; }

/* 日位说明 */
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: 1px; border: 1px solid var(--text-secondary); border-radius: 50%; background: none; color: var(--text-secondary); font-size: 11px; line-height: 1; font-weight: 700; cursor: pointer; }
.info-btn:active { color: var(--color-primary); border-color: var(--color-primary); }
.card-desc { margin: -4px 0 12px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.slot-legend i.active, .info-body i.lg.active { background: var(--color-primary-soft); border: 1px solid var(--border-color); }
.slot-legend i.loan { background: var(--color-accent-soft); border-color: var(--color-accent); }
.info-body p { margin: 0 0 10px; font-size: 13px; line-height: 21px; color: var(--text-regular); }
.info-body .kv .k { display: inline-flex; align-items: center; gap: 6px; }
.info-body i.lg { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--border-color); }
.info-body i.lg.empty { border-style: dashed; border-color: var(--border-color-light); }
.info-body i.lg.due { border-color: var(--color-warning); }
.info-body i.lg.exited { border-style: dashed; border-color: var(--text-placeholder); }

/* ── 二级页返回 ───────────────────────────────────────── */
.page-head .back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 6px; color: var(--text-primary); font-size: 22px; line-height: 1; }
.page-head .ttl { display: flex; align-items: center; }

/* ── 分段标签 ─────────────────────────────────────────── */
.seg { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; height: 32px; padding: 0 14px; cursor: pointer;
  background: var(--bg-color); color: var(--text-secondary); border: 1px solid var(--border-color-light);
  font-size: 13px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.seg button.on { color: var(--text-on-primary); background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }

/* ── 列表项 ───────────────────────────────────────────── */
.item { padding: 14px 0; }
.item + .item { border-top: 1px solid var(--border-color-light); }
.item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-title { display: flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 14px; line-height: 22px; font-weight: 600; min-width: 0; }
.item-sub { margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.amt-plus { color: var(--color-success); }
.amt-minus { color: var(--text-primary); }

/* ── 订单卡片内 ───────────────────────────────────────── */
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.order-no { font-family: var(--font-mono); color: var(--text-primary); font-size: 14px; font-weight: 600; }
.order-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.grid2 .label { margin-bottom: 2px; }
.grid2 .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); font-size: 14px; line-height: 20px; }
.order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color-light); }
.link-note { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.link-note b { color: var(--color-accent); font-weight: 500; }

/* ── 开关 ─────────────────────────────────────────────── */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-regular); cursor: pointer; background: none; border: 0; padding: 0; }
.switch i { position: relative; width: 36px; height: 20px; background: var(--bg-color-elevated); border: 1px solid var(--border-color-light); transition: background-color 0.18s ease-out; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--text-secondary); transition: transform 0.18s ease-out, background-color 0.18s ease-out; }
.switch.on i { background: var(--color-primary-soft); border-color: var(--color-primary); }
.switch.on i::after { transform: translateX(16px); background: var(--color-primary); box-shadow: var(--glow-primary); }
.switch[disabled] { cursor: not-allowed; opacity: 0.6; }

/* ── 统计格 ───────────────────────────────────────────── */
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-pair > div { padding: 12px; background: var(--bg-color-elevated); }
.stat-pair .grp { font-size: 12px; line-height: 18px; color: var(--color-primary); margin-bottom: 6px; }
.stat-pair .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; line-height: 22px; color: var(--text-secondary); }
.stat-pair .row b { font-family: var(--font-mono); font-size: 16px; color: var(--text-primary); font-weight: 600; }

/* ── 空状态（只作用于卡片内的空状态，避免命中日位「空位」图示） ── */
.card > .empty { padding: 36px 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.card > .empty .glyph { font-family: var(--font-brand); font-size: 22px; letter-spacing: 2px; color: var(--text-placeholder); margin-bottom: 6px; }

/* ── 入口行 ───────────────────────────────────────────── */
.entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-regular); }
.entry .go { color: var(--color-primary); font-size: 13px; white-space: nowrap; }