/* =====================================================================
   OC 关系命运测试 · 小红书版 · 共享设计令牌（theme.css）
   ---------------------------------------------------------------------
   这是整个系统「唯一」的风格控制入口。
   - 改颜色 / 圆角 / 字体 / 阴影：只改 :root 里的变量。
   - 想换整套皮肤：给 <html> 加 data-theme="cream" 或 "night"，
     或者复制一份 [data-theme] 块自定义。
   - 答题页（quiz/）和结果页（result/）都只引用这里的变量，不写死色值。
   ===================================================================== */

:root{
  /* ---- 品牌与主色 ---------------------------------------------------- */
  --brand:#FF2442;            /* 小红书红：只做强调，不大面积铺 */
  --brand-deep:#D61B36;       /* 按压态 / 深一档 */
  --brand-soft:#FFE4E8;       /* 淡红底：选中态、标签底 */
  --brand-tint:#FFF3F5;       /* 更淡：卡片内高亮 */
  --brand-ink:#B3122A;        /* 红底上的文字 / 红色文字 */

  /* ---- 纸面与文字 ---------------------------------------------------- */
  --bg:#F6F1EE;               /* 页面底：暖白偏米，避免纯白刺眼 */
  --paper:#FFFFFF;            /* 卡片 */
  --paper-2:#FBF7F5;          /* 卡片内二级块 */
  --ink:#1F1A1A;              /* 正文 */
  --ink-2:#4A4343;            /* 次级正文 */
  --muted:#8F8484;            /* 说明文字 */
  --line:#EFE6E3;             /* 分隔线 / 描边 */

  /* ---- 结果页动态色（由每个结果的 theme 注入，这里只是兜底） -------- */
  --accent:#FF2442;
  --accent2:#FFB3BF;
  --soft:#FFE4E8;
  --result-paper:#FFF7F5;
  --result-ink:#2A1F21;

  /* ---- 三种未来 ---------------------------------------------------- */
  --he:#2FA36B;
  --be:#E0485A;
  --ne:#6B74B8;

  /* ---- 字体与字号阶梯 ---------------------------------------------- */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Source Han Sans SC",
         "Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --font-display:var(--font);   /* 标题字体；想换衬线就改这里 */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-22:22px; --fs-26:26px;
  --fs-32:32px; --fs-40:40px;
  --lh:1.65;

  /* ---- 形状与层次 -------------------------------------------------- */
  --r-card:20px;
  --r-inner:14px;
  --r-pill:999px;
  --shadow-card:0 8px 28px rgba(70,30,35,.08);
  --shadow-float:0 12px 36px rgba(70,30,35,.14);
  --shadow-press:0 2px 8px rgba(70,30,35,.10);

  /* ---- 间距与动效 -------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --dur:.22s;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- 版面 -------------------------------------------------------- */
  --page-max:540px;           /* 结果卡 / 答题卡最大宽 */
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* 皮肤：奶油纸（更手帐、更柔） */
[data-theme="cream"]{
  --brand:#F0596B; --brand-deep:#D6485A; --brand-soft:#FFE8E3; --brand-tint:#FFF6F2; --brand-ink:#B9404F;
  --bg:#F8F3EA; --paper:#FFFDF8; --paper-2:#FBF5EC; --line:#EFE4D6;
}
/* 皮肤：夜间 */
[data-theme="night"]{
  --brand:#FF3B57; --brand-deep:#E62C48; --brand-soft:#3A1E24; --brand-tint:#2A171B; --brand-ink:#FF8FA0;
  --bg:#141112; --paper:#1E1A1B; --paper-2:#26201F; --ink:#F4EEEE; --ink-2:#D5CCCC; --muted:#8F8484; --line:#332B2B;
  --shadow-card:0 8px 28px rgba(0,0,0,.35); --shadow-float:0 12px 36px rgba(0,0,0,.5);
}

/* =====================================================================
   基础
   ===================================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);line-height:var(--lh);font-size:var(--fs-14);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
::selection{background:var(--brand-soft)}

.wrap{width:min(100%,var(--page-max));margin:0 auto;padding:var(--sp-4) var(--sp-3) calc(var(--sp-8) + var(--safe-b))}

/* =====================================================================
   通用组件
   ===================================================================== */
/* 顶部小字（kicker） */
.kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-11);font-weight:800;letter-spacing:.12em;color:var(--brand);text-transform:uppercase
}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}

/* 卡片 */
.card{
  background:var(--paper);border-radius:var(--r-card);padding:var(--sp-5) var(--sp-4);
  box-shadow:var(--shadow-card);border:1px solid var(--line)
}
.card + .card{margin-top:var(--sp-3)}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:var(--r-pill);border:0;text-decoration:none;
  font-size:var(--fs-15);font-weight:800;letter-spacing:.02em;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur);
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(255,36,66,.28)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.btn-soft{background:var(--brand-soft);color:var(--brand-ink)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* 标签 / 胶囊 */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 11px;border-radius:var(--r-pill);
  background:var(--brand-tint);color:var(--brand-ink);
  font-size:var(--fs-12);font-weight:700;line-height:1.2;border:1px solid var(--brand-soft)
}
.chip-neutral{background:var(--paper-2);color:var(--ink-2);border-color:var(--line)}
.chip-solid{background:var(--brand);color:#fff;border-color:var(--brand)}

/* 手帐贴纸：斜着贴的小标签 */
.sticker{
  display:inline-block;padding:5px 10px;border-radius:8px;
  background:var(--brand);color:#fff;font-size:var(--fs-11);font-weight:900;letter-spacing:.06em;
  transform:rotate(-6deg);box-shadow:var(--shadow-press)
}
.sticker-paper{background:#FFF;color:var(--brand);border:2px dashed var(--brand)}
.sticker-ink{background:var(--ink);color:#fff}

/* 进度条 */
.progress{height:6px;border-radius:var(--r-pill);background:var(--brand-soft);overflow:hidden}
.progress > i{display:block;height:100%;width:0;border-radius:inherit;background:var(--brand);transition:width .35s var(--ease)}

/* 五维条 */
.bar-row{display:grid;grid-template-columns:72px minmax(0,1fr) 34px;gap:10px;align-items:center}
.bar-label{font-size:var(--fs-12);color:var(--ink-2);white-space:nowrap}
.bar-track{height:10px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s var(--ease)}
.bar-val{font-size:var(--fs-11);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

/* 小字说明 */
.micro{font-size:var(--fs-11);color:var(--muted);text-align:center}

/* 轻提示（两个页面共用） */
.toast{
  position:fixed;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:700;z-index:60;
  transition:all var(--dur) var(--ease);pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis
}
.toast.on{opacity:1;transform:translateX(-50%)}
[data-theme="night"] .toast{background:#fff;color:#1F1A1A}

/* 页面淡入 */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .32s var(--ease) both}

/* 无障碍：减少动效 */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}