/* ===== 面鉴 · 美学类型鉴定所 ===== */

:root {
  --paper: #F7F4EE;
  --paper-2: #EFEBE1;
  --paper-3: #E6E0D2;
  --ink: #1A1815;
  --ink-2: #57514A;
  --ink-3: #8C857A;
  --line: #DCD5C7;
  --line-soft: #E8E3D7;
  --seal: #B03A2E;
  --gold: #A8834B;

  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;

  --maxw: 720px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

/* 极淡纸纹 */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.012) 0 1px, transparent 1px),
                    radial-gradient(circle at 70% 65%, rgba(0,0,0,.012) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
}

.view { display: none; position: relative; z-index: 1; }
.view.is-active { display: block; }

.sheet {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px 72px;
}

/* ---------- 首页 ---------- */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }

.brand-mark {
  width: 38px; height: 38px; border: 1px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; line-height: 1;
  border-radius: 2px;
}
.brand-cn { font-family: var(--serif); font-size: 17px; letter-spacing: .18em; line-height: 1.2; }
.brand-en { font-size: 9.5px; letter-spacing: .16em; color: var(--ink-3); margin-top: 3px; }

.hero { margin-bottom: 44px; }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(30px, 7.4vw, 46px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: .01em;
  margin: 0 0 20px;
}
.hero-title em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.hero-title em::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 8px;
  background: rgba(168,131,75,.22); z-index: -1;
}

.hero-sub { color: var(--ink-2); font-size: 14px; line-height: 1.85; margin: 0; }

/* 上传区 */
.uploader {
  position: relative;
  border: 1px dashed var(--line);
  background: rgba(255,255,255,.42);
  border-radius: 3px;
  min-height: 210px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  overflow: hidden;
  margin-bottom: 18px;
}
.uploader:hover, .uploader:focus-visible { border-color: var(--ink-3); background: rgba(255,255,255,.66); outline: none; }
.uploader.is-drag { border-color: var(--gold); background: rgba(168,131,75,.07); }

.up-empty { text-align: center; padding: 32px 20px; }
.up-icon { margin-bottom: 14px; opacity: .85; }
.up-title { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.up-hint { font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }

.up-preview { position: absolute; inset: 0; }
.up-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-remove {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(26,24,21,.62); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
}

/* 按钮 */
.btn {
  width: 100%;
  height: 52px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .22s var(--ease);
  border: 1px solid var(--ink);
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover:not(:disabled) { background: #2E2A25; }
.btn-primary:disabled { background: var(--paper-3); border-color: var(--paper-3); color: var(--ink-3); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); background: rgba(255,255,255,.5); }

.home-note {
  margin-top: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--ink-3);
  flex-wrap: wrap;
}
.link-quiet { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.link-quiet:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- 分析中 ---------- */
.loading-sheet { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 86vh; }

.scan { margin-bottom: 36px; }
.scan-frame {
  position: relative; width: 200px; height: 200px;
  border: 1px solid var(--line); overflow: hidden; border-radius: 2px;
  background: var(--paper-2);
}
.scan-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.96); }
.scan-line {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(168,131,75,.55);
  animation: scanmove 2.1s ease-in-out infinite;
}
@keyframes scanmove {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.loading-text {
  font-family: var(--serif); font-size: 16px; letter-spacing: .08em;
  color: var(--ink-2); min-height: 26px;
  transition: opacity .3s;
}
.loading-steps { display: flex; gap: 7px; margin-top: 20px; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); transition: background .4s; }
.dot.is-on { background: var(--gold); }

/* ---------- 结果页 ---------- */
.sheet-result { padding-top: 22px; }

.result-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.nav-brand { font-family: var(--serif); font-size: 14px; letter-spacing: .22em; }
.nav-again {
  background: none; border: none; padding: 4px 0;
  font-size: 12px; color: var(--ink-3); cursor: pointer;
  letter-spacing: .04em; border-bottom: 1px solid transparent;
}
.nav-again:hover { color: var(--ink); border-color: var(--line); }

.block { padding: 40px 0; border-bottom: 1px solid var(--line-soft); }
.block:last-of-type { border-bottom: none; }

.block-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .2em; color: var(--ink-3);
  margin-bottom: 26px;
}
.block-label i {
  font-style: normal; font-family: var(--serif);
  color: var(--gold); letter-spacing: .06em; font-size: 12px;
}
.block-label::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

/* 01 判定 */
.block-verdict { position: relative; padding-top: 36px; }

.doc-no {
  font-size: 10.5px; letter-spacing: .18em; color: var(--ink-3);
  margin-bottom: 22px; font-variant-numeric: tabular-nums;
}

.type-name {
  font-family: var(--serif);
  font-size: clamp(46px, 13vw, 82px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .04em;
  margin: 0 0 12px;
  color: var(--ink);
}

.type-en {
  font-size: 10.5px; letter-spacing: .28em; color: var(--ink-3);
  margin-bottom: 30px;
}

.verdict-text {
  font-family: var(--serif);
  font-size: clamp(16px, 3.6vw, 19px);
  line-height: 2;
  color: var(--ink-2);
  margin: 0 0 8px;
  max-width: 30em;
  letter-spacing: .015em;
}

/* 印章 */
.seal {
  position: absolute; right: 0; top: 92px;
  width: 86px; height: 86px;
  border: 2px solid var(--seal);
  border-radius: 3px;
  transform: rotate(-7deg);
  display: grid; place-items: center;
  color: var(--seal);
  opacity: .9;
  mix-blend-mode: multiply;
}
.seal-inner {
  display: flex; align-items: baseline; gap: 2px;
  transform: rotate(0deg);
  font-family: var(--serif);
}
.seal-inner span { font-size: 10px; letter-spacing: .05em; }
.seal-inner b { font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.seal-inner span:last-child { font-size: 11px; }

/* 肖像 */
.portrait {
  position: relative; margin: 34px 0 0;
  width: 132px; height: 168px;
  overflow: hidden; border-radius: 2px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s; }
.portrait.is-hidden img { filter: blur(16px) saturate(0); }
.portrait-toggle {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(26,24,21,.55); color: #fff; border: none;
  font-size: 10px; letter-spacing: .12em; padding: 5px 0;
  cursor: pointer; backdrop-filter: blur(3px);
}

/* 02 雷达 */
.radar-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.radar { flex: 0 0 236px; width: 236px; height: 236px; }
.radar svg { width: 100%; height: 100%; overflow: visible; }

.dim-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; }
.dim-list li {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 6px;
  padding: 10px 0; border-bottom: 1px dotted var(--line);
}
.dim-list li:last-child { border-bottom: none; }
.dim-name { font-size: 13px; color: var(--ink); }
.dim-name small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }
.dim-score { font-family: var(--serif); font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink); }
.dim-score em { font-style: normal; font-size: 10px; color: var(--ink-3); margin-left: 1px; }

/* 03 优势 */
.block-lead { font-size: 13px; color: var(--ink-3); margin: -12px 0 22px; }

.strength-list { display: flex; flex-direction: column; gap: 14px; }

.strength {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.45);
  border-radius: 3px;
  padding: 20px 20px 18px;
  position: relative;
}
.strength-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.strength-part {
  font-family: var(--serif); font-size: 19px; letter-spacing: .06em;
}
.strength-metric {
  font-size: 11px; color: var(--ink-3); letter-spacing: .06em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.strength-term {
  font-size: 10.5px; color: var(--gold); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px;
}
.strength-note { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin: 0; }

/* 04 调整 */
.adjust-card {
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 18px;
}
.adjust-part { font-family: var(--serif); font-size: 16px; margin-bottom: 8px; letter-spacing: .04em; }
.adjust-note { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin: 0; }

/* 05 妆容 */
.makeup-list { list-style: none; margin: 0; padding: 0; counter-reset: mk; }
.makeup-list li {
  position: relative; padding: 0 0 20px 42px; counter-increment: mk;
}
.makeup-list li::before {
  content: counter(mk, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--serif); font-size: 12px; color: var(--gold);
  letter-spacing: .06em;
}
.makeup-list li::after {
  content: ""; position: absolute; left: 9px; top: 24px; bottom: 4px; width: 1px;
  background: var(--line-soft);
}
.makeup-list li:last-child::after { display: none; }
.mk-area { font-size: 13px; font-weight: 600; margin-bottom: 5px; letter-spacing: .04em; }
.mk-advice { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin: 0; }

/* 06 坐标 */
.axis-chart { margin: 8px 0 14px; }
.axis-chart svg { width: 100%; height: auto; display: block; }
.axis-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.9; }
.axis-note b { font-weight: 600; color: var(--ink); }

/* 07 行动 */
.block-actions { padding-bottom: 20px; }
.actions { display: flex; gap: 12px; }
.actions .btn { flex: 1; }
.actions-note { font-size: 11px; color: var(--ink-3); margin: 14px 0 0; text-align: center; }

.result-footer { padding-top: 26px; text-align: center; }
.foot-line { width: 34px; height: 1px; background: var(--line); margin: 0 auto 14px; }
.result-footer p { font-size: 10.5px; letter-spacing: .22em; color: var(--ink-3); margin: 0; }

/* ---------- 分享浮层 ---------- */
.share-layer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26,24,21,.72);
  backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 24px 18px 40px;
  overflow-y: auto;
  animation: fadein .25s var(--ease);
}
.share-layer[hidden] { display: none; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }

.share-panel {
  width: 100%; max-width: 380px;
  background: var(--paper);
  border-radius: 6px;
  padding: 16px;
  animation: rise .32s var(--ease);
}
@keyframes rise { from { transform: translateY(16px); opacity: .6 } to { transform: none; opacity: 1 } }

.share-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 12px; letter-spacing: .04em;
}
.share-close {
  background: none; border: none; font-size: 20px; line-height: 1;
  color: var(--ink-3); cursor: pointer; padding: 0 4px;
}
.share-img-wrap { border-radius: 3px; overflow: hidden; background: var(--paper-2); margin-bottom: 14px; }
.share-img-wrap img { width: 100%; display: block; }
.share-btns { display: flex; gap: 10px; margin-bottom: 14px; }
.share-btns .btn { height: 46px; font-size: 14px; }
.share-copy { position: relative; }
.share-copy textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 3px;
  background: rgba(255,255,255,.6); padding: 10px 11px 38px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  resize: none; outline: none;
}
.btn-copy {
  position: absolute; right: 8px; bottom: 8px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 11.5px; padding: 5px 12px; border-radius: 3px;
  cursor: pointer; color: var(--ink-2);
}
.btn-copy:hover { border-color: var(--ink-3); color: var(--ink); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 12px);
  background: rgba(26,24,21,.92); color: #F7F4EE;
  font-size: 13px; padding: 11px 20px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: all .28s var(--ease);
  z-index: 80; white-space: nowrap;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 响应式 ---------- */
@media (max-width: 620px) {
  .sheet { padding: 28px 20px 60px; }
  .brand { margin-bottom: 40px; }
  .hero { margin-bottom: 32px; }
  .br-pc { display: none; }
  .seal { width: 72px; height: 72px; top: 78px; }
  .seal-inner b { font-size: 21px; }
  .radar-wrap { flex-direction: column; align-items: stretch; gap: 18px; }
  .radar { align-self: center; flex: none; }
  .portrait { width: 108px; height: 138px; }
  .actions { flex-direction: column; }
  .block { padding: 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}