/* =========================================================================
 * JEWEL MONSTER · 设计工作室「浅色统一主题」
 * 目的：把 studio.html 的色调统一到首页（index-arcade.css）——
 *       铂金淡黄面（ivory / panel / cream） × LOGO 底祖母绿点（#0d3221）。
 * 用法：必须【最后加载】（在 style.css / studio.css 之后），靠同选择器后置覆盖。
 * 范围：只改颜色 / 表面 / 阴影，不改版式与字体族。
 * ========================================================================= */
:root {
  /* 首页调色板（studio 页不加载 index-arcade.css，需在此补齐） */
  --ivory: #f8f5ea;
  --ivory-2: #f2ecda;
  --panel: #ebe3cb;
  --cream: #e6ddbe;
  --white: #ffffff;
  --green-050: #eef5f0;
  --green-100: #d6e8dd;
  --green-500: #22704f;
  --green-700: #14503a;
  --green-900: #0d3221;

  /* 深色主题语义变量 → 浅色重映射 */
  --navy-deep: #ffffff;
  --navy: #f8f5ea;
  --navy-2: #f3efe4;         /* 输入框底 */
  --navy-3: #e9e2cd;
  --ink: #16281f;            /* 墨绿近黑 */
  --ink-2: #3d4a41;
  --paper: #ffffff;          /* 面板底 */
  --paper-2: #f3efe4;
  --gold: #14503a;           /* 强调（原翡翠荧光 → 深绿，浅底可读） */
  --gold-2: #22704f;
  --gold-soft: rgba(34, 112, 79, .10);
  --line: rgba(13, 50, 33, .12);
  --muted: #6b7268;
  --good: #22704f;
  --shadow: 0 8px 30px rgba(13, 50, 33, .10);
  --shadow-2: 0 2px 10px rgba(13, 50, 33, .07);
}

/* ---------- 页面底 / 选区 ---------- */
body { color: var(--ink); background: var(--ivory); }
::selection { background: var(--green-100); color: var(--green-900); }

/* ---------- 顶栏 ---------- */
.topbar { background: rgba(248, 245, 234, .88); }
.lang-sel { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn { color: var(--green-900); background: var(--white); border-color: var(--line); }
.btn:hover { background: var(--green-050); border-color: rgba(34, 112, 79, .40); }
.install-btn { color: var(--green-700); background: rgba(34, 112, 79, .08); border-color: rgba(34, 112, 79, .35); }
.install-btn:hover { background: rgba(34, 112, 79, .16); color: var(--green-900); }

/* 顶栏 LOGO 徽标：白→玉绿渐变改为深绿实色；中英排列与首页一致（英文在汉字右侧） */
.logo-badge img { box-shadow: 0 0 0 1px rgba(13, 50, 33, .10); }
.logo-badge .brand-text {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--green-900); color: var(--green-900);
  font-weight: 600; letter-spacing: .5px; font-size: 19px;
  display: flex; flex-direction: row; align-items: center; gap: 9px; line-height: 1;
}
.logo-badge .brand-text small {
  color: var(--green-900); -webkit-text-fill-color: var(--green-900);
  letter-spacing: .8px; font-size: 10.5px; margin-top: 0; line-height: 1.18; text-align: left;
}
.logo-badge .spark i { color: var(--green-500); text-shadow: 0 0 8px rgba(34, 112, 79, .35); }

/* ---------- 区块标题 ---------- */
.section h2 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--green-900); color: var(--green-900);
}
.section .sub .sub-em { color: var(--green-700); }

/* ---------- 品牌橱窗卡片 ---------- */
.piece { background: var(--white); box-shadow: var(--shadow-2); }
.piece .thumb { background: linear-gradient(135deg, var(--ivory-2), var(--cream)); }
.piece[data-i]:hover { border-color: rgba(34, 112, 79, .45); box-shadow: 0 18px 36px rgba(13, 50, 33, .14); }

/* ---------- 工作室 Hero ---------- */
.studio-hero h1 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--green-900); color: var(--green-900);
}

/* ---------- 面板 / 表单 ---------- */
.panel { background: var(--white); border-color: var(--line); }
.panel h3 .h-ico svg { filter: drop-shadow(0 1px 2px rgba(13, 50, 33, .18)); }
.brief-area textarea, .brand-row input, .chat-input-row input {
  background: var(--ivory-2); color: var(--ink); border-color: var(--line);
}
.brief-area textarea::placeholder, .brand-row input::placeholder, .chat-input-row input::placeholder { color: #9a9d92; }
.brief-area textarea:focus, .brand-row input:focus, .chat-input-row input:focus {
  border-color: rgba(34, 112, 79, .45); background: var(--white);
}
.chip { background: var(--white); border-color: var(--line); color: var(--ink-2); }

/* ---------- 设计稿 / 规格 ---------- */
.mockup { background: linear-gradient(135deg, var(--ivory-2), var(--cream)); border-color: var(--line); }

/* ---------- 报价面板：深绿卡 → 淡绿卡 ---------- */
.quote {
  background: linear-gradient(135deg, var(--green-050), var(--green-100));
  color: var(--green-900); border-color: rgba(13, 50, 33, .14);
}
.quote .qrow { border-bottom-color: rgba(13, 50, 33, .12); }
.quote .qrow .lbl, .quote .qtotal .lbl { color: var(--muted); }
.quote .qtotal .amt { color: var(--green-900); }
.quote .disc { color: var(--muted); }
.breakdown .brow { color: var(--ink-2); }
.quote .qsrc { background: rgba(255, 255, 255, .55); border-color: rgba(13, 50, 33, .12); }
.quote .qsrc-row .k { color: var(--muted); }
.quote .qsrc-row .v { color: var(--green-900); }
.quote .qsrc-dot { background: #b9c6bd; }
.quote .qsrc-dot.on { background: var(--green-500); box-shadow: 0 0 0 3px rgba(34, 112, 79, .16); }

/* ---------- 流程步进 ---------- */
.step-node { background: var(--white); border-color: var(--line); }
.step-node .si { color: var(--green-700); }
.step-node .si svg { filter: none; }
.step-node.on { border-color: var(--green-500); background: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(34, 112, 79, .20), 0 6px 18px rgba(34, 112, 79, .12); }
.step-node.on .si { color: var(--green-900); }
.step-node:not(.locked):not(.off):hover { border-color: rgba(34, 112, 79, .45); }
.step-node .tip { background: var(--white); border-color: var(--line); color: var(--ink-2);
  box-shadow: 0 14px 30px rgba(13, 50, 33, .16); }
.step-node .tip b { color: var(--green-900); }
.step-node .tip i { color: var(--muted); }

/* ---------- 聊天 / 提示 ---------- */
.chat-log { background: var(--ivory-2); border-color: var(--line); }
.chat-log .bubble .who { color: var(--green-700); }
.toast { background: var(--green-900); color: var(--ivory); border-color: rgba(255, 255, 255, .16); }

/* ---------- 作品抽层（piece-sheet.js 弹层） ---------- */
.ps-overlay { background: rgba(13, 50, 33, .40); }
.ps-panel { background: linear-gradient(180deg, var(--white), var(--ivory));
  border-color: rgba(13, 50, 33, .16); box-shadow: 0 30px 80px rgba(13, 50, 33, .22); }
.ps-x:hover { background: rgba(13, 50, 33, .06); }
.ps-img { background: var(--ivory-2); }
.ps-zoom { color: var(--green-900); background: rgba(255, 255, 255, .82); border-color: rgba(13, 50, 33, .18); }
.ps-row, .ps-line { background: rgba(13, 50, 33, .035); border-color: var(--line); }
.ps-form input, .ps-form select, .ps-form textarea { background: var(--white); color: var(--ink); border-color: var(--line); }
.ps-onno { background: rgba(13, 50, 33, .04); border-color: rgba(34, 112, 79, .34); }
.ps-btn.ghost { color: var(--green-700); border-color: rgba(34, 112, 79, .42); }