/* ============================================================
   进化海 v3.2 · iOS 浅色设计系统
   导航用玻璃，内容用分组件表面；可读性优先，动效克制。
   ============================================================ */
:root {
  /* 表面与文字 */
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #edf3f5;
  --surface-3: #f6f9fa;
  --label: #102a33;
  --label-2: #5d737b;
  --label-3: #8a9aa0;
  --separator: rgba(16, 42, 51, .10);
  --separator-strong: rgba(16, 42, 51, .18);

  /* 强调与语义 */
  --tint: #0a7c9b;
  --tint-deep: #08657f;
  --tint-soft: #e6f4f7;
  --aqua: #2e9fb3;
  --aqua-soft: #e8f5f8;
  --gold: #b8741a;
  --gold-soft: #fbf0df;
  --coral: #c85b4a;
  --coral-soft: #fbeae6;
  --green: #2e8b62;
  --green-soft: #e9f5ef;
  --red: #c9413a;
  --red-soft: #fbeae9;
  --lilac: #5e8fa3;
  --lilac-soft: #eaf1f4;
  --rose: #b86a7a;
  --rose-soft: #f8ecef;

  /* 兼容旧变量名 */
  --ink: var(--label);
  --ink-soft: var(--label-2);
  --ink-faint: var(--label-3);
  --paper: var(--bg);
  --sea: var(--label);
  --sea-2: var(--label-2);
  --teal: var(--tint);
  --teal-deep: var(--tint-deep);
  --mint: var(--tint-soft);
  --mint-2: #f1f8f9;
  --sky: #eaf5f8;
  --card: var(--surface);
  --card-soft: rgba(255, 255, 255, .82);
  --line: var(--separator);
  --line-strong: var(--separator-strong);

  /* 形状与阴影 */
  --r-card: 16px;
  --r-row: 12px;
  --r-btn: 14px;
  --r-xs: 10px;
  --r: var(--r-card);
  --r-sm: var(--r-row);
  --shadow-1: 0 1px 2px rgba(16, 42, 51, .06);
  --shadow-2: 0 8px 24px rgba(16, 42, 51, .12);
  --shadow-3: 0 24px 80px rgba(16, 42, 51, .18);
  --shadow: var(--shadow-2);
  --shadow-soft: var(--shadow-1);

  /* 玻璃 */
  --glass: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .65);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 24px rgba(16, 42, 51, .08);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --fs-large-title: 30px;
  --fs-title: 24px;
  --fs-title-2: 20px;
  --fs-headline: 17px;
  --fs-body: 16px;
  --fs-subhead: 14px;
  --fs-footnote: 13px;
  --fs-caption: 12px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  color-scheme: light;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--label);
  background: #e8eef0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .18s ease, opacity .18s ease;
}

button:active {
  transform: scale(.98);
}

input,
textarea {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

h1,
h2,
h3,
b,
strong {
  font-weight: 600;
}

em {
  font-style: normal;
}

small {
  font-size: var(--fs-caption);
}

/* ---------- 海洋氛围 ---------- */
.ocean-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 78% -8%, rgba(46, 159, 179, .13), transparent 64%),
    radial-gradient(48% 34% at 0% 8%, rgba(10, 124, 155, .07), transparent 58%),
    linear-gradient(180deg, #f8fbfc 0%, #f2f7f8 55%, #eef4f5 100%);
}

/* ---------- 应用壳 ---------- */
.app-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  overflow: hidden;
}

.app {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  color: var(--label);
  scrollbar-width: none;
}

.app::-webkit-scrollbar {
  display: none;
}

.app.fadein {
  animation: appIn .26s cubic-bezier(.32, .72, 0, 1) both;
}

@keyframes appIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 顶部栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  margin: 0 -16px 12px;
  padding: 0 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: .5px solid var(--separator);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.topbar .back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--tint);
  flex: none;
}

.topbar .back:active {
  background: var(--tint-soft);
}

.topbar .back svg {
  width: 22px;
  height: 22px;
}

.topbar .tb-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .tb-right {
  flex: none;
  padding-right: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Tab Bar ---------- */
.tabbar {
  flex: none;
  z-index: 40;
  display: flex;
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: .5px solid var(--separator);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.tabbar.hidden {
  display: none;
}

.tab {
  flex: 1;
  min-height: 49px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  font-size: 10px;
  color: var(--label-3);
  position: relative;
}

.tab-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.tab-ico svg {
  width: 24px;
  height: 24px;
}

.tab.active {
  color: var(--tint);
  background: var(--tint-soft);
  font-weight: 600;
}

.tab.has-dot::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---------- 通用排版 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}

.card.dashed {
  border-style: dashed;
  border-color: var(--separator-strong);
  background: var(--surface-3);
  box-shadow: none;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--label);
}

.card-title .sub {
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--label-3);
  white-space: nowrap;
}

.tiny {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-3);
}

.muted {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.page-lead {
  margin-bottom: 14px;
  font-size: var(--fs-subhead);
  line-height: 1.6;
  color: var(--label-2);
}

.page-lead b {
  color: var(--label);
}

.center {
  text-align: center;
}

.divider {
  height: .5px;
  margin: 12px 0;
  background: var(--separator);
}

.link {
  color: var(--tint);
  font-size: var(--fs-footnote);
  font-weight: 500;
  white-space: nowrap;
}

.link:hover {
  color: var(--tint-deep);
}

.center-link {
  display: block;
  margin: 12px auto 0;
  text-align: center;
}

.note {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--r-row);
  background: var(--tint-soft);
  border-left: none;
  font-size: var(--fs-footnote);
  line-height: 1.6;
  color: var(--label-2);
}

.note.gold {
  background: var(--gold-soft);
}

.note.dark {
  background: var(--surface-2);
}

.note b {
  color: var(--label);
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.two-btns {
  display: flex;
  gap: 8px;
}

.two-btns > * {
  flex: 1;
}

.loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-3);
  font-size: var(--fs-subhead);
}

.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--label-3);
}

.empty-ic {
  font-size: 34px;
  margin-bottom: 8px;
}

.empty b {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-headline);
  color: var(--label-2);
}

.empty span {
  font-size: var(--fs-footnote);
}

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 2px 10px;
}

.sec-head h2 {
  font-size: var(--fs-title-2);
  line-height: 1.3;
  font-weight: 600;
  color: var(--label);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 16px;
}

.page-head .tiny {
  margin-bottom: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
  letter-spacing: .2px;
}

.page-head h1 {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--label);
}

.head-badge {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--separator);
  color: var(--label);
  font-size: 18px;
  box-shadow: var(--shadow-1);
}

.icon-btn.msg-btn {
  width: auto;
  padding: 0 12px;
  font-size: var(--fs-footnote);
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.icon-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  margin: 0;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .18s ease, opacity .18s ease;
}

.btn:active {
  transform: scale(.97);
  opacity: .92;
}

.btn-primary {
  background: var(--tint);
  color: #fff;
  box-shadow: 0 6px 16px rgba(10, 124, 155, .20);
}

.btn-primary:hover {
  background: var(--tint-deep);
}

.btn-ghost {
  background: var(--tint-soft);
  color: var(--tint-deep);
  border: none;
}

.btn-ghost:hover {
  background: #dceff3;
}

.btn-coral {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 6px 16px rgba(200, 91, 74, .18);
}

.btn-sm {
  width: auto;
  height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: var(--fs-subhead);
}

.btn-xs {
  width: auto;
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: var(--fs-caption);
}

.btn[disabled] {
  opacity: .45;
  pointer-events: none;
}

/* ---------- Chip / Tag ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--label-2);
  font-size: var(--fs-footnote);
  white-space: nowrap;
}

.chip:hover {
  background: var(--tint-soft);
  color: var(--tint-deep);
}

.chip.on {
  background: var(--tint-soft);
  border-color: rgba(10, 124, 155, .24);
  color: var(--tint-deep);
  font-weight: 500;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--label-2);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.tag.aqua {
  background: var(--aqua-soft);
  color: var(--aqua);
}

.tag.teal,
.tag.mint {
  background: var(--tint-soft);
  color: var(--tint-deep);
}

.tag.gold {
  background: var(--gold-soft);
  color: var(--gold);
}

.tag.coral {
  background: var(--coral-soft);
  color: var(--coral);
}

.tag.rose {
  background: var(--rose-soft);
  color: var(--rose);
}

.tag.lilac {
  background: var(--lilac-soft);
  color: var(--lilac);
}

/* ---------- 进度 / 分数 ---------- */
.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tint);
  transition: width .6s cubic-bezier(.32, .72, 0, 1);
}

.bar > i.gold { background: var(--gold); }
.bar > i.coral { background: var(--coral); }
.bar > i.teal { background: var(--tint); }
.bar > i.aqua { background: var(--aqua); }

.bar-row {
  margin: 10px 0;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.bar-label span:last-child {
  color: var(--label-3);
  font-variant-numeric: tabular-nums;
}

.score-ring {
  --p: 60;
  --ring: var(--tint);
  position: relative;
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--surface-2) 0);
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--surface);
}

.score-ring .sr-inner {
  position: relative;
  text-align: center;
  line-height: 1.05;
}

.score-ring b {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.score-ring span {
  font-size: 11px;
  color: var(--label-3);
}

.score-ring.gold { --ring: var(--gold); }
.score-ring.gold b { color: var(--gold); }
.score-ring.coral { --ring: var(--coral); }
.score-ring.coral b { color: var(--coral); }
.score-ring.rose { --ring: var(--rose); }
.score-ring.rose b { color: var(--rose); }

.score-ring.small {
  width: 66px;
  height: 66px;
}

.score-ring.small::before { inset: 5px; }
.score-ring.small b { font-size: 18px; }
.score-ring.small span { font-size: 9px; }

/* ---------- 表单 ---------- */
.field {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-row);
  background: var(--surface-2);
  color: var(--label);
  font-size: 16px;
  line-height: 1.55;
  outline: none;
}

.field:focus {
  border-color: rgba(10, 124, 155, .32);
  box-shadow: 0 0 0 3px rgba(10, 124, 155, .08);
}

.field.big {
  min-height: 110px;
}

.field::placeholder {
  color: var(--label-3);
}

.field-count {
  margin: 4px 2px 10px;
  text-align: right;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.field-label {
  display: block;
  margin: 12px 0 6px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.check-line input {
  accent-color: var(--tint);
}

select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--label);
  outline: none;
}

/* ---------- 启动页 ---------- */
.splash {
  min-height: calc(100dvh - 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 24px 0 12px;
}

.splash-stars {
  display: none;
}

.splash-logo {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 12px 24px rgba(10, 124, 155, .14));
}

.splash-kicker {
  margin-top: 16px;
  font-size: var(--fs-caption);
  letter-spacing: 1.6px;
  color: var(--label-3);
}

.splash h1 {
  margin: 4px 0 2px;
  font-size: 34px;
  letter-spacing: 8px;
  font-weight: 700;
  color: var(--label);
}

.splash-slogan {
  margin-top: 6px;
  font-size: var(--fs-subhead);
  letter-spacing: 1px;
  color: var(--tint-deep);
}

.splash-desc {
  margin-top: 14px;
  font-size: var(--fs-subhead);
  line-height: 1.65;
  color: var(--label-2);
}

.splash-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 26px;
}

.splash-chips span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--separator);
  color: var(--label-2);
  font-size: var(--fs-caption);
}

.splash-actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splash-foot {
  margin-top: 20px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

/* ---------- 欢迎 ---------- */
.welcome {
  min-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 24px;
}

.w-skip {
  position: absolute;
  top: 8px;
  right: 0;
  min-height: 44px;
  padding: 0 10px;
  font-size: var(--fs-footnote);
  color: var(--label-3);
}

.w-visual {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 8px;
}

.w-orbit {
  display: none;
}

.w-orb {
  width: 108px;
  height: 108px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-2);
}

.w-dot {
  display: none;
}

.w-kicker {
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  color: var(--tint);
  letter-spacing: 1px;
}

.w-title {
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--label);
}

.w-desc {
  margin-bottom: 14px;
  font-size: var(--fs-subhead);
  line-height: 1.6;
  color: var(--label-2);
}

.w-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.w-chips span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-caption);
}

.w-teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.w-teaser {
  padding: 12px 8px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: center;
}

.w-teaser b {
  display: block;
  font-size: var(--fs-headline);
  color: var(--tint-deep);
}

.w-teaser span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--label-3);
}

.w-bottom {
  margin-top: auto;
  padding-top: 20px;
}

.w-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.w-dots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--separator-strong);
  transition: width .3s ease, background .3s ease;
}

.w-dots i.on {
  width: 20px;
  background: var(--tint);
}

/* ---------- 8 题测评 ---------- */
.onboard {
  min-height: calc(100dvh - 110px);
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.onboard-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.round-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--separator);
  color: var(--tint);
  font-size: 22px;
  box-shadow: var(--shadow-1);
}

.ob-progress {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}

.ob-progress i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tint);
  transition: width .35s ease;
}

.ob-count {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.ob-count em {
  color: var(--label-3);
  font-weight: 400;
}

.ob-scene {
  margin-bottom: 8px;
  font-size: var(--fs-caption);
  color: var(--tint);
  letter-spacing: .6px;
}

.ob-depth {
  float: right;
  font-size: 11px;
  color: var(--label-3);
}

.ob-personal {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.ob-q {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--label);
}

.ob-hint {
  margin-bottom: 18px;
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.ob-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
  font-size: var(--fs-body);
  color: var(--label);
}

.ob-opt:active {
  background: var(--tint-soft);
}

.ob-opt.picked {
  border-color: rgba(10, 124, 155, .36);
  background: var(--tint-soft);
}

.ob-key {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.ob-text {
  flex: 1;
  line-height: 1.45;
}

.stage-options .ob-opt {
  min-height: 50px;
  padding: 10px 12px;
  font-size: var(--fs-subhead);
}

.ob-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--surface-3);
  border: 1px solid var(--separator);
}

.ob-note-ic {
  font-size: 18px;
}

.ob-note b {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.ob-note em {
  display: block;
  font-size: var(--fs-caption);
  color: var(--label-3);
  line-height: 1.5;
}

.ob-skip-link {
  display: block;
  margin: 10px auto 0;
  padding: 8px 10px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ob-foot {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

/* ---------- 孵化 ---------- */
.hatch-top {
  min-height: 24vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 20px;
}

.hatch-egg {
  font-size: 72px;
  filter: drop-shadow(0 14px 22px rgba(10, 124, 155, .14));
}

.hatch-egg.hatched {
  animation: hatchPop .7s cubic-bezier(.22, 1.4, .36, 1) both;
}

@keyframes hatchPop {
  from { transform: scale(.2) rotate(-20deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.hatch-line {
  margin: 12px 0 6px;
  font-size: var(--fs-caption);
  color: var(--label-3);
  letter-spacing: .4px;
}

.id-card {
  margin-top: 10px;
}

.id-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.id-avatar {
  width: 76px;
  height: 76px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--surface-2);
  font-size: 42px;
}

.id-meta h2 {
  margin: 2px 0 3px;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--label);
}

.id-meta p {
  font-size: var(--fs-caption);
  color: var(--label-2);
  line-height: 1.45;
}

.id-desc {
  margin: 14px 0 8px;
  font-size: var(--fs-subhead);
  line-height: 1.6;
  color: var(--label-2);
}

.abil-list {
  margin: 12px 0;
}

.id-name {
  margin-top: 14px;
}

.id-name label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.id-name input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--separator);
  border-radius: var(--r-row);
  background: var(--surface);
  color: var(--label);
  outline: none;
}

.id-name input:focus {
  border-color: rgba(10, 124, 155, .32);
}

.rec-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
}

.rec-route > div:first-child {
  flex: 1;
}

.rec-route b {
  display: block;
  font-size: var(--fs-headline);
  color: var(--label);
}

.rec-route span {
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.fit-pill {
  flex: none;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.id-route-desc {
  margin: 6px 0 16px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

/* ---------- 首页 ---------- */
.home-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 16px;
}

.home-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.avatar-wrap {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
  overflow: visible;
}

.avatar-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  font-size: 30px;
}

.avatar-img img,
.avatar-wrap img,
.u-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar-wrap .avatar-level {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--separator);
  color: var(--label-2);
  font-size: 10px;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}

.home-copy {
  min-width: 0;
}

.home-copy .tiny {
  margin-bottom: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.home-copy h1 {
  margin: 1px 0 3px;
  font-size: var(--fs-large-title);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-sub {
  font-size: var(--fs-footnote);
  line-height: 1.4;
  color: var(--label-2);
}

.comp-pill {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 8px 12px;
  border-radius: var(--r-row);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.comp-pill span {
  font-size: 10px;
  color: var(--label-3);
}

.comp-pill b {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 600;
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.comp-pill em {
  margin-top: 2px;
  font-size: 10px;
  color: var(--gold);
}

/* 今日卡 */
.today-card {
  position: relative;
  margin-bottom: 14px;
  padding: 18px 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.today-card-v2 {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(46, 159, 179, .10), transparent 60%),
    var(--surface);
}

.today-kicker {
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  letter-spacing: .6px;
  color: var(--tint);
}

.today-card h2 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--label);
}

.today-card p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.today-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
}

.today-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--label-2);
  font-size: var(--fs-caption);
}

.today-actions {
  display: flex;
  gap: 8px;
}

.today-actions .btn {
  height: 46px;
  font-size: var(--fs-subhead);
}

.today-actions .btn-primary {
  flex: 1.5;
}

.today-actions .btn-ghost {
  flex: 1;
}

.today-path {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: .5px solid var(--separator);
}

.today-path-copy {
  min-width: 0;
}

.today-path-copy span {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.today-path-copy b {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--label);
}

.today-path-link {
  flex: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-footnote);
  color: var(--tint);
}

.today-path-link i {
  font-size: 14px;
}

.done-card {
  border-color: rgba(46, 139, 98, .20);
  background: linear-gradient(180deg, var(--green-soft), var(--surface));
}

/* 首页入口 */
.home-primary,
.home-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 14px 0;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.home-secondary {
  margin-top: -2px;
}

.primary-entry,
.secondary-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 0;
  background: transparent;
  border: none;
  text-align: left;
}

.primary-entry + .primary-entry,
.secondary-entry + .secondary-entry {
  border-top: .5px solid var(--separator);
}

.primary-entry:hover,
.secondary-entry:hover {
  background: var(--surface-3);
}

.pe-icon,
.secondary-entry > span:first-child {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tint-soft);
  font-size: 18px;
}

.tone-gold .pe-icon {
  background: var(--gold-soft);
}

.tone-aqua .pe-icon {
  background: var(--aqua-soft);
}

.tone-lilac .pe-icon {
  background: var(--lilac-soft);
}

.pe-copy,
.se-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pe-copy b,
.secondary-entry b {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--label);
}

.pe-copy em,
.secondary-entry em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-footnote);
  color: var(--label-3);
}

.pe-arrow,
.secondary-entry i {
  flex: none;
  font-size: 16px;
  color: var(--label-3);
}

/* 首页信息 */
.home-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 18px 0 4px;
}

.info-col {
  min-width: 0;
}

.info-col .sec-head {
  margin: 0 2px 8px;
}

.info-col .sec-head h2 {
  font-size: var(--fs-headline);
  font-weight: 600;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.info-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 11px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.info-card + .info-card {
  border-top: .5px solid var(--separator);
}

.info-card:hover {
  background: var(--surface-3);
}

.info-card .info-type {
  flex: none;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--aqua-soft);
  color: var(--aqua);
  font-size: 11px;
}

.info-card b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-subhead);
  font-weight: 500;
  color: var(--label);
}

.info-card em {
  flex: none;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--label-3);
}

.info-card .info-line,
.info-card i {
  display: none;
}

.assess-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin: 14px 0 4px;
  padding: 10px 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
  box-shadow: var(--shadow-1);
}

.an-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tint-soft);
  font-size: 17px;
}

.an-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.an-main b {
  font-size: var(--fs-subhead);
  font-weight: 500;
  color: var(--label);
}

.an-main span {
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.an-arrow {
  color: var(--label-3);
}

.soft-note {
  margin: 18px 8px 4px;
  text-align: center;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-3);
}

/* ---------- 未来瞭望台 ---------- */
.future-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 18px 16px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(46, 159, 179, .16), transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #f2f9fa 100%);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.future-hero .tiny {
  margin-bottom: 4px;
  color: var(--tint);
  letter-spacing: .3px;
}

.future-hero h1 {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--label);
}

.future-hero > p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.future-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.future-hero .score-ring::before {
  background: var(--surface);
}

.future-score-copy {
  flex: 1;
}

.future-score-copy p {
  margin-top: 6px;
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--label-2);
}

.scenario-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.scenario-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 10px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
}

.scenario-btn.on {
  background: var(--tint-soft);
  border-color: rgba(10, 124, 155, .28);
}

.sc-ic {
  font-size: 18px;
}

.scenario-btn b {
  font-size: var(--fs-footnote);
  font-weight: 500;
  color: var(--label);
}

.scenario-btn em {
  font-size: 11px;
  color: var(--label-3);
}

.scenario-btn.on em {
  color: var(--tint-deep);
}

.scenario-card {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.scenario-card > p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.sc-grid b {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-caption);
}

.sc-grid .good { color: var(--green); }
.sc-grid .bad { color: var(--coral); }

.li-dot {
  position: relative;
  display: block;
  padding-left: 9px;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--label-2);
}

.li-dot::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--label-3);
}

.fit-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.fit-part {
  padding: 10px;
  border-radius: var(--r-row);
  background: var(--surface-3);
}

.fp-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.fp-top em {
  margin-left: 3px;
  font-size: 10px;
  color: var(--label-3);
}

.fp-top b {
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.fit-part .tiny {
  display: block;
  margin-top: 5px;
  font-size: 11px;
}

.skill-row {
  margin: 14px 0;
}

.skill-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.skill-top b {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--label-3);
  font-variant-numeric: tabular-nums;
}

.skill-dual {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
}

.skill-dual i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--tint);
}

.skill-dual .future {
  background: linear-gradient(90deg, rgba(46, 159, 179, .35), var(--tint));
}

.skill-dual .nowmark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  border-radius: 2px;
  background: var(--label);
  opacity: .45;
  transform: translateX(-1px);
}

.skill-legend {
  display: none;
}

.skill-how {
  margin-top: 5px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-3);
}

.future-timeline {
  position: relative;
  padding-left: 16px;
}

.future-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--separator-strong);
}

.ft-row {
  position: relative;
  padding-bottom: 14px;
}

.ft-row:last-child {
  padding-bottom: 0;
}

.ft-year {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--tint-deep);
}

.ft-body b {
  display: block;
  margin: 2px 0 3px;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.ft-body p {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-2);
}

.ft-body .tiny {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.signal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signal-card {
  padding: 14px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.sig-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.sig-top b {
  flex: 1;
  min-width: 120px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.4;
  color: var(--label);
}

.sig-horizon {
  font-size: 11px;
  color: var(--tint);
}

.signal-card p {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-2);
}

.sig-meta {
  display: flex;
  gap: 10px;
  margin: 6px 0 4px;
  font-size: 11px;
  color: var(--label-3);
}

.sig-imp {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--tint-deep);
}

.sig-action {
  margin-top: 4px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--gold);
}

.job-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.job-scroll::-webkit-scrollbar {
  display: none;
}

.job-card {
  flex: none;
  width: 142px;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--surface-3);
  border: 1px solid var(--separator);
}

.job-ic {
  margin-bottom: 5px;
  font-size: 20px;
}

.job-card b {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.job-card .tiny {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.4;
}

.job-card .bar {
  height: 5px;
  margin-bottom: 6px;
}

.future-cta {
  margin: 4px 0 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.fc-title {
  margin-bottom: 4px;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--label);
}

.future-cta > p {
  margin-bottom: 12px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.future-cta > p b {
  color: var(--gold);
}

.future-cta .btn-ghost {
  margin-top: 8px;
}

.method {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--separator);
  border-radius: var(--r-row);
  background: var(--surface-3);
}

.method summary {
  font-size: var(--fs-footnote);
  color: var(--label-2);
  cursor: pointer;
  list-style: none;
}

.method summary::-webkit-details-marker {
  display: none;
}

.method summary::before {
  content: "＋ ";
  color: var(--tint);
}

.method[open] summary::before {
  content: "－ ";
}

.method-body {
  margin-top: 8px;
}

.method-body p {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--label-3);
}

/* ---------- 路线决策台 ---------- */
.route-card {
  position: relative;
}

.route-card.pick {
  border-color: rgba(10, 124, 155, .32);
  box-shadow: 0 0 0 1px rgba(10, 124, 155, .14), var(--shadow-1);
}

.r-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.r-name {
  font-size: var(--fs-headline);
  font-weight: 600;
  line-height: 1.4;
  color: var(--label);
}

.fitbar {
  display: none;
}

.r-desc {
  margin: 6px 0 8px;
  font-size: var(--fs-subhead);
  line-height: 1.5;
  color: var(--label-2);
}

.future-note {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--aqua-soft);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.route-card .chips {
  margin-bottom: 10px;
}

.route-comp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.route-comp .comp-ring {
  width: 68px;
  height: 68px;
}

.route-comp .comp-ring::before {
  inset: 5px;
}

.route-comp .comp-ring b {
  font-size: 18px;
}

.route-comp-copy {
  flex: 1;
  min-width: 0;
}

.route-comp-copy b {
  display: block;
  margin: 2px 0 3px;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.route-comp-copy p {
  font-size: 11px;
  line-height: 1.45;
  color: var(--label-3);
}

/* ---------- 我的进化路径 ---------- */
.journey-hero {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.journey-hero .tiny {
  margin-bottom: 4px;
  color: var(--tint);
}

.journey-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.journey-hero > p {
  margin-bottom: 12px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.journey-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.journey-stats span {
  padding: 9px 4px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  text-align: center;
  font-size: 11px;
  color: var(--label-3);
}

.journey-stats b {
  display: block;
  margin-bottom: 1px;
  font-size: var(--fs-subhead);
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.journey-tip {
  margin: 0 2px 10px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-3);
}

.journey-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.j-node {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.j-node + .j-node {
  border-top: .5px solid var(--separator);
}

.j-node:hover {
  background: var(--surface-3);
}

.j-node.current {
  background: var(--gold-soft);
}

.j-node.done {
  background: var(--green-soft);
}

.j-node.locked {
  opacity: .78;
}

.j-dot {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--label-3);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.j-node.current .j-dot {
  background: var(--gold-soft);
  color: var(--gold);
}

.j-node.done .j-dot {
  background: var(--green);
  color: #fff;
}

.j-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.j-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.4;
  color: var(--label);
}

.j-title .tag {
  font-size: 10px;
  padding: 2px 6px;
}

.j-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-2);
}

.j-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1px;
  font-size: 11px;
  color: var(--label-3);
}

.j-arrow {
  margin-top: 4px;
  color: var(--label-3);
  font-size: 16px;
}

/* ---------- 节点详情 ---------- */
.node-hero {
  margin-bottom: 14px;
}

.node-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
}

.node-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.node-hero > p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.node-meta span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--label-2);
  font-size: var(--fs-caption);
}

.lock-note {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--r-xs);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.outcome {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--tint-soft);
  border: 1px dashed rgba(10, 124, 155, .22);
}

.outcome span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--label-3);
}

.outcome b {
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--tint-deep);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-3);
  border-radius: var(--r-row);
  overflow: hidden;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-subhead);
  line-height: 1.5;
  color: var(--label-2);
}

.check-row + .check-row {
  border-top: .5px solid var(--separator);
}

.check-row .ck {
  width: 21px;
  height: 21px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid var(--separator-strong);
  border-radius: 6px;
  color: var(--tint-deep);
  font-size: 11px;
}

.check-row.done {
  color: var(--label);
}

.check-row.done .ck {
  background: var(--tint);
  border-color: var(--tint);
  color: #fff;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-3);
  border-radius: var(--r-row);
  overflow: hidden;
}

.res-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.res-row + .res-row {
  border-top: .5px solid var(--separator);
}

.res-ic {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--surface);
  font-size: 16px;
}

.res-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.res-row b {
  display: block;
  font-size: var(--fs-subhead);
  font-weight: 500;
  color: var(--label);
}

.res-row em {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.res-arrow {
  color: var(--label-3);
}

.future-value {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--r-row);
  background: var(--aqua-soft);
}

.fv-ic {
  font-size: 19px;
}

.future-value > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.future-value b {
  display: block;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.future-value em {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-subhead);
  font-weight: 500;
  color: var(--tint-deep);
}

.done-banner {
  padding: 14px;
  border-radius: var(--r-row);
  background: var(--green-soft);
  color: var(--green);
  text-align: center;
  font-size: var(--fs-subhead);
}

/* 证据 */
.evidence-card .card-title {
  margin-bottom: 8px;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.evidence-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--separator);
}

.evidence-item img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.ev-ic {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--separator);
  font-size: 18px;
}

.ev-copy {
  flex: 1;
  min-width: 0;
}

.ev-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--label);
}

.ev-copy em {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--label-3);
}

.ev-del {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--label-3);
  font-size: 11px;
}

.evidence-submit {
  margin-top: 10px;
}

.evidence-draft {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}

.ev-draft {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--separator);
  font-size: 11px;
  color: var(--label-2);
}

.ev-draft img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
}

.ev-draft .ev-ic {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
}

.ev-draft button {
  color: var(--label-3);
  font-size: 11px;
}

.evidence-submit textarea {
  margin-top: 8px;
}

/* ---------- 导师天团 ---------- */
.mentor-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.mentor-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 10px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
}

.mentor-pick.on {
  background: var(--tint-soft);
  border-color: rgba(10, 124, 155, .24);
}

.mp-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--surface-2);
  font-size: 20px;
}

.online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
}

.mp-stack {
  position: relative;
  width: 42px;
  height: 38px;
  flex: none;
}

.mp-stack i {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--separator);
  font-size: 12px;
}

.mp-stack i:nth-child(1) { left: 0; top: 0; }
.mp-stack i:nth-child(2) { left: 10px; top: 4px; }
.mp-stack i:nth-child(3) { left: 20px; top: 12px; }

.mp-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-copy b {
  font-size: var(--fs-footnote);
  line-height: 1.3;
  color: var(--label);
}

.mp-copy em {
  font-size: 11px;
  color: var(--label-3);
}

.panel {
  animation: appIn .22s ease both;
}

.ai-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
}

.ai-ava {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--tint-soft);
  font-size: 22px;
}

.ai-intro b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.ai-intro p {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.chat-scroll {
  min-height: 150px;
  max-height: min(45dvh, 420px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  scrollbar-width: none;
}

.chat-scroll::-webkit-scrollbar {
  display: none;
}

.chat-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  color: var(--label-3);
  font-size: var(--fs-caption);
}

.chat-empty span:first-child {
  font-size: 30px;
}

.chat-empty b {
  font-size: var(--fs-subhead);
  color: var(--label-2);
}

.msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: var(--fs-subhead);
  line-height: 1.55;
  white-space: pre-wrap;
  animation: appIn .22s ease both;
}

.msg.ai {
  align-self: flex-start;
  background: var(--surface-2);
  border-top-left-radius: 5px;
  color: var(--label);
}

.msg.user {
  align-self: flex-end;
  background: var(--tint);
  color: #fff;
  border-top-right-radius: 5px;
}

.msg.sys {
  align-self: center;
  background: none;
  color: var(--label-3);
  font-size: 11px;
  text-align: center;
}

.typing {
  display: inline-flex;
  gap: 4px;
  padding: 3px 1px;
}

.typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tint);
  animation: blink 1.2s infinite;
}

.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }

@keyframes blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chatbar {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.chatbar input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  outline: none;
}

.chatbar input:focus {
  border-color: rgba(10, 124, 155, .32);
}

.chatbar input::placeholder {
  color: var(--label-3);
}

.sendbtn {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-size: 16px;
}

.calib-mini {
  margin-top: 14px;
}

.calib-mini .two-btns {
  margin-top: 10px;
}

.match-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-bottom: 10px;
  padding: 10px 13px;
  border-radius: var(--r-row);
  background: var(--lilac-soft);
  border: 1px dashed rgba(94, 143, 163, .28);
  text-align: left;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.match-bar b {
  flex: none;
  font-size: var(--fs-footnote);
  color: var(--lilac);
}

.mentor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.mentor-card {
  padding: 14px;
  border-bottom: .5px solid var(--separator);
}

.mentor-card:last-child {
  border-bottom: none;
}

.mc-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mc-ava {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--surface-2);
  font-size: 20px;
}

.mc-head > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.mc-head b {
  display: block;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.mc-head em {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--tint-deep);
}

.mc-rate {
  flex: none;
  font-size: var(--fs-caption);
  color: var(--gold);
}

.mc-title {
  margin-top: 6px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-2);
}

.mc-intro {
  margin-top: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-2);
}

.mc-meta {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin: 8px 0;
  font-size: 11px;
  color: var(--label-3);
}

.mc-actions {
  display: flex;
  gap: 6px;
}

.mc-actions .btn {
  flex: 1;
  height: 34px;
  font-size: var(--fs-caption);
}

.mentor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: .5px solid var(--separator);
}

.mentor-row:last-child {
  border: none;
}

.mentor-row .m-ava {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 22px;
  border: 1px solid var(--separator);
}

.mentor-row .m-info {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-caption);
}

.mentor-row .m-info b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.mentor-row .m-info .tiny {
  font-size: var(--fs-caption);
}

/* ---------- 成长测评 ---------- */
.assess-hero {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(46, 159, 179, .12), transparent 60%),
    var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.assess-hero .tiny {
  margin-bottom: 4px;
  color: var(--tint);
}

.assess-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.assess-hero p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.assess-personal {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.assess-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.assess-card {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 14px;
  border-bottom: .5px solid var(--separator);
  background: transparent;
}

.assess-card:last-child {
  border-bottom: none;
}

.assess-card.tone-aqua,
.assess-card.tone-sky,
.assess-card.tone-gold,
.assess-card.tone-lilac {
  background: transparent;
}

.ac-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 4px;
}

.ac-icon {
  font-size: 20px;
}

.ac-name {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.35;
  color: var(--label);
}

.ac-tag {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: auto;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-3);
}

.ac-meta {
  margin: 4px 0 6px;
  font-size: 11px;
  color: var(--label-3);
}

.ac-result {
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-2);
}

.ac-result b {
  color: var(--tint-deep);
}

.ac-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ac-actions .btn {
  flex: 1;
  height: 34px;
  font-size: var(--fs-caption);
}

.result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.result-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--separator);
}

.result-chip span {
  font-size: 14px;
}

.result-chip b {
  font-size: var(--fs-caption);
  color: var(--tint-deep);
}

.result-chip em {
  font-size: 11px;
  color: var(--label-3);
}

.result-hero {
  margin-bottom: 12px;
  padding: 20px 16px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(46, 159, 179, .12), transparent 65%),
    var(--surface);
  border: 1px solid var(--separator);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.result-hero .rh-icon {
  margin-bottom: 6px;
  font-size: 42px;
}

.result-hero .tiny {
  margin-bottom: 6px;
  color: var(--label-3);
}

.result-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.result-hero p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bullet-list span {
  font-size: var(--fs-subhead);
  line-height: 1.5;
  color: var(--label-2);
}

.bullet-list.good span {
  color: var(--green);
}

.bullet-list.bad span {
  color: var(--coral);
}

.mbti-poles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.pole-row {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--label-3);
}

.pole-label {
  text-align: left;
  white-space: nowrap;
}

.pole-label.right {
  text-align: right;
}

.pole-bar {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-2);
}

.pole-bar i {
  display: block;
  height: 100%;
  background: var(--tint);
}

.pole-bar b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--label);
  opacity: .4;
  transform: translateX(-1px);
}

.test-progress {
  height: 5px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-2);
}

.test-progress i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tint);
  transition: width .35s ease;
}

.test-kicker {
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  color: var(--tint);
}

.test-q {
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--label);
}

.likert {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.likert-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
}

.likert-btn.picked {
  background: var(--tint-soft);
  border-color: rgba(10, 124, 155, .32);
}

.lk-num {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.lk-label {
  font-size: var(--fs-subhead);
}

/* ---------- 校准实验室 ---------- */
.calib-hero {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(200, 91, 74, .10), transparent 58%),
    var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.calib-hero .tiny {
  margin-bottom: 4px;
  color: var(--coral);
}

.calib-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.calib-hero p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.dim-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.q-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.q-dots {
  flex: 1;
  display: flex;
  gap: 4px;
}

.q-dots i {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: var(--surface-2);
  transition: background .3s;
}

.q-dots i.on {
  background: var(--tint);
}

.depth-bar {
  height: 4px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-2);
}

.depth-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tint);
  transition: width .4s ease;
}

.q-card {
  animation: appIn .28s ease both;
}

.q-scene {
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  color: var(--tint);
}

.q-title {
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--label);
}

.opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 54px;
  margin-bottom: 8px;
  padding: 12px 13px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.opt.picked {
  background: var(--tint-soft);
  border-color: rgba(10, 124, 155, .32);
}

.opt .k {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.metric {
  padding: 10px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  text-align: center;
}

.metric b {
  display: block;
  font-size: var(--fs-headline);
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.metric span {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--label-3);
}

.metric span .delta {
  display: block;
  margin-top: 2px;
  font-size: 10px;
}

.metric.big {
  grid-column: span 2;
  background: var(--gold-soft);
}

.metric.big b {
  font-size: 26px;
  color: var(--gold);
}

.metric-grid.small {
  grid-template-columns: repeat(3, 1fr);
}

.delta.up { color: var(--green); }
.delta.down { color: var(--coral); }
.delta.flat { color: var(--label-3); }

.report-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.report-verdict b {
  font-size: var(--fs-subhead);
  color: var(--gold);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  font-size: 11px;
  color: var(--label-3);
}

.history-row b {
  font-size: 11px;
  color: var(--label-2);
}

.history-row em {
  margin-left: auto;
  font-size: 10px;
}

/* ---------- 偶像对标 ---------- */
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.search-row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  outline: none;
}

.search-row input:focus {
  border-color: rgba(10, 124, 155, .32);
}

.search-row .btn {
  width: auto;
  height: 48px;
}

.seg-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
}

.seg {
  flex: 1;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.seg.on {
  background: var(--surface);
  color: var(--label);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

.idol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.idol-card {
  padding: 14px 10px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: center;
}

.idol-card.on {
  border-color: rgba(10, 124, 155, .32);
  background: var(--tint-soft);
}

.idol-card .face {
  display: block;
  font-size: 34px;
}

.idol-card b {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.idol-card em {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.idol-succ {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold);
}

.quote {
  margin-bottom: 10px;
  font-size: var(--fs-footnote);
  font-style: italic;
  line-height: 1.6;
  color: var(--label-2);
}

.cond {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  border-bottom: .5px solid var(--separator);
  font-size: var(--fs-footnote);
  line-height: 1.5;
}

.cond:last-child {
  border: none;
}

.cond .ck {
  width: 19px;
  height: 19px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 6px;
  font-size: 10px;
}

.cond .ck.yes {
  background: var(--green-soft);
  color: var(--green);
}

.cond .ck.no {
  background: var(--surface-2);
  color: var(--label-3);
}

.cond b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.cond em {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--label-3);
}

.detail-card {
  margin-top: 4px;
}

.idol-entry {
  border-style: dashed;
}

/* ---------- 鱼友社区 ---------- */
.community-head {
  margin-bottom: 10px;
}

.community-head h1 {
  font-size: 26px;
  letter-spacing: -.4px;
}

.community-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.community-top .seg-tabs {
  flex: 1;
  margin: 0;
}

.community-tools {
  display: flex;
  flex: none;
  gap: 6px;
}

.tool-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--separator);
  font-size: 17px;
  box-shadow: var(--shadow-1);
}

.seg-tabs-short .seg {
  padding: 0 8px;
  font-size: var(--fs-footnote);
}

.composer-entry {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  margin-bottom: 12px;
  padding: 9px 13px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
  box-shadow: var(--shadow-1);
}

.composer-entry > span:nth-child(2) {
  flex: 1;
  font-size: var(--fs-subhead);
  color: var(--label-3);
}

.composer-entry em {
  flex: none;
  font-size: var(--fs-footnote);
  font-weight: 500;
  color: var(--tint);
}

.rank-strip {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.rank-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.rank-strip-head b {
  font-size: var(--fs-subhead);
  color: var(--gold);
}

.rank-strip-head span {
  font-size: 11px;
  color: var(--label-3);
}

.rank-strip-rows {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.rank-strip-rows::-webkit-scrollbar {
  display: none;
}

.rank-chip {
  flex: 1;
  min-width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--separator);
  position: relative;
}

.rank-chip:nth-child(1) {
  background: var(--gold-soft);
  border-color: rgba(184, 116, 26, .16);
}

.rank-chip .rank-no {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 10px;
  color: var(--label-3);
}

.rank-chip b {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: var(--label-2);
}

.rank-chip em {
  font-size: 11px;
  color: var(--tint-deep);
}

.community-feed {
  margin-bottom: 12px;
}

.post-grid,
.people-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.post-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.post-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}

.text-fallback {
  background: linear-gradient(150deg, var(--tint-deep), var(--tint));
  color: #fff;
}

.text-fallback span {
  font-size: 11px;
  opacity: .8;
}

.text-fallback p {
  margin-top: 6px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-fallback {
  align-items: center;
  background: #13303a;
  color: #fff;
  font-size: 32px;
}

.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  color: var(--label);
  font-size: 14px;
  padding-left: 2px;
}

.match-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--tint-deep);
  font-size: 11px;
  font-weight: 500;
  box-shadow: var(--shadow-1);
}

.match-badge.me {
  color: var(--gold);
}

.match-badge.detail {
  position: static;
  margin-right: 2px;
}

.media-count {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(16, 42, 51, .55);
  color: #fff;
  font-size: 11px;
}

.post-body {
  padding: 12px 14px 13px;
}

.post-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: auto;
  font-size: var(--fs-subhead);
  line-height: 1.5;
  color: var(--label-2);
}

.post-author {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.pa-copy {
  flex: 1;
  min-width: 0;
}

.pa-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.pa-copy em {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--label-3);
}

.u-ava {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--separator);
  font-size: 18px;
}

.u-ava.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.u-ava.xs { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.u-ava.big { width: 52px; height: 52px; border-radius: 14px; font-size: 27px; }
.u-ava.xl { width: 76px; height: 76px; border-radius: 20px; font-size: 40px; }

.follow-mini {
  flex: none;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--tint-soft);
  color: var(--tint);
  font-size: 11px;
  white-space: nowrap;
}

.follow-mini.on {
  background: var(--surface-2);
  color: var(--label-3);
}

.mini-me {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 11px;
}

.post-foot {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.post-foot button {
  min-height: 32px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.post-foot button.on {
  color: var(--coral);
}

.post-cta {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  border-radius: var(--r-card);
  border: 1px dashed rgba(10, 124, 155, .28);
  background: var(--tint-soft);
  text-align: center;
}

.post-cta > span {
  font-size: 30px;
}

.post-cta b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.post-cta em {
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.post-cta i {
  margin-top: 4px;
  font-size: var(--fs-footnote);
  color: var(--tint);
  font-weight: 500;
}

.community-footer {
  padding: 20px 12px 8px;
  text-align: center;
}

.community-footer p {
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--label);
}

.community-footer span {
  display: block;
  margin: 4px 0 10px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.community-footer .btn {
  width: auto;
}

.person-card {
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.pc-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pc-head .match-badge {
  position: static;
}

.pc-name {
  margin-top: 7px;
}

.pc-name b {
  display: block;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.pc-name em {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.pc-bio {
  margin: 6px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pc-tags span {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--tint-deep);
  font-size: 11px;
}

.pc-why {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.pc-why span {
  font-size: 11px;
  line-height: 1.4;
  color: var(--gold);
}

.pc-post {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--separator);
  text-align: left;
}

.pc-post img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
}

.pc-post span {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  line-height: 1.4;
  color: var(--label-3);
}

.pc-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.pc-actions .btn {
  flex: 1;
  height: 34px;
  font-size: var(--fs-caption);
}

/* 贴子详情 */
.post-detail {
  padding: 14px;
}

.post-detail .post-text {
  margin: 10px 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--label);
}

.post-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ph-copy b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.ph-copy em {
  font-size: 11px;
  color: var(--label-3);
}

.follow-btn {
  flex: none;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint-soft);
  color: var(--tint);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.follow-btn.on {
  background: var(--surface-2);
  color: var(--label-3);
}

.detail-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 10px 0 4px;
}

.detail-media img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.detail-media > img:only-child {
  grid-column: span 2;
  max-height: 360px;
}

.detail-video {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border-radius: 12px;
  background: #13303a;
}

.detail-video video,
.detail-video img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.detail-video em {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(16, 42, 51, .6);
  color: #fff;
  font-size: 11px;
}

.sync-note {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.post-route {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px dashed var(--separator-strong);
}

.post-route span:last-child {
  font-size: 11px;
  color: var(--label-3);
}

.post-route .tag {
  align-self: flex-start;
  font-size: 11px;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.post-actions button {
  min-height: 36px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.post-actions button:hover,
.post-actions button.on {
  color: var(--tint-deep);
}

.post-actions.big {
  gap: 18px;
  margin-top: 12px;
  font-size: var(--fs-footnote);
}

.post-actions.big button {
  font-size: var(--fs-footnote);
}

.report-link {
  color: var(--coral) !important;
  margin-left: auto;
}

.comments {
  margin-top: 16px;
}

.comment-row {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-bottom: .5px solid var(--separator);
}

.comment-row > span:last-child {
  flex: 1;
}

.comment-row b {
  font-size: var(--fs-caption);
  color: var(--label);
}

.comment-row p {
  margin: 2px 0;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.comment-row em {
  font-size: 11px;
  color: var(--label-3);
}

.comment-bar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.comment-bar input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  outline: none;
}

.comment-bar input:focus {
  border-color: rgba(10, 124, 155, .32);
}

.route-watch-mini {
  margin-bottom: 12px;
}

.rw-name {
  margin-bottom: 7px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--label);
}

.watch-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.watch-head > div {
  flex: 1;
  min-width: 0;
}

.watch-head b {
  font-size: var(--fs-body);
  color: var(--label);
}

.watch-head em {
  display: block;
  margin: 2px 0 4px;
  font-size: var(--fs-caption);
  color: var(--tint-deep);
}

.watch-head p {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-3);
}

/* ---------- 私信 ---------- */
.dm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.dm-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 62px;
  padding: 11px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
  box-shadow: var(--shadow-1);
}

.dm-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-copy b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.dm-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.dm-time {
  flex: none;
  font-size: 11px;
  color: var(--label-3);
}

.suggest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggest-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
}

.suggest-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.suggest-row b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.suggest-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.dm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
}

.dm-head > div {
  flex: 1;
  min-width: 0;
}

.dm-head b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.dm-head em {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.dm-chat {
  height: calc(100dvh - 320px);
  min-height: 220px;
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}

.dm-chat::-webkit-scrollbar {
  display: none;
}

.dm-msg {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 15px;
  font-size: var(--fs-subhead);
  line-height: 1.5;
}

.dm-msg em {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  opacity: .55;
}

.dm-msg.them {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-top-left-radius: 5px;
}

.dm-msg.me {
  align-self: flex-end;
  background: var(--tint);
  color: #fff;
  border-top-right-radius: 5px;
}

.dm-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  color: var(--label-3);
  font-size: var(--fs-caption);
}

.dm-empty b {
  font-size: var(--fs-subhead);
  color: var(--label-2);
}

.dm-suggest {
  justify-content: center;
  margin: 6px 0;
}

.dm-bar {
  margin-top: 8px;
}

/* ---------- 个人主页 / 我的 ---------- */
.profile-hero {
  margin-bottom: 12px;
  padding: 18px 14px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(46, 159, 179, .10), transparent 65%),
    var(--surface);
  border: 1px solid var(--separator);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.profile-hero h1 {
  margin: 7px 0 2px;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--label);
}

.profile-hero > p {
  font-size: var(--fs-caption);
  color: var(--tint-deep);
}

.profile-hero .profile-bio {
  margin: 8px 0 10px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
}

.profile-stats span {
  font-size: 11px;
  color: var(--label-3);
}

.profile-stats b {
  display: block;
  font-size: var(--fs-body);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.profile-hero .two-btns {
  max-width: 260px;
  margin: 0 auto;
}

.me-hero {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.me-avatar {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--separator);
  font-size: 36px;
}

.me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.lv-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--tint);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.me-copy {
  flex: 1;
  min-width: 0;
}

.me-copy > b {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-headline);
  color: var(--label);
}

.me-copy > span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.me-copy em {
  display: block;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.stat-box {
  padding: 11px 4px;
  border-radius: var(--r-xs);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: center;
}

.stat-box b {
  display: block;
  font-size: var(--fs-headline);
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.stat-box span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--label-3);
}

.social-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 13px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  font-size: 11px;
  color: var(--label-3);
}

.social-row b {
  margin-right: 2px;
  font-size: var(--fs-footnote);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.social-row .link {
  margin-left: auto;
}

.me-route-name {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.me-assess-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 0;
  border-bottom: .5px solid var(--separator);
  text-align: left;
}

.me-assess-row:last-child {
  border: none;
}

.ma-ic {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 16px;
}

.ma-copy {
  flex: 1;
  min-width: 0;
}

.ma-copy b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.ma-copy em {
  display: block;
  font-size: 11px;
  color: var(--label-3);
}

.me-mbti {
  background: var(--surface);
  border: 1px solid var(--separator);
}

.mbti-result {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 4px 0 5px;
}

.mbti-result b {
  font-size: 26px;
  color: var(--tint-deep);
  letter-spacing: 1px;
}

.mbti-result span {
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 0;
  border-bottom: .5px solid var(--separator);
  text-align: left;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.setting-row:last-of-type {
  border: none;
}

.setting-row span:last-child {
  color: var(--label-3);
}

.setting-row.danger {
  color: var(--red);
}

/* ---------- 进化阶梯 ---------- */
.me-ladder {
  padding: 16px;
}

.me-ladder-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 8px;
}

.me-ladder-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
}

.me-ladder-row:hover {
  background: var(--surface-3);
}

.me-ladder-row.current {
  background: var(--tint-soft);
  border-color: rgba(10, 124, 155, .18);
}

.me-ladder-row.reached {
  opacity: .68;
}

.ml-icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--separator);
  font-size: 17px;
}

.ml-main {
  flex: 1;
  min-width: 0;
}

.ml-main b {
  display: block;
  font-size: var(--fs-footnote);
  font-weight: 500;
  color: var(--label);
}

.ml-main b em {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--label-3);
}

.ml-main span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--label-3);
}

.ml-state {
  flex: none;
  font-size: var(--fs-caption);
  color: var(--tint);
}

.ladder-more {
  margin-top: 2px;
  font-size: var(--fs-footnote);
}

.ladder-sheet-hero {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0 8px;
  border-bottom: .5px solid var(--separator);
}

.ladder-sheet-hero b {
  font-size: 22px;
  color: var(--label);
}

.ladder-sheet-hero span {
  font-size: var(--fs-caption);
  color: var(--gold);
}

.ladder-need {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 12px 0 6px;
}

.ladder-need span {
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.ladder-need b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.ladder-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.ladder-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.ladder-task i {
  width: 18px;
  height: 18px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: 10px;
}

.ladder-progress {
  margin: 10px 0;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.ladder-progress .bar {
  margin-top: 6px;
}

.sheet-p {
  margin: 8px 0;
  font-size: var(--fs-subhead);
  line-height: 1.6;
  color: var(--label-2);
}

.ladder-hero {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.ladder-hero .tiny {
  margin-bottom: 4px;
  color: var(--gold);
}

.ladder-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.ladder-hero p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.ladder-full {
  margin-top: 4px;
}

.ladder-full .me-ladder-row {
  padding: 12px 10px;
}

.ladder-full .ml-main b {
  font-size: var(--fs-subhead);
}

/* ---------- 家庭模式 ---------- */
.family-card {
  padding: 16px;
}

.family-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.child-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-row);
  background: var(--surface-3);
  border: 1px solid transparent;
  text-align: left;
}

.child-card:hover {
  border-color: rgba(184, 116, 26, .16);
}

.child-ava {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--gold-soft);
  font-size: 22px;
}

.child-copy {
  flex: 1;
  min-width: 0;
}

.child-copy b {
  display: block;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.child-copy em {
  display: block;
  margin: 2px 0;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.child-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.child-arrow {
  flex: none;
  color: var(--gold);
  font-size: 14px;
}

.child-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.child-hero-ava {
  width: 60px;
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--gold-soft);
  font-size: 30px;
}

.child-hero h1 {
  margin: 2px 0 3px;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--label);
}

.child-hero h1 em {
  font-size: var(--fs-caption);
  color: var(--gold);
  font-weight: 400;
}

.child-hero p {
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.child-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 2px;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.child-progress .bar {
  flex: 1;
}

.child-next {
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: var(--r-row);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-footnote);
  line-height: 1.5;
}

.child-section {
  padding: 16px;
  margin-bottom: 10px;
}

.child-nodes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.child-node {
  display: flex;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
}

.child-node > span {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--label-3);
  font-size: 10px;
}

.child-node.done > span {
  background: var(--tint);
  color: #fff;
}

.child-node.current > span {
  background: var(--gold-soft);
  color: var(--gold);
}

.child-node b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.child-node p {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-3);
}

.child-week {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: .5px solid var(--separator);
}

.child-week:last-child {
  border-bottom: 0;
}

.child-week > span {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--label-3);
  font-size: 10px;
}

.child-week.done > span {
  background: var(--tint);
  color: #fff;
}

.child-week b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.child-week p {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-3);
}

.child-evidence {
  display: flex;
  gap: 8px;
  padding: 8px 0;
}

.child-evidence span {
  font-size: 18px;
}

.child-evidence b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.child-evidence p {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-3);
}

.child-switch {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 8px 0;
}

/* ---------- 注册 / 登录 ---------- */
.auth {
  min-height: calc(100dvh - 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 2px;
}

.auth-brand {
  margin-bottom: 22px;
  font-size: var(--fs-caption);
  letter-spacing: 1.2px;
  color: var(--label-3);
}

.auth-brand span {
  margin-right: 4px;
  font-size: 20px;
  letter-spacing: 0;
}

.auth-brand em {
  color: var(--label-3);
}

.auth-head .tiny {
  margin-bottom: 6px;
  color: var(--tint);
  letter-spacing: .4px;
}

.auth-head h1 {
  margin-bottom: 8px;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--label);
}

.auth-head p {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin: 20px 0 14px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
}

.auth-tabs button {
  flex: 1;
  min-height: 38px;
  border-radius: 999px;
  font-size: var(--fs-footnote);
  color: var(--label-2);
}

.auth-tabs button.on {
  background: var(--surface);
  color: var(--label);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

.auth-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.auth-account {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
}

.auth-avatar {
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 26px;
}

.auth-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-account b {
  display: block;
  font-size: var(--fs-subhead);
  color: var(--label);
}

.auth-account em {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.auth-avatar-upload {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.auth-avatar-upload em {
  font-size: var(--fs-caption);
  color: var(--tint);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-field label {
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.auth-field input,
.auth-field select {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid var(--separator);
  border-radius: var(--r-row);
  background: var(--surface);
  color: var(--label);
  font-size: 16px;
  outline: none;
}

.auth-field input:focus,
.auth-field select:focus {
  border-color: rgba(10, 124, 155, .32);
}

.auth-field .tiny {
  margin-top: 1px;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.auth-hint {
  margin-top: -2px;
}

.code-row {
  display: flex;
  gap: 8px;
}

.code-row input {
  flex: 1;
  min-width: 0;
}

.code-btn {
  flex: none;
  height: 48px;
  padding: 0 12px;
  border-radius: var(--r-row);
  background: var(--tint-soft);
  color: var(--tint);
  font-size: var(--fs-footnote);
  white-space: nowrap;
}

.code-btn:disabled {
  opacity: .5;
}

.auth-skip {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-footnote);
  color: var(--label-3);
}

.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 11px;
  color: var(--label-3);
}

.auth-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--label-3);
}

.auth-empty span {
  display: block;
  margin-bottom: 6px;
  font-size: 32px;
}

.auth-empty b {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-subhead);
  color: var(--label-2);
}

/* ---------- 弹层 ---------- */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(16, 42, 51, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}

.sheet-mask.show {
  opacity: 1;
}

.sheet {
  width: 100%;
  max-width: 430px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  border-top: .5px solid var(--glass-border);
  box-shadow: 0 -16px 48px rgba(16, 42, 51, .18);
  transform: translateY(16px);
  transition: transform .24s cubic-bezier(.32, .72, 0, 1);
  scrollbar-width: none;
}

.sheet::-webkit-scrollbar {
  display: none;
}

.sheet-mask.show .sheet {
  transform: none;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sheet-head h2 {
  font-size: var(--fs-title-2);
  line-height: 1.35;
  font-weight: 600;
  color: var(--label);
}

.sheet-close {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--label-3);
  font-size: 13px;
}

.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 6px;
}

.slot {
  margin-bottom: 2px;
}

.book-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: var(--r-row);
  background: var(--surface-3);
  border: 1px solid var(--separator);
}

.book-head > span:nth-child(2) {
  flex: 1;
}

.book-head b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.book-head em {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--label-3);
}

.tour-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.tour-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ts-no {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: 11px;
}

.ts-ic {
  flex: none;
  font-size: 19px;
}

.tour-step > span:last-child {
  flex: 1;
}

.tour-step b {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.tour-step em {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--label-3);
}

.media-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.composer-media {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.cm-item {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--separator);
}

.cm-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-type {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(16, 42, 51, .6);
  color: #fff;
  font-size: 9px;
}

.cm-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 42, 51, .65);
  color: #fff;
  font-size: 9px;
}

.guide-full {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.guide-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.guide-item span {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: 11px;
}

.guide-item p {
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--label-2);
}

.report-reasons {
  margin: 10px 0;
}

.feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}

.path-feedback textarea {
  margin-top: 6px;
}

/* 反馈入口行 */
.feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  margin: 4px 0 10px;
  padding: 0 14px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  color: var(--label-2);
  font-size: var(--fs-footnote);
  text-align: left;
}

.feedback-row i {
  color: var(--label-3);
  font-style: normal;
}

/* ---------- Toast / 升级 ---------- */
#toasts {
  position: fixed;
  left: 50%;
  top: calc(8px + env(safe-area-inset-top));
  z-index: 99;
  width: max-content;
  max-width: min(88vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transform: translateX(-50%);
}

.toast {
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--label);
  font-size: var(--fs-footnote);
  text-align: center;
  animation: toastIn .24s ease both;
}

.toast.gold {
  background: rgba(251, 240, 223, .94);
  color: var(--gold);
  border-color: rgba(184, 116, 26, .18);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

#levelup {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16, 42, 51, .30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#levelup.show {
  display: flex;
  animation: appIn .26s ease;
}

.lv-card {
  max-width: 310px;
  margin: 20px;
  padding: 28px 24px;
  text-align: center;
}

.lv-card .big {
  font-size: 72px;
  filter: drop-shadow(0 14px 22px rgba(10, 124, 155, .14));
  animation: hatchPop .7s cubic-bezier(.22, 1.4, .36, 1) both;
}

.lv-card h2 {
  margin: 10px 0 6px;
  font-size: 22px;
  color: var(--label);
}

.lv-card p {
  margin-bottom: 18px;
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--label-2);
}

/* ---------- 桌面预览 ---------- */
@media (min-width: 520px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .app-shell {
    width: 430px;
    max-width: 430px;
    height: min(900px, calc(100dvh - 40px));
    padding-top: 0;
    border-radius: 24px;
    border: .5px solid rgba(16, 42, 51, .08);
    box-shadow: var(--shadow-3);
  }

  .tabbar {
    padding-bottom: 6px;
  }

  .app {
    padding-bottom: 16px;
  }

  .sheet {
    max-width: 430px;
  }
}

/* ---------- 小屏兜底 ---------- */
@media (max-width: 360px) {
  .app {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar {
    margin-left: -14px;
    margin-right: -14px;
  }

  .home-copy h1 {
    font-size: 26px;
  }

  .comp-pill b {
    font-size: 20px;
  }

  .today-card h2 {
    font-size: 21px;
  }

  .auth-grid {
    grid-template-columns: 1fr;
  }

  .mentor-switch {
    grid-template-columns: 1fr;
  }

  .idol-grid {
    grid-template-columns: 1fr;
  }

  .community-top {
    flex-wrap: wrap;
  }

  .community-tools {
    width: 100%;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 竞争力 / 探索 / 信息 / 收入页补充 ---------- */
.comp-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(46, 159, 179, .12), transparent 60%),
    var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.comp-hero > div:first-child {
  flex: 1;
  min-width: 0;
}

.comp-hero h1 {
  margin: 4px 0 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.comp-hero p {
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.comp-ring {
  width: 84px;
  height: 84px;
}

.comp-ring::before {
  inset: 6px;
}

.comp-ring b {
  font-size: 22px;
}

.comp-dims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 4px 0 10px;
}

.comp-dim {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 6px;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.comp-dim b {
  font-size: var(--fs-footnote);
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}

.comp-dim .bar {
  grid-column: 1 / -1;
  height: 5px;
}

.comp-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 8px 0;
}

.comp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0;
}

.comp-field label {
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.comp-field > select,
.comp-field > input:not([type="checkbox"]),
.strength-row select {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--label);
  font-size: 16px;
  outline: none;
}

.comp-field > select:focus,
.comp-field > input:not([type="checkbox"]):focus {
  border-color: rgba(10, 124, 155, .32);
}

.strength-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strength-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--separator);
  background: var(--surface-3);
}

.strength-row label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.strength-row input {
  accent-color: var(--tint);
}

.strength-row select {
  flex: none;
  width: 96px;
  min-height: 34px;
  font-size: var(--fs-caption);
}

.explore-hero,
.info-hero,
.income-hero {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(46, 159, 179, .10), transparent 60%),
    var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.explore-hero .tiny,
.info-hero .tiny,
.income-hero .tiny {
  margin-bottom: 4px;
  color: var(--tint);
}

.explore-hero h1,
.info-hero h1,
.income-hero h1 {
  margin-bottom: 6px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.explore-hero p,
.info-hero p,
.income-hero p {
  font-size: var(--fs-subhead);
  line-height: 1.5;
  color: var(--label-2);
}

.explore-current {
  margin-top: 8px;
  font-size: var(--fs-caption);
  color: var(--gold);
}

.explore-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.explore-path {
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.explore-path.on {
  border-color: rgba(10, 124, 155, .32);
}

.ep-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ep-icon {
  font-size: 24px;
}

.ep-head > div {
  flex: 1;
  min-width: 0;
}

.ep-head h2 {
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--label);
}

.ep-head em {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.ep-count {
  flex: none;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 11px;
}

.ep-why {
  margin: 8px 0;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.ep-levels {
  display: flex;
  flex-direction: column;
}

.ep-level {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-top: .5px solid var(--separator);
}

.ep-no {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: 11px;
}

.ep-level b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.ep-level p {
  margin: 2px 0;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--label-2);
}

.ep-level em {
  display: block;
  font-size: 11px;
  color: var(--tint-deep);
}

.explore-path .btn {
  margin-top: 10px;
}

.info-page-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-page-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
  box-shadow: var(--shadow-1);
}

.info-page-card .info-type {
  align-self: flex-start;
  font-size: 11px;
  color: var(--aqua);
}

.info-page-card b {
  font-size: var(--fs-subhead);
  line-height: 1.4;
  color: var(--label);
}

.info-page-card em {
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.info-page-card p {
  margin: 3px 0;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.info-page-card i {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--tint);
}

.info-detail {
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.info-detail h1 {
  margin: 8px 0 10px;
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: 700;
  color: var(--label);
}

.info-summary {
  font-size: var(--fs-subhead);
  line-height: 1.6;
  color: var(--label-2);
}

.ai-advice {
  margin: 14px 0;
  padding: 14px;
  border-radius: var(--r-row);
  background: var(--tint-soft);
  border: 1px solid rgba(10, 124, 155, .14);
}

.ai-advice-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ai-advice-head span {
  font-size: 20px;
}

.ai-advice-head b {
  font-size: var(--fs-footnote);
  color: var(--tint-deep);
}

.ai-advice p {
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--label-2);
}

.ai-action {
  margin-top: 7px;
  padding-top: 7px;
  border-top: .5px dashed var(--separator-strong);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--gold);
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.step-row span {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tint-soft);
  color: var(--tint-deep);
  font-size: 11px;
}

.step-row p {
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.salary-card {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}

.salary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.salary-head h2 {
  margin-top: 2px;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--label);
}

.salary-target-badge {
  flex: none;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.salary-lead {
  margin: 7px 0 10px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.salary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.salary-careers {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-3);
  border-radius: var(--r-row);
  overflow: hidden;
}

.salary-career {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.salary-career + .salary-career {
  border-top: .5px solid var(--separator);
}

.salary-career:hover,
.salary-career.on {
  background: var(--gold-soft);
}

.sc-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.sc-top b {
  font-size: var(--fs-subhead);
  color: var(--label);
}

.sc-top em {
  flex: none;
  font-size: var(--fs-footnote);
  color: var(--gold);
}

.sc-meta {
  display: block;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.salary-detail {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r-row);
  background: var(--gold-soft);
}

.salary-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.salary-detail h3 {
  margin-top: 2px;
  font-size: var(--fs-headline);
  color: var(--label);
}

.salary-detail p {
  margin: 6px 0;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.salary-path {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0;
}

.salary-path span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--fs-caption);
  color: var(--label-2);
}

.salary-path i {
  width: 18px;
  height: 18px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 10px;
}

.salary-next {
  margin: 7px 0 10px;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--label-2);
}

.salary-next b {
  color: var(--gold);
}

.income-hero {
  padding: 16px;
}

.income-card .salary-head h2 {
  font-size: var(--fs-title);
}

.topic-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 14px;
}

.topic-page {
  padding: 11px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--separator);
  text-align: left;
}

.topic-page.on {
  border-color: rgba(184, 116, 26, .32);
  background: var(--gold-soft);
}

.topic-page b {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label);
}

.topic-page span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--label-3);
}

.cm-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--label);
  font-size: 9px;
  padding-left: 1px;
}

.mentor-apply .comp-field-grid {
  margin-bottom: 0;
}

.path-feedback {
  display: none;
}