/* ============================================================
   绘方像素 · 设计系统
   严格扁平：禁止渐变 / 禁止 emoji；圆角统一走 --r-xs / --r-sm / --r / --r-lg 令牌
   像素风矢量图标（pixelarticons 本地自托管）
   ============================================================ */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0e0f13;
  --panel: #16181f;
  --panel-2: #1c1f28;
  --panel-3: #22262f;
  --border: #2a2e3a;
  --border-strong: #3a3f4e;
  --text: #e8e9ee;
  --muted: #9aa0ae;
  --accent: #f0b429;
  --accent-ink: #1a1400;
  --ok: #3fb950;
  --danger: #e5484d;
  --info: #4fa3a5;
  --font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --pixel: "Press Start 2P", var(--font);

  /* 圆角令牌：全站不再强制直角，统一按令牌取值 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  /* 磨砂：半透明底 + 背景模糊（不引入渐变） */
  --glass: rgba(22, 24, 31, .72);
  --glass-2: rgba(28, 31, 40, .66);
  --glass-blur: blur(14px) saturate(150%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 表单控件先归零，避免各浏览器自带圆角参差；实际圆角由下面令牌统一赋予 */
input, select, textarea, button { border-radius: 0; }

/* ---------- 圆角：控件小而利落，容器大而柔和 ---------- */
.btn, .btn-sm, .btn-block, .btn-primary, .btn-danger, .btn-ok, .btn-ghost,
.input, .select, .textarea,
.tag, .badge, .opt,
.card-icon, .artist-ava, .ai-ava, .ai-thumb, .ai-bub-imgs img,
.side-link, .tab {
  border-radius: var(--r-sm);
}

.card, .panel, .stat-box, .modal, .toast, .table-wrap,
.ne-notice, .hero-stats, .steps,
.ai-side, .ai-main, .ai-tool, .ai-gate, .ai-sug, .ai-mem-i, .ai-bub,
.spec-grid, .price-break, .desc-box, .empty {
  border-radius: var(--r);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--text); text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.main { flex: 1; }

.pf-icon { vertical-align: -3px; margin-right: 6px; fill: currentColor; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: var(--panel);
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.topbar-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand-logo { height: 38px; width: auto; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  padding: 8px 14px; font-size: 14px; color: var(--muted);
  border: 2px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--accent); border-color: var(--border); background: var(--panel-2); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px 12px; background: var(--panel-2);
  border: 2px solid var(--border); font-size: 13px; color: var(--muted);
}

.announce {
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 700; padding: 8px 0;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  padding: 11px 26px; font-size: 14px; font-weight: 700; font-family: var(--font);
  border: 2px solid var(--border-strong); background: var(--panel-2); color: var(--text);
  cursor: pointer; transition: background .12s, border-color .12s;
  user-select: none;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #ffc93d; border-color: #ffc93d; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ok { background: transparent; border-color: var(--ok); color: var(--ok); }
.btn-ok:hover { background: var(--ok); color: #06110a; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero {
  border-bottom: 2px solid var(--border);
  background: var(--panel);
  padding: 172px 0 156px;
  min-height: 820px;
  position: relative; overflow: hidden;
}
/* 视频背景（后台可更换：system_config.site.video_bg） */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  image-rendering: auto;
}
.hero-mask {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #0e0f13; opacity: .66;
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 0;
  /* 纯 SVG 网格线，无渐变 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M28 0H0v28' fill='none' stroke='%231c1f28' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 28px 28px;
}
.hero-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 36px; }
.hero-main { flex: 1; }
.hero-logo { height: 84px; width: auto; margin-bottom: 22px; }
.hero-title {
  font-size: 40px; font-weight: 800; letter-spacing: 2px; line-height: 1.25;
  margin-bottom: 16px;
}
.hero-title .hl { color: var(--accent); }
.hero-sub { color: var(--muted); font-size: 16px; max-width: 520px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 0; margin-top: 42px;
  border: 2px solid var(--border); background: var(--bg); width: fit-content;
  border-radius: var(--r) !important; overflow: hidden;
}
.hero-stat { padding: 14px 28px; border-right: 2px solid var(--border); }
.hero-stat:last-child { border-right: 0; }
.hero-stat b { display: block; font-family: var(--pixel); font-size: 16px; color: var(--accent); }
.hero-stat span { font-size: 12px; color: var(--muted); }
.hero-side {
  width: 408px; flex-shrink: 0;
}
.hero-side-t {
  font-family: var(--pixel); font-size: 11px; color: var(--accent);
  margin-bottom: 14px; letter-spacing: 1px;
}
/* MC 皮肤预览占位：像素方块人 */
.skin-preview {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  aspect-ratio: 1/1; image-rendering: pixelated;
}
.skin-preview i { display: block; aspect-ratio: 1/1; }

/* ---------- 板块 ---------- */
.section { padding: 64px 0; }
.section + .section { border-top: 2px solid var(--border); }
.section-head { margin-bottom: 36px; }
.section-tag {
  font-family: var(--pixel); font-size: 11px; color: var(--accent);
  letter-spacing: 2px; display: block; margin-bottom: 10px;
}
.section-title { font-size: 28px; font-weight: 800; letter-spacing: 1px; }
.section-desc { color: var(--muted); margin-top: 8px; max-width: 560px; }

/* ---------- 卡片 / 网格 ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  background: var(--panel); border: 2px solid var(--border); padding: 24px;
  transition: border-color .12s;
  border-radius: var(--r) !important;
}
.card:hover { border-color: var(--border-strong); }
.card-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--panel-3); border: 2px solid var(--border); color: var(--accent);
  margin-bottom: 16px;
}
.card-t { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.card-d { font-size: 13px; color: var(--muted); }

/* 首页「为什么选择」：编辑式分栏，去除通用四卡 AI 模板感 */
.section-why { background: var(--bg); }
.why-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: start; }
.why-lead .section-title { margin-bottom: 14px; }
.why-lead-p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 18px 0 26px; max-width: 460px; }
.why-list { border: 2px solid var(--border); border-radius: var(--r) !important; overflow: hidden; }
.why-item {
  display: flex; gap: 18px; padding: 22px;
  border-bottom: 2px solid var(--border);
  transition: border-color .12s, background .12s;
}
.why-item:hover { border-color: var(--accent); }
.why-no {
  font-family: var(--pixel); font-size: 18px; color: var(--accent);
  line-height: 1; flex-shrink: 0; width: 34px; padding-top: 2px;
}
.why-t { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.why-d { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* 流程步骤 */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 2px solid var(--border); }
.step {
  background: var(--panel); padding: 26px 20px; border-right: 2px solid var(--border);
  position: relative;
}
.step:last-child { border-right: 0; }
.step-no {
  font-family: var(--pixel); font-size: 18px; color: var(--border-strong);
  position: absolute; top: 14px; right: 16px;
}
.step-icon { color: var(--accent); margin-bottom: 14px; }
.step-t { font-weight: 700; margin-bottom: 6px; }
.step-d { font-size: 12px; color: var(--muted); }

/* 画师卡片 */
.artists-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.artist-card { background: var(--panel); border: 2px solid var(--border); padding: 22px; border-radius: var(--r) !important; }
.artist-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.artist-ava {
  width: 52px; height: 52px; background: var(--panel-3); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  overflow: hidden; flex-shrink: 0;
}
.artist-ava img { width: 100%; height: 100%; object-fit: cover; }
.artist-name { font-weight: 700; }
.artist-meta { font-size: 12px; color: var(--muted); }
.artist-bio { font-size: 13px; color: var(--muted); min-height: 40px; margin-bottom: 12px; }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 12px; padding: 2px 10px; border: 2px solid var(--border);
  color: var(--muted); background: var(--panel-2);
}
.tag.gold { color: var(--accent); border-color: var(--accent); }

/* 价格表 */
.price-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 2px solid var(--border); border-radius: var(--r) !important; overflow: hidden; }
.price-table th, .price-table td { padding: 12px 16px; border: 2px solid var(--border); text-align: left; font-size: 14px; }
.price-table th { background: var(--panel-2); font-weight: 700; }
.price-table td.num { font-family: var(--pixel); font-size: 12px; color: var(--accent); }

/* ---------- 表单 ---------- */
.form-card { background: var(--panel); border: 2px solid var(--border); padding: 30px; border-radius: var(--r) !important; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.input, .select, .textarea {
  width: 100%; background: var(--bg); border: 2px solid var(--border);
  color: var(--text); padding: 11px 14px; font-size: 14px; font-family: var(--font);
  outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.textarea { min-height: 110px; resize: vertical; }

/* 选项块（单选/多选像素块） */
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opt {
  border: 2px solid var(--border); background: var(--bg); padding: 14px;
  cursor: pointer; user-select: none; text-align: center;
}
.opt:hover { border-color: var(--border-strong); }
.opt.sel { border-color: var(--accent); background: var(--panel-2); }
.opt.sel .opt-t { color: var(--accent); }
.opt-t { font-weight: 700; font-size: 14px; }
.opt-p { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* 网易端过审提示说明 */
.ne-notice { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--panel); padding: 14px 16px; }
.ne-notice-t { font-weight: 700; font-size: 14px; color: var(--accent); line-height: 1.6; }
.ne-notice-d { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 6px; }
.opts.cols-2 { grid-template-columns: repeat(2, 1fr); }
.opts.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 估价面板 */
.estimate-panel {
  background: var(--panel); border: 2px solid var(--accent);
  padding: 26px; position: sticky; top: 92px;
  border-radius: var(--r) !important;
}
.estimate-t { font-family: var(--pixel); font-size: 11px; color: var(--accent); letter-spacing: 1px; margin-bottom: 14px; }
.estimate-num { font-family: var(--pixel); font-size: 30px; color: var(--accent); margin-bottom: 4px; }
.estimate-note { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.estimate-items { font-size: 13px; border-top: 2px solid var(--border); padding-top: 14px; margin-bottom: 20px; }
.estimate-item { display: flex; justify-content: space-between; padding: 4px 0; color: var(--muted); }
.estimate-item b { color: var(--text); font-weight: 400; }

/* 定制表单步骤（A-H）—— 向导模式 */
.wizard { position: relative; }
/* 进度条 */
.wizard-progress {
  display: flex; gap: 4px; margin-bottom: 28px; padding: 2px 0;
}
.wiz-dot {
  flex: 1; height: 3px; background: var(--border); border-radius: 2px !important;
  transition: background .25s ease, box-shadow .25s ease;
}
.wiz-dot.done { background: var(--accent); }
.wiz-dot.active { background: var(--accent); box-shadow: 0 0 8px rgba(240,180,41,.45); }
/* 步骤容器：单步显示 + 过渡动画 */
.wizard-step {
  opacity: 0; transform: translateX(16px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none; position: absolute; top: 0; left: 0; right: 0;
}
.wizard-step.show {
  opacity: 1; transform: translateX(0);
  pointer-events: auto; position: relative;
}
/* 步骤内部布局（复用旧 cstep 样式但去掉边框线，向导模式下每步独立卡片感） */
.cstep {
  display: grid; grid-template-columns: 40px 1fr; gap: 0 20px;
  padding: 24px 0 4px;
}
.cstep-label {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--pixel); font-size: 15px; font-weight: 700;
  flex-shrink: 0; align-self: start; margin-top: 2px;
  border-radius: 6px !important;
}
.cstep-label svg { color: var(--accent-ink); }
.cstep-body { min-width: 0; }
.cstep-t {
  font-size: 16px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 8px;
}
.cstep-sub {
  font-size: 12px; color: var(--muted); font-weight: 400;
}
.form-tip {
  font-size: 12px; color: var(--muted); margin-top: 8px;
  display: flex; align-items: center; gap: 5px;
}
.form-tip svg { flex-shrink: 0; opacity: 0.6; }

/* 向导导航按钮 */
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--border); }
.wizard-nav .btn { min-width: 120px; }

/* 上传 */
.upload-box {
  border: 2px dashed var(--border-strong); background: var(--bg);
  padding: 26px; text-align: center; cursor: pointer; color: var(--muted);
}
.upload-box:hover { border-color: var(--accent); color: var(--text); }
.upload-previews { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.upload-previews .up-img { width: 72px; height: 72px; border: 2px solid var(--border); object-fit: cover; position: relative; }

/* ---------- 徽章 / 表格 / 标签页 ---------- */
.badge {
  display: inline-block; font-size: 12px; padding: 2px 10px;
  border: 2px solid var(--border-strong); color: var(--muted); white-space: nowrap;
}
.badge.s-pending { color: var(--accent); border-color: var(--accent); }
.badge.s-accepted, .badge.s-crafting, .badge.s-revision { color: var(--info); border-color: var(--info); }
.badge.s-preview { color: #e8930c; border-color: #e8930c; }
.badge.s-completed { color: var(--ok); border-color: var(--ok); }
.badge.s-canceled { color: var(--danger); border-color: var(--danger); }

.table-wrap { border: 2px solid var(--border); background: var(--panel); overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { background: var(--panel-2); text-align: left; padding: 11px 14px; border-bottom: 2px solid var(--border); font-weight: 700; white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 2px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--panel-2); }
.tbl .num { font-family: var(--pixel); font-size: 11px; color: var(--accent); white-space: nowrap; }
.tbl .ops { display: flex; gap: 8px; }

.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.tab {
  padding: 12px 22px; font-size: 14px; font-weight: 700; color: var(--muted);
  cursor: pointer; border: 2px solid transparent; border-bottom: 0; user-select: none;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); background: var(--panel); border-color: var(--border); }

/* ---------- 后台布局 ---------- */
.admin-layout { display: flex; min-height: calc(100vh - 64px); }
.sidebar {
  width: 216px; background: var(--panel); border-right: 2px solid var(--border);
  flex-shrink: 0; padding: 18px 0;
}
.side-t { font-family: var(--pixel); font-size: 10px; color: var(--muted); padding: 10px 20px; letter-spacing: 1px; }
.side-link {
  display: flex; align-items: center; padding: 11px 20px; font-size: 14px;
  color: var(--muted); cursor: pointer; border-left: 3px solid transparent; user-select: none;
}
.side-link:hover { color: var(--text); background: var(--panel-2); }
.side-link.on { color: var(--accent); border-left-color: var(--accent); background: var(--panel-2); }
.admin-content { flex: 1; padding: 28px; min-width: 0; }
.page-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.page-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }

/* 统计条 */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-box { background: var(--panel); border: 2px solid var(--border); padding: 18px 20px; }
.stat-box .v { font-family: var(--pixel); font-size: 18px; color: var(--accent); margin-bottom: 6px; }
.stat-box .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; }
.stat-box.green .v { color: var(--ok); }
.stat-box.red .v { color: var(--danger); }

/* 工具条 */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar .input, .toolbar .select { width: auto; min-width: 160px; }

/* ---------- 弹窗 / Toast ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.show { display: flex; }
.modal {
  background: var(--panel); border: 2px solid var(--border-strong);
  width: 560px; max-width: 96vw; max-height: 88vh; overflow-y: auto; padding: 26px;
}
.modal-t { font-size: 17px; font-weight: 800; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.modal-t .x { cursor: pointer; color: var(--muted); }
.modal-t .x:hover { color: var(--danger); }

#toast-root { position: fixed; top: 80px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--panel); border: 2px solid var(--border-strong); padding: 12px 18px;
  font-size: 14px; min-width: 220px; border-left: 4px solid var(--info);
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }

/* ---------- 登录页 ---------- */
.auth-wrap { display: flex; min-height: calc(100vh - 64px); }
.auth-left {
  width: 460px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 48px 40px; border-right: 2px solid var(--border); background: var(--panel);
}
.auth-card { width: 100%; max-width: 340px; border-radius: var(--r) !important; }
.auth-logo { height: 52px; margin-bottom: 26px; }
.auth-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); position: relative; overflow: hidden; padding: 40px;
}
.auth-right-in { position: relative; max-width: 480px; }
.auth-right h2 { font-size: 30px; font-weight: 800; margin-bottom: 16px; letter-spacing: 1px; }
.auth-right p { color: var(--muted); margin-bottom: 24px; }
.auth-feats { display: flex; flex-direction: column; gap: 12px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.auth-feat .pf-icon { color: var(--accent); margin: 0; }
.auth-tabs { display: flex; border: 2px solid var(--border); margin-bottom: 24px; border-radius: 6px !important; overflow: hidden; }
.auth-tabs .tab { flex: 1; text-align: center; border: 0; padding: 11px; cursor: pointer; font-weight: 700; color: var(--muted); transition: background .15s, color .15s; }
.auth-tabs .tab:hover { color: var(--text); background: rgba(240,180,41,.06); }
.auth-tabs .tab.on { background: var(--panel-2); color: var(--accent); }

/* ---------- 空态 / 加载 ---------- */
.empty { text-align: center; color: var(--muted); padding: 48px 0; font-size: 14px; }
.empty .pf-icon { display: block; margin: 0 auto 12px; color: var(--border-strong); }
.loading { text-align: center; padding: 40px; color: var(--muted); }

/* ---------- 页脚 ---------- */
.footer { border-top: 2px solid var(--border); background: var(--panel); margin-top: 60px; }
.footer-in { display: flex; justify-content: space-between; gap: 40px; padding: 44px 20px; flex-wrap: wrap; }
.footer-right { display: flex; }
.footer-logo { height: 40px; margin-bottom: 12px; }
.footer-slogan { color: var(--muted); font-size: 13px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.footer-col-t { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.footer-col a:hover { color: var(--accent); }
.social-row { display: flex; flex-direction: column; gap: 10px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1; }
.social-link svg { fill: currentColor; flex-shrink: 0; display: block; }
.social-link:hover { color: var(--accent); }
.footer-base { border-top: 2px solid var(--border); padding: 16px 0; font-size: 12px; color: var(--muted); }
.footer-base-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.beian { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
a.beian:hover { color: var(--accent); }
.ico-icp, .ico-ga, .ico-gh { width: 14px; height: 14px; object-fit: contain; }
/* 首页 3D 轮播 — 4 张图同时可见旋转 */
.carousel-wrapper {
  width: 100%; height: 380px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.carousel-inner {
  --w: 220px; --h: 142px;
  --translateZ: 185px;
  --rotateX: -6deg;
  --perspective: 1100px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  /* 由 home.js 逐帧驱动旋转，避免 hover 回正抽搐 */
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0deg);
  will-change: transform;
}
.carousel-card {
  position: absolute; border: 0; overflow: hidden;
  width: var(--w); height: var(--h); background: transparent; box-shadow: none;
  backface-visibility: visible;
  border-radius: 10px !important;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
  transition: opacity 0.45s ease, filter 0.45s ease;
}
/* hover：被指的卡片回正居中放大，其余三张变暗但继续随环转动 */
.carousel-card.dim { opacity: .45; filter: brightness(.65); }
.carousel-card.focus { box-shadow: 0 8px 32px rgba(240, 180, 41, 0.25); z-index: 5; }
.carousel-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px !important; }

/* 轮播图左下角文字说明（后台可配，默认隐藏，鼠标悬停时弹上） */
.carousel-cap {
  position: absolute; left: 10px; bottom: 8px;
  max-width: calc(100% - 20px);
  font-size: 11px; line-height: 1.4; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(12px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.carousel-card:hover .carousel-cap,
.carousel-card.focus .carousel-cap { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .carousel-cap { transition: none; }
}

/* ---------- 关于我们 · 历程时间线 ---------- */
.timeline-year {
  border-left: 3px solid var(--border); padding-left: 32px;
  margin-bottom: 48px; position: relative;
}
.timeline-year::before {
  content: ''; position: absolute; left: -8px; top: 4px;
  width: 13px; height: 13px; background: var(--accent);
}
.timeline-year-future { border-left-color: var(--accent); }
.timeline-year-future::before {
  background: var(--accent); box-shadow: 0 0 12px rgba(240, 180, 41, 0.35);
  width: 15px; height: 15px; left: -9px;
}
.timeline-year-label {
  font-family: var(--pixel); font-size: 28px; color: var(--accent);
  letter-spacing: 2px; margin-bottom: 4px;
}
.timeline-year-t {
  font-size: 14px; color: var(--muted); margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.timeline-events { display: flex; flex-direction: column; gap: 16px; }
.timeline-event {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; background: var(--panel); border: 2px solid var(--border);
  transition: border-color .15s;
}
.timeline-event:hover { border-color: var(--border-strong); }
.timeline-event-highlight {
  background: var(--panel-2); border-color: var(--accent);
  grid-template-columns: 44px 1fr; padding: 24px 22px;
}
.timeline-event-icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--panel-3); border: 2px solid var(--border); color: var(--accent);
  flex-shrink: 0;
}
.timeline-event-highlight .timeline-event-icon {
  width: 44px; height: 44px; background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
}
.timeline-event-t { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.timeline-event-d { font-size: 13px; color: var(--muted); line-height: 1.6; }

@media (max-width: 768px) {
  .timeline-year { padding-left: 22px; margin-bottom: 36px; }
  .timeline-event { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 14px; }
  .timeline-event-icon { width: 34px; height: 34px; }
  .timeline-year-label { font-size: 22px; }
}

/* ---------- 关于我们 · 装饰元素 ---------- */
.about-brand-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 2px solid var(--border);
  padding: 14px 20px; min-width: 140px;
  transition: border-color .15s;
}
.about-brand-card:hover { border-color: var(--accent); }
.about-brand-card svg { color: var(--accent); flex-shrink: 0; }
.about-brand-card span { font-weight: 700; font-size: 14px; }
.about-brand-card small { color: var(--muted); font-size: 11px; margin-left: auto; }

.about-deco {
  display: flex; align-items: center; gap: 24px;
  margin: 40px 0; padding: 20px 28px;
  background: var(--panel-2); border: 2px solid var(--border);
}
.about-deco-right { flex-direction: row-reverse; text-align: right; }
.about-deco-img {
  width: 200px; height: 125px; object-fit: cover;
  border: 2px solid var(--border); flex-shrink: 0;
}
.about-deco-text {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--text); font-weight: 700;
}
.about-deco-text svg { color: var(--accent); }

@media (max-width: 768px) {
  .about-deco { flex-direction: column; text-align: center; }
  .about-deco-right { flex-direction: column; text-align: center; }
  .about-deco-img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 16/10; }
  .about-brand-card { min-width: auto; flex: 1 1 45%; justify-content: center; }
}

/* ---------- 订单详情 ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { word-break: break-all; }
.timeline { border-left: 2px solid var(--border); padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
.tl-item { position: relative; font-size: 13px; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 4px;
  width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--bg);
}
.tl-item .t { color: var(--muted); font-size: 12px; }
.file-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 2px solid var(--border); margin-bottom: 8px; font-size: 13px; background: var(--bg); }

/* ---------- 系统自检 ---------- */
.health-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.health-group { background: var(--panel); border: 2px solid var(--border); margin-bottom: 16px; }
.health-group-t {
  padding: 12px 18px; border-bottom: 2px solid var(--border);
  font-weight: 700; font-size: 15px; background: var(--panel-2);
}
.health-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; border-bottom: 2px solid var(--border); font-size: 14px;
}
.health-row:last-child { border-bottom: 0; }
.health-dot { width: 10px; height: 10px; flex-shrink: 0; }
.health-dot.ok { background: var(--ok); }
.health-dot.warn { background: var(--accent); }
.health-dot.fail { background: var(--danger); }
.health-name { width: 200px; flex-shrink: 0; }
.health-detail { color: var(--muted); font-size: 13px; word-break: break-all; }
.health-tag {
  margin-left: auto; font-size: 12px; padding: 1px 10px;
  border: 2px solid var(--border-strong); color: var(--muted); flex-shrink: 0;
}
.health-tag.ok { color: var(--ok); border-color: var(--ok); }
.health-tag.warn { color: var(--accent); border-color: var(--accent); }
.health-tag.fail { color: var(--danger); border-color: var(--danger); }

/* ---------- 财务对账 ---------- */
.recon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.bar-chart { background: var(--panel); border: 2px solid var(--border); padding: 22px; margin-bottom: 20px; }
.bar-chart-t { font-weight: 700; margin-bottom: 18px; font-size: 15px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.bar-label { width: 78px; flex-shrink: 0; color: var(--muted); }
.bar-track { flex: 1; height: 18px; background: var(--panel-3); position: relative; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-fill.out { background: var(--danger); }
.bar-val { width: 96px; text-align: right; flex-shrink: 0; font-family: var(--pixel); font-size: 10px; }

/* 代登录提示条 */
.impersonate-bar {
  background: var(--danger); color: #fff; padding: 9px 0; font-size: 13px; font-weight: 700;
}
.impersonate-bar .wrap { display: flex; align-items: center; gap: 12px; }
.impersonate-bar button {
  background: #fff; color: var(--danger); border: 0; padding: 4px 14px;
  font-weight: 700; font-size: 13px; cursor: pointer; margin-left: auto;
}

/* 邀请码块 */
.invite-box {
  background: var(--bg); border: 2px solid var(--accent); padding: 20px;
  font-family: var(--pixel); font-size: 16px; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

/* ---------- 图表（纯 SVG，扁平无渐变） ---------- */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.panel { background: var(--panel); border: 2px solid var(--border); }
.panel-h {
  padding: 12px 16px; border-bottom: 2px solid var(--border);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.panel-h svg { fill: var(--accent); }
.panel-b { padding: 14px 16px 10px; }
.chart-box { width: 100%; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.chart-legend-i { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-i i { width: 10px; height: 10px; display: inline-block; }
.chart-svg { width: 100%; height: 200px; display: block; }
.chart-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }
.pie-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pie-svg { width: 180px; height: 180px; flex-shrink: 0; }
.pie-legend { flex: 1; min-width: 180px; }
.pie-legend-i {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 5px 0; border-bottom: 1px solid var(--panel-3);
}
.pie-legend-i i { width: 10px; height: 10px; flex-shrink: 0; }
.pie-legend-i span { flex: 1; color: var(--muted); }
.pie-legend-i b { font-family: var(--pixel); font-size: 10px; }
.pie-legend-i em { font-style: normal; color: var(--muted); width: 48px; text-align: right; font-size: 12px; }

/* ---------- 设置页：社交账号 / 轮播 / 工具 ---------- */
.form-sec { font-size: 15px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.form-sec svg { fill: var(--accent); }
.switch-line { display: flex !important; align-items: center; gap: 10px; cursor: pointer; font-weight: 400; }
.switch-line input { width: 16px; height: 16px; accent-color: var(--accent); }
.social-edit-row { display: grid; grid-template-columns: 130px 1fr 1.6fr auto; gap: 8px; margin-bottom: 8px; }
.carousel-edit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.car-edit-i { border: 2px solid var(--border); background: var(--panel-2); }
.car-edit-i img { width: 100%; height: 150px; object-fit: cover; display: block; }
.car-edit-meta { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.car-edit-path { font-size: 11px; color: var(--muted); word-break: break-all; line-height: 1.4; }
.tool-edit { border: 2px solid var(--border); background: var(--panel-2); padding: 14px; margin-bottom: 12px; }
.tool-edit-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tool-edit-n { font-family: var(--pixel); font-size: 10px; color: var(--accent); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .cards, .artists-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { border-bottom: 2px solid var(--border); }
  .hero-in { flex-direction: column; align-items: flex-start; }
  .hero-side { width: 100%; max-width: 320px; }
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .carousel-edit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .topbar .nav-toggle { display: inline-flex; }
  .topbar-in { gap: 8px; flex-wrap: wrap; height: auto; padding: 10px 0; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--panel);
    border-bottom: 2px solid var(--border); padding: 6px 0; z-index: 120;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 20px; border: 0; }
  .nav a.on { background: var(--panel-2); }
  .cards, .artists-grid, .opts, .opts.cols-2, .opts.cols-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 48px; }
  .hero-title { font-size: 28px; }
  .hero-logo { height: 64px; }
  .hero-stats { flex-wrap: wrap; }
  .section { padding: 40px 0; }
  .auth-left { width: 100%; border-right: 0; }
  .auth-right { display: none; }
  .sidebar { width: 64px; }
  .side-link span, .side-t { display: none; }
  .side-brand { justify-content: center; padding: 12px 0; }
  .side-brand-name { display: none; }
  .stat-row, .recon-grid, .health-summary { grid-template-columns: 1fr; }
  .health-name { width: 120px; }
  .social-edit-row { grid-template-columns: 1fr; }
  .carousel-edit { grid-template-columns: 1fr; }
  .pie-wrap { flex-direction: column; align-items: flex-start; }
  .carousel-inner { --w: 140px; --h: 92px; --translateZ: 118px; }
  .toolbar { gap: 8px; }
  .toolbar .input, .toolbar .select { width: 100%; min-width: 0; }
  .footer-in { flex-direction: column; gap: 24px; }
  .footer-cols { gap: 32px; }
  .detail-grid { grid-template-columns: 1fr; }
  .modal { padding: 18px; }
  .panel-b { padding: 12px 10px 8px; }
}

/* ============================================================
   后台深浅色模式（仅后台 .theme-admin 生效，不影响前台）
   ============================================================ */
html.theme-admin[data-theme="light"] {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #eef0f4;
  --panel-3: #e6e9ef;
  --border: #d7dbe3;
  --border-strong: #b7bdc9;
  --text: #1b1e26;
  --muted: #69707d;
  --accent: #b8800a;
  --accent-ink: #ffffff;
  --ok: #1a7f37;
  --danger: #c0392b;
  --info: #2c7a7b;
}
/* 浅色模式下图表网格线 / 文字 / 饼图描边适配 */
html.theme-admin[data-theme="light"] .chart-svg line { stroke: var(--border-strong); }
html.theme-admin[data-theme="light"] .chart-svg text { fill: var(--muted); }
html.theme-admin[data-theme="light"] .pie-svg path,
html.theme-admin[data-theme="light"] .pie-svg circle { stroke: #ffffff; }

/* 侧栏品牌条 + 主题切换按钮 */
.side-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 2px solid var(--border);
}
.side-brand-name { font-family: var(--pixel); font-size: 13px; color: var(--text); letter-spacing: 1px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: var(--panel-2);
  border: 2px solid var(--border-strong); color: var(--text); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   系统设置 · 顶部标签导航
   ============================================================ */
.sys-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: 22px; flex-wrap: wrap;
}
.sys-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 20px; font-size: 14px; font-weight: 700; color: var(--muted);
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  cursor: pointer; margin-bottom: -2px; font-family: var(--font);
}
.sys-tab:hover { color: var(--text); }
.sys-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.sys-pane[hidden] { display: none; }

/* ============================================================
   图表悬浮提示
   ============================================================ */
.chart-tip {
  position: fixed; z-index: 400; display: none; pointer-events: none;
  background: var(--panel); border: 2px solid var(--border-strong);
  padding: 8px 12px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  max-width: 240px;
}
.chart-tip .ct-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.chart-tip .ct-value { display: block; color: var(--accent); font-family: var(--pixel); font-size: 12px; }

/* ============================================================
   移动端导航开合按钮（仅窄屏显示）
   ============================================================ */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: var(--panel-2);
  border: 2px solid var(--border-strong); color: var(--text); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Turn 4 · 首页下方 / 关于页优化
   - 滚动揭示（仅 transform/opacity，克制不抢戏，不覆盖品牌色与扁平规范）
   - 错峰入场（前若干项）
   - hover 微反馈（边框高亮 / 轻抬升，无渐变无圆角改动）
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* 服务特色：四项错峰 */
.why-list .why-item.reveal:nth-child(2) { transition-delay: 70ms; }
.why-list .why-item.reveal:nth-child(3) { transition-delay: 140ms; }
.why-list .why-item.reveal:nth-child(4) { transition-delay: 210ms; }
/* 定制流程：五步错峰 */
.steps .step.reveal:nth-child(2) { transition-delay: 60ms; }
.steps .step.reveal:nth-child(3) { transition-delay: 120ms; }
.steps .step.reveal:nth-child(4) { transition-delay: 180ms; }
.steps .step.reveal:nth-child(5) { transition-delay: 240ms; }
/* 价格表：四表错峰 */
.cards .price-table.reveal:nth-child(2) { transition-delay: 60ms; }
.cards .price-table.reveal:nth-child(3) { transition-delay: 120ms; }
.cards .price-table.reveal:nth-child(4) { transition-delay: 180ms; }
/* 时间线事件：前五项错峰（长列表其余即时） */
.timeline-events .timeline-event.reveal:nth-child(2) { transition-delay: 50ms; }
.timeline-events .timeline-event.reveal:nth-child(3) { transition-delay: 100ms; }
.timeline-events .timeline-event.reveal:nth-child(4) { transition-delay: 150ms; }
.timeline-events .timeline-event.reveal:nth-child(5) { transition-delay: 200ms; }

/* 流程步骤 hover：背景微亮 + 编号/图标高亮（不抬升，避免网格缺角） */
.step { transition: background .14s ease, border-color .14s ease; }
.step:hover { background: var(--panel-2); }
.step:hover .step-no { color: var(--accent); }
.step-icon { transition: transform .14s ease; }
.step:hover .step-icon { transform: translateY(-2px); }

/* 画师卡片 hover：轻抬升 + 边框高亮（扁平无圆角改动） */
.artist-card { transition: border-color .14s ease, transform .14s ease, background .14s ease; }
.artist-card:hover { transform: translateY(-4px); border-color: var(--accent); background: var(--panel-2); }

/* 时间线事件 hover：左侧高亮 */
.timeline-event { transition: border-color .14s ease, background .14s ease; }
.timeline-event:hover { border-color: var(--accent); background: var(--panel-2); }

/* 关于页装饰图带 hover */
.about-deco { transition: border-color .14s ease; }
.about-deco:hover { border-color: var(--accent); }
.about-deco-img { transition: transform .3s ease; }
.about-deco:hover .about-deco-img { transform: scale(1.02); }

/* 关于页品牌卡 hover：轻抬升 */
.about-brand-card { transition: border-color .14s ease, transform .14s ease, background .14s ease; }
.about-brand-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--panel-2); }

/* 关于页 CTA：入场揭示 */
.section-cta.reveal { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .why-item, .step, .timeline-event, .artist-card, .about-brand-card, .about-deco { transition: border-color .12s ease !important; }
  .step-icon, .about-deco-img { transition: none !important; }
}

/* ============================================================
   Turn 4 重做（深化） · 首页下方 / 关于页 —— 大留白 + 编辑式艺术感
   锁定品牌不变：金 #f0b429 + 深底，圆角走令牌，无渐变/emoji/蓝
   ============================================================ */
.eyebrow { display:inline-block; font-family:var(--pixel); font-size:11px; color:var(--accent); letter-spacing:2px; margin-bottom:18px; }
/* 编辑式小标：前置金色短横 */
.eyebrow::before { content:''; display:inline-block; width:22px; height:2px; background:var(--accent); vertical-align:middle; margin-right:12px; margin-bottom:3px; }
.display { font-size:clamp(34px, 4.4vw, 54px); font-weight:800; letter-spacing:-.5px; line-height:1.16; margin-bottom:24px; }
.display .hl { color:var(--accent); }

/* 区块大序号水印（编辑式目录感：01 / 02 / 03 / 04） */
.main { counter-reset: sec; }
.sec-why, .sec-flow, .sec-artists, .sec-pricing { counter-increment: sec; position:relative; overflow:hidden; }
.sec-why > .wrap, .sec-flow > .wrap, .sec-artists > .wrap, .sec-pricing > .wrap { position:relative; z-index:1; }
.sec-why::after, .sec-flow::after, .sec-artists::after, .sec-pricing::after {
  content: counter(sec, decimal-leading-zero);
  position:absolute; top:clamp(24px,4vw,56px); right:2%;
  font-family:var(--pixel); font-size:clamp(80px,13vw,160px); line-height:1;
  color:var(--border); opacity:.5; pointer-events:none; z-index:0; user-select:none;
}

/* 服务特色：编辑式宣言 */
.sec-why { padding:clamp(88px,11vw,150px) 0; }
.why2 { display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,6vw,88px); align-items:start; }
.why2-lead .lead-p { color:var(--muted); font-size:15px; line-height:1.95; max-width:440px; margin-bottom:30px; }
.why2-list { list-style:none; position:relative; }
.why2-list::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--border); }
.why2-item { display:grid; grid-template-columns:88px 1fr; gap:24px; align-items:start; padding:34px 0 34px 28px; border-top:1px solid var(--border); transition:border-color .15s; position:relative; }
.why2-item:last-child { border-bottom:1px solid var(--border); }
.why2-no { font-family:var(--pixel); font-size:clamp(26px,3vw,40px); color:var(--muted); line-height:1.1; transition:color .15s; }
.why2-item:hover { border-color:var(--accent); }
.why2-item:hover .why2-no { color:var(--accent); }
.why2-t { font-size:17px; font-weight:700; margin-bottom:8px; }
.why2-d { font-size:13.5px; color:var(--muted); line-height:1.75; }

/* 定制流程：大字号数字流 */
.sec-flow { padding:clamp(88px,11vw,150px) 0; border-top:2px solid var(--border); }
.flow { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; }
.flow-step { padding:48px 30px 48px 0; border-top:3px solid var(--accent); position:relative; transition:background .15s; }
.flow-step + .flow-step { border-left:1px solid var(--border); padding-left:30px; }
.flow-no { font-family:var(--pixel); font-size:clamp(40px,4.4vw,58px); color:var(--border-strong); display:block; margin-bottom:24px; line-height:1; transition:color .15s; }
.flow-ic { color:var(--accent); margin-bottom:16px; }
.flow-t { font-weight:700; font-size:16px; margin-bottom:8px; }
.flow-d { font-size:12.5px; color:var(--muted); line-height:1.7; }
.flow-step:hover { background:var(--panel); }
.flow-step:hover .flow-no { color:var(--accent); }

/* 画师：更通透 + 顶部金色进度条 */
.sec-artists { padding:clamp(88px,11vw,150px) 0; border-top:2px solid var(--border); }
.artists-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.artist-card { background:transparent; border:1px solid var(--border); padding:26px; position:relative; }
.artist-card::before { content:''; position:absolute; left:0; top:0; width:0; height:3px; background:var(--accent); transition:width .22s ease; }
.artist-card:hover::before { width:100%; }
.artist-card:hover { transform:translateY(-4px); border-color:var(--accent); background:var(--panel); }

/* 价格：更通透 + 行 hover 金染 */
.sec-pricing { padding:clamp(88px,11vw,150px) 0; border-top:2px solid var(--border); }
.price-table { background:transparent; }
.price-table th { background:transparent; }
.price-table tbody tr { transition:background .12s; }
.price-table tbody tr:hover { background:rgba(240,180,41,.06); }

/* 关于页 hero 留白 */
.about-hero { min-height:360px !important; padding:100px 0 70px; position:relative; overflow:hidden; }
.about-hero .hero-title { font-size:clamp(32px,4vw,48px); }
.about-hero .section-tag { margin-bottom:14px; }

/* 关于页时间线：艺术化大字号 + 双栏 + 连续脊线 + 金色节点 */
.about-redo .wrap { position:relative; }
.about-redo .wrap::before { content:''; position:absolute; left:13px; top:12px; bottom:12px; width:2px; background:var(--border); }
.about-redo .timeline-year { border-left:0; padding-left:44px; margin-bottom:80px; position:relative; }
.about-redo .timeline-year::before { content:''; position:absolute; left:-7px; top:14px; width:14px; height:14px; background:var(--accent); border:3px solid var(--bg); }
.about-redo .timeline-year-future::before { box-shadow:0 0 12px rgba(240,180,41,.45); }
.about-redo .timeline-year-label { font-size:clamp(48px,7vw,84px); line-height:1; margin-bottom:10px; }
.about-redo .timeline-year-t { font-size:15px; padding-bottom:18px; border-bottom:1px solid var(--border); margin-bottom:28px; }
.about-redo .timeline-events { display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.about-redo .timeline-event { background:transparent; border:0; border-top:1px solid var(--border); padding:22px 0; }
.about-redo .timeline-event:hover { background:transparent; border-color:var(--accent); }
.about-redo .timeline-event-highlight { background:var(--panel-2); border:1px solid var(--accent); padding:26px 24px; }
.about-redo .timeline-year-future .timeline-year-label { color:var(--accent); }
.about-redo .about-deco { margin:72px 0 72px 44px; padding:28px 36px; }

/* 时间线事件图片：文字下方展示，多图横排 */
.timeline-event-body { position:relative; }
.timeline-event-img {
  display:inline-block; max-width:220px; max-height:140px;
  margin-top:10px; margin-right:8px; border:1px solid var(--border);
  object-fit:cover; background:var(--panel);
}
.timeline-event-img:last-of-type { margin-right:0; }
/* 双图事件（拜年祭/公司升级）并排 */
.timeline-event-body img.timeline-event-img + img.timeline-event-img { margin-left:6px; }

/* 关于页 CTA 留白 */
.section-cta { padding:clamp(88px,11vw,150px) 0; }

/* 入场错峰（新结构，更长的艺术化入场） */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; }
.why2-list .why2-item.reveal:nth-child(2) { transition-delay:80ms; }
.why2-list .why2-item.reveal:nth-child(3) { transition-delay:160ms; }
.why2-list .why2-item.reveal:nth-child(4) { transition-delay:240ms; }
.flow .flow-step.reveal:nth-child(2) { transition-delay:70ms; }
.flow .flow-step.reveal:nth-child(3) { transition-delay:140ms; }
.flow .flow-step.reveal:nth-child(4) { transition-delay:210ms; }
.flow .flow-step.reveal:nth-child(5) { transition-delay:280ms; }
.cards .price-table.reveal:nth-child(2) { transition-delay:70ms; }
.cards .price-table.reveal:nth-child(3) { transition-delay:140ms; }
.cards .price-table.reveal:nth-child(4) { transition-delay:210ms; }
.timeline-events .timeline-event.reveal:nth-child(2) { transition-delay:60ms; }
.timeline-events .timeline-event.reveal:nth-child(3) { transition-delay:120ms; }
.timeline-events .timeline-event.reveal:nth-child(4) { transition-delay:180ms; }
.timeline-events .timeline-event.reveal:nth-child(5) { transition-delay:240ms; }

/* ---------- 推广工具（代理 / 客户邀请） ---------- */
.promo-code-box {
  background: var(--bg); border: 2px solid var(--accent); padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.promo-code-box .code {
  font-family: var(--pixel); font-size: 20px; color: var(--accent);
  letter-spacing: 2px; word-break: break-all;
}
.promo-tabs { display: flex; gap: 0; border: 2px solid var(--border); border-bottom: 0; }
.promo-tab {
  flex: 1; padding: 9px 12px; background: var(--panel); color: var(--muted);
  border: 0; border-right: 2px solid var(--border); cursor: pointer;
  font-size: 13px; font-weight: 700; text-align: center;
}
.promo-tab:last-child { border-right: 0; }
.promo-tab:hover { color: var(--text); }
.promo-tab.on { background: var(--accent); color: #0e0f13; }
.promo-link-wrap { border: 2px solid var(--border); }
.promo-link-box {
  background: var(--bg); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.promo-link-url {
  flex: 1; min-width: 0; color: var(--accent); font-size: 13px;
  word-break: break-all; line-height: 1.5;
}
.promo-funnel { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; border: 2px solid var(--border); }
.promo-funnel-i { flex: 1; min-width: 130px; padding: 18px 16px; border-right: 2px solid var(--border); }
.promo-funnel-i:last-child { border-right: 0; }
.promo-funnel-i .v { font-size: 22px; font-weight: 700; color: var(--accent); }
.promo-funnel-i .k { font-size: 12px; color: var(--muted); margin-top: 6px; }
.promo-tip { font-size: 12px; color: var(--muted); line-height: 1.7; }
.promo-tip b { color: var(--text); font-weight: 700; }
@media (max-width:720px) {
  .promo-code-box { flex-direction: column; align-items: flex-start; }
  .promo-funnel-i { min-width: 50%; border-bottom: 2px solid var(--border); }
}

/* ---------- 画师工作台：视图切换 + 订单卡片 ---------- */
.view-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 2px solid var(--border); padding-bottom: 12px;
}
.view-switch { display: flex; border: 2px solid var(--border); }
.view-switch button {
  background: var(--panel); border: 0; border-right: 2px solid var(--border);
  color: var(--muted); cursor: pointer; padding: 7px 14px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.view-switch button:last-child { border-right: 0; }
.view-switch button:hover { color: var(--text); }
.view-switch button.on { background: var(--accent); color: var(--accent-ink); }
.view-switch button svg { fill: currentColor; }
.view-count { font-size: 12px; color: var(--muted); }

.order-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.order-card {
  background: var(--panel); border: 2px solid var(--border);
  display: flex; flex-direction: column; transition: border-color .18s ease;
}
.order-card:hover { border-color: var(--accent); }
.order-card-media {
  height: 132px; border-bottom: 2px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted);
}
.order-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-card-h { padding: 12px 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-card-no { font-size: 12px; color: var(--accent); word-break: break-all; }
.order-card-t { padding: 8px 14px 0; font-size: 15px; font-weight: 700; word-break: break-all; }
.order-card-tags { padding: 10px 14px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.order-card-tags .tag { font-size: 11px; }
.order-card-meta { padding: 10px 14px 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.order-card-meta .num { color: var(--text); }
.order-card-foot {
  margin-top: auto; padding: 12px 14px; display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 2px solid var(--border);
}
@media (max-width:720px) {
  .order-cards { grid-template-columns: 1fr; }
  .view-switch button { padding: 7px 10px; }
}

/* ---------- 订单详情：需求描述 / 规格 / 价格构成 ---------- */
.desc-box {
  background: var(--bg); border: 2px solid var(--border); border-left-width: 4px; border-left-color: var(--accent);
  padding: 14px 16px; font-size: 13px; line-height: 1.85; white-space: pre-wrap; word-break: break-word;
}
.desc-empty { color: var(--muted); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; background: var(--border); border: 2px solid var(--border); }
.spec-i { background: var(--panel); padding: 10px 12px; }
.spec-i .k { font-size: 11px; color: var(--muted); }
.spec-i .v { font-size: 13px; margin-top: 3px; word-break: break-all; }
.spec-i .v.accent { color: var(--accent); }
.price-break { border: 2px solid var(--border); }
.price-break-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.price-break-row:last-child { border-bottom: 0; }
.price-break-row.total { background: var(--bg); font-weight: 700; }
.price-break-row .num { font-variant-numeric: tabular-nums; }
.sec-t { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.sec-t svg { fill: var(--accent); flex-shrink: 0; }
.ref-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-imgs img {
  width: 84px; height: 84px; object-fit: cover; border: 2px solid var(--border); cursor: zoom-in; display: block;
}
.ref-imgs img:hover { border-color: var(--accent); }
@media (max-width:720px) {
  .spec-grid { grid-template-columns: 1fr; }
  .ref-imgs img { width: 68px; height: 68px; }
}

/* ---------- 后台 AI 助手 ---------- */
.ai-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: stretch; }
.ai-side { background: var(--panel); border: 2px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.ai-side-h {
  padding: 11px 12px; border-bottom: 2px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 700;
}
.ai-side-h span { display: inline-flex; align-items: center; gap: 6px; }
.ai-side-list { flex: 1; overflow-y: auto; max-height: 420px; }
.ai-sess { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ai-sess:hover { background: var(--bg); }
.ai-sess.on { background: var(--bg); border-left: 3px solid var(--accent); padding-left: 9px; }
.ai-sess .t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-sess .m { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ai-side-f { padding: 10px 12px; border-top: 2px solid var(--border); display: grid; gap: 8px; }
.ai-empty-sm { padding: 18px 12px; color: var(--muted); font-size: 12px; text-align: center; }

.ai-main { background: var(--panel); border: 2px solid var(--border); display: flex; flex-direction: column; min-height: 0; position: relative; }
.ai-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.ai-model-sel { width: 240px; max-width: 100%; }
.ai-scene-sel { width: 130px; }
.ai-bar-tip { font-size: 12px; color: var(--muted); flex: 1; min-width: 160px; }
.ai-bar-tip.ok { color: var(--accent); }
.ai-bar-tip.err { color: var(--danger); }

.ai-log { flex: 1; overflow-y: auto; padding: 16px 14px; min-height: 320px; max-height: 60vh; }
.ai-msg { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.ai-msg.me { justify-content: flex-end; }
.ai-ava { width: 28px; height: 28px; flex-shrink: 0; border: 2px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.ai-ava svg { fill: var(--accent); }
/* 注意：这里不能加 white-space: pre-wrap —— 模板字符串里的缩进换行会被当成真实空行，
   把「你好」这种两字消息撑成一条 68×166 的竖条。换行交给 .ai-bub-t 自己处理。 */
.ai-bub {
  max-width: 78%; padding: 10px 12px; background: var(--bg); border: 2px solid var(--border);
  font-size: 13px; line-height: 1.75; word-break: break-word;
}
.ai-msg.me .ai-bub { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ai-bub-t { white-space: pre-wrap; }
.ai-bub-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-bub-imgs img { width: 76px; height: 76px; object-fit: cover; border: 2px solid rgba(255,255,255,.35); display: block; }
.ai-msg.me .ai-bub-imgs img { border-color: var(--accent-ink); }

.ai-tool { margin: 0 0 14px; border: 2px dashed var(--border); background: var(--bg); }
.ai-tool-h { padding: 8px 11px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); }
.ai-tool-b { padding: 9px 11px; font-size: 12px; line-height: 1.7; white-space: pre-wrap; color: var(--text); }

.ai-gate { border: 2px solid var(--accent); margin-bottom: 14px; }
.ai-gate-h { padding: 9px 12px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ai-gate-h svg { fill: var(--accent-ink); }
.ai-gate-i { padding: 12px; border-bottom: 1px solid var(--border); }
.ai-gate-i:last-child { border-bottom: 0; }
.ai-gate-t { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.ai-kvs { display: grid; gap: 4px; margin-bottom: 10px; }
.ai-kv { display: flex; gap: 10px; font-size: 12px; }
.ai-kv span { color: var(--muted); min-width: 84px; }
.ai-kv b { font-weight: 700; word-break: break-all; }
.ai-gate-act { display: flex; gap: 8px; }
.ai-gate-done { padding: 8px 12px; font-size: 12px; color: var(--muted); }
.ai-gate-done.good { color: var(--accent); }
.ai-gate-done.bad { color: var(--danger); }

.ai-welcome { padding: 24px 8px; }
.ai-welcome-t { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ai-welcome-t svg { fill: var(--accent); }
.ai-welcome-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ai-sug {
  border: 2px solid var(--border); padding: 10px 12px; font-size: 12.5px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: border-color .16s ease, color .16s ease;
}
.ai-sug:hover { border-color: var(--accent); color: var(--accent); }
.ai-sug svg { fill: currentColor; }
.ai-welcome-note { font-size: 12px; color: var(--muted); line-height: 1.8; }

.ai-compose { border-top: 2px solid var(--border); padding: 10px 12px; }
.ai-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-thumb { position: relative; width: 66px; height: 66px; border: 2px solid var(--border); }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-thumb button {
  position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; padding: 0;
  background: var(--danger); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-thumb button svg { fill: #fff; }
.ai-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ai-input-row .btn { flex-shrink: 0; }
.ai-text { flex: 1; min-height: 44px; max-height: 160px; resize: vertical; }

.ai-drop {
  position: absolute; inset: 0; z-index: 20; display: none;
  align-items: center; justify-content: center;
  background: rgba(14, 15, 19, .82); border: 3px dashed var(--accent);
}
.ai-drop.on { display: flex; }
.ai-drop span { color: var(--accent); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.ai-drop span svg { fill: var(--accent); }

.ai-mem-add { display: flex; gap: 8px; }
.ai-mem-add .input { flex: 1; }
.ai-mem-i { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 2px solid var(--border); margin-bottom: 8px; }
.ai-mem-i .c { font-size: 13px; line-height: 1.6; flex: 1; word-break: break-word; }
.ai-mem-i .a { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width:900px) {
  .ai-wrap { grid-template-columns: 1fr; }
  .ai-side-list { max-height: 160px; }
  .ai-model-sel { width: 100%; }
  .ai-bub { max-width: 92%; }
}

@media (max-width:1024px) {
  .why2 { grid-template-columns:1fr; gap:40px; }
  .flow { grid-template-columns:repeat(2,1fr); }
  .flow-step { border-left:0 !important; padding-left:0; }
  .about-redo .timeline-events { grid-template-columns:1fr; }
  .sec-why::after, .sec-flow::after, .sec-artists::after, .sec-pricing::after { font-size:84px; right:0; opacity:.4; }
}
@media (max-width:720px) {
  .sec-why, .sec-flow, .sec-artists, .sec-pricing { padding:64px 0; }
  .display { font-size:28px; }
  .flow { grid-template-columns:1fr; }
  .flow-step { padding:32px 0; }
  .flow-no { font-size:32px; }
  .about-redo .timeline-year-label { font-size:48px; }
  .about-hero { min-height:280px !important; padding:70px 0 50px; }
  .about-redo .timeline-events { grid-template-columns:1fr; }
  .about-redo .about-deco { margin-left:0; }
  .timeline-event-img { max-width:100%; max-height:120px; }
  .sec-why::after, .sec-flow::after, .sec-artists::after, .sec-pricing::after { display:none; }
}


/* ============================================================
   磨砂玻璃（放在文件末尾，确保覆盖前面的实色定义）
   仅用于叠层 / 悬浮元素；正文区保持纯色以保证文字可读
   ============================================================ */
.topbar {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.modal-mask {
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.toast, .ai-drop {
  background: var(--glass-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.estimate-panel, .ai-bar {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
/* 不支持 backdrop-filter 的浏览器退回实色，避免文字糊在背景上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .toast, .ai-drop, .estimate-panel, .ai-bar { background: var(--panel); }
}

/* ============================================================
   AI 助手：模型/用量标记、会话删除按钮、紧凑输入区
   ============================================================ */

/* 会话项：标题 + 删除按钮 */
.ai-sess { display: flex; align-items: center; gap: 8px; }
.ai-sess .sb { flex: 1; min-width: 0; }
.ai-sess .del {
  flex-shrink: 0; width: 22px; height: 22px; display: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--muted); background: transparent; cursor: pointer;
}
.ai-sess:hover .del { display: inline-flex; }
.ai-sess .del:hover { color: var(--danger); border-color: var(--danger); }
.ai-sess .del svg { fill: currentColor; }

/* 输入区：默认一行高，随内容长高，整体更紧凑 */
.ai-text { min-height: 38px; max-height: 120px; padding: 8px 12px; font-size: 13.5px; }
.ai-compose { padding: 8px 10px; }
.ai-input-row .btn { padding: 8px 16px; }

/* ============================================================
   AI 助手：深度思考（可折叠）+ 打字机
   ============================================================ */
.ai-reason {
  margin: 0 0 10px 38px;
  border: 2px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--panel-2); border-radius: var(--r-sm);
  overflow: hidden;
}
.ai-reason-h {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 12px; font-family: var(--font); text-align: left;
}
.ai-reason-h:hover { color: var(--accent); }
.ai-reason-h .chev {
  display: inline-flex; align-items: center; flex-shrink: 0;
  transition: transform .22s ease;
}
.ai-reason-h .chev svg { margin: 0; }
.ai-reason.open .ai-reason-h .chev { transform: rotate(90deg); }
.ai-reason-h b { color: var(--text); font-weight: 700; }
.ai-reason-h .hint { margin-left: auto; opacity: .75; }
.ai-reason-b {
  max-height: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
}
.ai-reason.open .ai-reason-b { max-height: 420px; overflow-y: auto; }
.ai-reason-inner {
  padding: 4px 12px 12px 12px; font-size: 12.5px; line-height: 1.9;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  border-top: 1px dashed var(--border);
}

/* 打字机光标 */
.ai-typing::after {
  content: '▍'; margin-left: 1px; color: var(--accent);
  animation: pfCaret .9s steps(1, end) infinite;
}
@keyframes pfCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* 自定义模型登记 */
.ai-custom-models { display: flex; flex-direction: column; gap: 8px; }
.ai-custom-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
.ai-custom-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-custom-row .input { flex: 1 1 140px; min-width: 110px; }
.ai-custom-chk {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer;
}

/* 实时思考轨迹：跑的过程中就把每一步摊开，别让面板空着 */
.ai-reason.live { border-left-color: var(--accent); }
.ai-reason.live .ai-reason-h b { color: var(--accent); }
.ai-trace-l {
  display: flex; gap: 8px; padding: 2px 0;
  animation: pfTraceIn .26s ease both;
}
.ai-trace-l .idx { color: var(--accent); flex-shrink: 0; min-width: 18px; }
.ai-trace-l .tx { flex: 1; word-break: break-word; }
.ai-trace-l.run .tx::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 5px;
  background: var(--accent); vertical-align: middle;
  animation: pfTraceDot 1s ease-in-out infinite;
}
@keyframes pfTraceIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes pfTraceDot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ============================================================
   细节动效（参考 uiverse.io 的克制用法，全程无渐变）
   ============================================================ */

/* 1) 按钮：hover 时一道柔光斜扫而过 */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%;
  width: 40%; background: rgba(255, 255, 255, .13);
  transform: skewX(-22deg); transition: left .45s ease; pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn:active { transform: translateY(1px); }
.btn:not(:disabled):hover { box-shadow: 0 0 0 2px rgba(240, 180, 41, .16); }

/* 2) 侧栏 / 会话项：左侧高亮条平滑生长 */
.side-link { position: relative; transition: color .16s, background .16s; }
.side-link::before {
  content: ''; position: absolute; left: 0; top: 50%; height: 0; width: 3px;
  background: var(--accent); transform: translateY(-50%);
  transition: height .2s ease;
}
.side-link:hover::before, .side-link.on::before { height: 60%; }
.side-link.on { border-left-color: transparent; }

/* 3) 卡片：hover 时轻微抬起 + 描边提亮 */
.card, .artist-card, .stat-box, .panel {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover, .artist-card:hover, .stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .32);
}

/* 4) 输入控件 focus 外发光 */
.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .14);
}

/* 5) 消息入场 */
.ai-msg, .ai-tool, .ai-gate, .ai-reason { animation: pfRise .26s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pfRise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* 6) AI 头像：待机时呼吸描边 */
.ai-ava { animation: pfBreathe 2.6s ease-in-out infinite; }
@keyframes pfBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, .30); }
  50%      { box-shadow: 0 0 0 5px rgba(240, 180, 41, 0); }
}

/* 7) 发送中：按钮文字区域脉冲 */
.btn-primary.is-busy { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .ai-msg, .ai-tool, .ai-gate, .ai-reason,
  .ai-ava, .ai-typing::after { animation: none !important; }
  .btn::before { display: none; }
  .ai-reason-b { transition: none; }
}

/* ============================================================
   细节动效 · 第二批（uiverse.io 常见套路的克制改造，无渐变）
   ============================================================ */

/* 次级按钮：hover 时一层极淡的主色从左滑入。
   注意不能用 z-index:-1 —— .btn 自带不透明的 --panel-2 背景，负 z 的伪元素会被自己盖住；
   这里让色层叠在文字之上，透明度压到 10%，既看得见滑入动效又不影响文字对比度。 */
.btn:not(.btn-primary) { position: relative; }
.btn:not(.btn-primary)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(240, 180, 41, .10);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.btn:not(.btn-primary):hover::after { transform: scaleX(1); }

/* 顶部导航：底线由中间向两侧展开 */
.nav a { position: relative; border-radius: var(--r-sm); transition: color .16s; }
.nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px;
  background: var(--accent); transition: left .22s ease, right .22s ease;
}
.nav a:hover::after, .nav a.on::after { left: 14px; right: 14px; }

/* 卡片图标：hover 时轻微上浮并染上主色 */
.card:hover .card-icon, .stat-box:hover .card-icon {
  transform: translateY(-2px); border-color: var(--accent); color: var(--accent);
}
.card-icon, .stat-box .card-icon { transition: transform .2s ease, border-color .2s ease, color .2s ease; }

/* 会话项：hover 时底色滑入 */
.ai-sess { position: relative; }
.ai-sess::before {
  content: ''; position: absolute; inset: 0; background: var(--bg);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .2s ease; pointer-events: none;
}
.ai-sess:hover::before, .ai-sess.on::before { transform: scaleX(1); }
.ai-sess > * { position: relative; }

/* 发送中：三点脉冲 */
.ai-dots { display: inline-flex; gap: 3px; align-items: center; margin-right: 6px; }
.ai-dots i {
  width: 4px; height: 4px; background: currentColor; display: block;
  animation: pfDot 1s ease-in-out infinite;
}
.ai-dots i:nth-child(2) { animation-delay: .15s; }
.ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pfDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* 细滚动条：深色主题下比系统默认条精致得多 */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid transparent; background-clip: padding-box; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 空状态图标：缓慢上下浮动，避免大块留白显得死板 */
.empty svg, .ai-empty-sm + .empty svg { animation: pfFloat 3.2s ease-in-out infinite; }
@keyframes pfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .ai-dots i, .empty svg, .ai-sess::before, .btn::after, .nav a::after { animation: none !important; transition: none !important; }
}