/* 奶油面（UI 方案 §4）：全端统一 #FAF6EF。
   仅做配色/圆角/按钮层级的覆盖；不改任何显示条件（分析入口保护规则）。
   加载顺序：styles.css → lingscan-tokens.css → surface-cream.css */

:root {
  /* 把旧站变量名全部映射到唯一 token，旧 CSS 不用逐处改 */
  --bg: var(--canvas);
  --surface: var(--sheet);
  --surface-2: var(--canvas-sunk);
  --surface-3: #ebe4d6;
  --border: var(--line);
  --border-soft: rgba(28, 25, 21, 0.06);
  --text-secondary: var(--text-2);
  --muted: var(--mute);
  --accent: var(--brass);
  --accent-2: var(--brass-hover);
  --accent-highlight: var(--brass);
  --accent-glow: var(--brass-soft);
  --on-accent: var(--brass-ink);
  --success: var(--ok);
  --warning: var(--warn);
  --shadow-card: none;
  --radius: var(--r-card);
  --radius-sm: var(--r-ctl);
  --font-display: var(--f-serif);
  --mono: var(--f-mono);
}

html, body {
  background: var(--canvas) !important;
  color: var(--text) !important;
  background-image: none !important;
  font-family: var(--f-sans) !important;
  font-size: 14px;
  line-height: 1.6;
}

.page-glow { display: none !important; }

/* 顶栏：墨炭面 */
.site-header {
  background: var(--ink0) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none;
}
.site-header .brand-name, .site-header .brand-sub, .site-nav a { color: var(--on-dark) !important; }
.site-header .brand-sub { color: var(--on-dark-2) !important; letter-spacing: 0.16em; font-weight: 600; font-size: 10px; text-transform: uppercase; }
.site-nav a:hover { color: var(--on-dark-2) !important; }

/* C1b：顶栏结构 1:1 样板 .top —— 横贯 56px 深色条，三区布局（左品牌 / 中双 tab / 右账户）。
   原 lingscan-brand.css 删除后 .site-header-inner 退化为 display:block 导致竖排堆叠，此处恢复 grid 布局。 */
.site-header { position: sticky; top: 0; z-index: 200; width: 100%; height: 56px; }
.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1.25rem;
  height: 56px;
  padding: 0 1.25rem;
  max-width: 1160px;
  margin: 0 auto;
}
.site-header .brand { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.5rem; min-width: 0; text-decoration: none; color: inherit; }
.site-header .brand-mark { flex-shrink: 0; }
.site-header .brand-name { display: inline; white-space: nowrap; line-height: 1; font-size: 1.05rem; }
.site-header .site-nav { margin: 0; justify-content: center; justify-self: center; }
.site-header .header-right { display: flex; align-items: center; gap: 0.45rem; justify-self: end; }
.site-header .header-auth { display: inline-flex; align-items: center; gap: 0; padding: 0.22rem; border-radius: 999px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.04); }
.site-header .btn-primary, .site-header .btn-secondary, .site-header .btn-ghost, .site-header .btn-sm { width: auto !important; margin-top: 0 !important; max-width: none; }
.site-header .header-user { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-header .nav-toggle { display: none; margin-left: 0; flex-shrink: 0; }
@media (max-width: 768px) {
  .site-header .site-nav { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .header-auth .btn-sm { padding: 0 0.6rem; }
}

/* 首页主区 hero：样板 C1 视觉语言（奶油底 + 墨炭 30px/800 大标 + t-3 灰副标）。
   原 .ls-dark-panel 仅用于首页 hero，此处转为浅色 hero（内容/功能不变）。 */
.workspace-hero.ls-dark-panel {
  background: transparent;
  color: var(--text);
  border-radius: 0;
  padding: 4px 4px 22px;
  border: 0;
}
.workspace-hero.ls-dark-panel .hero-title-ad,
.ls-dark-panel h1, .ls-dark-panel h2 {
  font-family: var(--f-sans) !important;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .5px;
  line-height: 1.2;
  color: var(--ink0) !important;
}
.workspace-hero.ls-dark-panel .hero-lead-ad {
  color: var(--mute) !important;
  font-size: 15px;
}
.btn-ghost-dark {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: var(--on-dark) !important;
  border-radius: var(--r-ctl) !important;
}

/* 按钮层级：主按钮=琥珀实心（UI 样板 C1：btn-primary 琥珀 #e8862a 白字）。
   承诺动作（购买/支付/确认）同琥珀。圆角 8。 */
.btn-primary, .btn-primary.btn-sm, button.btn-primary,
.lingscan-app .upload-primary-row .btn-primary.btn-block.upload-primary-cta {
  background: var(--brass) !important;
  border: 1px solid var(--brass) !important;
  color: #ffffff !important;
  border-radius: var(--r-ctl) !important;
  box-shadow: none !important;
  min-height: 48px;
}
.btn-primary:hover, button.btn-primary:hover { background: var(--brass-hover) !important; border-color: var(--brass-hover) !important; }

/* 承诺动作：显式声明才用黄铜 */
.btn-brass, .btn-primary.btn-brass, button.btn-brass,
[data-cta="commit"] {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
  color: #ffffff !important;
  font-weight: 600;
}
.btn-brass:hover, [data-cta="commit"]:hover { background: var(--brass-hover) !important; border-color: var(--brass-hover) !important; }

.btn-ghost, .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  border-radius: var(--r-ctl) !important;
}

/* 标题：大标题宋体，区块标题无衬线 */
.hero-title, h1, .workspace-hero .hero-title, .ls-dark-panel h2 {
  color: var(--text) !important;
  font-family: var(--f-display) !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
#purpose-section-title, .step-section-head h2 {
  color: var(--text) !important;
  font-family: var(--f-sans) !important;
  font-weight: 600;
}
.hero-lead, .workspace-hero .hero-lead, .purpose-section-hint, .muted { color: var(--mute) !important; }

/* 卡片与面板：sheet + 1px 线，无阴影 */
.workspace-shell, .card, .workspace-unified {
  background: var(--sheet) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: var(--r-card) !important;
}
.purpose-section, .purpose-group, .purpose-group-analysis, .purpose-group-making,
.upload-section, .source-station { background: transparent !important; border: 0 !important; box-shadow: none !important; }

.purpose-item-hero, .purpose-group-making .purpose-item, .source-method, .workspace-unified .source-method,
.feature-card, .pricing-card, .hero-stats-card .hero-stat {
  background: var(--sheet) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border-radius: var(--r-card) !important;
}
.purpose-item-hero .purpose-copy strong, .purpose-item-hero .purpose-mark, .purpose-item-hero .purpose-copy span { color: var(--text) !important; }
.purpose-item-hero .purpose-mark { background: var(--canvas-sunk) !important; }

/* 选中卡：左侧 3px 黄铜条 + 边框提亮 */
.purpose-item-hero.is-selected, .purpose-item-hero[aria-pressed="true"],
.workspace-unified .source-method.active, .input-mode-tab.active {
  border-color: var(--line-strong) !important;
  box-shadow: inset 3px 0 0 var(--brass) !important;
  background: var(--sheet) !important;
}

.dropzone, .dropzone-hero, .url-input-row input, .source-url-control input {
  background: var(--sheet) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r-card) !important;
}
.url-input-row input:focus-visible, .source-url-control input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.hero-eyebrow { color: var(--mute) !important; background: transparent !important; border-color: var(--line) !important; }
.hero-accent-line { background: var(--brass) !important; box-shadow: none !important; }
.hero-flow-num, .step-index { background: var(--ink-btn) !important; color: var(--on-ink) !important; }
.hero-flow-step { background: var(--sheet) !important; border-color: var(--line) !important; color: var(--text-2) !important; }

.site-footer {
  background: var(--ink0) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--on-dark-2) !important;
}
.site-footer .brand-name, .site-footer .footer-slogan { color: var(--on-dark) !important; }
.site-footer .footer-copy { color: var(--on-dark-2) !important; }
.brand-en { letter-spacing: 0.16em; font-weight: 600; font-size: 10px; }
.seo-faq details { border-bottom-color: var(--line) !important; }

/* AI 检测卡沿用奶油，进度条走黄铜（数值信号） */
.ai-degree-section { background: var(--sheet); border-color: var(--line); }
.ai-degree-lead, .ai-degree-status { color: var(--mute); }
.ai-degree-meter-fill { background: var(--brass); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }