/* ============================================================
   cyberpunk-red.css — 《赛博朋克:红》品牌风样式
   风格参考 cyberpunkred.com / 官方规则书视觉语言:
   黑 + 血红 + 信号黄, HUD/终端感, glitch 错位, 警示斜纹, 切角
   ============================================================ */

:root {
  /* 色板 */
  --cp-black: #060608;
  --cp-panel: #101016;
  --cp-panel-2: #16161f;
  --cp-edge: #26262f;
  --cp-red: #ff1e2d;          /* 主血红 */
  --cp-red-deep: #b3000f;
  --cp-red-dark: #5c0008;
  --cp-yellow: #ffd60a;       /* 警示黄(点缀) */
  --cp-cyan: #35e0ff;         /* glitch 青色错位 */
  --cp-ink: #e9e6df;          /* 主文字 */
  --cp-muted: #a7a4af;        /* 次级文字 (AA on panel) */
  --cp-faint: #83808d;        /* 弱文字/占位 (>=3:1, 仅装饰用) */
  /* 字体 */
  --f-display: "Bahnschrift", "Arial Narrow", "Microsoft YaHei", "PingFang SC", sans-serif;
  --f-data: "Consolas", "SFMono-Regular", "Courier New", monospace;
  --f-body: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  /* 几何 */
  --cut: 14px;                /* 切角大小 */
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--cp-black);
  color: var(--cp-ink);
  font-family: var(--f-body);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 背景: 夜之城网格 + 暗角 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 30, 45, 0.14), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.9), transparent 60%),
    linear-gradient(rgba(255, 30, 45, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 30, 45, 0.045) 1px, transparent 1px),
    var(--cp-black);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px, auto;
}

/* CRT 扫描线叠层 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
}

::selection { background: var(--cp-red); color: #fff; }

a { color: inherit; text-decoration: none; }

/* ============ 通用排版 ============ */
.kicker {
  font-family: var(--f-data);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cp-red);
}

.kicker::before { content: "// "; color: var(--cp-faint); }

.section-title {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.section-title .mark { color: var(--cp-red); }

.section-sub {
  font-family: var(--f-data);
  color: var(--cp-muted);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  margin: 0 0 22px;
}

.mono { font-family: var(--f-data); }

/* ============ 顶部警示斜纹条 ============ */
.hazard-bar {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--cp-red) 0 14px,
    #0a0a0d 14px 28px
  );
  border-bottom: 1px solid #0a0a0d;
}

/* ============ 站点栏 ============ */
.site-strip {
  border-bottom: 1px solid var(--cp-edge);
  background: rgba(6, 6, 8, 0.85);
  backdrop-filter: blur(4px);
}

.site-strip-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.brand-link {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.brand-link em { color: var(--cp-red); font-style: normal; }

.crumbs {
  font-family: var(--f-data);
  font-size: 0.75rem;
  color: var(--cp-muted);
  letter-spacing: 0.08em;
}

.crumbs a:hover { color: var(--cp-red); }

.crumbs .sep { margin: 0 8px; color: var(--cp-faint); }

/* ============ 主容器 ============ */
.page-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--gutter) 90px;
}

/* ============ HERO ============ */
.hero { position: relative; margin-bottom: clamp(36px, 6vw, 64px); }

.hero-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.hero-rule .line {
  height: 1px;
  flex: 0 0 64px;
  background: linear-gradient(90deg, var(--cp-red), transparent);
}

.hero h1 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cp-ink);
  position: relative;
  text-shadow: 0 0 0 transparent;
}

/* glitch 双色错位标题 */
.glitch { position: relative; }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}

.glitch::before {
  color: var(--cp-cyan);
  transform: translate(-3px, 0);
  mix-blend-mode: screen;
  animation: glitch-a 3.2s infinite steps(1);
}

.glitch::after {
  color: var(--cp-red);
  transform: translate(3px, 0);
  mix-blend-mode: screen;
  animation: glitch-b 2.7s infinite steps(1);
}

@keyframes glitch-a {
  0%, 91%   { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }
  92%       { clip-path: inset(10% 0 55% 0); transform: translate(-6px, 2px); opacity: 1; }
  94%       { clip-path: inset(60% 0 8% 0);  transform: translate(4px, -1px); }
  96%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }
}

@keyframes glitch-b {
  0%, 89%   { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }
  90%       { clip-path: inset(45% 0 30% 0); transform: translate(6px, -2px); opacity: 1; }
  93%       { clip-path: inset(5% 0 80% 0);  transform: translate(-5px, 1px); }
  95%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }
}

.hero-tag {
  margin-top: clamp(14px, 3vw, 22px);
  font-size: clamp(0.98rem, 2vw, 1.15rem);
  color: var(--cp-muted);
  max-width: 60ch;
}

.hero-tag b { color: var(--cp-red); font-weight: 600; }

.hero-stats {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 统计胶囊(数据读数) */
.readout {
  font-family: var(--f-data);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--cp-muted);
  border: 1px solid var(--cp-edge);
  background: rgba(16, 16, 22, 0.7);
  padding: 7px 12px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.readout b { color: var(--cp-red); font-weight: 700; }

/* ============ 区块 ============ */
.grid-section { margin-top: clamp(40px, 6vw, 64px); }

/* ============ 属性格 ============ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.stat-card {
  --cut: 12px;
  background: linear-gradient(180deg, var(--cp-panel-2), var(--cp-panel));
  border: 1px solid var(--cp-edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  padding: 12px 14px 14px;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.stat-card:hover {
  border-color: var(--cp-red);
  transform: translateY(-2px);
}

.stat-card .stat-code {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--cp-muted);
}

.stat-card .stat-code small { color: var(--cp-red); }

.stat-card .stat-val {
  font-family: var(--f-data);
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--cp-ink);
  margin-top: 2px;
}

.stat-card .stat-val .dash { color: var(--cp-faint); }

.stat-card .stat-flag {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 7px;
  height: 7px;
  background: var(--cp-faint);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ============ 双栏布局 ============ */
.split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.hud-panel {
  background: linear-gradient(180deg, rgba(16, 16, 22, 0.92), rgba(10, 10, 14, 0.92));
  border: 1px solid var(--cp-edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.hud-panel .panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--cp-edge);
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.12), transparent 55%);
}

.hud-panel .panel-head .dot {
  width: 8px;
  height: 8px;
  background: var(--cp-red);
  box-shadow: 0 0 8px var(--cp-red);
  animation: pulse 1.6s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hud-panel .panel-head .panel-name {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.hud-panel .panel-head .panel-extra {
  margin-left: auto;
  font-family: var(--f-data);
  font-size: 0.68rem;
  color: var(--cp-faint);
  letter-spacing: 0.14em;
}

.hud-panel .panel-body { padding: 16px; }

/* 键值行 */
.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(38, 38, 47, 0.9);
}

.kv-row:last-child { border-bottom: 0; }

.kv-row .k {
  font-family: var(--f-display);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  color: var(--cp-muted);
  text-transform: uppercase;
}

.kv-row .v {
  font-family: var(--f-data);
  color: var(--cp-faint);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

/* ============ 角色类型芯片 ============ */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cp-muted);
  border: 1px solid var(--cp-edge);
  background: rgba(16, 16, 22, 0.7);
  padding: 6px 12px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  cursor: default;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chip:hover { color: var(--cp-ink); border-color: var(--cp-red); background: rgba(255, 30, 45, 0.1); }

.chip .en { color: var(--cp-red); font-family: var(--f-data); font-size: 0.66rem; margin-left: 6px; letter-spacing: 0.06em; }

/* ============ 判定公式条 ============ */
.formula-box {
  border: 1px solid var(--cp-edge);
  border-left: 4px solid var(--cp-red);
  background: rgba(255, 30, 45, 0.05);
  padding: 12px 16px;
  font-family: var(--f-data);
  font-size: 0.9rem;
  color: var(--cp-ink);
  letter-spacing: 0.05em;
  margin-top: 18px;
  overflow-x: auto;
  white-space: nowrap;
}

.formula-box .plus { color: var(--cp-muted); }
.formula-box .op { color: var(--cp-red); }
.formula-box .dim { color: var(--cp-muted); }

/* ============ 按钮 ============ */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.btn {
  --cut: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding: 12px 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  cursor: pointer;
  border: 0;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--cp-red), var(--cp-red-deep));
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 30, 45, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--cp-ink);
  border: 1px solid var(--cp-edge);
}

.btn-ghost:hover { border-color: var(--cp-red); color: var(--cp-red); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ============ 底部 ============ */
.site-foot {
  border-top: 1px solid var(--cp-edge);
  background: rgba(6, 6, 8, 0.9);
}

.site-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--f-data);
  font-size: 0.72rem;
  color: var(--cp-faint);
  letter-spacing: 0.1em;
}

.site-foot-inner .warn { color: var(--cp-yellow); }

/* 分页角标(装饰) */
.corner-tag {
  position: fixed;
  right: -46px;
  top: 26px;
  transform: rotate(45deg);
  background: var(--cp-red);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  padding: 4px 58px;
  box-shadow: 0 0 18px rgba(255, 30, 45, 0.5);
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 560px) { .corner-tag { display: none; } }

/* ============ 读数条(hero 之下, 不占 hero 配额) ============ */
.readout-band {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -16px 0 8px;
}

/* ============ 可访问性 ============ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cp-red);
  outline-offset: 3px;
}

/* 尊重系统减少动态偏好: 关闭 glitch/脉冲/过渡 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .glitch::before,
  .glitch::after { display: none; }
  .hud-panel .panel-head .dot { animation: none; }
}

/* ============================================================
   购物清单页扩展 (cyberpunk-red-shop.html)
   ============================================================ */
.hero--compact { margin-bottom: 8px; }
.hero--compact h1 { font-size: clamp(2.2rem, 7vw, 4.6rem); }

.src-note {
  font-family: var(--f-data);
  font-size: 0.72rem;
  color: var(--cp-red);
  letter-spacing: 0.08em;
  margin-left: 10px;
  vertical-align: middle;
}

/* 目录条 */
.shop-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cp-edge);
}

.shop-toc a {
  font-family: var(--f-data);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--cp-muted);
  border: 1px solid var(--cp-edge);
  padding: 5px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.shop-toc a:hover { color: var(--cp-red); border-color: var(--cp-red); }

/* 术语按钮 */
.term {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--cp-red);
  text-underline-offset: 3px;
}

.term:hover { color: var(--cp-red); }

.term--inline {
  font: inherit;
  color: var(--cp-red);
}

/* 表格 */
.table-scroll { overflow-x: auto; }

.shop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: rgba(10, 10, 14, 0.6);
}

.shop-table th {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--cp-red);
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--cp-red);
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.14), transparent 70%);
  white-space: nowrap;
}

.shop-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(38, 38, 47, 0.7);
  vertical-align: top;
}

.shop-table tbody tr { transition: background 0.12s ease; }
.shop-table tbody tr:hover { background: rgba(255, 30, 45, 0.06); }

/* 可加入清单的行 */
tr.item { cursor: pointer; }
tr.item.selected {
  background: rgba(255, 30, 45, 0.14);
  box-shadow: inset 3px 0 0 var(--cp-red);
}
tr.item.selected:hover { background: rgba(255, 30, 45, 0.18); }

.num { font-family: var(--f-data); white-space: nowrap; }
.trait { font-family: var(--f-data); font-size: 0.72rem; color: var(--cp-muted); letter-spacing: 0.04em; }

.table-src {
  font-size: 0.78rem;
  color: var(--cp-muted);
  margin: 10px 0 0;
  line-height: 1.7;
}

.shop-table--desc td:first-child { font-weight: 600; white-space: nowrap; color: var(--cp-ink); }
.shop-table--wide th, .shop-table--wide td { white-space: nowrap; }

/* 义体分块 */
.cyber-block { margin-top: 26px; }
.cyber-block h3 {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 4px solid var(--cp-red);
}
.cyber-block h3 small { color: var(--cp-muted); font-size: 0.7rem; letter-spacing: 0.05em; }

/* 购物清单栏 */
.cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 56px);
  background: rgba(6, 6, 8, 0.92);
  border-top: 2px solid var(--cp-red);
  backdrop-filter: blur(4px);
  font-family: var(--f-data);
  font-size: 0.86rem;
  transform: translateY(110%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-bar.open { transform: translateY(0); }

.cart-bar .cart-title {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cp-red);
  text-transform: uppercase;
  margin-right: 6px;
}

.cart-bar .cart-total { color: var(--cp-yellow); font-weight: 700; }

.cart-clear {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 6px 14px;
}

/* 术语小窗 */
.gloss-dialog {
  border: 1px solid var(--cp-red);
  background: #0d0d12;
  color: var(--cp-ink);
  max-width: min(440px, 92vw);
  width: 440px;
  padding: 0;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.gloss-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}

.gloss-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cp-edge);
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.16), transparent 60%);
}

.gloss-head .dot {
  width: 8px;
  height: 8px;
  background: var(--cp-red);
  box-shadow: 0 0 8px var(--cp-red);
}

.gloss-kicker {
  font-family: var(--f-data);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--cp-muted);
  text-transform: uppercase;
}

.gloss-close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--cp-edge);
  color: var(--cp-muted);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.9rem;
}

.gloss-close:hover { color: var(--cp-red); border-color: var(--cp-red); }

.gloss-dialog h3 {
  margin: 18px 20px 10px;
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--cp-red);
}

.gloss-dialog p { margin: 0 20px 8px; font-size: 0.9rem; line-height: 1.8; }

.gloss-dialog .gloss-src {
  font-family: var(--f-data);
  font-size: 0.7rem;
  color: var(--cp-faint);
  padding-bottom: 18px;
}

/* ============================================================
   车卡器向导扩展 (cyberpunk-red-chargen.html)
   ============================================================ */

/* ---------- 向导导航 ---------- */
.wiz-bar { margin-top: clamp(18px, 3vw, 30px); }

.wiz-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .wiz-steps { grid-template-columns: 1fr 1fr; }
}

.wiz-steps li { position: relative; }

.wiz-step-btn {
  width: 100%;
  border: 1px solid var(--cp-edge);
  background: linear-gradient(180deg, var(--cp-panel-2), var(--cp-panel));
  color: var(--cp-muted);
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px 10px 40px;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  position: relative;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wiz-step-btn .step-no {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-data);
  font-size: 0.9rem;
  color: var(--cp-red);
}

.wiz-step-btn .step-en {
  display: block;
  font-family: var(--f-data);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--cp-faint);
  margin-top: 2px;
}

.wiz-step-btn:hover:not(:disabled) { color: var(--cp-ink); border-color: var(--cp-red); }
.wiz-step-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.wiz-step-btn.done { border-color: rgba(255, 30, 45, 0.45); }
.wiz-step-btn.done::after {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cp-yellow);
  font-size: 0.8rem;
}

.wiz-step-btn.active {
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.28), rgba(255, 30, 45, 0.05) 70%);
  color: var(--cp-ink);
  border-color: var(--cp-red);
}

/* ---------- 步骤面板 ---------- */
.char-step { display: none; margin-top: clamp(26px, 4vw, 44px); }
.char-step.open { display: block; }

.step-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 6px;
}

.step-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.step-head .step-tag {
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--cp-red);
}

.step-sub { color: var(--cp-muted); font-size: 0.9rem; max-width: 78ch; margin: 0 0 22px; }
.step-sub b { color: var(--cp-ink); }
.step-sub .hl-y { color: var(--cp-yellow); }

/* ---------- HUD 小组件 ---------- */
.cg-panel {
  background: linear-gradient(180deg, rgba(16, 16, 22, 0.9), rgba(10, 10, 14, 0.9));
  border: 1px solid var(--cp-edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  padding: 16px 18px;
  margin-bottom: 18px;
}

.cg-panel h3 {
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cg-panel h3 small { color: var(--cp-faint); font-size: 0.64rem; letter-spacing: 0.08em; margin-left: 8px; }

.cg-panel .cg-sub { color: var(--cp-muted); font-size: 0.78rem; margin: 0 0 12px; }

/* ---------- 职业卡片 ---------- */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.role-card {
  position: relative;
  border: 1px solid var(--cp-edge);
  background: linear-gradient(180deg, var(--cp-panel-2), var(--cp-panel));
  padding: 12px 14px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.role-card:hover { border-color: var(--cp-red); transform: translateY(-2px); }

.role-card.sel {
  border-color: var(--cp-red);
  background: linear-gradient(180deg, rgba(255, 30, 45, 0.2), rgba(16, 16, 22, 0.95));
  box-shadow: inset 3px 0 0 var(--cp-red);
}

.role-card .rc-name { font-family: var(--f-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.06em; }
.role-card .rc-name small { color: var(--cp-red); font-family: var(--f-data); font-size: 0.6rem; margin-left: 6px; letter-spacing: 0.06em; }
.role-card .rc-ability { color: var(--cp-yellow); font-size: 0.72rem; margin: 6px 0 6px; letter-spacing: 0.04em; }
.role-card .rc-ability small { color: var(--cp-faint); }
.role-card .rc-desc { color: var(--cp-muted); font-size: 0.8rem; line-height: 1.6; margin: 0; }
.role-card .rc-check {
  position: absolute; top: 10px; right: 12px;
  width: 16px; height: 16px; line-height: 15px; text-align: center;
  font-size: 0.7rem; color: transparent;
  border: 1px solid var(--cp-edge);
}
.role-card.sel .rc-check { color: #000; background: var(--cp-yellow); border-color: var(--cp-yellow); }

.role-detail {
  margin-top: 16px;
  border: 1px solid var(--cp-red);
  border-left: 4px solid var(--cp-red);
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.12), transparent 65%);
  padding: 14px 18px;
  display: none;
}
.role-detail.open { display: block; }
.role-detail h4 { margin: 0 0 6px; font-family: var(--f-display); letter-spacing: 0.1em; font-size: 1rem; text-transform: uppercase; }
.role-detail h4 small { color: var(--cp-red); font-family: var(--f-data); font-size: 0.62rem; margin-left: 8px; }
.role-detail p { margin: 4px 0; font-size: 0.88rem; color: var(--cp-muted); }
.role-detail .rd-line b { color: var(--cp-ink); }

/* ---------- 生命路径 ---------- */
.lp-block {
  border: 1px solid var(--cp-edge);
  background: rgba(10, 10, 14, 0.55);
  padding: 14px 16px;
  margin: 0 0 14px;
}

.lp-block .lp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lp-block .lp-title .lp-code { color: var(--cp-red); font-family: var(--f-data); font-size: 0.66rem; letter-spacing: 0.18em; }

.lp-block .lp-title .spacer { flex: 1; }

.lp-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 16px; }

.lp-field { display: flex; flex-direction: column; gap: 4px; }

.lp-field .lf-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-field .lf-label { font-size: 0.82rem; color: var(--cp-muted); letter-spacing: 0.03em; }
.lp-field .lf-hint { font-size: 0.7rem; color: var(--cp-faint); }

.lp-field input[type="text"],
.lp-field textarea,
.lp-field select,
.cg-input {
  background: #0a0a0e;
  border: 1px solid var(--cp-edge);
  color: var(--cp-ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
  transition: border-color 0.15s ease;
}

.lp-field input[type="text"]:focus,
.lp-field textarea:focus,
.lp-field select:focus,
.cg-input:focus { outline: 0; border-color: var(--cp-red); }

.lp-field textarea { min-height: 58px; resize: vertical; line-height: 1.6; }

/* 问号按钮 */
.q-btn {
  border: 1px solid var(--cp-edge);
  background: rgba(255, 30, 45, 0.08);
  color: var(--cp-yellow);
  width: 18px; height: 18px;
  line-height: 1;
  font-family: var(--f-data);
  font-size: 0.72rem;
  cursor: pointer;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.q-btn:hover { border-color: var(--cp-yellow); background: rgba(255, 214, 10, 0.15); }

/* 迷你听天命按钮 */
.dice-mini {
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--cp-muted);
  border: 1px solid var(--cp-edge);
  background: rgba(16, 16, 22, 0.8);
  padding: 3px 9px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dice-mini:hover { color: var(--cp-yellow); border-color: var(--cp-yellow); }
.dice-mini.warn:hover { color: var(--cp-red); border-color: var(--cp-red); }

/* 随机结果闪烁 */
.roll-flash { animation: rollFlash 0.5s ease; }
@keyframes rollFlash {
  0% { background: rgba(255, 214, 10, 0.35); }
  100% { background: transparent; }
}

/* 成员列表(朋友/敌人/爱情) */
.member-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.member-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 1fr) 34px;
  gap: 8px;
  align-items: center;
  border: 1px dashed rgba(38, 38, 47, 0.9);
  padding: 8px;
  background: rgba(6, 6, 8, 0.4);
}
.member-row .mr-tag { font-size: 0.78rem; color: var(--cp-faint); margin-bottom: 2px; display: block; }
.member-row select, .member-row input[type="text"] {
  background: #0a0a0e; border: 1px solid var(--cp-edge); color: var(--cp-ink);
  font: inherit; font-size: 0.86rem; padding: 5px 8px; width: 100%;
}
.member-row select:focus, .member-row input:focus { outline: 0; border-color: var(--cp-red); }
.mr-del {
  width: 30px; height: 30px; border: 1px solid var(--cp-edge); background: none;
  color: var(--cp-muted); cursor: pointer; font-size: 0.85rem;
}
.mr-del:hover { color: var(--cp-red); border-color: var(--cp-red); }

.lp-note { font-size: 0.76rem; color: var(--cp-faint); margin-top: 8px; }

/* ---------- 属性 ---------- */
.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.attr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--cp-edge);
  background: linear-gradient(180deg, var(--cp-panel-2), var(--cp-panel));
  padding: 8px 12px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.attr-row .ar-name { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; min-width: 58px; }
.attr-row .ar-name small { color: var(--cp-red); font-family: var(--f-data); font-size: 0.6rem; margin-left: 4px; }

.attr-row .ar-rec {
  font-size: 0.66rem;
  color: var(--cp-yellow);
  border: 1px solid rgba(255, 214, 10, 0.4);
  padding: 1px 6px;
  letter-spacing: 0.08em;
  visibility: hidden;
}

.attr-row .ar-rec.on { visibility: visible; }

.attr-row input[type="number"] {
  margin-left: auto;
  width: 64px;
  background: #0a0a0e;
  border: 1px solid var(--cp-edge);
  color: var(--cp-ink);
  font-family: var(--f-data);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  padding: 6px 4px;
}

.attr-row input[type="number"]:focus { outline: 0; border-color: var(--cp-red); }

.attr-row .dice-chip {
  font-family: var(--f-data);
  font-size: 0.85rem;
  color: var(--cp-faint);
  min-width: 20px;
  text-align: center;
}

/* 派生属性读数 */
.derived-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.derived-card {
  border: 1px solid var(--cp-edge);
  border-top: 3px solid var(--cp-red);
  background: rgba(16, 16, 22, 0.85);
  padding: 12px 14px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.derived-card .dc-name { font-family: var(--f-data); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--cp-muted); text-transform: uppercase; }
.derived-card .dc-val { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1.2; }
.derived-card .dc-val small { font-size: 0.9rem; color: var(--cp-muted); font-weight: 400; }
.derived-card .dc-formula { font-size: 0.7rem; color: var(--cp-faint); }

/* ---------- 技能 ---------- */
.skill-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family: var(--f-data);
  font-size: 0.82rem;
  color: var(--cp-muted);
  padding: 10px 14px;
  border: 1px solid var(--cp-edge);
  background: rgba(255, 30, 45, 0.05);
  margin-bottom: 16px;
}

.skill-ledger b { color: var(--cp-ink); font-size: 1rem; }
.skill-ledger .pts-y { color: var(--cp-yellow); font-size: 1.05rem; font-weight: 700; }
.skill-ledger .pts-r { color: var(--cp-red); font-size: 1.05rem; font-weight: 700; }

.skill-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.skill-table th {
  font-family: var(--f-display);
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--cp-edge);
}

.skill-table td { padding: 5px 10px; border-bottom: 1px solid rgba(38, 38, 47, 0.55); vertical-align: middle; }

.skill-table tr.skill-cat td {
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.14), transparent 75%);
  font-family: var(--f-display);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--cp-red);
  padding: 8px 10px 6px;
  border-bottom: 0;
}

.skill-table .sk-name { font-weight: 600; }
.skill-table .sk-name .attr { color: var(--cp-faint); font-family: var(--f-data); font-size: 0.68rem; margin-left: 6px; letter-spacing: 0.08em; }
.skill-table .x2badge {
  font-family: var(--f-data); font-size: 0.6rem; color: var(--cp-yellow);
  border: 1px solid rgba(255, 214, 10, 0.5); padding: 0 4px; margin-left: 6px; letter-spacing: 0.06em;
}
.skill-table .sk-base {
  font-size: 0.62rem; color: var(--cp-faint); border: 1px dashed var(--cp-edge);
  padding: 0 5px; margin-left: 6px; letter-spacing: 0.05em;
}
.skill-table .sk-free { color: var(--cp-yellow); font-size: 0.66rem; margin-left: 6px; letter-spacing: 0.05em; }

.stepper { display: inline-flex; align-items: center; gap: 2px; }
.stepper button {
  width: 24px; height: 24px;
  border: 1px solid var(--cp-edge);
  background: rgba(16, 16, 22, 0.9);
  color: var(--cp-ink);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.stepper button:hover:not(:disabled) { border-color: var(--cp-red); color: var(--cp-red); }
.stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper .lv { min-width: 30px; text-align: center; font-family: var(--f-data); font-weight: 700; }
.stepper .cost { font-size: 0.6rem; color: var(--cp-faint); text-align: center; font-family: var(--f-data); }

.sk-pts { font-family: var(--f-data); color: var(--cp-muted); font-size: 0.78rem; text-align: right; white-space: nowrap; }

/* ---------- 资金 ---------- */
.fund-box {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--cp-edge);
  border-left: 4px solid var(--cp-yellow);
  background: rgba(16, 16, 22, 0.8);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.fund-box .fb-label { font-family: var(--f-data); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--cp-muted); text-transform: uppercase; }
.fund-box .fund-total { font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; color: var(--cp-yellow); }

.fund-box input[type="number"] {
  width: 150px;
  background: #0a0a0e; border: 1px solid var(--cp-edge); color: var(--cp-ink);
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; padding: 8px 10px;
}

.dice-anim-row { display: flex; gap: 3px; flex-wrap: wrap; font-family: var(--f-data); }
.dice-anim-row .die { width: 22px; height: 22px; border: 1px solid var(--cp-edge); background: var(--cp-panel-2); color: var(--cp-red); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; }

/* ---------- 商店/购物 ---------- */
.shop-zone { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .shop-zone { grid-template-columns: 1fr; } }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cat-tab {
  font-family: var(--f-data); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--cp-muted); border: 1px solid var(--cp-edge);
  background: rgba(16, 16, 22, 0.7); padding: 5px 10px; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.cat-tab:hover { color: var(--cp-ink); border-color: var(--cp-red); }
.cat-tab.on { background: rgba(255, 30, 45, 0.22); color: var(--cp-ink); border-color: var(--cp-red); }

.gear-list { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; padding-right: 4px; }

.gear-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--cp-edge);
  background: rgba(10, 10, 14, 0.6);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.gear-item:hover { border-color: var(--cp-red); }
.gear-item.owned { background: rgba(255, 30, 45, 0.12); box-shadow: inset 3px 0 0 var(--cp-red); }

.gear-item .gi-check { width: 15px; height: 15px; flex: 0 0 auto; border: 1px solid var(--cp-edge); margin-top: 3px; text-align: center; font-size: 0.62rem; line-height: 14px; color: transparent; }
.gear-item.owned .gi-check { background: var(--cp-yellow); border-color: var(--cp-yellow); color: #000; }

.gear-item .gi-main { flex: 1; min-width: 0; }
.gear-item .gi-name { font-weight: 600; font-size: 0.88rem; }
.gear-item .gi-name small { color: var(--cp-red); font-family: var(--f-data); font-size: 0.6rem; margin-left: 6px; }
.gear-item .gi-meta { font-family: var(--f-data); font-size: 0.7rem; color: var(--cp-muted); margin-top: 3px; line-height: 1.5; }
.gear-item .gi-desc { font-size: 0.74rem; color: var(--cp-faint); margin-top: 2px; line-height: 1.5; }
.gear-item .gi-price { font-family: var(--f-display); font-weight: 700; color: var(--cp-yellow); white-space: nowrap; font-size: 0.86rem; }

.gear-item .gi-controls { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.gi-loc select {
  background: #0a0a0e; border: 1px solid var(--cp-edge); color: var(--cp-muted);
  font: inherit; font-size: 0.7rem; padding: 2px 4px;
}

/* 右侧清单摘要 */
.cart-panel { position: sticky; top: 14px; }

.cart-panel .cp-body { display: flex; flex-direction: column; gap: 8px; }

.cp-line { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; padding: 4px 0; border-bottom: 1px dashed rgba(38,38,47,0.7); }
.cp-line .k { color: var(--cp-muted); }
.cp-line .v { color: var(--cp-ink); text-align: right; }
.cp-line .v.warn { color: var(--cp-red); font-weight: 700; }

.cart-items { max-height: 180px; overflow-y: auto; font-size: 0.78rem; color: var(--cp-muted); }
.cart-items .ci { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
.cart-items .ci b { color: var(--cp-ink); font-weight: 600; }
.cart-items .ci .ci-qty { color: var(--cp-yellow); font-family: var(--f-data); }

.equip-summary .es-row { border: 1px solid var(--cp-edge); background: rgba(6, 6, 8, 0.5); margin-bottom: 8px; padding: 8px 10px; font-size: 0.82rem; }
.es-row .es-title { font-family: var(--f-display); font-size: 0.76rem; letter-spacing: 0.14em; color: var(--cp-red); text-transform: uppercase; margin-bottom: 4px; }
.es-row table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.es-row td, .es-row th { text-align: left; padding: 2px 6px; border-bottom: 1px dashed rgba(38,38,47,0.6); }
.es-row td.num, .es-row th.num { text-align: right; font-family: var(--f-data); }
.es-row .warn-c { color: var(--cp-red); font-weight: 700; }
.es-row .ok-c { color: var(--cp-cyan); }
.es-row .y-c { color: var(--cp-yellow); }

/* ---------- 向导底部导航 ---------- */
.wiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: 18px;
  border-top: 1px solid var(--cp-edge);
  flex-wrap: wrap;
}

.wiz-nav .wn-hint { font-family: var(--f-data); font-size: 0.72rem; color: var(--cp-faint); letter-spacing: 0.06em; }

/* 帮助弹窗里的表格 */
.help-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 8px 0 6px; }
.help-table th { text-align: left; color: var(--cp-yellow); font-weight: 600; padding: 3px 8px; border-bottom: 1px solid var(--cp-edge); font-size: 0.74rem; }
.help-table td { padding: 3px 8px; border-bottom: 1px dashed rgba(38, 38, 47, 0.7); vertical-align: top; }
.help-table td.n { color: var(--cp-red); font-family: var(--f-data); white-space: nowrap; }

.help-quote {
  border-left: 3px solid var(--cp-yellow);
  background: rgba(255, 214, 10, 0.06);
  margin: 8px 0;
  padding: 8px 12px;
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--cp-muted);
}

.help-quote b { color: var(--cp-yellow); }

/* 角色卡弹窗 */
.sheet-dialog {
  border: 1px solid var(--cp-red);
  background: #0b0b10;
  color: var(--cp-ink);
  width: min(980px, 96vw);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}

.sheet-dialog::backdrop { background: rgba(0,0,0,0.8); backdrop-filter: blur(3px); }

.sheet-dialog .gloss-head { position: sticky; top: 0; z-index: 2; background: #101016; }

.sheet-wrap { padding: 18px clamp(12px, 3vw, 28px) 30px; overflow-y: auto; max-height: calc(92vh - 52px); }

.sheet-head { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; border-bottom: 2px solid var(--cp-red); padding-bottom: 12px; margin-bottom: 14px; }
.sheet-head .sh-name { font-family: var(--f-display); font-weight: 800; font-size: 1.9rem; text-transform: uppercase; }
.sheet-head .sh-handle { font-size: 1rem; color: var(--cp-muted); }
.sheet-head .sh-role { font-family: var(--f-data); color: var(--cp-red); letter-spacing: 0.1em; }

.sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.sheet-col { border: 1px solid var(--cp-edge); background: rgba(10,10,14,0.6); padding: 12px 14px; }
.sheet-col h4 { margin: 0 0 8px; font-family: var(--f-display); font-size: 0.84rem; letter-spacing: 0.16em; color: var(--cp-red); text-transform: uppercase; border-bottom: 1px solid var(--cp-edge); padding-bottom: 6px; }
.sheet-col h4 small { color: var(--cp-faint); font-family: var(--f-data); font-size: 0.6rem; margin-left: 8px; }

.sheet-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 3px 0; }
.sheet-kv .k { color: var(--cp-muted); }
.sheet-kv .v { text-align: right; color: var(--cp-ink); }
.sheet-kv .v .en { color: var(--cp-faint); font-size: 0.68rem; }

.sheet-mini-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-mini-stats .ms { border: 1px solid var(--cp-edge); background: var(--cp-panel); padding: 4px 10px; font-size: 0.8rem; }
.sheet-mini-stats .ms b { color: var(--cp-yellow); font-family: var(--f-data); margin-left: 4px; }

.sheet-list { font-size: 0.8rem; line-height: 1.7; color: var(--cp-muted); }
.sheet-list b { color: var(--cp-ink); }
.sheet-list .tag { color: var(--cp-yellow); }

.sheet-foot-note { margin-top: 12px; font-family: var(--f-data); font-size: 0.68rem; color: var(--cp-faint); }

/* ============================================================
   角色卡：档案板 + A4 打印 / 存 PDF（赛博朋克档案风格）
   ============================================================ */
.sheet-plate {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  border: 1px solid var(--cp-edge);
  border-bottom: 2px solid var(--cp-red);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 30, 45, 0.12) 0 10px, transparent 10px 22px),
    linear-gradient(90deg, rgba(255, 30, 45, 0.08), transparent 60%);
  padding: 8px 14px;
  margin-bottom: 14px;
  font-family: var(--f-data);
  letter-spacing: 0.16em;
}

.sheet-plate .sp-title {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--cp-red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

.sheet-plate .sp-code { color: var(--cp-yellow); font-size: 0.66rem; }
.sheet-plate .sp-formula { margin-left: auto; color: var(--cp-muted); font-size: 0.66rem; }

.sheet-plate .sp-art { color: var(--cp-red); font-size: 0.7rem; }

.sheet-kv { page-break-inside: avoid; break-inside: avoid; }
.sheet-list div { page-break-inside: avoid; break-inside: avoid; }
.sheet-mini-stats .ms { page-break-inside: avoid; break-inside: avoid; }

/* A4 档案纸 */
@page { size: A4; margin: 11mm 9mm; }

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body { background: #fff !important; }

  /* 只留角色卡，其余全部消失 */
  .page-shell, .site-strip, .site-foot, .hazard-bar, .corner-tag,
  body::before, body::after, .wiz-bar, .char-step, .wiz-nav,
  .hud-panel, .gloss-dialog, .role-detail, .ident-bar { display: none !important; }

  body { color: #111; }

  .sheet-dialog {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
    clip-path: none;
  }

  .sheet-dialog::backdrop { display: none !important; }
  .sheet-dialog .gloss-head { display: none !important; }
  .sheet-wrap { max-height: none !important; overflow: visible !important; padding: 0 !important; }

  .sheet-plate {
    border: 1px solid #999;
    border-bottom: 3px solid #000;
    background: #fff !important;
    background-image: none !important;
    margin-bottom: 10px;
  }
  .sheet-plate .sp-title { color: #c00; }
  .sheet-plate .sp-code { color: #333; }
  .sheet-plate .sp-formula { color: #555; }

  .sheet-head { flex-wrap: wrap; border-bottom: 3px solid #000; margin-bottom: 12px; }
  .sheet-head .sh-name { font-size: 24pt; color: #000; }
  .sheet-head .sh-handle { color: #444; }
  .sheet-head .sh-role { color: #c00; letter-spacing: 0.1em; }
  .sheet-head .sheet-avatar {
    width: 92px !important;
    height: 92px !important;
    border: 2px solid #000 !important;
    filter: grayscale(0.85) contrast(1.02) !important;
    box-shadow: none !important;
  }
  .sheet-head .sheet-avatar.top { width: auto !important; height: auto !important; max-width: 150px; max-height: 130px; }

  /* 单一纵向流，杜绝两栏挤叠/被遮 */
  .sheet-grid { display: block !important; }
  .sheet-col {
    background: #fff !important;
    border: 1px solid #bbb !important;
    border-left: 5px solid #c00 !important;
    color: #111 !important;
    padding: 8px 12px !important;
    margin: 0 0 10px !important;
    box-shadow: none !important;
    clip-path: none !important;
    break-inside: auto;
  }
  .sheet-col h4 { color: #c00 !important; border-bottom: 1px solid #ddd !important; break-after: avoid; margin-bottom: 6px; }
  .sheet-kv .k { color: #444 !important; }
  .sheet-kv .v { color: #000 !important; }
  .sheet-list { color: #222 !important; }
  .sheet-list .tag { color: #b00 !important; }
  .sheet-mini-stats .ms { background: #fff !important; border: 1px solid #999 !important; color: #333 !important; }
  .sheet-mini-stats .ms b { color: #000 !important; }
  .sheet-foot-note { color: #666 !important; }
  .sheet-col .y-c, .sheet-col .ok-c { color: #000 !important; font-weight: 700; }
}

/* ============================================================
   车卡器第二轮扩展：血红大骰钮 · 头像 · 数值校验 · 义体分柜
   ============================================================ */

/* ---------- 生命路径里的听天命：大红钮 ---------- */
#step2 .dice-mini {
  background: linear-gradient(180deg, var(--cp-red), var(--cp-red-deep));
  color: #fff;
  border: 0;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.82rem;
  box-shadow: 0 0 16px rgba(255, 30, 45, 0.4);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

#step2 .dice-mini:hover { filter: brightness(1.18); color: #fff; border-color: transparent; }
#step2 .dice-mini.clear { background: none; border: 1px solid var(--cp-edge); color: var(--cp-muted); box-shadow: none; clip-path: none; padding: 8px 14px; }
#step2 .dice-mini.clear:hover { color: var(--cp-red); border-color: var(--cp-red); }

.dice-roll-big {
  font-size: 1rem !important;
  padding: 14px 26px !important;
  box-shadow: 0 0 26px rgba(255, 30, 45, 0.55) !important;
}

/* ---------- 头像 ---------- */
.avatar-preview {
  min-height: 64px;
  border: 1px dashed rgba(38, 38, 47, 0.9);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-top: 6px;
}

.avatar-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 2px solid var(--cp-red);
  background: #000;
  box-shadow: 0 0 14px rgba(255, 30, 45, 0.35);
}

.avatar-pos { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 6px; }

.avatar-pos label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--cp-muted);
  cursor: pointer;
  white-space: nowrap;
}

.avatar-pos input { accent-color: var(--cp-red); }

/* ---------- 属性数值校验 ---------- */
.attr-row.bad { border-color: var(--cp-red); box-shadow: 0 0 10px rgba(255, 30, 45, 0.25) inset; }
.attr-row.bad input { border-color: var(--cp-red); color: var(--cp-red); }
.ar-err {
  font-family: var(--f-data);
  font-size: 0.64rem;
  color: var(--cp-red);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- 义体分柜标签 ---------- */
.cat-tab small {
  font-family: var(--f-data);
  font-size: 0.6rem;
  color: var(--cp-faint);
  margin-left: 5px;
  letter-spacing: 0.04em;
}

/* ---------- 角色卡：头像入座 ---------- */
.sheet-head { align-items: center; }
.sheet-head .sh-block { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sheet-head .sheet-avatar {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border: 2px solid var(--cp-red);
  background: #000;
  flex: 0 0 auto;
  box-shadow: 0 0 12px rgba(255, 30, 45, 0.35);
}
.sheet-head .sheet-avatar.left { margin-right: 18px; }
.sheet-head .sheet-avatar.right { margin-left: 18px; }
.sheet-head--col { flex-direction: column; align-items: center; }
.sheet-head--col .sheet-avatar.top {
  width: auto;
  max-width: 220px;
  max-height: 180px;
  height: auto;
  margin: 0 auto 12px;
  border-width: 3px;
}

/* ---------- 职业能力规划 ---------- */
.ap-zone {
  margin-top: 16px;
  border: 1px solid var(--cp-edge);
  border-left: 4px solid var(--cp-red);
  background: linear-gradient(90deg, rgba(255, 30, 45, 0.08), transparent 70%);
  padding: 14px 18px;
}

.ap-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ap-code {
  color: var(--cp-red);
  font-family: var(--f-data);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  margin-right: 10px;
}

.ap-hint { color: var(--cp-muted); font-size: 0.82rem; margin: 0 0 12px; }

.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 14px; }

.ap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed rgba(38, 38, 47, 0.9);
  background: rgba(6, 6, 8, 0.45);
  padding: 8px 12px;
}

.ap-main { flex: 1; min-width: 0; }
.ap-name { font-weight: 700; font-size: 0.9rem; }
.ap-name .ap-cost { color: var(--cp-yellow); font-family: var(--f-data); font-size: 0.66rem; margin-left: 8px; letter-spacing: 0.04em; }
.ap-note { display: block; color: var(--cp-muted); font-size: 0.74rem; line-height: 1.5; margin-top: 2px; }

.ap-pool {
  margin-top: 12px;
  font-family: var(--f-data);
  font-size: 0.86rem;
  color: var(--cp-muted);
}
.ap-pool b { color: var(--cp-ink); }

.ap-used { font-family: var(--f-data); font-size: 0.8rem; color: var(--cp-muted); margin-left: 12px; }
.ap-used b { color: var(--cp-yellow); }

.net-chips { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }

.net-chip {
  border: 1px solid var(--cp-edge);
  background: rgba(16, 16, 22, 0.85);
  color: var(--cp-muted);
  font-family: var(--f-display);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.net-chip:hover { color: var(--cp-ink); border-color: var(--cp-red); }
.net-chip.on {
  background: linear-gradient(180deg, var(--cp-red), var(--cp-red-deep));
  color: #fff;
  border-color: var(--cp-red);
  box-shadow: 0 0 10px rgba(255, 30, 45, 0.4);
}

#net-random.dice-mini { background: none; border: 1px solid var(--cp-yellow); color: var(--cp-yellow); box-shadow: none; clip-path: none; padding: 6px 14px; font-weight: 600; }
#net-random.dice-mini:hover { background: rgba(255, 214, 10, 0.12); color: var(--cp-yellow); }

/* ---------- 长文本字数与 PDF 纸面 ---------- */
.char-count {
  margin-left: auto;
  font-family: var(--f-data);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--cp-faint);
  white-space: nowrap;
}

.char-count.warn { color: var(--cp-red); }

/* “为什么选择这一行？”与“还有话说”两处长文，在 PDF 里留出约 500 字 + 50 字冗余的固定纸面 */
.sheet-col.note-box .sheet-list {
  white-space: pre-wrap;
  word-break: break-word;
}

@media print {
  .sheet-col.note-box {
    min-height: 250px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .sheet-col.note-box .sheet-list {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
  }
}