/* ============================================================
   知我行动 · 职业方向测评
   Chrome 61 基线层：不使用 flex gap / color-mix / inset / clamp /
   @layer / :has()。间距一律用相邻兄弟 margin，颜色用 hex 与 rgba。
   ============================================================ */

:root {
  /* 品牌红阶（小红书品牌红 #FF2442） */
  --zw-brand-50:  #fff5f6;
  --zw-brand-100: #ffecef;
  --zw-brand-200: #ffd9df;
  --zw-brand-300: #ffb3bf;
  --zw-brand-500: #ff5c72;
  --zw-brand-600: #ff3a56;
  --zw-brand-700: #ff2442;
  --zw-brand-800: #d61631;

  --zw-grad: linear-gradient(135deg, #ff4d63 0%, #ff2442 100%);

  /* 文字 */
  --zw-ink:   #0f1729;
  --zw-ink-2: #5a6478;
  --zw-ink-3: #8a93a3;
  --zw-ink-4: #b4bccb;

  /* 功能色 */
  --zw-ok:   #008858;
  --zw-warn: #be5a00;
  --zw-err:  #d54941;

  /* 背景 / 描边（中性偏暖，避免残留蓝调） */
  --zw-bg:    #f7f7f8;
  --zw-white: #ffffff;
  --zw-line:  #ececee;
  --zw-fill:  #f5f5f6;

  /* 圆角 */
  --zw-r-sm: 6px;
  --zw-r-md: 10px;
  --zw-r-lg: 14px;
  --zw-r-xl: 18px;

  /* 阴影 */
  --zw-sh-1: 0 1px 8px rgba(9, 24, 54, .05);
  --zw-sh-2: 0 4px 14px rgba(9, 24, 54, .09);

  --zw-pad: 20px;

  /* 安全区：PC 模拟器注入 --safe-area-inset-*，真机走 env() */
  --zw-sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --zw-sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

/* hidden 属性兜底：自定义样式里的 display 会盖掉它 */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html {
  height: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--zw-bg);
  color: var(--zw-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

h1, h2, p { margin: 0; }
button { font-family: inherit; }

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--zw-pad);
  padding-top: calc(12px + var(--zw-sat));
  padding-bottom: calc(32px + var(--zw-sab));
}

/* ---------------- 顶栏 ---------------- */

.topbar {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 36px;
}

.topbar__brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--zw-brand-700);
}

.topbar__phase {
  font-size: 12px;
  color: var(--zw-ink-3);
}

/* ---------------- 进度 ---------------- */

.progress { margin-top: 14px; }

.progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--zw-brand-100);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--zw-grad);
  -webkit-transition: width .28s ease;
  transition: width .28s ease;
}

.progress__count {
  margin-top: 6px;
  font-size: 12px;
  color: var(--zw-ink-3);
  text-align: right;
}

/* ---------------- 视图容器 ---------------- */

.stage { padding-top: 18px; }

.view { animation: fade .26s ease both; }

@keyframes fade {
  from { opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px); }
  to   { opacity: 1; -webkit-transform: translateY(0);   transform: translateY(0); }
}

/* ---------------- 欢迎页 ---------------- */

.hero { text-align: center; padding: 18px 0 22px; }

.hero__seal {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: var(--zw-r-lg);
  background: var(--zw-grad);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  padding-top: 13px;
  letter-spacing: 1px;
  box-shadow: 0 6px 18px rgba(255, 36, 66, .30);
}

.hero__title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .5px;
}

.hero__sub {
  margin-top: 12px;
  font-size: 14px;
  color: var(--zw-ink-2);
}

/* ---------------- 卡片 ---------------- */

.card {
  background: var(--zw-white);
  border-radius: var(--zw-r-lg);
  box-shadow: var(--zw-sh-1);
  padding: 16px;
}

.card--flat { box-shadow: none; border: 1px solid var(--zw-line); }

.kv__row {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
  align-items: flex-start;
  padding: 7px 0;
}

.kv__k {
  -webkit-box-flex: 0;
  flex: 0 0 58px;
  font-size: 13px;
  color: var(--zw-brand-700);
  font-weight: 600;
}

.kv__v {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--zw-ink-2);
}

/* ---------------- 按钮 ---------------- */

.btn {
  display: block;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--zw-r-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active { opacity: .78; }

.btn:disabled { opacity: .38; }

.btn--primary {
  background: var(--zw-grad);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 36, 66, .24);
}

.btn--ghost {
  background: var(--zw-white);
  color: var(--zw-ink-2);
  border: 1px solid var(--zw-line);
  font-weight: 500;
}

.btn--primary + .btn,
.btn + .btn { margin-top: 10px; }

#btnStart { margin-top: 20px; }

/* ---------------- 免责 / 小字 ---------------- */

.fineprint {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--zw-ink-3);
}

.fineprint b { color: var(--zw-ink-2); font-weight: 600; }

/* ---------------- 答题 ---------------- */

.qhead { padding: 6px 0 18px; }

.qhead__dim {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--zw-brand-100);
  color: var(--zw-brand-700);
  font-size: 11.5px;
  font-weight: 600;
}

.qhead__text {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}

.options > * + * { margin-top: 10px; }

.opt {
  display: block;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  background: var(--zw-white);
  border: 1px solid var(--zw-line);
  border-radius: var(--zw-r-md);
  font-size: 15px;
  color: var(--zw-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: border-color .16s ease, background .16s ease;
  transition: border-color .16s ease, background .16s ease;
}

.opt:active { background: var(--zw-brand-50); }

.opt.is-picked {
  border-color: var(--zw-brand-700);
  background: var(--zw-brand-50);
  color: var(--zw-brand-800);
  font-weight: 600;
}

.qfoot {
  display: -webkit-box;
  display: flex;
  margin-top: 22px;
}

.qfoot .btn {
  -webkit-box-flex: 1;
  flex: 1 1 0;
  width: auto;
  height: 42px;
  font-size: 14px;
  font-weight: 500;
}

.qfoot .btn + .btn { margin-top: 0; margin-left: 10px; }

/* ---------------- 结果 ---------------- */

.result-hero {
  background: var(--zw-white);
  border-radius: var(--zw-r-xl);
  box-shadow: var(--zw-sh-1);
  padding: 20px 18px;
}

.result-hero__label {
  font-size: 12px;
  color: var(--zw-ink-3);
  letter-spacing: .5px;
}

.bars { margin-top: 14px; }

.bar-row + .bar-row { margin-top: 14px; }

.bar-row__top {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.bar-row__name { font-size: 14px; font-weight: 600; }

.bar-row__pct { font-size: 14px; font-weight: 700; color: var(--zw-brand-700); }

.bar-row__track {
  margin-top: 7px;
  height: 8px;
  border-radius: 999px;
  background: var(--zw-fill);
  overflow: hidden;
}

.bar-row__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--zw-brand-300);
  -webkit-transition: width .5s ease;
  transition: width .5s ease;
}

.bar-row.is-top .bar-row__fill { background: var(--zw-grad); }

.dominant {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--zw-line);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.dominant__label { font-size: 13px; color: var(--zw-ink-3); }

.dominant__value { font-size: 21px; font-weight: 700; color: var(--zw-brand-700); }

.result-hero__note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--zw-ink-3);
}

.caveat {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--zw-r-md);
  background: var(--zw-brand-50);
  font-size: 13px;
  color: var(--zw-brand-800);
  line-height: 1.6;
}

.section-head { margin: 26px 0 12px; }

.section-head__title { font-size: 17px; font-weight: 700; }

.section-head__sub {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--zw-ink-3);
}

/* 赛道卡 */

.tracks > * + * { margin-top: 12px; }

.track {
  background: var(--zw-white);
  border-radius: var(--zw-r-lg);
  box-shadow: var(--zw-sh-1);
  padding: 16px;
}

.track__top {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.track__rank {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--zw-brand-100);
  color: var(--zw-brand-700);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
  margin-right: 9px;
}

.track__name {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
}

.track__why {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--zw-ink-2);
}

.track__block { margin-top: 12px; }

.track__block + .track__block { margin-top: 10px; }

.track__k {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--zw-brand-700);
  letter-spacing: .3px;
}

.track__v {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--zw-ink-2);
}

/* 书单小胶囊 */

.chips { margin-top: 12px; }

.chip {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--zw-fill);
  font-size: 11.5px;
  color: var(--zw-ink-2);
}

/* 最小行动：整张卡的落点，用色块托住，正文用最深墨色拉开层级 */
.track__action {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--zw-r-md);
  background: var(--zw-brand-50);
}

.track__action-k {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--zw-brand-700);
  letter-spacing: .3px;
}

.track__action-v {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--zw-ink);
}

.actions { margin-top: 24px; }

/* ---------------- 弹层 ---------------- */

.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; }

.modal__mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(9, 24, 54, .55);
}

.modal__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(24px + var(--zw-sat));
  bottom: calc(24px + var(--zw-sab));
  margin: 0 auto;
  max-width: 420px;
  background: var(--zw-white);
  border-radius: var(--zw-r-lg);
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.modal__head {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--zw-line);
}

.modal__title { font-size: 15px; font-weight: 700; }

.modal__close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--zw-ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.modal__body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  background: var(--zw-fill);
  text-align: center;
}

.poster-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--zw-r-md);
  box-shadow: var(--zw-sh-2);
  /* 允许长按保存（容器内的长按菜单由端上管控，这里只是不主动禁用） */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

.modal__foot { padding: 12px 14px 4px; }

.modal__hint {
  padding: 0 14px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--zw-ink-3);
  text-align: center;
}

/* ---------------- toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(52px + var(--zw-sab));
  z-index: 90;
  max-width: 78%;
  margin-left: -39%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 41, .9);
  color: #fff;
  font-size: 13px;
  text-align: center;
}