/* ============================================================
   前台页面样式（与 admin.css 完全隔离）
   由原 Vue 各视图的 scoped 样式合并而来，视觉语言保持不变：
   粗黑描边 + 高饱和原色 + 硬阴影（波普风）
   ============================================================ */

/* ---------- 页面容器 ---------- */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.page--narrow {
  max-width: 620px;
}

.page > section {
  display: flex;
  flex-direction: column;
}

.hint,
.empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text);
}

.empty {
  color: rgba(20, 20, 20, 0.6);
}

/* ---------- 顶部导航 ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  border-bottom: var(--border-w) solid var(--color-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
  background: var(--white);
  object-fit: cover;
}

.brand-text {
  font-size: 20px;
  color: var(--white);
}

.brand-stamp {
  font-size: 15px;
}

.nav-link {
  background: var(--color-accent);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-hard-sm);
}

.nav-link:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-border);
}

/* ---------- 首页 Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-accent);
  margin-bottom: var(--space-xl);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-stamp {
  font-size: 22px;
  align-self: flex-start;
}

.hero-title {
  margin: var(--space-sm) 0;
  font-size: clamp(30px, 7.5vw, 44px);
  line-height: 1.05;
}

.hero-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  max-width: 42ch;
}

.hero-art {
  position: relative;
  min-height: 220px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-secondary);
}

.art-dot {
  position: absolute;
  width: 64px;
  height: 64px;
  border: var(--border-w) solid var(--color-border);
  border-radius: 50%;
}

.art-dot--red { top: 18px; left: 18px; background: var(--color-primary); }
.art-dot--yellow { top: 84px; right: 24px; background: var(--color-accent); }
.art-dot--blue { bottom: 18px; left: 40%; background: var(--color-secondary); }

.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%) rotate(-4deg);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 rgba(20, 20, 20, 0.25);
}

.art-stamp {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 30px;
}

/* ---------- 列表头 ---------- */
.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.list-title {
  margin: 0;
  font-size: 26px;
}

.list-count {
  font-size: 15px;
  color: var(--color-primary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* ---------- 测试卡片 ---------- */
.quiz-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  text-align: left;
  font: inherit;
}

.quiz-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-border);
}

.quiz-card:active {
  transform: translate(2px, 2px) scale(0.99);
  box-shadow: 2px 2px 0 var(--color-border);
}

.badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
}

.badge-icon {
  width: 30px;
  height: 30px;
  color: var(--white);
  filter: drop-shadow(2px 2px 0 var(--ink));
}

.badge-letter {
  margin-left: auto;
  font-size: 15px;
  color: var(--white);
}

.card-body {
  flex: 1;
}

.card-title {
  margin: 0;
  font-size: 20px;
}

.card-tagline {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  color: var(--color-highlight);
}

.card-desc {
  margin: var(--space-xs) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px dashed var(--color-border);
  padding-top: var(--space-sm);
}

.card-meta {
  font-size: 12px;
  font-weight: 600;
}

.card-go {
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 12px;
  color: var(--white);
  box-shadow: var(--shadow-hard-sm);
}

/* ---------- 解锁页 ---------- */
.gate {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 62vh;
}

.gate-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--space-xl);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.gate-card--shake {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
}

.gate-stamp {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 20px;
}

.gate-title {
  margin: 0;
  font-size: clamp(24px, 7vw, 32px);
}

.gate-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(20, 20, 20, 0.75);
}

.boxes {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
}

.box {
  width: 46px;
  height: 58px;
  text-align: center;
  font-size: 26px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-hard-sm);
  outline: none;
  caret-color: var(--color-primary);
  color: var(--color-text);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  font-family: var(--font-display);
  font-weight: 900;
}

.box:focus {
  background: var(--color-accent);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--color-border);
}

.box--filled { background: var(--color-secondary); color: var(--white); }
.box--error { background: var(--color-primary); color: var(--white); }

.gate-error {
  margin: 0;
  font-size: 13px;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  opacity: 0;
  min-height: 18px;
}

.gate-error--show { opacity: 1; }

.gate-tip {
  margin: 0;
  font-size: 12px;
  color: rgba(20, 20, 20, 0.6);
}

/* ---------- 起始页 ---------- */
.intro {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
}

.intro-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: var(--space-xl);
  background: var(--color-surface);
}

.intro-stamp {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 22px;
}

.intro-title {
  margin: 0;
  font-size: clamp(24px, 7vw, 34px);
}

.intro-tagline {
  margin: var(--space-sm) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(20, 20, 20, 0.75);
}

.intro-meta {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
}

.intro-meta-item {
  padding: 4px 12px;
  background: var(--color-accent);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.intro-body {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-w) dashed var(--color-border);
}

.intro-para {
  margin: 0 0 var(--space-md);
  font-size: 15px;
  line-height: 1.95;
  color: rgba(20, 20, 20, 0.88);
  white-space: pre-wrap;
}

.intro-para:last-child { margin-bottom: 0; }

.intro-hint {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: var(--border-w) dashed var(--color-border);
  font-size: 14px;
  color: rgba(20, 20, 20, 0.5);
}

.actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ---------- 答题页 ---------- */
.quiz {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quiz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.quiz-title {
  margin: 0;
  font-size: clamp(20px, 6vw, 28px);
}

.quiz-count {
  font-size: 18px;
  color: var(--color-primary);
}

.question {
  position: relative;
  padding: var(--space-lg);
  touch-action: pan-y;
}

.q-no {
  position: absolute;
  top: -14px;
  left: var(--space-md);
  background: var(--color-highlight);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px 14px;
  font-size: 15px;
  color: var(--white);
}

.q-text {
  margin: var(--space-sm) 0 var(--space-md);
  font-size: 20px;
  line-height: 1.5;
}

.options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  font: inherit;
  color: inherit;
}

.option:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--color-border);
}

.option--on {
  background: var(--color-secondary);
  color: var(--white);
  animation: option-pop 0.28s ease;
}

@keyframes option-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.opt-label {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: var(--border-w) solid var(--color-border);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 14px;
}

.opt-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
}

.opt-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.opt-check::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}

.option--on .opt-check { border-color: var(--white); }
.option--on .opt-check::after { background: var(--color-accent); }

.quiz-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: center;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.auto-hint {
  align-self: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(20, 20, 20, 0.6);
}

.submit-error {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-primary);
}

.swipe-hint {
  display: none;
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(20, 20, 20, 0.6);
}

/* ---------- 结果页 ---------- */
.result {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.result-head {
  position: relative;
  padding: var(--space-lg);
  background: var(--color-accent);
  overflow: hidden;
}

.result-stamp {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 22px;
}

.result-title {
  margin: 0;
  font-size: clamp(22px, 6.5vw, 30px);
}

.result-type {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--color-primary);
}

.result-tagline {
  margin: var(--space-xs) 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.result-done {
  margin: var(--space-sm) 0 0;
  font-size: 13px;
  color: var(--color-text);
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

/* ---------- 模板：figure（人物相似度） ---------- */
.figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.block {
  padding: var(--space-lg);
}

.block-title {
  margin: 0 0 var(--space-md);
  font-size: 18px;
}

.block-empty {
  text-align: center;
  color: rgba(20, 20, 20, 0.5);
  margin: 0;
}

.radar-wrap {
  display: flex;
  justify-content: center;
}

.radar {
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* 维度名：完整显示，不被画布裁掉 */
.radar-label {
  font-size: 13px;
  fill: var(--color-text);
}

/* 维度数值：与名称同列的第二行，用主色强调 */
.radar-value {
  font-size: 13px;
  font-weight: 900;
  fill: var(--color-primary);
}

.bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bar-name {
  flex-shrink: 0;
  width: 84px;
  font-size: 14px;
  font-weight: 700;
}

.bar-track {
  flex: 1;
  height: 18px;
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-right: 2px solid var(--ink);
  transition: width 0.3s ease;
}

.bar-val {
  flex-shrink: 0;
  width: 34px;
  text-align: right;
  font-size: 16px;
  color: var(--color-primary);
}

.story {
  padding: var(--space-lg);
  background: var(--color-surface);
}

.story-text {
  margin: 0 0 var(--space-md);
  font-size: 15px;
  line-height: 1.95;
  color: rgba(20, 20, 20, 0.88);
  letter-spacing: 0.01em;
  white-space: pre-wrap;
}

.story-text:last-child { margin-bottom: 0; }

.story-advice {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-left: var(--border-w) solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 210, 63, 0.16);
}

.story-advice .story-text { margin: 0; }

.advice-tag {
  flex-shrink: 0;
  padding: 2px 10px;
  background: var(--color-accent);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--color-text);
}

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.block-head .block-title { margin: 0; }

.block-note {
  font-size: 12px;
  color: rgba(20, 20, 20, 0.55);
}

.dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
}

.dim-card {
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
}

.dim-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(20, 20, 20, 0.75);
}

.dim-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 var(--space-sm);
}

.dim-value {
  font-size: 30px;
  line-height: 1;
}

.dim-level {
  padding: 2px 10px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}

.dim-track {
  height: 10px;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dim-fill {
  height: 100%;
  transition: width 0.4s ease;
}

/* ---------- 模板：figure（人物相似度） ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.tag {
  padding: 6px 16px;
  background: var(--color-accent);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hard-sm);
  font-size: 14px;
}

.sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section {
  padding: var(--space-lg);
  background: var(--color-surface);
}

.section-title {
  margin: 0 0 var(--space-sm);
  font-size: 18px;
}

.section-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  white-space: pre-wrap;
  color: rgba(20, 20, 20, 0.88);
}

.advice-list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.advice-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.advice-idx {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--white);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  font-size: 12px;
}

.advice-text {
  font-size: 14px;
  line-height: 1.75;
}

/* ---------- 分享图弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(27, 31, 36, 0.55);
}

.modal__card {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: var(--space-md);
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.modal__title {
  margin: 0 0 var(--space-sm);
  font-size: 16px;
}

.modal__img {
  width: 100%;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  display: block;
}

.modal__foot {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 720px) {
  .page {
    padding: var(--space-md) var(--space-sm) var(--space-lg);
  }

  .header {
    padding: var(--space-sm);
  }

  .brand-logo { width: 26px; height: 26px; }
  .brand-text { font-size: 15px; }
  .brand-stamp { font-size: 11px; }
  .nav-link { padding: 6px 12px; font-size: 12px; }

  .hero {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  .hero-art { min-height: 140px; }

  .hero-logo {
    width: 100px;
    height: 100px;
    box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.25);
  }

  .list-title { font-size: 20px; }
  .grid { gap: var(--space-md); }

  .box { width: 40px; height: 52px; font-size: 22px; }
  .boxes { gap: 8px; }

  .actions,
  .result-actions {
    flex-direction: column;
  }

  .actions .pop-btn,
  .result-actions .pop-btn {
    width: 100%;
  }

  .q-text { font-size: 18px; }
  .option { min-height: 52px; }
  .opt-text { font-size: 14px; }

  .swipe-hint { display: block; }
  .auto-hint { display: none; }

  .result-type { font-size: 20px; }

  .bar-name { width: 68px; font-size: 13px; }
}

/* ============================================================
   hidden 属性兜底
   组件自带 display:flex / grid 时，作者样式会盖掉浏览器默认的
   [hidden]{display:none}，导致弹窗、提示条、空状态该隐藏时仍然显示
   （如 .a-modal 会变成关不掉的全屏遮罩）。这里统一兜底。
   ============================================================ */
[hidden] {
  display: none !important;
}