/* =========================================================
   四季测色搭子 · 网页版样式
   视觉与交互对齐小程序（season-color-app/miniprogram/pages/index）：
   薰衣草→蜜桃六段渐变底、磨砂白卡、呼吸光晕与星点、
   滚动浮现、旋转色球、珊瑚金渐变按钮、按压回弹。
   ========================================================= */

:root{
  /* 色板：与 app.wxss 逐值一致 */
  --ink:      #3a3340;
  --ink2:     #7a7080;
  --faint:    #a89aac;
  --line:     rgba(130,110,150,.16);
  --card:     rgba(255,255,255,.72);
  --gold:     #b8956a;
  --coral:    #d97757;
  --coral2:   #e8a87c;
  --spring:   #e8b84b;
  --summer:   #8fa8c8;
  --autumn:   #c87a3c;
  --winter:   #5a5a8a;

  --ok:       #4e8c6a;
  --warn:     #c08a3e;
  --bad:      #b4553f;

  --r-sm:     10px;
  --r-md:     14px;
  --r-lg:     18px;
  --r-xl:     24px;

  --serif: "Songti SC","STZhongsong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --sh-btn:  0 10px 26px rgba(217,119,87,.30);
  --sh-card: 0 6px 18px rgba(90,70,110,.07);
  --sh-lift: 0 12px 30px rgba(90,70,110,.14);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.75;
  letter-spacing:.02em;
  min-height:100vh;
  overflow-x:hidden;
}

/* 渐变底：固定层，不随滚动重绘，也不会在长结果页被拉扁 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(175deg,
    #cdc2ee 0%, #ded4f0 14%, #f0e6f2 34%,
    #f8eff0 52%, #fbe9e0 74%, #f6c9b4 100%);
}

.app{
  position:relative;
  max-width:520px;
  margin:0 auto;
  /* 顶栏在 .app 之外，这里要减掉它的高度，否则每屏都会多出一条滚动量 */
  min-height:calc(100vh - 52px);
  min-height:calc(100svh - 52px);
  display:flex;
  flex-direction:column;
  padding:0 20px calc(24px + env(safe-area-inset-bottom));
}

/* ---------------- 顶栏：磨砂吸顶 ---------------- */
/* 放在 .app 之外，磨砂层才能铺满视口宽度；内容靠 .bar-in 自己对到 520 列 */
.bar{
  position:sticky; top:0; z-index:30;
  background:rgba(240,232,244,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:520px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 20px 10px;
}

.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{
  width:26px; height:26px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#a898d8,#e89ab0 60%,#f0b090);
  color:#fff; font-family:var(--serif); font-size:14px; font-weight:700;
  box-shadow:0 3px 10px rgba(168,152,216,.35);
}
.brand-t{
  font-family:var(--serif); font-size:14.5px; letter-spacing:.14em; color:var(--ink);
}
.brand-sub{
  font-size:11px; color:var(--faint); letter-spacing:.06em; margin-left:2px;
}
.bar-btn{
  font-size:13px; color:var(--ink2); background:rgba(255,255,255,.55);
  border:1px solid var(--line); border-radius:999px;
  padding:5px 14px; font-family:var(--sans); cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}
.bar-btn:active{ transform:scale(.94); opacity:.8; }
.bar-btn[hidden]{ display:none; }

/* ---------------- 屏幕切换 ---------------- */
.main{ flex:1; display:flex; flex-direction:column; }
.screen{ display:none; flex-direction:column; padding-bottom:12px; }
.screen.is-active{ display:flex; animation:rise .5s cubic-bezier(.22,.9,.3,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* 滚动浮现：与小程序 .rv 同一套参数 */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.1s; }
.rv.d2{ transition-delay:.2s; }
.rv.d3{ transition-delay:.3s; }

/* ---------------- 首屏欢迎 ---------------- */
.welcome{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:30px 0 8px; overflow:hidden;
}
.w-h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,8.2vw,40px); line-height:1.34;
  letter-spacing:.1em;
}
.w-h1 span{ display:block; }
.w-h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--coral) 12%,var(--gold) 58%,var(--summer) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.w-sub{
  font-size:12px; color:var(--ink2); letter-spacing:.28em;
  margin-top:14px; text-indent:.28em;
}

/* 呼吸光晕 */
.halo{
  width:66vw; height:66vw; max-width:262px; max-height:262px;
  border-radius:50%; margin:30px 0 6px; position:relative; flex:none;
  background:radial-gradient(circle at 50% 38%,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.5) 44%, rgba(255,255,255,0) 70%);
  box-shadow:0 0 60px 18px rgba(255,255,255,.55), inset 0 0 40px rgba(200,180,230,.25);
}
.halo::before{
  content:""; position:absolute; inset:6%; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:radial-gradient(circle at 50% 60%,
    rgba(220,205,240,.35), rgba(250,220,210,.28) 60%, transparent 75%);
  animation:haloPulse 4s ease-in-out infinite;
}
.halo .face{
  position:absolute; inset:20%;
  border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,#d8c8dc 0%,#cfc0d8 55%,#c4b4cc 100%);
  opacity:.38; filter:blur(2.5px);
}
.sparkle{
  position:absolute; border-radius:50%; opacity:.75;
  animation:floaty 5s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{ transform:scale(1); opacity:.9; }
  50%    { transform:scale(1.035); opacity:1; }
}
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}

/* 四季色条 */
.season-dots{ display:flex; justify-content:center; margin:14px 0 26px; }
.sd{
  display:flex; flex-direction:column; align-items:center;
  font-size:12px; color:var(--ink2); letter-spacing:.1em; margin:0 13px;
}
.sd i{ width:30px; height:5px; border-radius:3px; margin-bottom:7px; display:block; }

.w-hint{
  margin-top:14px; font-size:11.5px; color:var(--faint); letter-spacing:.04em;
  line-height:1.8;
}

/* ---------------- 价值段 ---------------- */
.hero{ padding:28px 0 4px; text-align:left; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:6px 16px;
  font-size:11.5px; color:var(--ink2);
}
.badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none; }

.hero-t{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,6.4vw,30px); line-height:1.42;
  letter-spacing:.04em; margin:16px 0 10px;
}
.hero-t .grad{
  background:linear-gradient(120deg,var(--coral),var(--gold) 60%,var(--summer));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-p{ font-size:13.5px; color:var(--ink2); line-height:1.85; }

.points{ list-style:none; margin:22px 0 4px; display:flex; flex-direction:column; gap:11px; }
.points li{
  display:flex; gap:13px; padding:17px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  transition:transform .25s ease, box-shadow .25s ease;
}
.points li:active{ transform:scale(.985); }
.pt-ic{
  flex:0 0 30px; height:30px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--coral); background:#fdeee6;
}
.points b{ font-size:14px; font-weight:600; letter-spacing:.01em; }
.points p{ font-size:12.5px; color:var(--ink2); line-height:1.78; margin-top:5px; }

/* ---------------- 四季十二型 ---------------- */
.types{ padding-top:36px; }
.sec-head{ text-align:center; margin-bottom:20px; }
.zh-tag{
  font-family:var(--serif); font-size:10.5px; letter-spacing:.34em;
  text-indent:.34em; color:var(--gold);
}
.sec-h2{
  font-family:var(--serif); font-weight:400; font-size:25px;
  letter-spacing:.1em; text-indent:.1em; margin:7px 0 9px;
}
.sec-p{ font-size:12.5px; color:var(--ink2); line-height:1.85; }

/* 三变量解说：冷暖 / 明度 / 饱和度 */
.how-grid{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:15px 16px; margin-bottom:22px;
  box-shadow:var(--sh-card);
}
.how-grid > p{ font-size:12.5px; color:var(--ink2); line-height:1.8; }
.how-grid ul{ list-style:none; margin:9px 0 0; }
.how-grid li{
  display:flex; align-items:baseline; gap:10px;
  font-size:12px; padding:6px 0;
  border-bottom:1px dashed var(--line);
}
.how-grid li:last-child{ border-bottom:none; }
.how-grid b{
  flex:0 0 48px; font-weight:600; color:var(--ink); letter-spacing:.08em;
}
.how-grid span{ color:var(--ink2); flex:1; }
.how-tail{ margin-top:10px; font-size:11.5px; color:var(--faint); }

.season-block{ margin-bottom:20px; }
.season-title{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; letter-spacing:.12em;
  margin:0 0 10px 2px;
}
.season-title i{
  width:8px; height:8px; border-radius:50%; flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.62);
}
.type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
/* 每季三型，第三个落单：让它居中占半格，而不是在右边留一个洞 */
.type-grid > .type-card:last-child:nth-child(odd){
  grid-column:1 / -1;
  width:calc(50% - 4.5px);
  justify-self:center;
}
.type-card{
  border-radius:16px; padding:13px 12px 12px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 3px 10px rgba(90,70,110,.05);
}
.type-card .t-name{
  display:flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
}
.type-card .t-ic{ font-size:12px; line-height:1; }
.type-card .t-en{
  font-size:9.5px; color:var(--faint); letter-spacing:.1em;
  text-transform:uppercase; margin-top:2px;
}
.type-card .t-dots{ display:flex; gap:4px; margin:9px 0 8px; }
.type-card .t-dots i{
  width:15px; height:15px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.06);
}
.type-card .t-desc{ font-size:11px; color:var(--ink2); line-height:1.65; }
.type-note{ font-size:11px; color:var(--faint); line-height:1.85; text-align:center; }

/* 深色 CTA */
.dark-cta{
  margin:26px -20px 0; padding:40px 26px;
  background:radial-gradient(ellipse 80% 100% at 50% 0%, #35313d 0%, #232028 100%);
  color:#f0ece4; text-align:center;
}
.dark-h2{
  font-family:var(--serif); font-size:22px; font-weight:400;
  line-height:1.55; letter-spacing:.04em;
}
.dark-em{ color:var(--coral2); }
.dark-p{ color:#b0a99e; font-size:12.5px; margin:10px 0 22px; }
.dark-btn{
  display:inline-block; padding:13px 34px; border-radius:999px; border:none;
  background:linear-gradient(135deg,#d3704e,#e29a72);
  color:#fff; font-family:var(--sans); font-size:14px; letter-spacing:.1em;
  box-shadow:0 10px 30px rgba(0,0,0,.35); cursor:pointer;
  transition:transform .18s ease;
}
.dark-btn:active{ transform:scale(.96); }

/* ---------------- 按钮 ---------------- */
.cta-wrap{ display:flex; flex-direction:column; gap:10px; margin:6px 0; }

.btn{
  display:flex; align-items:center; justify-content:center;
  height:52px; border-radius:999px; border:none; cursor:pointer;
  font-family:var(--sans); font-size:15px; letter-spacing:.18em; text-indent:.18em;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1), opacity .18s ease, box-shadow .18s ease;
}
.btn:active{ transform:scale(.96); }

/* 首屏主按钮：深色药丸，与小程序 .w-cta 一致 */
.btn-dark{
  background:rgba(45,38,52,.92);
  color:#fff; box-shadow:0 12px 28px rgba(90,70,110,.35);
  height:56px; font-size:15.5px; letter-spacing:.3em; text-indent:.3em;
}
.btn-primary{
  background:linear-gradient(135deg,#d3704e,#e29a72);
  color:#fff; box-shadow:var(--sh-btn);
}
.btn-primary:disabled{
  background:rgba(217,119,87,.30);
  box-shadow:none; cursor:default; color:rgba(255,255,255,.92);
}
.btn-primary:disabled:active{ transform:none; }
.btn-ghost{
  background:var(--card); color:var(--coral);
  border:1px solid #eecfc2; height:48px; font-size:14px;
}
/* 首屏次级入口：降权成文字链，别和主按钮抢注意力 */
#btnHowBuy{
  background:transparent; border:none; box-shadow:none;
  height:40px; font-size:13px; color:var(--coral); letter-spacing:.1em;
}
#btnHowBuy:active{ transform:scale(.96); opacity:.7; }
.btn-sm{ height:42px; font-size:13.5px; letter-spacing:.06em; text-indent:.06em; }

/* ---------------- 通用文字 ---------------- */
.h2{
  font-family:var(--serif); font-weight:400; font-size:26px;
  letter-spacing:.05em; margin:22px 0 8px;
}
.h3{
  font-family:var(--serif); font-weight:400; font-size:18.5px;
  letter-spacing:.06em; margin-bottom:6px;
}
.sub{ font-size:13px; color:var(--ink2); line-height:1.8; }
.sub code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  padding:2px 7px; border-radius:6px; color:var(--ink);
}
.tip-mini{
  font-size:11.5px; color:var(--faint); text-align:center; margin-top:12px; line-height:1.75;
}
/* 避免段落最后一行只剩一两个字（中文段落尤其难看）。旧浏览器自动忽略 */
.hero-p, .points p, .w-hint, .card-sub, .consist-note, .sub,
.foot-note, .hint-card li, .code-help p, .tip-mini, .wd-row p{
  text-wrap:pretty;
}
.note{
  font-size:12.5px; color:var(--ink2); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 14px; margin-top:10px; line-height:1.8;
}
.note[hidden]{ display:none; }

/* ---------------- 输码 ---------------- */
#s-code{ flex:1; justify-content:center; padding-bottom:24px; }

.code-box{ margin:22px 0 8px; }
.code-input{
  width:100%; height:64px; text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:22px; letter-spacing:.12em; text-indent:.12em;
  color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md);
  outline:none; box-shadow:var(--sh-card);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.code-input::placeholder{ color:#cfc3c8; letter-spacing:.10em; }
.code-input:focus{
  background:rgba(255,255,255,.9);
  border-color:rgba(217,119,87,.55);
  box-shadow:0 0 0 4px rgba(217,119,87,.12);
}
.code-err{
  font-size:12.5px; color:var(--bad); background:rgba(180,85,63,.10);
  border-radius:var(--r-sm); padding:10px 13px; margin-bottom:8px; line-height:1.7;
}
.code-err[hidden]{ display:none; }
.code-help{
  margin-top:20px; padding:14px 15px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md);
}
.code-help b{ font-size:12.5px; color:var(--ink); font-weight:600; }
.code-help p{ font-size:12px; color:var(--ink2); line-height:1.8; margin-top:4px; }

/* ---------------- 上传：三宫格照片槽 ---------------- */
.slots{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin:18px 0 14px;
}
.slot{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  aspect-ratio:1/1.02; cursor:pointer; overflow:hidden;
  background:rgba(255,255,255,.5);
  border:1.5px dashed var(--line);
  border-radius:var(--r-md);
  transition:border-color .22s ease, background .22s ease, transform .18s ease;
}
.slot:active{ transform:scale(.97); }
.slot-ic{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#cfc5b6; margin-bottom:7px;
}
.slot-t{ font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.slot-s{ font-size:10.5px; color:var(--faint); margin-top:2px; }
.slot-tag{
  position:absolute; top:7px; left:7px;
  font-size:9.5px; color:#fff; background:rgba(43,39,35,.6);
  border-radius:6px; padding:1px 6px; letter-spacing:.06em;
}
.slot-tag.alt{ background:rgba(184,149,106,.72); }
.slot-thumb{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .3s ease;
}
.slot.has-img{ border-style:solid; border-color:rgba(255,255,255,.9); background:#fff; }
.slot.has-img .slot-thumb{ opacity:1; }
.slot.has-img .slot-ic,
.slot.has-img .slot-t,
.slot.has-img .slot-s,
.slot.has-img .slot-tag{ opacity:0; }
.slot.has-img::after{
  content:"✓"; position:absolute; right:6px; bottom:6px;
  width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(184,149,106,.5);
}
.slot-del{
  position:absolute; top:5px; right:5px; z-index:3;
  width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(0,0,0,.5); color:#fff; font-size:13px; line-height:1;
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
.slot.has-img .slot-del{ display:flex; }

.hint-card{
  background:rgba(255,255,255,.5); border-radius:var(--r-lg);
  padding:15px 16px; margin:4px 0 16px;
}
.hint-card b{ font-size:12.5px; color:var(--ink); font-weight:600; }
.hint-card ul{ margin:8px 0 0 16px; }
.hint-card li{ font-size:12px; color:var(--ink2); line-height:1.9; }

/* 可选补充信息 */
.hint-opt{
  margin:0 0 18px; border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.5); overflow:hidden;
}
.hint-opt summary{
  padding:13px 16px; font-size:12.5px; color:var(--ink2); cursor:pointer;
  list-style:none; position:relative; padding-right:38px;
}
.hint-opt summary::-webkit-details-marker{ display:none; }
.hint-opt summary::after{
  content:"＋"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:14px;
}
.hint-opt[open] summary::after{ content:"－"; }
.hint-opt-p{ padding:0 16px; font-size:11.5px; color:var(--faint); line-height:1.8; }
.hint-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-top:1px dashed rgba(130,110,150,.14);
}
.hint-row:first-of-type{ margin-top:8px; }
.hint-q{ flex:0 0 auto; font-size:12px; color:var(--ink2); }
.hint-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.hint-chip{
  font-family:var(--sans); font-size:11.5px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--ink2);
  cursor:pointer; transition:all .18s ease;
}
.hint-chip:active{ transform:scale(.94); }
.hint-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------------- 分析中：旋转色球 ---------------- */
.an-wrap{
  display:flex; flex-direction:column; align-items:center;
  padding:52px 0 10px; text-align:center;
}
.orb{
  width:78px; height:78px; border-radius:50%; position:relative; flex:none;
  background:conic-gradient(#e8b84b,#d97757,#c87a8a,#8fa8c8,#88b8a0,#e8b84b);
  animation:spin 2.6s linear infinite;
  box-shadow:0 10px 30px rgba(140,110,150,.20);
}
.orb::after{
  content:""; position:absolute; inset:9px; border-radius:50%;
  background:rgba(253,247,250,.97);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.an-msg{
  font-family:var(--serif); font-size:17px; letter-spacing:.1em;
  margin-top:26px; color:var(--ink);
}
.an-sub{ font-size:11.5px; color:var(--faint); margin-top:8px; }

.an-steps{ width:100%; max-width:300px; margin:26px auto 0; text-align:left; }
.an-step{
  display:flex; align-items:center; gap:14px;
  padding:12px 4px; color:var(--faint); opacity:.45;
  transition:all .45s ease;
}
.an-step .ic{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:1.5px solid var(--line); background:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all .45s ease;
}
.an-step .t{ font-size:13px; letter-spacing:.05em; }
.an-step .st{
  margin-left:auto; font-size:11px; letter-spacing:.15em;
  opacity:0; transition:opacity .4s ease;
}
.an-step.on{ opacity:1; color:var(--ink); }
.an-step.on .ic{
  border-color:var(--coral); background:#fdeee6;
  box-shadow:0 0 0 5px rgba(217,119,87,.10);
}
.an-step.on .st{ opacity:1; color:var(--coral); }
.an-step.done{ opacity:.8; color:var(--ink2); }
.an-step.done .ic{ border-color:var(--gold); background:rgba(184,149,106,.12); }
.an-step.done .st{ opacity:1; color:var(--gold); }

.an-bar{
  width:220px; height:6px; border-radius:3px;
  background:rgba(130,110,150,.16); overflow:hidden;
  margin:24px auto 0;
}
.an-bar-i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#a898d8,#e89ab0,var(--coral));
  transition:width .9s cubic-bezier(.4,0,.2,1);
}
.an-pct{
  font-family:var(--serif); font-size:38px; font-weight:600;
  color:var(--coral); line-height:1.25; margin-top:14px;
}
.an-pct i{ font-style:normal; font-size:12px; color:var(--faint); font-weight:400; margin-left:2px; }
.an-note{
  font-size:11.5px; color:var(--faint); text-align:center;
  margin-top:auto; padding:30px 20px 40px; line-height:1.85;
}

/* ---------------- 结果 · 头部 ---------------- */
.res-head{
  position:relative; text-align:center;
  padding:26px 0 12px; margin:0 -20px;
  overflow:hidden;
  background:transparent;
}
.camph{
  width:92px; height:92px; border-radius:50%;
  margin:0 auto 20px; border:4px solid #fff;
  box-shadow:0 10px 30px rgba(80,60,40,.18);
  animation:camphPop .62s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes camphPop{
  from{ transform:scale(.7); opacity:0; }
  to  { transform:scale(1);  opacity:1; }
}
.res-kicker{ font-size:11.5px; color:var(--ink2); letter-spacing:.2em; }
.res-type{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,10vw,44px); line-height:1.3;
  letter-spacing:.06em; margin:6px 0 4px;
}
.res-en{
  font-size:10.5px; letter-spacing:.30em; color:var(--faint);
  text-transform:uppercase;
}
.res-pill{
  display:inline-block; margin-top:14px; padding:6px 18px;
  border-radius:999px; font-size:12px; letter-spacing:.1em;
  color:var(--coral); background:rgba(217,119,87,.12);
}

/* ---------------- 一致性 ---------------- */
.consist{
  margin:18px 0 4px; padding:18px 17px 16px;
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-card);
}
.consist-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.consist-k{ font-size:11.5px; color:var(--faint); letter-spacing:.12em; }
.consist-num{ font-family:var(--serif); font-size:40px; line-height:1.12; margin-top:2px; }
.consist-num i{ font-style:normal; font-size:14px; color:var(--faint); margin-left:2px; }
.consist-badge{
  font-size:11.5px; padding:5px 12px; border-radius:999px; letter-spacing:.08em;
  background:rgba(184,149,106,.14); color:var(--ink2); white-space:nowrap; margin-top:4px;
}
.consist-badge.good{ background:rgba(78,140,106,.14); color:var(--ok); }
.consist-badge.ok{ background:rgba(184,149,106,.18); color:#8f6f3c; }
.consist-badge.warn{ background:rgba(192,138,62,.16); color:var(--warn); }
.consist-badge.bad{ background:rgba(180,85,63,.13); color:var(--bad); }

.consist-bar{
  height:5px; border-radius:3px; background:rgba(130,110,150,.16);
  margin:13px 0; overflow:hidden;
}
.consist-bar span{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#a898d8,#e89ab0,var(--coral));
  transition:width .9s cubic-bezier(.4,0,.2,1);
}
.consist-note{ font-size:12px; color:var(--ink2); line-height:1.8; }

.consist-regions{ display:flex; gap:8px; margin-top:14px; }
.creg{
  flex:1; padding:9px 6px 8px; text-align:center;
  background:rgba(255,255,255,.55); border-radius:var(--r-sm);
}
.creg-dot{
  width:17px; height:17px; border-radius:50%; margin:0 auto 5px;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.10);
}
.creg-k{ font-size:10px; color:var(--faint); letter-spacing:.08em; }
.creg-v{ font-size:11px; color:var(--ink2); margin-top:1px; }

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:20px 18px 18px;
  margin-top:14px;
  box-shadow:var(--sh-card);
}
.card-sub{ font-size:12px; color:var(--faint); line-height:1.8; margin-bottom:14px; }
.card-tip{
  font-size:12px; color:var(--ink2); line-height:1.8;
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
}

/* 四维 */
.dims{ display:flex; flex-direction:column; gap:12px; }
.dim{ display:grid; grid-template-columns:44px 1fr 42px; align-items:center; gap:10px; }
.dim-k{ font-size:11.5px; color:var(--ink2); }
.dim-track{
  position:relative; height:6px; border-radius:3px;
  background:linear-gradient(90deg,#ddd2e8,#f6d6c9);
}
.dim-track i{
  position:absolute; top:-4px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2.5px solid var(--coral);
  transform:translateX(-50%);
  box-shadow:0 1px 6px rgba(217,119,87,.35);
  transition:left .7s cubic-bezier(.3,1.2,.4,1);
}
.dim-v{ font-size:11.5px; color:var(--faint); text-align:right; }

/* 判定依据：算法实际采到的颜色 + 用了几个自测答案 */
.basis{
  font-size:11.5px; color:var(--faint); line-height:1.9;
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-variant-numeric:tabular-nums;
}

/* 色卡：圆片，与小程序一致 */
.pal-tabs{ display:flex; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
.pal-tab{
  font-size:11.5px; padding:6px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); color:var(--ink2); background:rgba(255,255,255,.7);
  font-family:var(--sans); transition:all .18s ease;
}
.pal-tab:active{ transform:scale(.94); }
.pal-tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.pal{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; row-gap:16px; }
.pal-cell{ text-align:center; padding:0 4px; }
.pal-sw{
  width:100%; aspect-ratio:1/1; border-radius:50%; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.07);
  transition:transform .2s cubic-bezier(.3,1.4,.5,1), opacity .2s ease;
  position:relative;
}
.pal-sw:active{ transform:scale(.9); }
.pal-cell.dim-on .pal-sw{ opacity:.20; }
.pal-name{
  font-size:10.5px; color:var(--ink2); margin-top:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pal-badge{
  position:absolute; top:2px; right:2px; font-size:8px; line-height:1;
  padding:2px 4px; border-radius:5px; color:#fff;
  background:rgba(50,43,56,.5);
}

/* 妆容穿搭 */
.two-col{ display:flex; flex-direction:column; gap:16px; }
.col-k{
  font-size:10.5px; color:var(--gold); letter-spacing:.2em;
  margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--line);
}
.kv{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.kv li{ display:flex; gap:9px; font-size:12.5px; line-height:1.7; }
.kv b{ flex:0 0 34px; color:var(--faint); font-weight:400; }
.kv span{ color:var(--ink2); }

/* 避开 */
.avoid{ display:flex; flex-direction:column; gap:10px; }
.avoid-row{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 13px; border-radius:var(--r-md);
  background:rgba(251,241,238,.85);
  border:1px solid rgba(242,221,214,.9);
}
.avoid-sw{
  flex:0 0 30px; height:30px; border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.08); position:relative; overflow:hidden;
}
.avoid-sw::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 46%,rgba(255,255,255,.85) 46%,rgba(255,255,255,.85) 54%,transparent 54%);
}
.avoid-x{ flex:1; }
.avoid-x b{ font-size:12.5px; font-weight:600; }
.avoid-x p{ font-size:11.5px; color:var(--ink2); line-height:1.7; }

/* ---------------- 衣柜 ---------------- */
.wardrobe{ padding-bottom:22px; }
.wd-cats{
  display:flex; gap:7px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px;
  scrollbar-width:none;
}
.wd-cats::-webkit-scrollbar{ display:none; }
.wd-cat{
  flex:0 0 auto; font-size:12px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink2); background:rgba(255,255,255,.7);
  font-family:var(--sans); cursor:pointer; transition:all .18s ease;
}
.wd-cat:active{ transform:scale(.94); }
.wd-cat.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.wd-colors{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.wd-color{
  aspect-ratio:1/1; border-radius:9px; cursor:pointer; border:none; padding:0;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.08);
  transition:transform .16s cubic-bezier(.3,1.4,.5,1);
  position:relative;
}
.wd-color:active{ transform:scale(.88); }
.wd-hint{ font-size:11.5px; color:var(--faint); margin-top:12px; line-height:1.75; }

.wd-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wd-list:empty{ margin-top:0; }
.wd-chip{
  display:flex; align-items:center; gap:7px;
  padding:5px 6px 5px 8px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid var(--line);
  font-size:11.5px; color:var(--ink2);
}
.wd-chip i{
  width:15px; height:15px; border-radius:50%; display:block;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.10);
}
.wd-chip button{
  width:18px; height:18px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(50,43,56,.09); color:var(--ink2); font-size:11px; line-height:1;
}

.wd-summary{
  margin-top:16px; padding:13px 14px; border-radius:var(--r-md);
  background:rgba(255,255,255,.6); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink); line-height:1.8;
}
.wd-summary[hidden]{ display:none; }
.wd-groups{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.wd-group-k{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.18em; color:var(--gold);
  padding-bottom:7px; border-bottom:1px solid var(--line); margin-bottom:9px;
}
.wd-group-k em{ font-style:normal; color:var(--faint); letter-spacing:0; }
.wd-row{ display:flex; gap:11px; padding:10px 0; border-bottom:1px dashed var(--line); }
.wd-row:last-child{ border-bottom:none; }
.wd-row-sw{
  flex:0 0 26px; height:26px; border-radius:8px; margin-top:2px;
  box-shadow:inset 0 0 0 1px rgba(58,51,64,.08);
}
.wd-row-x{ flex:1; }
.wd-row-h{ display:flex; align-items:baseline; gap:8px; }
.wd-row-h b{ font-size:12.5px; font-weight:600; }
.wd-row-h em{ font-style:normal; font-size:10.5px; color:var(--faint); }
.wd-row-h i{ font-style:normal; font-size:10.5px; margin-left:auto; color:var(--faint); }
.wd-row p{ font-size:11.5px; color:var(--ink2); line-height:1.7; margin-top:3px; }

/* ---------------- 页脚 ---------------- */
.foot{
  margin-top:auto; padding:28px 0 4px;
  display:flex; align-items:center; gap:10px;
  font-size:10.5px; color:var(--faint); letter-spacing:.08em;
}
.foot-line{ flex:1; height:1px; background:var(--line); }

.foot-note{
  font-size:11px; color:var(--faint); line-height:1.9;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
}
.foot-note b{ display:block; color:var(--ink2); margin-bottom:5px; font-weight:500; }
#buildStamp{ display:block; margin-top:6px; opacity:.72; font-size:10.5px; letter-spacing:.02em; }

/* ---------------- 浮层 ---------------- */
.toast{
  position:fixed; left:50%; bottom:calc(36px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px); z-index:90;
  max-width:80vw; padding:12px 22px; border-radius:999px;
  background:rgba(45,38,52,.94); color:#fff; font-size:13px; line-height:1.65;
  letter-spacing:.04em;
  opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-align:center;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* 长图弹层 */
.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal[hidden]{ display:none; }
.modal-mask{
  position:absolute; inset:0;
  background:rgba(30,25,20,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:fadeIn .28s ease both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-body{
  position:relative; width:100%; max-width:420px; max-height:88vh;
  display:flex; flex-direction:column; gap:12px;
  animation:pop .38s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.96); } to{ opacity:1; transform:none; } }
.modal-body img{
  width:100%; max-height:66vh; object-fit:contain;
  border-radius:var(--r-md); background:#fff;
  box-shadow:0 24px 60px rgba(60,40,40,.35);
}
.modal-actions{ display:flex; gap:10px; }
.modal-actions .btn{ flex:1; height:46px; font-size:14px; letter-spacing:.1em; text-indent:.1em; }
.modal-tip{ font-size:11px; color:rgba(255,255,255,.72); text-align:center; }

/* 报告绘制画布：留在文档流外，但必须可被 2D 上下文绘制 */
#reportCanvas{ position:fixed; left:-9999px; top:0; width:1px; height:1px; }

/* ---------------- 桌面 ---------------- */
@media (min-width:560px){
  .app{ padding:0 26px 40px; }
  .bar-in{ padding-left:26px; padding-right:26px; }
  .res-head{ margin:0 -26px; }
  .dark-cta{ margin:28px -26px 0; border-radius:0; }
  .w-h1{ font-size:40px; }
  .modal-body{ max-width:460px; }
}

/* 减少动态：全部内容直接可见，不能因为关掉 transition 把 .rv 留在透明态 */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .screen.is-active{ animation:none !important; }
}