/* =========================================================
   恋爱适配测试 · 温馨 / 极简 · 奶油底色 · 细线条插画
   配色取自参考：奶油米 + 赭陶 + 灰绿 + 沙棕
========================================================= */
:root{
  --bg:#F6F1E9;          /* 奶油底 */
  --bg2:#EFE7DA;
  --paper:#FFFDFA;       /* 卡面 */
  --ink:#2F2A25;         /* 近黑柔墨 */
  --ink2:#6B615A;        /* 次级文字 */
  --ink3:#9A8F83;        /* 弱文字 */
  --line:#E4DACA;        /* 细分割线 */
  --accent:#C56F52;      /* 赭陶 主色 */
  --accent-soft:#E9C3AE;
  --sage:#8EA183;        /* 灰绿 */
  --sage-soft:#DDE3D4;
  --sand:#E7DCCB;
  --card-shadow:0 18px 40px -24px rgba(84,66,51,.28);
  --radius:22px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{ height:100%; }
body{
  font-family:var(--font);
  font-weight:300;
  letter-spacing:.01em;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%, #FAF6EF 0%, var(--bg) 45%, var(--bg2) 100%);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(14px,4vw,40px);
  -webkit-overflow-scrolling:touch;
}
/* 细腻纸纹 */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(94,74,56,.045) 1px, transparent 1.4px);
  background-size:26px 26px;
}

/* ---------- 一个极简画卡 ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:clamp(24px,6vw,46px);
  width:100%;
  max-width:520px;
  position:relative;
  overflow:hidden;
}
.card::after{ /* 顶部淡淡的赭陶晕染 */
  content:""; position:absolute; inset:0 0 auto 0; height:110px; z-index:-1;
  background:radial-gradient(80% 100% at 50% 0%, var(--accent-soft) 0%, rgba(233,195,174,0) 70%);
  opacity:.35; pointer-events:none;
}

.stage{ display:none; }
.stage.on{ display:block; margin:auto; animation:rise .5s cubic-bezier(.2,.7,.2,1); }
@keyframes rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.stage.on .card{ animation:cardIn .55s cubic-bezier(.2,.7,.2,1); }
@keyframes cardIn{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }

/* ---------- 标题 ---------- */
.brand{
  text-align:center; margin-bottom:6px;
}
.brand .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.32em; color:var(--accent);
  text-transform:uppercase;
}
.brand h1{
  margin:10px 0 6px;
  font-size:clamp(26px,7vw,34px);
  font-weight:300; letter-spacing:.02em; color:var(--ink);
  line-height:1.2;
}
.brand p{ margin:0; color:var(--ink2); font-size:14px; letter-spacing:.04em; }

/* ---------- 细线插画 ---------- */
.doodle{ display:block; width:100%; max-width:120px; height:auto; margin:6px auto 2px; color:var(--ink); }
.doodle.accent{ color:var(--accent); }
.deco-leaf{
  position:absolute; pointer-events:none; opacity:.5; color:var(--sage); z-index:0;
  width:70px;
}
.deco-leaf.tl{ top:-16px; left:-18px; transform:rotate(-18deg); }
.deco-leaf.br{ bottom:-14px; right:-18px; transform:rotate(150deg); }
.deco-leaf.tr{ top:-18px; right:-16px; transform:rotate(40deg); }

/* ---------- 邀请码 ---------- */
.field{ margin:26px auto 6px; max-width:340px; text-align:left; }
.field label{
  display:block; font-size:12px; letter-spacing:.14em; color:var(--ink2); margin-bottom:8px;
}
.pix-input{
  width:100%; font-family:inherit; font-weight:300;
  font-size:18px; letter-spacing:.5em; text-align:center;
  padding:14px 12px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  transition:border-color .2s, box-shadow .2s;
}
.pix-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(197,111,82,.12); }
.pix-input::placeholder{ letter-spacing:.4em; color:var(--ink3); }
.err{
  display:none; margin:14px auto 0; max-width:340px;
  color:#A64A31; background:#FBEDE5; border:1px solid var(--accent-soft);
  padding:10px 12px; font-size:13px; border-radius:12px; text-align:center;
}
.err.show{ display:block; animation:shake .4s; }
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------- 按钮 ---------- */
.btn{
  font-family:inherit; font-weight:400; letter-spacing:.08em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; user-select:none;
  width:100%;
  border:1px solid var(--accent);
  background:var(--accent); color:#fff;
  font-size:15px; padding:14px 20px; border-radius:16px;
  transition:transform .06s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 20px -12px rgba(197,111,82,.6);
}
.btn:active{ transform:translateY(2px); box-shadow:0 4px 10px -8px rgba(197,111,82,.6); }
.btn:hover{ opacity:.92; }
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
  box-shadow:none;
}
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); background:#fff; }
.btn.block{ margin-top:22px; }

/* ---------- 仪表 / 进度 ---------- */
.meter{ margin:4px 0 22px; text-align:center; }
.meter .pct{ font-size:12px; letter-spacing:.18em; color:var(--ink2); margin-bottom:8px; }
.meter .track{
  height:6px; background:var(--sand); border-radius:99px; overflow:hidden;
}
.meter .fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent-soft),var(--accent));
  border-radius:99px;
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.meter .hint{ font-size:12px; color:var(--ink3); margin-top:9px; letter-spacing:.04em; }

/* ---------- 题目 ---------- */
.qhead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.qtag{ font-size:12px; letter-spacing:.22em; color:var(--accent); }
.qtext{
  font-size:clamp(18px,5.2vw,22px); font-weight:400; line-height:1.7;
  color:var(--ink); margin:4px 0 22px; letter-spacing:.01em;
}
.opt{
  display:flex; gap:12px; width:100%; text-align:left;
  margin:0 0 14px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 16px; font-family:inherit; font-weight:300;
  font-size:clamp(15px,4.2vw,16.5px); line-height:1.7; color:var(--ink);
  transition:border-color .18s, background .18s, transform .08s, box-shadow .2s;
}
.opt .tag{
  flex:0 0 auto; width:30px; height:30px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); color:var(--ink2); font-size:13px;
  transition:background .18s, color .18s, border-color .18s;
}
.opt:hover{ border-color:var(--accent-soft); background:#FFFBF6; transform:translateY(-1px); box-shadow:0 8px 18px -14px rgba(84,66,51,.3); }
.opt.picked{ border-color:var(--accent); background:#FBF0E9; }
.opt.picked .tag{ background:var(--accent); border-color:var(--accent); color:#fff; }
.opt:active{ transform:translateY(1px); }

/* ---------- 结果 ---------- */
.result-hero{ text-align:center; margin:4px 0 16px; }
.result-hero .kicker{ font-size:12px; letter-spacing:.22em; color:var(--ink2); }
.result-hero .mbti{
  font-size:clamp(52px,18vw,76px); font-weight:300; letter-spacing:.12em; line-height:1.05;
  color:var(--ink); margin:6px 0 2px;
}
.result-hero .typename{ font-size:18px; letter-spacing:.14em; color:var(--accent); font-weight:400; }
.doodle-hero{ max-width:96px; margin:2px auto 10px; }

.mlabel{
  font-size:12px; letter-spacing:.22em; color:var(--ink2); text-align:center; margin:18px 0 8px;
}
.match-line{
  text-align:center; font-size:clamp(20px,5.5vw,24px); font-weight:400; color:var(--ink);
  letter-spacing:.04em; margin-bottom:14px;
}
.match-line b{ color:var(--accent); font-weight:400; }
.desc{
  font-size:14.5px; line-height:1.95; color:var(--ink2);
  border-top:1px dashed var(--line); padding-top:18px; margin-top:6px;
}
.desc b{ color:var(--accent); font-weight:400; }

.actions{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.actions .btn{ margin-top:0; }
.share-note{ font-size:11.5px; text-align:center; color:var(--ink3); margin-top:14px; letter-spacing:.04em; }

/* 反馈提示 */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px);
  background:rgba(47,42,37,.92); color:#fff; font-size:13px; letter-spacing:.05em;
  padding:11px 18px; border-radius:99px; opacity:0; pointer-events:none; z-index:999;
  transition:opacity .3s, transform .3s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 长按保存预览（微信等应用内浏览器） */
.longpress{
  position:fixed; inset:0; z-index:1001; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:rgba(47,42,37,.72); padding:20px 20px 26px;
}
.longpress.show{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.longpress-head{
  width:100%; max-width:420px; display:flex; align-items:center; justify-content:space-between;
  color:#fff; margin-bottom:12px;
}
.longpress-title{ font-size:14px; letter-spacing:.06em; font-weight:400; }
.longpress-close{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.longpress-close:active{ background:rgba(255,255,255,.18); }
.longpress img{
  width:100%; max-width:420px; max-height:72vh; object-fit:contain;
  border-radius:16px; box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  background:#fff;
}
.longpress-hint{ font-size:12px; color:rgba(255,255,255,.9); margin-top:14px; letter-spacing:.05em; }

@media (max-width:480px){
  body{ padding:14px; }
  .card{ padding:24px 20px; }
}