/* ============================================================
   蜂票 HiveTix · 桌面端原型样式
   Token 与 web/src/index.css 对齐（docs/design/brand.md），缺失部分按原型规范补齐，见 prototype/tokens.md
   ============================================================ */

:root {
  --ht-brand-50: #FDEEF3;  --ht-brand-100: #FBDCE6; --ht-brand-200: #F6B9CC;
  --ht-brand-300: #F58BAB; --ht-brand-400: #FB7299; --ht-brand-500: #E05A80;
  --ht-brand-600: #C94A70; --ht-brand-700: #A93A5D; --ht-brand-900: #571E31;
  --ht-primary: var(--ht-brand-500);
  --ht-accent: #FF8A3D;

  --ok: #0D9668;    --ok-bg: #E6F7F0;    --ok-bd: #9FE3C8;
  --fail: #DC2626;  --fail-bg: #FDECEC;  --fail-bd: #F5B5B1;
  --err: #B42318;   --err-bg: #FBE9E7;   --err-bd: #EFA79F;
  --unk: #6E7891;   --unk-bg: #F0F1F6;   --unk-bd: #CDD2E0;
  --pend: #2563EB;  --pend-bg: #E9F0FE;  --pend-bd: #B3CBFB;
  --warn: #D97706;  --warn-bg: #FDF3E4;  --warn-bd: #F8D9A2;

  --pf-bili: #E05A80; --pf-node: #0EA5A5;

  --fg: #1A2030; --fg2: #3E4659; --fg3: #5B6478; --fg4: #9AA3B7;
  --on-brand: #fff;
  --bg: #F7F8FB; --card: #FFFFFF; --hover: #EEF0F5; --active: #E2E6EE;
  --bd-strong: #C7CDDC; --bd: #DDE1EA; --bd-light: #EDF0F6;
  --mask: rgba(11,16,32,.5);
  --nav-bg: rgba(255,255,255,.86);

  --sh-sm: 0 1px 2px rgba(22,27,42,.06);
  --sh-md: 0 4px 12px rgba(22,27,42,.08);
  --sh-lg: 0 12px 32px rgba(22,27,42,.14);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC',
          'Microsoft YaHei', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
  --code: 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Consolas, monospace;

  --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 18px; --r-full: 9999px;
}

html.dark {
  --ht-primary: var(--ht-brand-400);
  --ok: #34D399;   --ok-bg: rgba(52,211,153,.14);   --ok-bd: rgba(52,211,153,.4);
  --fail: #F87171; --fail-bg: rgba(248,113,113,.14);--fail-bd: rgba(248,113,113,.4);
  --err: #FF9C93;  --err-bg: rgba(180,35,24,.28);   --err-bd: rgba(255,156,147,.45);
  --unk: #A3ACC2;  --unk-bg: rgba(163,172,194,.14); --unk-bd: rgba(163,172,194,.4);
  --pend: #60A5FA; --pend-bg: rgba(96,165,250,.14); --pend-bd: rgba(96,165,250,.4);
  --warn: #FDB022; --warn-bg: rgba(253,176,34,.14); --warn-bd: rgba(253,176,34,.4);
  --pf-bili: #FB7299; --pf-node: #2CC3C3;

  --fg: #E6E9F0; --fg2: #C3CAD9; --fg3: #8B93A7; --fg4: #646E85;
  --bg: #0B0E14; --card: #131722; --hover: #1A1F2E; --active: #232A3B;
  --bd-strong: #3C4661; --bd: #232A3B; --bd-light: #1B2130;
  --mask: rgba(0,0,0,.65);
  --nav-bg: rgba(19,23,34,.88);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 12px rgba(0,0,0,.5);
  --sh-lg: 0 12px 32px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--fg); background: #E7E9F2;
  font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
html.dark body { background: #0B0F1C; }
.num { font-variant-numeric: tabular-nums; }
.code { font-family: var(--code); }
svg.icon { width: 16px; height: 16px; flex: none; }
.mut { color: var(--fg3); } .small { font-size: 11.5px; } .bold { font-weight: 600; }
.ok-t { color: var(--ok); } .fail-t { color: var(--fail); } .warn-t { color: var(--warn); }
.pend-t { color: var(--pend); } .pri-t { color: var(--ht-primary); }
.row-f { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.mla { margin-left: auto; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------- 工作台外壳 */
.stage { min-height: 100%; padding: 20px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; max-width: 1480px; }
.stage-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.stage-brand svg { width: 30px; height: 30px; border-radius: 8px; display: block; }
.stage-brand b { font-size: 15px; }
.stage-brand span { font-size: 12px; color: var(--fg3); }
.seg { display: flex; background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-full); padding: 3px; box-shadow: var(--sh-sm); }
.seg button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--fg3); padding: 6px 13px; border-radius: var(--r-full); cursor: pointer; }
.seg button.on { background: var(--ht-primary); color: #fff; }
.navchips { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; max-width: 1480px; }
.navchips button { border: 1px solid var(--bd); background: var(--card); color: var(--fg2); font: inherit; font-size: 12px; padding: 5px 11px; border-radius: var(--r-full); cursor: pointer; }
.navchips button:hover { border-color: var(--ht-primary); color: var(--ht-primary); }

/* ---------------------------------------------------- 桌面窗口外框 */
.frames { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
.win-wrap { display: flex; flex-direction: column; gap: 8px; }
.win-label { font-size: 12px; color: var(--fg3); font-weight: 500; }
.win {
  width: 1440px; height: 900px; flex: none; position: relative;
  background: var(--bg); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.35); box-shadow: 0 20px 56px rgba(11,16,32,.3);
}
.win-bar {
  height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: #E9ECF3; border-bottom: 1px solid #D6DAE6;
}
html.dark .win-bar { background: #202737; border-bottom-color: #2F3A54; }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; }
.dots i:nth-child(1) { background: #FF5F57; } .dots i:nth-child(2) { background: #FEBC2E; } .dots i:nth-child(3) { background: #28C840; }
.urlbar {
  flex: 1; max-width: 460px; margin: 0 auto; height: 21px; border-radius: var(--r-full);
  background: #fff; border: 1px solid #D6DAE6; display: flex; align-items: center;
  justify-content: center; gap: 5px; font-size: 11px; color: var(--fg3);
}
html.dark .urlbar { background: #141A2B; border-color: #2F3A54; }
.app { position: absolute; inset: 34px 0 0 0; display: flex; }

/* ---------------------------------------------------- 侧边导航 */
.side {
  width: 220px; flex: none; background: var(--card); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; padding: 14px 10px 10px;
}
html.dark .side { background: #0F1524; }
.side-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 16px; }
.side-brand svg { width: 28px; height: 28px; border-radius: 8px; display: block; }
.side-brand b { font-size: 15px; letter-spacing: .3px; }
.side-brand span { display: block; font-size: 10px; color: var(--fg3); letter-spacing: 1.4px; }
.side-grp { font-size: 10.5px; color: var(--fg4); font-weight: 600; letter-spacing: .6px; padding: 12px 8px 5px; }
.side a, .side button.nav {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm);
  color: var(--fg2); font: inherit; font-size: 13px; border: 0; background: transparent;
  width: 100%; cursor: pointer; text-align: left; text-decoration: none;
}
.side button.nav:hover { background: var(--hover); color: var(--fg); }
.side button.nav.on { background: var(--ht-brand-50); color: var(--ht-primary); font-weight: 600; }
html.dark .side button.nav.on { background: rgba(251,114,153,.16); }
.side button.nav .badge {
  margin-left: auto; min-width: 17px; height: 17px; border-radius: var(--r-full);
  background: var(--fail); color: #fff; font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.side-foot { margin-top: auto; border-top: 1px solid var(--bd-light); padding-top: 9px; }
.side-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.side-user:hover { background: var(--hover); }
.av { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--ht-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: none; }

/* ---------------------------------------------------- 主区 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 52px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 22px; border-bottom: 1px solid var(--bd); background: var(--card);
}
.topbar h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.1px; }
.topbar .crumb { font-size: 12px; color: var(--fg3); }
.search {
  width: 260px; height: 30px; border: 1px solid var(--bd); border-radius: var(--r-sm);
  background: var(--bg); display: flex; align-items: center; gap: 7px; padding: 0 9px;
  color: var(--fg3); font-size: 12.5px;
}
.iconbtn {
  width: 30px; height: 30px; border: 1px solid var(--bd); background: var(--card);
  border-radius: var(--r-sm); color: var(--fg2); display: flex; align-items: center;
  justify-content: center; cursor: pointer; position: relative;
}
.iconbtn:hover { background: var(--hover); }
.iconbtn .dot-n { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--fail); }
.body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.body > * { flex: none; }
.body::-webkit-scrollbar { width: 8px; }
.body::-webkit-scrollbar-thumb { background: var(--bd-strong); border-radius: 4px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 14px; align-items: start; }

/* ---------------------------------------------------- 卡片 */
.card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden; }
.card-hd {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--bd-light); font-weight: 600; font-size: 13px;
}
.card-hd svg { width: 15px; height: 15px; color: var(--fg3); }
.card-hd .mla { font-weight: 400; }
.card-bd { padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; }
.card-bd.flush { padding: 0; }

/* KPI */
.kpi { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 13px 15px; box-shadow: var(--sh-sm); }
.kpi .l { font-size: 12px; color: var(--fg3); display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 650; letter-spacing: -.7px; margin: 5px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 11.5px; color: var(--fg3); }

/* 标签 / 状态 */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: var(--r-full); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--unk-bg); color: var(--unk); border: 1px solid var(--unk-bd);
}
.tag.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.tag.fail { background: var(--fail-bg); color: var(--fail); border-color: var(--fail-bd); }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.tag.pend { background: var(--pend-bg); color: var(--pend); border-color: var(--pend-bd); }
.tag.run { background: var(--ht-brand-50); color: var(--ht-primary); border-color: var(--ht-brand-200); }
html.dark .tag.run { background: rgba(251,114,153,.16); border-color: rgba(251,114,153,.42); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--unk); }
.dot.ok { background: var(--ok); } .dot.fail { background: var(--fail); }
.dot.warn { background: var(--warn); } .dot.pend { background: var(--pend); }
.dot.live { background: var(--ht-primary); box-shadow: 0 0 0 3px rgba(224,90,128,.22); }
.pf {
  width: 20px; height: 20px; border-radius: var(--r-sm); flex: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.pf.bili { background: var(--pf-bili); } .pf.node { background: var(--pf-node); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--bd);
  background: var(--card); color: var(--fg); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--hover); }
.btn svg { width: 15px; height: 15px; }
.btn.pri { background: var(--ht-primary); border-color: var(--ht-primary); color: #fff; }
.btn.pri:hover { background: var(--ht-brand-600); }
.btn.danger { color: var(--fail); border-color: var(--fail-bd); background: var(--fail-bg); }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.btn.lg { height: 38px; padding: 0 20px; font-size: 14px; }
.btn.gh { border-color: transparent; background: transparent; color: var(--fg2); }
.btn.gh:hover { background: var(--hover); }

/* 筛选 chip */
.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 11px;
  border-radius: var(--r-full); border: 1px solid var(--bd); background: var(--card);
  color: var(--fg2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--bd-strong); }
.chip.on { background: var(--ht-primary); border-color: var(--ht-primary); color: #fff; }
.chip b { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .75; }

/* 表格 */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--fg3);
  padding: 9px 12px; border-bottom: 1px solid var(--bd); background: var(--bg);
  white-space: nowrap; position: sticky; top: 0;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--bd-light); vertical-align: middle; }
tbody tr:hover { background: var(--hover); cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }
td .t1 { font-weight: 500; }
td .t2 { font-size: 11.5px; color: var(--fg3); }
.ta-r { text-align: right; }
.cb { width: 14px; height: 14px; border: 1.5px solid var(--bd-strong); border-radius: 3px; display: inline-block; vertical-align: middle; }
.cb.on { background: var(--ht-primary); border-color: var(--ht-primary); position: relative; }
.cb.on::after { content: ''; position: absolute; left: 3.4px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }
.tfoot { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-top: 1px solid var(--bd-light); font-size: 12px; color: var(--fg3); }
.pg { display: flex; gap: 4px; margin-left: auto; }
.pg button { min-width: 26px; height: 26px; border: 1px solid var(--bd); background: var(--card); border-radius: var(--r-sm); font: inherit; font-size: 12px; color: var(--fg2); cursor: pointer; }
.pg button.on { background: var(--ht-primary); border-color: var(--ht-primary); color: #fff; }

/* 属性列表 */
.props { display: flex; flex-direction: column; }
.props > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--bd-light); font-size: 12.5px; }
.props > div:last-child { border-bottom: 0; }
.props .k { width: 92px; flex: none; color: var(--fg3); }
.props .v { flex: 1; min-width: 0; }

/* 时间线 */
.timeline { display: flex; flex-direction: column; }
.tl { display: flex; gap: 10px; }
.tl .col { align-items: center; width: 12px; flex: none; }
.tl .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--unk); margin-top: 4px; flex: none; }
.tl .ln { flex: 1; width: 1.5px; background: var(--bd); min-height: 12px; }
.tl.ok .pt { background: var(--ok); } .tl.fail .pt { background: var(--fail); }
.tl.warn .pt { background: var(--warn); } .tl.pend .pt { background: var(--pend); }
.tl.live .pt { background: var(--ht-primary); box-shadow: 0 0 0 3px rgba(224,90,128,.2); }
.tl .bd { padding-bottom: 11px; min-width: 0; }
.tl .t { font-size: 12.5px; font-weight: 500; }
.tl .m { font-size: 11.5px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.tl:last-child .ln { display: none; }
.tl:last-child .bd { padding-bottom: 0; }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; color: var(--fg2); font-weight: 500; }
.field .hint { font-size: 11.5px; color: var(--fg3); }
.input {
  width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--bd);
  border-radius: var(--r-sm); background: var(--card); color: var(--fg);
  font: inherit; font-size: 13px; outline: none;
}
.input:focus { border-color: var(--ht-primary); box-shadow: 0 0 0 3px rgba(224,90,128,.14); }
textarea.input { height: 74px; padding: 8px 10px; resize: none; }
select.input { appearance: none; }
.switch { width: 38px; height: 22px; border-radius: var(--r-full); background: var(--bd-strong); position: relative; flex: none; cursor: pointer; border: 0; padding: 0; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(16px); }
.radio { width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--bd-strong); flex: none; }
.radio.on { border: 5px solid var(--ht-primary); }

/* 向导步骤条 */
.steps { display: flex; align-items: center; gap: 8px; }
.steps .s { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg3); }
.steps .n { width: 21px; height: 21px; border-radius: 50%; background: var(--bd-light); color: var(--fg3); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; }
.steps .s.on { color: var(--fg); font-weight: 600; }
.steps .s.on .n { background: var(--ht-primary); color: #fff; }
.steps .s.done { color: var(--ok); }
.steps .s.done .n { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-bd); }
.steps .bar { width: 34px; height: 1.5px; background: var(--bd); }

/* Hero 倒计时（仪表盘） */
.hero {
  border-radius: var(--r); padding: 16px 18px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--ht-brand-700), var(--ht-brand-500) 46%, #FB7299);
}
.hero.rush { background: linear-gradient(115deg, #D96A14, var(--ht-accent) 55%, #FFAA66); }
.hero::after { content: ''; position: absolute; right: -46px; top: -46px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.09); }
.hero .hd { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 6px; }
.hero .hd i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.hero h2 { margin: 7px 0 4px; font-size: 17px; font-weight: 600; }
.hero .cd { font-size: 44px; font-weight: 700; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.hero .meta { font-size: 12px; opacity: .92; display: flex; gap: 14px; margin-top: 6px; }
.hero .actions { display: flex; gap: 8px; margin-top: 12px; }
.hero .actions .btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.hero .actions .btn:hover { background: rgba(255,255,255,.26); }

/* 提示条 */
.alert { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r); border: 1px solid var(--warn-bd); background: var(--warn-bg); align-items: flex-start; }
.alert svg { width: 16px; height: 16px; color: var(--warn); flex: none; margin-top: 1px; }
.alert.info { border-color: var(--pend-bd); background: var(--pend-bg); } .alert.info svg { color: var(--pend); }
.alert.ok { border-color: var(--ok-bd); background: var(--ok-bg); } .alert.ok svg { color: var(--ok); }
.alert.bad { border-color: var(--fail-bd); background: var(--fail-bg); } .alert.bad svg { color: var(--fail); }
.alert .t { font-weight: 600; font-size: 12.5px; }
.alert .m { font-size: 12px; color: var(--fg2); }

/* 成败堆叠条 / 微视图 */
.stack { display: flex; height: 7px; border-radius: var(--r-full); overflow: hidden; background: var(--bd-light); }
.stack i { display: block; }
.stack-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--fg3); align-items: center; }
.stack-legend span { display: flex; align-items: center; gap: 5px; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.spark > span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bars > div { display: grid; grid-template-columns: 128px minmax(0,1fr) 34px; gap: 10px; align-items: center; font-size: 12.5px; }
.bars .tr { height: 7px; border-radius: var(--r-full); background: var(--bd-light); overflow: hidden; }
.bars .tr i { display: block; height: 100%; border-radius: var(--r-full); background: var(--fail); }
.bars .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg3); }

/* 付款区块 */
.pay { border: 1px solid var(--ok-bd); background: var(--ok-bg); border-radius: var(--r); padding: 14px; display: flex; gap: 16px; }
.qr { width: 156px; height: 156px; flex: none; background: #fff; border-radius: 8px; padding: 7px; box-shadow: var(--sh-sm); }
.qr canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.money { font-size: 28px; font-weight: 700; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.deadline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--r-sm); padding: 4px 9px; }

/* 抽屉 / 弹窗 */
.mask { position: absolute; inset: 34px 0 0 0; background: var(--mask); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 80; }
.mask.on { opacity: 1; pointer-events: auto; }
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.98);
  width: 520px; background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); z-index: 90; opacity: 0; pointer-events: none; transition: all .18s;
  overflow: hidden;
}
.modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-hd { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--bd-light); font-weight: 600; }
.modal-bd { padding: 15px 16px; display: flex; flex-direction: column; gap: 12px; max-height: 520px; overflow-y: auto; }
.modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bd-light); background: var(--bg); }

/* 列表行（右栏用） */
.lrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bd-light); }
.lrow:last-child { border-bottom: 0; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 0; color: var(--fg3); font-size: 12.5px; }
.empty svg { width: 32px; height: 32px; color: var(--fg4); }

/* 一览模式：缩放整窗 */
body.gallery .frames { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
body.gallery .win { transform: scale(.5); transform-origin: top left; }
body.gallery .win-wrap { width: 726px; height: 486px; }
body.gallery .win-label { margin-left: 2px; }
/* 窗口比屏幕宽时（笔记本/真机打开原型）等比缩掉外框，避免横向溢出 */
@media (max-width: 1500px) {
  .stage { padding: 16px 8px 32px; }
  body:not(.gallery) .win { transform: scale(.88); transform-origin: top center; }
  body:not(.gallery) .win-wrap { margin-bottom: -108px; }
}
@media (max-width: 1320px) {
  body:not(.gallery) .win { transform: scale(.76); }
  body:not(.gallery) .win-wrap { margin-bottom: -216px; }
}

.nw { white-space: nowrap; }