/* ==========================================================================
   情商健身房 · v2.css
   页面级与业务组件样式：onboarding / home / train / result / dialogue /
   leaderboard / pk / profile / share / settings / mascot / realtime
   ========================================================================== */

/* ---------- A. Onboarding ---------- */
.onb { padding-top: var(--sp-5); }
.onb__logo { width: 68px; height: 68px; margin: 0 auto var(--sp-3); }
.onb__title { font-size: var(--fs-2xl); font-weight: 800; text-align: center; letter-spacing: -0.5px; }
.onb__sub { font-size: var(--fs-sm); color: var(--c-text-3); text-align: center; margin-top: 6px; }

.onb__steps { display: flex; gap: 5px; justify-content: center; margin: var(--sp-5) 0; }
.onb__dot {
  width: 22px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  transition: background var(--t-mid) var(--ease), width var(--t-mid) var(--ease);
}
.onb__dot.is-on { background: var(--grad-brand); width: 30px; }
.onb__dot.is-done { background: var(--c-brand); opacity: 0.55; }

.onb__foot { margin-top: auto; padding-top: var(--sp-5); }
.onb__privacy {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  text-align: center;
  line-height: 1.6;
}

/* ---------- B. Home ---------- */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.mode-switch__btn {
  min-height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.mode-switch__btn.is-on {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-1);
}
.mode-switch__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.scene-card { position: relative; overflow: hidden; }
.scene-card__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.scene-card__emoji {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--c-surface-3);
  font-size: 23px;
}
.scene-card__title { font-size: var(--fs-lg); font-weight: 750; line-height: 1.35; }
.scene-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.scene-card__reason {
  margin-top: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(34, 211, 238, 0.09);
  border: 1px solid rgba(34, 211, 238, 0.24);
  font-size: var(--fs-sm);
  color: #a5f3fc;
}
.scene-card__reason b { color: #e0f7ff; }

.brief-grid { display: grid; gap: var(--sp-2); }
.brief-item { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); }
.brief-item__k { flex: 0 0 62px; color: var(--c-text-3); }
.brief-item__v { flex: 1 1 auto; color: var(--c-text-2); }

.home__quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.quick-entry {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}
.quick-entry:hover { border-color: var(--c-brand); color: var(--c-text); }
.quick-entry svg { width: 20px; height: 20px; }

.streak-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.14), rgba(251, 113, 133, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.28);
}
.streak-strip__num { font-size: var(--fs-2xl); font-weight: 800; color: #fde68a; line-height: 1; }
.streak-strip__days { display: flex; gap: 4px; }
.streak-strip__day {
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--c-surface-3);
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--c-text-3);
}
.streak-strip__day.is-on { background: var(--grad-warm); color: #1a1206; font-weight: 800; }

/* ---------- C. Train（闪练） ---------- */
.train__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.train__scene {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.14), rgba(28, 33, 56, 0.6));
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.train__opening {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(15, 18, 32, 0.55);
  border-left: 3px solid var(--c-brand-2);
  font-size: var(--fs-md);
  color: var(--c-text);
  line-height: 1.65;
}
.train__task {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: #ddd6fe;
}
.train__task b { color: #f5f3ff; }

.train__start {
  margin: var(--sp-6) 0;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px dashed var(--c-border-strong);
  background: rgba(28, 33, 56, 0.5);
}
.train__start-hint { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: var(--sp-3); }

.char-count { font-size: var(--fs-xs); color: var(--c-text-3); text-align: right; margin-top: 5px; }
.char-count.is-over { color: var(--c-warn); }

.quick-phrases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.quick-phrases .chip { min-height: 34px; font-size: var(--fs-sm); padding: 0 var(--sp-3); }

/* ---------- D. Result（结果页） ---------- */
.result__hero { text-align: center; padding: var(--sp-5) var(--sp-4); }
.result__verdict { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: var(--sp-2); }
.result__headline { font-size: var(--fs-lg); font-weight: 750; margin-top: 6px; line-height: 1.45; }

.model-answer {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  font-size: var(--fs-md);
  color: #d1fae5;
  line-height: 1.65;
}
.model-answer__label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-good);
  font-weight: 700;
  margin-bottom: 5px;
  letter-spacing: 0.4px;
}

.delta-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.delta-item { display: flex; align-items: center; gap: var(--sp-3); }
.delta-item__name { flex: 0 0 84px; font-size: var(--fs-sm); color: var(--c-text-2); }
.delta-item__bar { flex: 1 1 auto; }
.delta-item__val { flex: 0 0 46px; text-align: right; font-size: var(--fs-sm); font-weight: 750; }
.delta-item__val--up { color: var(--c-good); }
.delta-item__val--flat { color: var(--c-text-3); }

.xp-gain {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.16), rgba(139, 92, 246, 0.16));
  border: 1px solid rgba(251, 191, 36, 0.3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fde68a;
}

.rank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: var(--sh-glow);
}

.upgrade-banner {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.34);
  text-align: center;
  font-size: var(--fs-sm);
  color: #cffafe;
  animation: pop var(--t-slow) var(--ease) both;
}
@keyframes pop {
  0% { opacity: 0; transform: scale(0.94); }
  60% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- E. Dialogue（多轮） ---------- */
.dlg__progress { display: flex; gap: 4px; margin-bottom: var(--sp-3); }
.dlg__pip {
  flex: 1 1 0;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  transition: background var(--t-mid) var(--ease);
}
.dlg__pip.is-done { background: var(--c-brand); }
.dlg__pip.is-now { background: var(--grad-brand); box-shadow: 0 0 8px rgba(139, 92, 246, 0.5); }

.dlg__objective {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.28);
  font-size: var(--fs-sm);
  color: #bfdbfe;
  margin-bottom: var(--sp-3);
}
.dlg__objective b { color: #dbeafe; }

.dlg__stage {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-3);
  scroll-behavior: smooth;
}

.dlg__roster {
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: var(--sp-3);
  scrollbar-width: none;
}
.dlg__roster::-webkit-scrollbar { display: none; }
.roster-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.roster-chip .avatar { width: 24px; height: 24px; font-size: 11px; }
.roster-chip.is-speaking { border-color: var(--c-brand); color: #ddd6fe; }

.dlg__mood {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-bottom: var(--sp-3);
}
.dlg__mood-bar { flex: 1 1 auto; height: 5px; }

/* ---------- F. Realtime（实时语音面板） ---------- */
.realtime-panel {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08), rgba(28, 33, 56, 0.7));
}
.realtime-panel__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
}
.realtime-orb {
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.32), rgba(139,92,246,0.5) 46%, rgba(15,18,32,0.9));
  border: 1px solid rgba(139, 92, 246, 0.45);
  box-shadow: var(--sh-glow);
  transition: transform var(--t-mid) var(--ease);
}
.realtime-orb.is-live { animation: orb 2.4s infinite var(--ease); }
.realtime-orb.is-speaking { transform: scale(1.07); }
@keyframes orb {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
  50% { box-shadow: 0 0 0 14px rgba(139, 92, 246, 0); }
}
.realtime-state { font-size: var(--fs-sm); color: var(--c-text-2); }
.realtime-state__code { font-size: var(--fs-xs); color: var(--c-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.autoplay-rescue {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.34);
  font-size: var(--fs-sm);
  color: #fde68a;
}

/* ---------- G. Mascot（小火伴） ---------- */
.mascot-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-3) 0;
  perspective: 620px;
}
.mascot {
  position: relative;
  width: 132px; height: 132px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mascot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; border-radius: 50%; }
.mascot.is-bounce { animation: mascot-bounce 0.5s var(--ease); }
@keyframes mascot-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-12px) scale(1.05); }
  70% { transform: translateY(2px) scale(0.98); }
}
.mascot__shadow {
  position: absolute;
  bottom: 4px; left: 50%;
  width: 74px; height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(5px);
}
.mascot__body { position: relative; z-index: 1; width: 100%; height: 100%; }

.mascot-bubble {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 148px;
  max-width: 232px;
  padding: 9px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-align: center;
  animation: bubble-in var(--t-mid) var(--ease) both;
  z-index: 2;
}
.mascot-bubble::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--c-surface-2);
}

.mascot-xp {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.mascot-xp__bar { flex: 1 1 auto; min-width: 52px; height: 5px; }
.mascot-stage-name { font-weight: 800; color: var(--c-brand-2); }

/* ---------- H. Leaderboard ---------- */
.lb__tabs { margin-bottom: var(--sp-3); }
.lb__top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.lb-podium {
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  text-align: center;
}
.lb-podium--1 { border-color: rgba(251, 191, 36, 0.5); background: linear-gradient(180deg, rgba(251,191,36,0.14), var(--c-surface-2)); order: 2; }
.lb-podium--2 { order: 1; }
.lb-podium--3 { order: 3; }
.lb-podium__avatar { margin: 0 auto 6px; width: 40px; height: 40px; font-size: var(--fs-md); }
.lb-podium__name { font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium__score { font-size: var(--fs-md); font-weight: 800; color: var(--c-brand-2); }
.lb-podium__medal { font-size: var(--fs-xs); color: var(--c-text-3); }

.like-btn {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}
.like-btn.is-liked { color: #fda4af; border-color: rgba(251, 113, 133, 0.45); background: rgba(251, 113, 133, 0.12); }
.like-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.teardown { padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.teardown__q { font-size: var(--fs-sm); color: var(--c-text-3); }
.teardown__a { font-size: var(--fs-md); margin-top: 4px; color: #d1fae5; }
.teardown__why { font-size: var(--fs-sm); margin-top: 6px; color: var(--c-text-2); }

/* ---------- I. PK ---------- */
.pk-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-2);
  align-items: center;
  margin: var(--sp-3) 0;
}
.pk-vs__side { text-align: center; }
.pk-vs__score { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
.pk-vs__side--ai .pk-vs__score { color: var(--c-accent); }
.pk-vs__side--me .pk-vs__score { color: var(--c-brand-2); }
.pk-vs__label { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 3px; }
.pk-vs__mid { font-size: var(--fs-sm); font-weight: 800; color: var(--c-text-3); }

.pk-answer { padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--c-border); }
.pk-answer--ai { background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.28); }
.pk-answer--me { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); }
.pk-answer__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 6px; }
.pk-answer--ai .pk-answer__label { color: var(--c-accent); }
.pk-answer--me .pk-answer__label { color: var(--c-brand-2); }
.pk-answer__text { font-size: var(--fs-md); line-height: 1.65; }

.pk-verdict {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* ---------- J. Profile ---------- */
.prof__head { display: flex; align-items: center; gap: var(--sp-4); }
.prof__avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: var(--sh-glow);
}
.prof__name { font-size: var(--fs-lg); font-weight: 800; }
.prof__meta { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.stat-cell {
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  text-align: center;
}
.stat-cell__num { font-size: var(--fs-xl); font-weight: 800; line-height: 1.2; }
.stat-cell__label { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }

.dim-tabs { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.dim-tabs button {
  flex: 1 1 0;
  min-height: 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.dim-tabs button.is-on { background: var(--c-surface-3); color: var(--c-text); }

.hist-item__score { font-size: var(--fs-lg); font-weight: 800; color: var(--c-brand-2); }
.hist-item__delta { font-size: var(--fs-xs); color: var(--c-good); }

.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row__label { font-size: var(--fs-md); font-weight: 600; }
.settings-row__desc { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px; height: 28px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-3);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-text-3);
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.switch[aria-checked="true"] { background: rgba(139, 92, 246, 0.4); border-color: var(--c-brand); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.switch:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- K. Share ---------- */
.share-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-3);
}
.share-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.share-card__brand { font-size: var(--fs-xs); letter-spacing: 1.6px; opacity: 0.85; position: relative; z-index: 1; }
.share-card__score { font-size: 54px; font-weight: 800; line-height: 1; margin-top: var(--sp-2); position: relative; z-index: 1; }
.share-card__title { font-size: var(--fs-md); opacity: 0.94; margin-top: 6px; position: relative; z-index: 1; }
.share-card__quote {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--fs-md);
  line-height: 1.6;
  position: relative; z-index: 1;
}
.share-card__foot { margin-top: var(--sp-4); font-size: var(--fs-xs); opacity: 0.8; position: relative; z-index: 1; }

.share-text {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(15, 18, 32, 0.6);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: pre-wrap;
  line-height: 1.65;
}

.tone-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tone-tabs button {
  min-height: 36px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--c-text-3);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.tone-tabs button.is-on { background: var(--c-surface-3); color: var(--c-text); }

/* ---------- L. 通用页面工具 ---------- */
.page-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.3px; }
.page-sub { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: 4px; }

.sticky-actions {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: var(--sp-4) 0 calc(var(--sp-2) + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, rgba(15, 18, 32, 0.94) 32%);
  display: flex;
  gap: var(--sp-2);
}
.sticky-actions .btn { flex: 1 1 0; }
.sticky-actions .btn--primary { flex: 2 1 0; }

.route-error { padding: var(--sp-8) var(--sp-4); text-align: center; }
.route-error__code { font-size: 44px; font-weight: 800; color: var(--c-surface-3); line-height: 1; }