:root {
  --bg: #f7f1e8;
  --paper: #fffdfa;
  --ink: #2c211b;
  --muted: #81766b;
  --line: #e7ddd0;
  --orange: #c9652a;
  --orange-deep: #a94f21;
  --peach: #f5e1cf;
  --sage: #80936e;
  --shadow: 0 18px 45px rgba(87, 54, 28, .09);
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 85% 4%, rgba(220, 145, 89, .13), transparent 30%), var(--bg); }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.hidden { display: none !important; }
.app-shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; overflow: hidden; }
.view { min-height: 100vh; padding: calc(24px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom)); }

/* Gate */
.gate-view { position: relative; isolation: isolate; padding-left: clamp(20px, 6vw, 46px); padding-right: clamp(20px, 6vw, 46px); }
.gate-view::before { content: ""; position: absolute; z-index: -1; width: 330px; height: 330px; right: -140px; top: 74px; border: 1px solid rgba(201, 101, 42, .17); border-radius: 50%; box-shadow: 0 0 0 22px rgba(201, 101, 42, .035), 0 0 0 44px rgba(201, 101, 42, .025); }
.brand-mark { display: flex; align-items: center; gap: 9px; color: var(--orange); font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.brand-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--orange); transform: rotate(-45deg); }
.eyebrow, .result-kicker { margin-top: 44px; color: var(--orange); font-size: 12px; letter-spacing: .12em; }
.gate-view h1 { margin: 13px 0 16px; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(38px, 10vw, 64px); line-height: 1.14; letter-spacing: -.04em; }
.gate-view h1 em { color: var(--orange); font-style: normal; }
.lead { max-width: 480px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.hero-orbit { position: relative; width: min(78vw, 360px); aspect-ratio: 1; margin: 30px auto 22px; }
.orbit-ring { position: absolute; inset: 9%; border: 1px solid rgba(201, 101, 42, .23); border-radius: 50%; transform: rotate(-19deg); }
.ring-two { inset: 19% 5%; border-color: rgba(129, 147, 110, .26); transform: rotate(51deg); }
.orbit-core { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #d87835, #a84d23); color: #fff8ef; box-shadow: 0 14px 35px rgba(169, 79, 33, .25); }
.orbit-core span { font-size: 46px; transform: translateY(-2px); }
.orbit-label { position: absolute; display: grid; place-items: center; width: 62px; height: 30px; border: 1px solid rgba(201, 101, 42, .24); border-radius: 16px; background: rgba(255, 253, 250, .82); color: var(--orange-deep); font-size: 12px; box-shadow: 0 5px 15px rgba(87, 54, 28, .06); }
.label-one { top: 9%; left: 8%; }.label-two { top: 3%; right: 8%; color: #6b7a3a; border-color: rgba(107, 122, 58, .26); }.label-three { right: 0; bottom: 23%; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; max-width: 500px; margin: 8px auto 26px; }
.feature-grid div { padding: 14px 8px 13px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-grid strong { display: block; font-family: Georgia, serif; color: var(--orange); font-size: 25px; }.feature-grid span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.code-panel { max-width: 580px; margin: 0 auto; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 253, 250, .83); box-shadow: var(--shadow); }
.code-panel label { display: block; margin-bottom: 9px; color: var(--ink); font-size: 13px; font-weight: 700; }
.code-row { display: flex; gap: 9px; }.code-row input { min-width: 0; flex: 1; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; font-size: 14px; }.code-row input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(201,101,42,.12); }
.primary-btn, .secondary-btn { min-height: 48px; padding: 0 19px; border-radius: 14px; font-weight: 700; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s; }.primary-btn { background: var(--orange); color: #fff; box-shadow: 0 10px 20px rgba(201, 101, 42, .2); }.primary-btn:hover { background: var(--orange-deep); transform: translateY(-1px); }.primary-btn:disabled { cursor: wait; opacity: .72; transform: none; box-shadow: none; }.primary-btn span { margin-left: 7px; font-size: 18px; }.secondary-btn { border: 1px solid var(--line); background: rgba(255,253,250,.84); color: var(--ink); }.secondary-btn:hover { border-color: var(--orange); color: var(--orange); }
.hint { margin: 11px 2px 0; color: #9b8e81; font-size: 11px; line-height: 1.6; }.consent { display: flex; align-items: flex-start; gap: 7px; max-width: 580px; margin: 14px auto 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.consent input { accent-color: var(--orange); margin-top: 2px; }.privacy-details { max-width: 580px; margin: 12px auto 0; padding: 0 2px; color: var(--muted); font-size: 11px; line-height: 1.7; }.privacy-details summary { width: fit-content; cursor: pointer; color: var(--orange-deep); text-decoration: underline; text-underline-offset: 2px; }.privacy-details p { margin: 8px 0 5px; padding: 10px 12px; border-radius: 10px; background: rgba(255,253,250,.65); }.text-btn { padding: 2px 0; background: transparent; color: #a6552c; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }.gate-footnote { max-width: 580px; margin: 22px auto 0; color: #a29589; font-size: 11px; text-align: center; }

/* Quiz */
.quiz-view { padding-left: 0; padding-right: 0; }.quiz-header { display: flex; align-items: center; gap: 12px; padding: 0 20px 17px; }.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--ink); font-family: Georgia, serif; font-size: 34px; line-height: 1; }.icon-btn:hover { background: var(--peach); }.quiz-title { display: flex; flex: 1; flex-direction: column; gap: 2px; }.quiz-title span, .result-header span { color: var(--orange); font-size: 11px; letter-spacing: .1em; }.quiz-title strong, .result-header strong { font-size: 15px; }.progress-text { color: var(--muted); font-family: Georgia, serif; font-size: 13px; }.progress-track { height: 3px; background: #eadfd2; }.progress-track span { display: block; width: 3%; height: 100%; background: var(--orange); transition: width .3s ease; }.quiz-content { padding: 38px 20px 28px; }.question-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }.question-meta span:first-child { display: inline-grid; place-items: center; width: 42px; height: 24px; border-radius: 13px; background: var(--peach); color: var(--orange-deep); font-family: Georgia, serif; font-size: 12px; }.quiz-content h2 { max-width: 610px; margin: 22px 0 11px; font-family: "Noto Serif SC", Georgia, serif; font-size: clamp(26px, 6.8vw, 42px); line-height: 1.45; letter-spacing: -.035em; }.question-help { margin: 0 0 31px; color: var(--muted); font-size: 13px; }.scale-list { display: grid; gap: 12px; max-width: 620px; }.scale-option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 73px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,250,.82); color: var(--ink); text-align: left; box-shadow: 0 4px 12px rgba(87,54,28,.03); transition: border .2s, background .2s, transform .2s; }.scale-option:hover { transform: translateY(-1px); border-color: var(--orange); }.scale-option.selected { border-color: var(--orange); background: #fff2e6; box-shadow: 0 8px 20px rgba(201,101,42,.12); }.scale-bullet { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border: 1px solid #e6c8af; border-radius: 50%; background: #fffaf5; color: var(--orange); font-family: Georgia, serif; font-size: 16px; }.selected .scale-bullet { border-color: var(--orange); background: var(--orange); color: #fff; }.scale-copy strong { display: block; font-size: 15px; }.scale-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }.quiz-footer { display: flex; justify-content: space-between; gap: 12px; padding: 15px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(231,221,208,.8); background: rgba(247,241,232,.94); position: sticky; bottom: 0; z-index: 4; }.quiz-footer .primary-btn, .quiz-footer .secondary-btn { min-width: 135px; }

/* Result */
.result-view { padding-left: 0; padding-right: 0; }.result-header { display: flex; align-items: center; gap: 11px; padding: 0 20px 16px; border-bottom: 1px solid var(--line); }.result-header > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }.ghost-btn { padding: 8px 11px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); font-size: 12px; }.ghost-btn:hover { border-color: var(--orange); color: var(--orange); }.result-content { padding: 22px 20px 32px; }.card { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,250,.91); box-shadow: var(--shadow); }.result-hero { position: relative; overflow: hidden; padding: 22px; }.result-hero::after { content: "✦"; position: absolute; right: 24px; top: 20px; color: rgba(201,101,42,.15); font-size: 62px; }.result-kicker { margin: 0 0 17px; }.archetype-row { display: flex; align-items: center; gap: 13px; padding-right: 20px; }.archetype-icon { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--peach); color: var(--orange); font-size: 28px; }.archetype-row h1 { margin: 0; font-family: "Noto Serif SC", Georgia, serif; font-size: 28px; }.archetype-row p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.result-signal { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }.result-signal span { color: var(--sage); font-size: 12px; }.result-signal b { color: var(--orange); font-family: Georgia, serif; font-size: 35px; line-height: 1; }.result-signal small { grid-column: 2; color: var(--muted); font-size: 10px; }.result-edge { margin: 16px 0 0; color: #5d5148; font-size: 13px; line-height: 1.8; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 31px 3px 13px; }.section-heading > div { display: flex; align-items: baseline; gap: 8px; }.section-heading span { color: var(--orange); font-family: Georgia, serif; font-size: 11px; }.section-heading h2 { margin: 0; font-family: "Noto Serif SC", Georgia, serif; font-size: 20px; }.section-heading small { color: #9b8e81; font-size: 10px; }.radar-card { padding: 14px 8px 15px; }.radar-card canvas { display: block; width: 100%; height: auto; max-height: 460px; }.radar-legend { display: flex; justify-content: center; gap: 17px; color: var(--muted); font-size: 10px; }.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; }.dot-high { background: var(--orange); }.dot-mid { background: #8b77c9; }.dot-low { background: #e1b53c; }.dimension-list, .career-list, .plan-list { display: grid; gap: 10px; }.dimension-card { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,250,.86); }.dimension-top { display: flex; align-items: center; gap: 10px; }.dimension-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: white; font-size: 15px; }.dimension-name { flex: 1; font-size: 14px; font-weight: 700; }.dimension-score { color: var(--orange); font-family: Georgia, serif; font-size: 19px; }.dimension-level { margin-top: 7px; color: var(--muted); font-size: 10px; }.bar-track { height: 7px; margin-top: 11px; overflow: hidden; border-radius: 8px; background: #f0e6da; }.bar-fill { height: 100%; border-radius: inherit; transition: width .65s ease; }.dimension-desc { display: none; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.dimension-card.expanded .dimension-desc { display: block; }.career-card { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,250,.88); }.career-title-row { display: flex; align-items: center; gap: 8px; }.career-title-row h3 { flex: 1; margin: 0; font-size: 16px; }.match-score { color: var(--orange); font-family: Georgia, serif; font-size: 22px; }.career-scene { margin: 9px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }.career-action { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); color: #6c5e52; font-size: 11px; line-height: 1.7; }.career-action::before { content: "验证建议 · "; color: var(--orange-deep); font-weight: 700; }.plan-card { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,250,.86); }.plan-day { color: var(--orange); font-family: Georgia, serif; font-size: 11px; letter-spacing: .04em; }.plan-card h3 { margin: 0 0 5px; font-size: 14px; }.plan-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.result-disclaimer { margin-top: 24px; padding: 15px; border-radius: 15px; background: #fff7dc; color: #79654b; }.result-disclaimer strong { font-size: 12px; }.result-disclaimer p { margin: 7px 0 0; font-size: 11px; line-height: 1.7; }.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 40px); padding: 10px 14px; border-radius: 12px; background: rgba(44,33,27,.9); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 420px) { .code-row { flex-direction: column; }.code-row .primary-btn { width: 100%; }.gate-view h1 { font-size: 41px; }.hero-orbit { width: 280px; }.quiz-footer .primary-btn, .quiz-footer .secondary-btn { min-width: 0; flex: 1; padding: 0 12px; }.section-heading { align-items: start; flex-direction: column; gap: 4px; } }
@media print { body { background: #fff; }.view { min-height: auto; padding: 0; }.result-header, .result-actions, .share-panel, .toast { display: none !important; }.result-content { padding: 0; }.card, .dimension-card, .career-card, .plan-card { box-shadow: none; break-inside: avoid; }.result-disclaimer { margin-bottom: 20px; } }

.share-panel { margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,253,250,.95); }
.share-panel strong { display: block; font-size: 12px; }
.share-panel textarea { display: block; width: 100%; min-height: 70px; margin: 9px 0; padding: 9px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: #fff; font-size: 12px; line-height: 1.6; }
.share-panel > div { display: flex; gap: 8px; }
.share-panel .primary-btn, .share-panel .secondary-btn { flex: 1; min-height: 40px; padding: 0 10px; font-size: 12px; }