/* RANTING KI · 墨黑 × 香槟金 —— 国际顶级美妆集合店质感 */
:root {
  --bg: #F1F1EE;        /* 冷象牙(偏冷的极浅灰白) */
  --ink: #100F12;       /* 冷墨黑(近纯黑) */
  --ink-soft: #34343a;
  --gold: #B2A06A;      /* 冷香槟金(克制、偏平金) */
  --gold-deep: #8c7c4c;
  --muted: #86857D;     /* 冷雾灰 */
  --card: #F9F9F7;      /* 冷象牙卡片(近白) */
  --line: #E3E2DD;      /* 发丝线 */
  --ivory-2: #EBEAE5;   /* 冷浅米(标签/气泡底) */
  /* 低饱和语义色，不像红绿灯 */
  --sev-high: #9E4A3E;  /* 深陶土 */
  --sev-mid: #A98C45;   /* 暗金 */
  --sev-low: #6C8770;   /* 雾霾绿 */
  --serif: "RK Serif", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;
}

/* 思源宋体 Noto Serif SC SemiBold 子集(OFL 授权，可嵌入分发)，保证跨设备(尤其 Windows PAD)一致的宋体高级感。
   子集字符 = UI 文案 + 208 商品名实际用字，约 151KB。重建子集见 README「字体子集」。 */
@font-face {
  font-family: "RK Serif";
  src: url("/fonts/NotoSerifSC-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }   /* 防 iPad 横屏自动放大字号 */
img, svg, video { max-width: 100%; }        /* 任何媒体不撑破容器 */
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.6;
}

/* 顶栏 + 品牌标 */
header {
  background: var(--ink); color: #fff; padding: 18px 26px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.brand-wrap { display: flex; flex-direction: column; gap: 2px; }
header h1 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: 5px; color: var(--gold);
}
.tagline { font-size: 11px; letter-spacing: 3px; color: #8a8980; }
.whoami { font-size: 13px; color: #cabfb0; letter-spacing: .5px; }

/* 登录页 */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink); display: flex; align-items: center; justify-content: center;
}
.login-screen[hidden] { display: none; }
.login-card {
  background: var(--card); border: 1px solid var(--gold); border-radius: 4px;
  padding: 42px 34px; width: 330px; max-width: 88vw; text-align: center;
}
.login-brand { font-family: var(--serif); font-size: 26px; letter-spacing: 6px; color: var(--gold-deep); }
.login-sub { font-size: 12px; letter-spacing: 3px; color: var(--muted); margin: 8px 0 28px; }
.login-card input {
  width: 100%; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line);
  border-radius: 2px; font-size: 15px; background: #fff;
}
.login-card input:focus { outline: none; border-color: var(--gold); }
.login-card .primary { width: 100%; letter-spacing: 4px; }
.login-err { color: var(--sev-high); font-size: 13px; min-height: 18px; margin-top: 12px; }
.store-bar { display: flex; align-items: center; gap: 10px; }
.store-bar label { font-size: 13px; color: #cabfb0; }
.store-bar input {
  width: 64px; padding: 5px 8px; border: 1px solid #34343a; background: #1b1b1e;
  color: #ece9e2; border-radius: 4px; margin-left: 4px;
}
button.ghost { background: transparent; color: var(--gold); border: 1px solid #44444c; }
button.ghost:hover { background: #1c1c20; }

/* 进度条 */
.stepper {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  padding: 16px 12px; background: var(--card); border-bottom: 1px solid var(--line);
}
.stepper span {
  font-size: 13px; letter-spacing: 1px; color: #c4bcae; padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.stepper span.done { color: var(--gold-deep); }
.stepper span.active { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }
.stepper span.nav { cursor: pointer; }
.stepper span.nav:not(.active):hover { color: var(--gold); }

main { max-width: 780px; margin: 0 auto; padding: 30px 20px; }

.step {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 30px;
  box-shadow: 0 8px 30px rgba(22,20,15,.05);
  animation: stepIn .26s ease both;   /* 从容淡入，不弹跳 */
}
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step h2 {
  font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 1px;
  margin-bottom: 20px; color: var(--ink);
}
.muted { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }

/* 按钮 */
button {
  padding: 12px 20px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 2px; font-size: 15px; letter-spacing: 1px; cursor: pointer; transition: .18s;
}
button:hover { background: var(--ivory-2); }
button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:hover { background: #000; box-shadow: inset 0 0 0 1px var(--gold); }
.btn-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }
.hint { font-size: 13px; color: var(--muted); margin-top: 16px; }
.hint.center { text-align: center; }

/* ① 采集 */
.camera-wrap {
  background: #000; border-radius: 4px; overflow: hidden; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
#video { width: 100%; height: 100%; object-fit: cover; }

/* 检测中动画 */
#step-scanning { text-align: center; padding: 70px 22px; }
.scan { position: relative; width: 160px; height: 160px; margin: 0 auto 22px; }
.scan-ring { width: 132px; height: 132px; margin: 14px auto; border: 1px solid var(--line); border-radius: 50%; }
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: scan 1.5s ease-in-out infinite;
}
@keyframes scan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
.scan-text { color: var(--gold-deep); font-size: 14px; letter-spacing: 3px; }

/* ② 报告 */
.report-head { text-align: center; }
.skin-type {
  font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: 1px;
}
.skin-type .tag.warn { vertical-align: middle; }
.report-sub { font-size: 12px; letter-spacing: 4px; color: var(--muted); margin-top: 6px; }
.report-rule { height: 1px; background: var(--gold); opacity: .5; width: 62%; margin: 18px auto; }
.rline { display: flex; justify-content: center; gap: 12px; font-size: 14px; margin: 8px 0; }
.rline span { color: var(--muted); min-width: 60px; text-align: right; }
.rline b { color: var(--ink); font-weight: 600; text-align: left; max-width: 64%; }
.detail { text-align: center; margin-top: 16px; }

/* 肤况雷达图 */
.radar { width: 292px; max-width: 100%; display: block; margin: 4px auto; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-axis { stroke: var(--line); stroke-width: 1; }
.radar-data { fill: rgba(178, 160, 106, .20); stroke: var(--gold); stroke-width: 1.5; }
.radar-dot { fill: var(--gold-deep); }
.radar-label { fill: var(--muted); font-size: 11px; font-family: -apple-system, "PingFang SC", sans-serif; }
.detail summary { cursor: pointer; color: var(--gold-deep); font-size: 14px; letter-spacing: 1px; }
.metrics { margin-top: 14px; }
.metric { display: flex; align-items: center; gap: 12px; margin: 9px 0; font-size: 13px; }
.metric-name { width: 64px; color: var(--muted); }
.metric-val { width: 28px; text-align: right; color: var(--muted); }
.bar { flex: 1; height: 6px; background: var(--ivory-2); border-radius: 3px; overflow: hidden; }
.fill { height: 100%; background: var(--gold); }
.fill.high { background: var(--sev-high); }

/* ③ 追问 */
.survey-q { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 14px 0 26px; text-align: center; }
.survey-opts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.opt { min-width: 104px; padding: 18px 24px; font-size: 17px; border-radius: 2px; }
.opt:hover { border-color: var(--gold); background: #fbf7ef; box-shadow: inset 0 0 0 1px var(--gold); }
.mic {
  display: block; margin: 30px auto 0; color: var(--gold-deep);
  border: 1px dashed var(--gold); background: #fbf8f1; letter-spacing: 1px;
}

/* ④ 推荐 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 4px; padding: 16px; background: #fff; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: .5px; }
.price { font-size: 12px; color: var(--gold-deep); letter-spacing: 1px; }
.pname { font-size: 14px; margin: 8px 0; color: var(--ink-soft); }
.tag {
  display: inline-block; font-size: 12px; padding: 3px 11px; border-radius: 2px;
  background: var(--ivory-2); color: var(--ink-soft); margin: 2px 5px 2px 0; letter-spacing: .5px;
}
.tag.warn { background: #f4e3df; color: var(--sev-high); }
.tags { margin-bottom: 8px; }
.reason { font-size: 13px; color: var(--ink-soft); }
.warn-line { font-size: 12px; color: var(--sev-high); margin-top: 6px; }
.warn-lead {
  display: inline-block; font-size: 11px; color: var(--sev-high); border: 1px solid var(--sev-high);
  border-radius: 2px; padding: 0 5px; margin-right: 6px; letter-spacing: 1px;
}
.guide { margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 14px; }
.guide summary { cursor: pointer; color: var(--muted); font-size: 11px; letter-spacing: 3px; list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide-body { margin-top: 10px; }
.guide-body .g-row { display: flex; gap: 11px; font-size: 12.5px; line-height: 1.75; padding: 5px 0; }
.guide-body .g-row + .g-row { border-top: 1px solid rgba(227,226,221,.5); }
.guide-body .g-k { flex: 0 0 4.5em; color: var(--gold-deep); white-space: nowrap; letter-spacing: 1px; }
.guide-body .g-v { flex: 1; color: var(--ink-soft); }

/* 甄选 · 画册式一屏一支全详情 */
.rec-slide { padding: 2px; }
.rec-top { display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 18px; }
.rec-top .gold { color: var(--gold-deep); }
.rec-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rec-meta .brand { font-size: 13px; letter-spacing: 2px; color: var(--gold-deep); }
.rec-meta .price { font-size: 11px; letter-spacing: 1px; color: var(--gold-deep); flex: 0 0 auto; }
.rec-meta .price b { color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: 0; }
.rec-name { font-family: var(--serif); font-size: 20px; color: var(--ink); line-height: 1.35; margin: 8px 0 15px; }
.rec-rule { height: 1px; background: var(--line); margin-bottom: 16px; }
.rec-reason { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }

/* 段落小标（A+B 合体：金色编号 + 中文宋体 + 英文副标） */
.d-block { margin-top: 24px; }
.d-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.d-h .d-h-num { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--gold); line-height: 1; }
.d-h .d-h-zh { font-family: var(--serif); font-size: 16px; color: var(--ink); letter-spacing: 1px; }
.d-h .d-h-en { display: block; font-size: 9px; letter-spacing: 3px; color: var(--gold-deep);
  margin-top: 2px; text-transform: uppercase; }
.d-hero, .d-panel { background: var(--ivory-2); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; }
.d-panel .d-sub:first-child { margin-top: 0; }
.d-panel .d-row + .d-row { border-top-color: rgba(178,160,106,.18); }
/* 招牌成分加重首项(在核心成分盒内) */
.d-lead .d-lead-name { display: block; font-family: var(--serif); font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.d-lead .d-hero-story { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
.d-panel .d-lead:not(:last-child) { padding-bottom: 11px; margin-bottom: 9px; border-bottom: 1px solid rgba(178,160,106,.2); }
.d-hero-name { display: block; font-family: var(--serif); font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.d-hero-story { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
.d-sub { font-size: 11px; letter-spacing: 2px; color: var(--gold-deep); margin: 4px 0 8px; }
.d-row { display: flex; align-items: baseline; gap: 14px; font-size: 13.5px; line-height: 1.8; padding: 4px 0; }
.d-row .d-k { flex: 0 0 auto; min-width: 5em; color: var(--gold-deep); white-space: nowrap; }
.d-row .d-v { flex: 1; color: var(--ink-soft); }
.d-block .d-row + .d-row { border-top: 1px solid rgba(227,226,221,.5); }
.d-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }

/* 翻页 */
.rec-pager { display: flex; justify-content: center; gap: 7px; margin-top: 26px; }
.rec-pager .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.rec-pager .dot.on { background: var(--gold); }
.rec-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.rec-nav { font-size: 12px; letter-spacing: 2px; color: var(--gold-deep); cursor: pointer; }

/* ⑤ 对话 */
/* 整页阅读式：对话不再内滚，整篇随浏览器页面滚动，回复完整铺开 */
.chat-log { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.msg { max-width: 84%; padding: 11px 15px; border-radius: 4px; font-size: 15px; word-break: break-word; overflow-x: auto; }
.msg.user { align-self: flex-end; background: var(--ink); color: #fff; }
.msg.bot { align-self: flex-start; background: var(--ivory-2); color: var(--ink); border-left: 2px solid var(--gold); }
.msg.loading { color: var(--muted); font-style: italic; }
.msg table { border-collapse: collapse; margin: 8px 0; font-size: 13px; width: 100%; }
.msg th, .msg td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.msg th { background: rgba(184,146,83,.1); }
.msg ul { margin: 6px 0 6px 18px; }
.msg h4 { font-family: var(--serif); font-size: 14px; margin: 8px 0 4px; color: var(--ink); }
.msg b { color: var(--gold-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.chip {
  font-size: 13px; padding: 7px 13px; border-radius: 2px; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); letter-spacing: .5px;
}
.chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.chat-input { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.chat-input .mic { margin: 0; padding: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.chat-input input { flex: 1; padding: 12px 13px; border: 1px solid var(--line); border-radius: 2px; font-size: 15px; background: #fff; }
.chat-input input:focus { outline: none; border-color: var(--gold); }
.chat-input input:disabled { background: #f3f0ea; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 2px;
  font-size: 14px; letter-spacing: 1px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 50;
}

/* ⑥ 肌肤档案卡 */
.archive-card {
  border: 1px solid var(--gold); background: linear-gradient(180deg, #fff, var(--card));
  padding: 36px 30px; text-align: center; border-radius: 2px;
}
.ar-wordmark { font-family: var(--serif); font-size: 24px; letter-spacing: 6px; color: var(--gold-deep); }
.ar-title { font-size: 12px; letter-spacing: 4px; color: var(--muted); margin-top: 6px; }
.ar-meta { font-size: 12px; color: var(--muted); margin-top: 12px; letter-spacing: .5px; }
.ar-rule { height: 1px; background: var(--gold); opacity: .55; margin: 20px auto; width: 64%; }
.ar-skin { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--ink); margin: 4px 0 16px; }
.ar-row { display: flex; justify-content: center; gap: 12px; font-size: 14px; margin: 8px 0; }
.ar-row span { color: var(--muted); min-width: 60px; text-align: right; }
.ar-row b { color: var(--ink); font-weight: 600; text-align: left; max-width: 62%; }
.ar-pick-title { font-size: 13px; letter-spacing: 2px; color: var(--gold-deep); margin-top: 4px; }
.ar-picks { list-style: none; margin: 12px 0 4px; padding: 0; }
.ar-picks li { font-size: 14px; color: var(--ink-soft); margin: 6px 0; }
.ar-brand { font-family: var(--serif); color: var(--ink); margin-right: 8px; }
.ar-foot { font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 20px; }