:root {
  color-scheme: light;
  --bg: oklch(0.985 0.005 273);
  --white: oklch(1 0 0);
  --surface: oklch(0.955 0.018 273);
  --primary: oklch(0.46 0.17 273);
  --primary-light: oklch(0.65 0.17 284);
  --ink: oklch(0.24 0.045 273);
  --muted: oklch(0.47 0.032 273);
  --line: oklch(0.89 0.022 273);
  --lilac: oklch(0.93 0.04 278);
  --accent: oklch(0.91 0.065 53);
  --green: oklch(0.37 0.065 164);
  --green-soft: oklch(0.95 0.026 164);
  --danger: oklch(0.44 0.15 25);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  color: var(--ink);
  background: oklch(0.93 0.018 273);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.app-shell { width: 100%; max-width: 460px; min-height: 100svh; margin: 0 auto; position: relative; display: flex; flex-direction: column; background: radial-gradient(ellipse at 100% 0, oklch(0.93 0.042 283 / 0.75), transparent 42%), linear-gradient(180deg, oklch(0.985 0.008 273), var(--white) 70%); }
.topbar { min-height: 80px; padding: 18px 22px 12px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brand > svg { color: var(--white); width: 39px; height: 39px; padding: 9px; border-radius: 12px; background: linear-gradient(145deg, var(--primary-light), var(--primary)); box-shadow: 0 4px 8px oklch(0.45 0.17 273 / 0.15); }
.brand-name { font-size: 21px; font-weight: 650; letter-spacing: 0.12em; }
.brand-sub { display: block; font-size: 9px; letter-spacing: 0.12em; color: var(--muted); margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 3px; }
.edition { font-size: 10px; color: var(--primary); padding: 6px 9px; border-radius: 6px; background: oklch(0.92 0.035 278); }
.icon-button { width: 44px; height: 44px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 160ms var(--ease), transform 160ms var(--ease); }
.icon-button:hover { background: var(--lilac); }
.icon-button:active { transform: scale(0.93); }
.icon-button svg { width: 20px; height: 20px; }
.back-button { background: var(--white); box-shadow: 0 2px 6px oklch(0.25 0.05 273 / 0.05); }
.flow-label { font-size: 13px; font-weight: 550; color: var(--muted); }
.main { padding: 15px 22px 110px; flex: 1; }
.home-main { padding-top: 11px; }
.hello { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--primary); margin-bottom: 12px; }
.hello svg { width: 14px; height: 14px; }
.home-heading { font-size: 37px; font-weight: 650; line-height: 1.35; letter-spacing: -0.02em; }
.home-subtitle { font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 12px; }
.talent-feature { position: relative; isolation: isolate; background: linear-gradient(135deg, oklch(0.22 0.07 273), oklch(0.35 0.13 277) 54%, oklch(0.48 0.15 286)); color: var(--white); border-radius: 16px; padding: 23px; margin-top: 24px; overflow: hidden; box-shadow: 0 12px 25px oklch(0.33 0.11 277 / 0.18); }
.talent-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(0.22 0.07 273 / 0.15), transparent 70%); }
.feature-content { position: relative; z-index: 2; }
.feature-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: oklch(0.88 0.05 285); }
.feature-label svg { width: 14px; height: 14px; }
.feature-content h2 { font-size: 32px; line-height: 1.36; font-weight: 600; margin: 18px 0 12px; letter-spacing: 0.01em; }
.feature-content p { font-size: 12px; line-height: 1.9; color: oklch(0.90 0.025 280); max-width: 215px; }
.feature-meta { display: flex; gap: 9px; align-items: center; font-size: 10px; color: oklch(0.90 0.025 280); margin: 17px 0 21px; }
.feature-meta i { width: 3px; height: 3px; border-radius: 50%; background: oklch(0.83 0.06 280); }
.feature-orbit { position: absolute; width: 220px; height: 220px; right: -63px; top: 35px; z-index: 1; pointer-events: none; }
.aura-orb { position: absolute; width: 155px; height: 155px; border-radius: 50%; top: 30px; left: 30px; background: radial-gradient(circle at 28% 23%, oklch(0.97 0.025 50) 0, oklch(0.88 0.06 310) 17%, oklch(0.70 0.15 289) 42%, oklch(0.50 0.17 278) 70%, oklch(0.25 0.09 273) 100%); box-shadow: inset -10px -12px 20px oklch(0.24 0.10 273 / 0.35), 0 0 45px oklch(0.73 0.16 291 / 0.22); transform: rotate(-22deg); }
.aura-orb::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1px solid oklch(0.96 0.025 290 / 0.25); border-bottom-color: transparent; border-right-color: transparent; }
.orbit-ring { position: absolute; width: 215px; height: 116px; top: 55px; left: 0; border: 1px solid oklch(0.88 0.065 290 / 0.5); border-radius: 50%; transform: rotate(-32deg); }
.ring-two { transform: rotate(47deg); width: 205px; height: 156px; top: 32px; left: 6px; border-color: oklch(0.9 0.05 290 / 0.25); }
.orbit-dot { position: absolute; width: 8px; height: 8px; top: 70px; left: 1px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px oklch(0.9 0.08 50 / 0.5); }
.feature-footnote { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 10px; color: var(--muted); }
.feature-footnote svg { width: 13px; height: 13px; }
.button { position: relative; isolation: isolate; overflow: hidden; border: 0; min-height: 53px; padding: 15px 18px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 550; line-height: 1.4; transition: transform 180ms var(--ease), box-shadow 220ms var(--ease), background-position 240ms var(--ease); }
.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, oklch(1 0 0 / 0.18) 50%, transparent 80%); transform: translateX(-120%); transition: transform 400ms var(--ease); pointer-events: none; }
.button:hover::before, .button:focus-visible::before { transform: translateX(120%); }
.button svg { width: 18px; height: 18px; transition: transform 200ms var(--ease); }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:hover:not(:disabled) svg:last-child { transform: translateX(3px); }
.button:active:not(:disabled) { transform: translateY(1px) scale(0.975); }
.primary { color: var(--white); background: linear-gradient(115deg, oklch(0.52 0.19 283), oklch(0.43 0.17 271) 65%, oklch(0.50 0.17 280)); background-size: 180% 100%; box-shadow: 0 5px 12px oklch(0.45 0.16 273 / 0.19); }
.primary:hover:not(:disabled) { background-position: 100% 50%; box-shadow: 0 7px 16px oklch(0.45 0.16 273 / 0.24); }
.button:disabled { background: var(--line); color: var(--muted); box-shadow: none; }
.button:disabled::before { display: none; }
.feature-button { background: linear-gradient(110deg, var(--white), oklch(0.94 0.025 285)); color: oklch(0.32 0.11 273); box-shadow: 0 3px 8px oklch(0.10 0.03 273 / 0.16); }
.secondary { color: var(--primary); background: linear-gradient(135deg, oklch(0.94 0.03 278), oklch(0.97 0.014 273)); }
.danger { color: var(--white); background: var(--danger); }
.full { width: 100%; }
.tap-wave { width: 130px; height: 130px; position: absolute; pointer-events: none; border-radius: 50%; margin: -65px 0 0 -65px; background: oklch(1 0 0 / 0.28); animation: tap-wave 480ms var(--ease) forwards; }
@keyframes tap-wave { from { opacity: 0.8; transform: scale(0); } to { opacity: 0; transform: scale(4); } }
.reflection-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 25px 0 24px; margin-top: 15px; border-bottom: 1px solid var(--line); }
.reflection-entry > div > span { font-size: 11px; color: var(--primary); }
.reflection-entry h2 { font-size: 23px; font-weight: 550; line-height: 1.55; margin-top: 8px; }
.reflection-entry p { font-size: 11px; color: var(--muted); margin-top: 7px; }
.reflection-entry-button { background: linear-gradient(135deg, oklch(0.94 0.04 278), oklch(0.88 0.06 283)); width: 57px; height: 57px; border: 0; border-radius: 50%; color: var(--primary); display: grid; place-items: center; transition: transform 180ms var(--ease); }
.reflection-entry-button:hover { transform: translateX(3px); }
.reflection-entry-button:active { transform: scale(0.94); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 23px 0 2px; }
.section-heading h2 { font-size: 15px; font-weight: 600; }
.text-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 5px; padding: 7px 0; background: none; border: 0; font-size: 12px; color: var(--muted); }
.text-button svg { width: 14px; height: 14px; }
.text-button:hover { color: var(--primary); }
.topic-row { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 17px 0; }
.topic-row:last-child { border-bottom: 0; }
.topic-icon { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 13px; flex-shrink: 0; background: linear-gradient(135deg, oklch(0.93 0.045 278), oklch(0.97 0.02 273)); color: var(--primary); }
.topic-icon.peach { background: linear-gradient(135deg, oklch(0.93 0.045 35), oklch(0.97 0.02 53)); color: oklch(0.43 0.09 35); }
.topic-icon.green { background: linear-gradient(135deg, oklch(0.91 0.045 164), oklch(0.97 0.018 164)); color: var(--green); }
.topic-title { display: block; font-size: 14px; font-weight: 550; margin-bottom: 4px; }
.topic-subtitle { display: block; font-size: 11px; line-height: 1.7; color: var(--muted); }
.topic-row > svg { width: 15px; height: 15px; color: var(--muted); margin-left: auto; }
.topic-row:hover .topic-title { color: var(--primary); }
.small-practice { margin-top: 24px; padding: 20px; border-radius: 14px; background: linear-gradient(135deg, oklch(0.95 0.02 273), oklch(0.96 0.025 304)); }
.practice-label { font-size: 10px; color: var(--primary); display: flex; gap: 6px; align-items: center; }
.practice-label svg { width: 13px; height: 13px; }
.small-practice p { font-size: 15px; line-height: 1.85; margin-top: 12px; }
.small-practice .text-button { color: var(--primary); margin-top: 4px; }
.bottom-nav { display: flex; position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 436px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 20; padding: 8px 12px; background: oklch(1 0 0 / 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; box-shadow: 0 3px 18px oklch(0.3 0.08 273 / 0.12); }
.nav-item { border: 0; background: none; color: var(--muted); flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; }
.nav-icon { display: grid; place-items: center; width: 38px; height: 28px; border-radius: 9px; transition: background 180ms var(--ease), transform 180ms var(--ease); }
.nav-item svg { width: 19px; height: 19px; }
.nav-item.active { color: var(--primary); font-weight: 550; }
.nav-item.active .nav-icon { background: var(--lilac); }
.nav-item:active .nav-icon { transform: scale(0.9); }
.progress { display: flex; gap: 8px; align-items: center; margin: 2px 0 30px; }
.progress-item { flex: 1; display: flex; gap: 5px; align-items: center; flex-direction: column; color: var(--muted); font-size: 10px; }
.progress-item::before { content: ""; height: 3px; background: var(--line); border-radius: 2px; width: 100%; margin-bottom: 5px; }
.progress-item.current { color: var(--primary); }
.progress-item.current::before, .progress-item.done::before { background: linear-gradient(90deg, var(--primary-light), var(--primary)); }
.page-title { font-size: 28px; font-weight: 600; line-height: 1.55; letter-spacing: -0.015em; }
.page-description { color: var(--muted); font-size: 13px; line-height: 1.9; margin-top: 13px; }
.theme-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--primary); background: var(--lilac); padding: 8px 11px; border-radius: 7px; margin-bottom: 17px; }
.theme-label svg { width: 14px; height: 14px; }
.topic-page-list { margin-top: 27px; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 27px; margin-bottom: 12px; }
.field-heading label, .field-heading h2 { font-size: 14px; font-weight: 550; }
.optional, .counter { color: var(--muted); font-size: 11px; }
.question-input { resize: vertical; width: 100%; min-height: 150px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); padding: 16px; font-size: 14px; line-height: 1.9; color: var(--ink); display: block; }
.question-input::placeholder { color: var(--muted); opacity: 1; }
.counter { text-align: right; margin-top: 8px; }
.mood-options { display: flex; gap: 9px; flex-wrap: wrap; }
.mood-option { min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); font-size: 12px; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.mood-option[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); background: var(--lilac); }
.mood-option:active { transform: scale(0.95); }
.gentle-note { font-size: 11px; line-height: 1.9; color: var(--muted); display: flex; align-items: flex-start; gap: 7px; margin-top: 24px; }
.gentle-note svg { width: 14px; height: 14px; margin-top: 4px; }
.flow-footer { padding: 16px 22px calc(18px + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; margin-top: auto; background: oklch(1 0 0 / 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 20; border-top: 1px solid oklch(0.92 0.015 273); }
[data-route="checkin"] .main, [data-route="cards"] .main, [data-route="career"] .main, [data-route="career-quiz"] .main { padding-bottom: 30px; }
.footer-hint { font-size: 10px; color: var(--muted); line-height: 1.7; text-align: center; margin-top: 10px; }
.card-count { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; font-size: 12px; color: var(--muted); }
.card-count strong { color: var(--primary); font-size: 15px; }
.shuffle-button { color: var(--primary); }
.reflection-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.reflection-card { height: 171px; perspective: 800px; padding: 0; border: 0; background: none; border-radius: 12px; text-align: center; }
.card-inner { display: block; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 260ms var(--ease); border-radius: inherit; }
.reflection-card[aria-pressed="true"] .card-inner { transform: rotateY(180deg); }
.card-back, .card-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.card-back { background: linear-gradient(145deg, oklch(0.95 0.035 278), oklch(0.85 0.07 286)); color: var(--primary); border: 1px solid oklch(0.83 0.06 279); }
.card-back::before { content: ""; position: absolute; inset: 8px; border: 1px solid oklch(0.75 0.07 279); border-radius: 7px; }
.card-symbol { width: 38px; height: 55px; border: 1px solid var(--primary); border-radius: 23px 23px 0 0; position: relative; overflow: hidden; margin-bottom: 16px; }
.card-symbol::before { content: ""; position: absolute; width: 15px; height: 15px; background: var(--primary); border-radius: 50%; top: 11px; left: 11px; }
.card-symbol::after { content: ""; width: 70px; height: 40px; background: oklch(0.64 0.12 279); position: absolute; top: 35px; left: -15px; border-radius: 50%; }
.card-back .card-brand { font-size: 11px; letter-spacing: 0.17em; }
.card-front { transform: rotateY(180deg); background: linear-gradient(145deg, oklch(0.48 0.17 280), oklch(0.31 0.10 273)); color: var(--white); padding: 15px 10px; }
.card-front .selected-check { width: 18px; height: 18px; margin-bottom: 10px; color: var(--accent); }
.card-front strong { font-size: 13px; font-weight: 550; line-height: 1.65; }
.card-front .card-prompt { font-size: 12px; line-height: 1.75; margin-top: 8px; color: oklch(0.96 0.012 278); }
.card-index { position: absolute; bottom: 11px; font-size: 9px; color: var(--muted); }
.reflection-card:disabled:not([aria-pressed="true"]) { opacity: 0.45; }
.selection-status { margin-top: 20px; min-height: 45px; padding: 14px; border-radius: 10px; background: var(--surface); font-size: 11px; line-height: 1.8; color: var(--muted); }
.selection-status.ready { background: var(--green-soft); color: var(--green); }
.report-head { position: relative; padding: 8px 0 23px; border-bottom: 1px solid var(--line); }
.report-head .page-title { max-width: 320px; }
.report-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 10px; }
.example-badge { background: var(--lilac); color: var(--primary); border-radius: 5px; padding: 6px 8px; }
.report-mood { display: inline-flex; align-items: center; gap: 5px; margin-top: 15px; font-size: 12px; color: var(--muted); }
.report-mood svg { width: 14px; height: 14px; }
.report-question { margin-top: 24px; }
.minor-label { color: var(--muted); font-size: 11px; }
.report-question p { font-size: 14px; line-height: 1.9; margin-top: 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.report-section { margin-top: 30px; }
.report-section > h2 { font-size: 16px; font-weight: 600; display: flex; gap: 8px; align-items: center; margin-bottom: 14px; line-height: 1.65; }
.report-section > h2 svg { width: 17px; height: 17px; color: var(--primary); }
.report-section > p { font-size: 13px; line-height: 2; color: var(--muted); }
.report-section > .mood-reflection { margin-top: 14px; font-size: 12px; }
.perspective-list { padding: 0; margin: 0; list-style: none; }
.perspective-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.perspective-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.perspective-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.perspective-name span { color: var(--primary); background: var(--lilac); width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.perspective-question { font-size: 15px; line-height: 1.85; margin: 11px 0 8px; }
.perspective-detail { font-size: 12px; line-height: 1.95; color: var(--muted); }
.action-box { background: linear-gradient(130deg, oklch(0.93 0.035 164), oklch(0.97 0.017 165)); border-radius: var(--radius); padding: 21px; margin-top: 27px; }
.action-label { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.action-label svg { width: 15px; height: 15px; }
.action-box h2 { font-size: 17px; font-weight: 550; line-height: 1.75; }
.action-box p { color: var(--green); font-size: 12px; line-height: 2; margin-top: 9px; }
.action-check { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 10px; font-size: 12px; color: var(--green); cursor: pointer; }
.action-check input { width: 17px; height: 17px; accent-color: var(--green); margin: 0; }
.closing-quote { text-align: center; padding: 29px 12px 21px; }
.closing-quote span { color: var(--primary); font-size: 25px; display: block; height: 28px; }
.closing-quote p { font-size: 16px; line-height: 1.9; }
.report-actions { display: grid; gap: 11px; margin-top: 28px; }
.report-actions-row { display: flex; gap: 10px; }
.report-actions-row .button { flex: 1; font-size: 12px; }
.report-disclosure { color: var(--muted); font-size: 10px; line-height: 1.95; margin-top: 18px; text-align: center; }
.journal-header { margin-top: 8px; }
.privacy-caption { display: flex; gap: 7px; align-items: center; font-size: 11px; line-height: 1.8; color: var(--muted); margin-top: 16px; }
.privacy-caption svg { width: 14px; height: 14px; }
.empty-state { text-align: center; margin: 55px 0 35px; }
.empty-illustration { height: 120px; width: 120px; margin: 0 auto 24px; background: linear-gradient(135deg, var(--lilac), var(--white)); border-radius: 50%; display: grid; place-items: center; }
.empty-illustration svg { width: 45px; height: 45px; color: var(--primary); stroke-width: 1.2; }
.empty-state h2 { font-size: 18px; line-height: 1.7; font-weight: 550; }
.empty-state p { font-size: 12px; color: var(--muted); line-height: 1.9; margin-top: 11px; }
.empty-state .button { margin-top: 25px; min-width: 210px; }
.empty-state .text-button { display: flex; margin: 12px auto 0; }
.journal-list { margin-top: 30px; }
.journal-item { background: var(--white); border-radius: 14px; padding: 20px; box-shadow: 0 3px 8px oklch(0.3 0.05 273 / 0.05); margin-bottom: 15px; }
.journal-date { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); margin-bottom: 13px; }
.record-kind { color: var(--primary); background: var(--lilac); padding: 5px 7px; border-radius: 5px; }
.journal-open { border: 0; background: none; padding: 0; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; }
.journal-open h2 { font-size: 17px; line-height: 1.7; font-weight: 550; }
.journal-open p { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.journal-open > svg { width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; color: var(--muted); }
.delete-record { color: var(--muted); margin-top: 8px; font-size: 10px; }
.about-intro { margin-top: 20px; }
.about-intro p { color: var(--muted); font-size: 13px; line-height: 2; margin-top: 17px; }
.about-intro h2 { font-size: 15px; margin-top: 28px; font-weight: 600; }
.about-intro .button { margin-top: 35px; }
.intro-visual { height: 210px; position: relative; width: 240px; margin: -4px auto 12px; }
.intro-visual .aura-orb { width: 145px; height: 145px; left: 45px; top: 16px; box-shadow: inset -10px -12px 20px oklch(0.24 0.10 273 / 0.25), 0 15px 35px oklch(0.65 0.14 280 / 0.2); }
.intro-visual .orbit-ring { border-color: oklch(0.62 0.09 279 / 0.45); top: 38px; left: 13px; }
.intro-visual .ring-two { top: 14px; left: 19px; border-color: oklch(0.62 0.09 279 / 0.2); }
.intro-float-label { position: absolute; background: oklch(1 0 0 / 0.9); padding: 9px 15px; border-radius: 20px; font-size: 10px; color: var(--primary); left: 62px; bottom: 16px; box-shadow: 0 3px 8px oklch(0.4 0.12 273 / 0.1); }
.career-intro .page-title { font-size: 27px; }
.intro-facts { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; margin-top: 9px; border-bottom: 1px solid var(--line); }
.intro-facts > span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.intro-facts strong { font-size: 22px; color: var(--primary); font-weight: 550; }
.intro-facts svg { width: 17px; height: 17px; color: var(--primary); }
.intro-steps { margin-top: 24px; }
.intro-steps h2 { font-size: 15px; margin-bottom: 12px; }
.intro-steps p { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.9; margin-top: 10px; }
.intro-steps p span { color: var(--primary); margin-top: 3px; }
.intro-steps svg { width: 14px; height: 14px; }
.method-note { color: var(--muted); font-size: 10px; line-height: 1.9; margin-top: 20px; }
.quiz-progress-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.quiz-progress-label strong { font-size: 20px; font-weight: 550; color: var(--primary); }
.quiz-progress { height: 5px; border-radius: 3px; overflow: hidden; background: var(--line); margin-top: 13px; }
.quiz-progress > span { width: 100%; display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--primary-light), var(--primary)); transition: transform 220ms var(--ease); }
.question-heading { margin: 25px 0 24px; }
.question-number { color: var(--primary); font-size: 12px; font-weight: 600; }
.quiz-title { font-size: 23px; font-weight: 600; line-height: 1.65; margin-top: 12px; letter-spacing: -0.015em; }
.question-heading > p { font-size: 11px; line-height: 1.85; color: var(--muted); margin-top: 13px; }
.answer-list { display: grid; gap: 10px; }
.answer-option { min-height: 59px; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; font-size: 14px; transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease); }
.answer-option:hover { transform: translateX(2px); border-color: oklch(0.66 0.12 279); }
.answer-option:active { transform: scale(0.98); }
.answer-number { width: 25px; height: 25px; border-radius: 8px; font-size: 11px; display: grid; place-items: center; color: var(--muted); background: var(--surface); }
.answer-number svg { width: 15px; height: 15px; }
.answer-indicator { margin-left: auto; opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.answer-indicator svg { width: 17px; height: 17px; }
.answer-option[aria-pressed="true"] { background: linear-gradient(100deg, oklch(0.94 0.043 280), oklch(0.97 0.02 285)); border-color: var(--primary); color: var(--primary); box-shadow: 0 3px 8px oklch(0.46 0.16 273 / 0.06); }
.answer-option[aria-pressed="true"] .answer-number { color: var(--white); background: var(--primary); }
.answer-option[aria-pressed="true"] .answer-indicator { opacity: 1; transform: scale(1); }
.quiz-note { display: flex; align-items: center; gap: 6px; margin-top: 19px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.quiz-note svg { width: 13px; height: 13px; }
.quiz-footer { display: flex; gap: 11px; }
.previous-question { width: 54px; flex-shrink: 0; }
.quiz-footer > .primary { flex: 1; }
.result-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 24px 21px 18px; background: radial-gradient(circle at 100% 0, oklch(0.54 0.14 289 / 0.7), transparent 55%), linear-gradient(140deg, oklch(0.25 0.08 273), oklch(0.40 0.13 280)); color: var(--white); box-shadow: 0 12px 24px oklch(0.32 0.10 273 / 0.15); }
.result-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: oklch(0.88 0.04 280); font-size: 11px; }
.result-topline span:last-child { letter-spacing: 0.12em; }
.result-hero h1 { font-size: 29px; font-weight: 600; line-height: 1.6; margin-top: 20px; }
.result-hero > p { font-size: 12px; line-height: 1.8; margin-top: 7px; color: oklch(0.93 0.025 280); }
.result-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.result-keywords span { background: oklch(1 0 0 / 0.12); border-radius: 20px; padding: 7px 11px; font-size: 10px; color: oklch(0.95 0.02 280); }
.career-radar { display: block; width: 100%; max-width: 310px; height: auto; margin: 5px auto -4px; overflow: visible; }
.radar-grid { fill: none; stroke: oklch(0.9 0.04 280 / 0.25); stroke-width: 0.8; }
.radar-axis { stroke: oklch(0.9 0.04 280 / 0.18); stroke-width: 0.7; }
.career-radar text { fill: oklch(0.94 0.02 280); font-size: 11px; }
.radar-value { fill: oklch(0.76 0.15 290 / 0.4); stroke: oklch(0.86 0.09 291); stroke-width: 1.6; }
.radar-dot { fill: oklch(0.97 0.02 290); }
.result-caption { border-top: 1px solid oklch(1 0 0 / 0.18); padding-top: 15px; font-size: 10px; line-height: 1.8; color: oklch(0.94 0.02 280); text-align: center; }
.career-direction { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.career-direction > span { color: var(--primary); background: var(--lilac); border-radius: 7px; width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; }
.career-direction > p { font-size: 13px; font-weight: 500; line-height: 1.7; }
.career-direction > svg { width: 15px; height: 15px; color: var(--muted); margin-left: auto; }
.career-directions > .direction-note { font-size: 10px; line-height: 1.9; margin-top: 13px; }
.preference-bars { display: grid; gap: 15px; padding-top: 8px; }
.preference-row > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; margin-bottom: 8px; }
.preference-row small { font-size: 9px; color: var(--muted); }
.preference-track { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.preference-track > span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, oklch(0.71 0.14 289), var(--primary)); }
.career-action { margin-top: 31px; }
.share-main .page-title { font-size: 28px; }
.share-preview { margin-top: 24px; width: 100%; aspect-ratio: 3 / 4; background: linear-gradient(130deg, oklch(0.25 0.08 273), oklch(0.49 0.13 286)); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 25px oklch(0.32 0.10 273 / 0.15); }
.share-preview img { display: block; width: 100%; height: auto; }
.card-preparing { display: flex; min-height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 14px; font-size: 12px; line-height: 1.8; text-align: center; color: var(--white); padding: 25px; }
.card-preparing > svg { width: 27px; height: 27px; }
.share-instruction { font-size: 10px; color: var(--muted); line-height: 1.9; margin-top: 16px; text-align: center; }
.toast { position: fixed; z-index: 50; bottom: 100px; left: 50%; transform: translate(-50%, 8px); max-width: min(370px, calc(100% - 40px)); background: var(--ink); color: var(--white); border-radius: 11px; padding: 13px 18px; font-size: 12px; line-height: 1.7; opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
dialog { width: min(360px, calc(100% - 40px)); border: 0; border-radius: var(--radius); padding: 25px; color: var(--ink); background: var(--white); }
dialog::backdrop { background: oklch(0.16 0.035 273 / 0.5); backdrop-filter: blur(3px); }
dialog h2 { font-size: 19px; line-height: 1.7; }
dialog p { font-size: 12px; color: var(--muted); line-height: 1.9; margin-top: 11px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 23px; }
.dialog-actions .button { flex: 1; font-size: 12px; min-height: 46px; padding: 12px 8px; }
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-180%); background: var(--primary); color: var(--white); padding: 12px 16px; z-index: 60; border-radius: 7px; }
.skip-link:focus { transform: translateY(0); }
.desktop-caption { display: none; }
.noscript { padding: 30px; }
@media (min-width: 700px) {
  body { padding: 28px 0; background: radial-gradient(ellipse at 65% 15%, oklch(0.89 0.06 283), transparent 45%), oklch(0.93 0.018 273); }
  .app-shell { min-height: calc(100svh - 56px); border-radius: 20px; box-shadow: 0 18px 50px oklch(0.3 0.08 273 / 0.12); overflow: clip; }
  .bottom-nav { bottom: 18px; }
}
@media (min-width: 1160px) {
  .desktop-caption { position: fixed; display: flex; gap: 18px; left: calc(50% - 505px); top: 150px; color: var(--ink); }
  .caption-line { width: 28px; height: 2px; background: var(--primary); margin-top: 18px; }
  .desktop-caption p { font-size: 28px; font-weight: 500; line-height: 1.7; letter-spacing: -0.02em; }
  .desktop-caption p span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0; margin-top: 17px; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 18px; padding-right: 18px; }
  .main { padding-left: 18px; padding-right: 18px; }
  .home-heading { font-size: 33px; }
  .feature-content h2 { font-size: 29px; }
  .talent-feature { padding: 21px; }
  .feature-orbit { right: -83px; }
  .reflection-deck { gap: 8px; }
  .reflection-card { height: 174px; }
  .card-front { padding: 12px 7px; }
  .card-front .card-prompt { font-size: 11px; }
  .flow-footer { padding-left: 18px; padding-right: 18px; }
  .quiz-title { font-size: 21px; }
  .answer-option { min-height: 55px; }
  .result-hero h1 { font-size: 25px; }
  .result-hero { padding-left: 17px; padding-right: 17px; }
  .intro-facts { gap: 6px; }
  .intro-facts > span { font-size: 10px; }
  .intro-facts strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Four-test catalogue and activation flow. */
.wallet-strip { display:flex;align-items:center;gap:11px;padding:15px 13px;margin:22px 0 20px;border:1px solid oklch(0.90 0.027 280);border-radius:14px;background:linear-gradient(115deg,oklch(0.98 0.01 280),oklch(0.94 0.035 282));box-shadow:0 3px 10px oklch(0.45 0.12 280 / .035); }
.wallet-mark { display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:white;color:var(--primary); }
.wallet-mark svg { width:20px;height:20px; }
.wallet-strip strong { display:block;font-size:13px;font-weight:600; }
.wallet-strip small { display:block;font-size:9px;color:var(--muted);margin-top:5px; }
.wallet-link { display:flex;align-items:center;gap:3px;margin-left:auto;color:var(--primary);font-size:11px;white-space:nowrap; }
.wallet-link svg { width:13px;height:13px; }
.test-catalog { display:grid;grid-template-columns:1fr 1fr;gap:13px; }
.test-tile { position:relative;isolation:isolate;overflow:hidden;min-height:219px;padding:18px 15px;border-radius:17px;color:white;background:linear-gradient(145deg,#20234f,#5955a4);box-shadow:0 8px 20px #27215316;transition:transform 200ms var(--ease),box-shadow 200ms var(--ease); }
.test-tile::before { content:"";position:absolute;width:170px;height:170px;right:-88px;top:-41px;border-radius:50%;border:1px solid #ffffff30;box-shadow:0 0 0 24px #ffffff06,0 0 0 49px #ffffff05;z-index:-1; }
.test-tile::after { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0,#ffffff14,transparent 65%); }
.test-tile:hover { transform:translateY(-3px);box-shadow:0 11px 24px #27215324; }
.test-tile:active { transform:scale(.975); }
.theme-startup.test-tile,.theme-startup.result-hero { background:linear-gradient(140deg,#1b4041,#4b7c71); }
.theme-fortune.test-tile,.theme-fortune.result-hero { background:linear-gradient(140deg,#432c50,#986379); }
.theme-personality.test-tile,.theme-personality.result-hero { background:linear-gradient(140deg,#283b56,#6d89a6); }
.tile-top { display:flex;align-items:center;justify-content:space-between; }
.tile-icon { display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff32;border-radius:12px;background:linear-gradient(145deg,#ffffff20,#ffffff05); }
.tile-icon svg { width:20px;height:20px; }
.tile-index { color:#ffffffa6;font-size:10px;letter-spacing:.08em; }
.test-tile h2 { font-size:19px;font-weight:600;line-height:1.5;letter-spacing:-.025em;margin-top:16px;white-space:nowrap; }
.test-tile p { color:#ffffffcf;font-size:10px;line-height:1.8;margin-top:5px; }
.tile-meta { display:block;font-size:9px;color:#ffffffad;margin-top:11px; }
.tile-start { display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:13px;border-top:1px solid #ffffff26;font-size:11px; }
.tile-start svg { width:17px;height:17px;transition:transform 200ms var(--ease); }
.test-tile:hover .tile-start svg { transform:translateX(3px); }
.home-bottom-note { display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;color:var(--muted);font-size:10px; }
.home-bottom-note svg { width:14px;height:14px; }
.merchant-footer { display:flex;justify-content:center;gap:12px;color:var(--muted);font-size:10px;line-height:2;margin-top:27px; }
.merchant-footer a { min-height:32px;display:inline-flex;align-items:center; }
.merchant-footer a:hover { color:var(--primary);text-decoration:underline; }
.intro-float-label { display:flex;align-items:center;gap:6px;white-space:nowrap;left:48px; }
.intro-float-label svg { width:13px;height:13px; }
.intro-visual.theme-startup .aura-orb { filter:hue-rotate(115deg) saturate(.62); }
.intro-visual.theme-fortune .aura-orb { filter:hue-rotate(37deg) saturate(.8); }
.intro-visual.theme-personality .aura-orb { filter:hue-rotate(-29deg) saturate(.66); }
[data-route="intro"] .main,[data-route="quiz"] .main { padding-bottom:30px; }
.answer-label { flex:1;line-height:1.8; }
.answer-number { flex-shrink:0; }
.answer-indicator { flex-shrink:0;width:17px; }
.answer-option { min-height:65px;gap:11px;font-size:13px; }
.quota-note { justify-content:center;margin-top:22px; }
.quiz-main .question-heading { animation:question-arrive 240ms var(--ease) both; }
@keyframes question-arrive { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:translateY(0); } }
.redeem-main .page-title,.admin-main .page-title { font-size:29px; }
.redeem-emblem { display:grid;place-items:center;width:65px;height:65px;margin:5px 0 25px;border:1px solid #d9d3f3;border-radius:22px;background:linear-gradient(140deg,#fbfaff,#ddd6f8);box-shadow:0 8px 20px #7771a516;color:var(--primary);transform:rotate(-8deg); }
.redeem-emblem svg { width:31px;height:31px; }
.wallet-card { margin:25px 0;padding:22px 20px;border-radius:16px;background:radial-gradient(circle at 100% 0,#716cc366,transparent 70%),linear-gradient(135deg,#23234f,#494480);color:white;box-shadow:0 8px 18px #25204415; }
.wallet-card > span { display:block;font-size:11px;color:#ece9ffca; }
.wallet-card > strong { display:block;font-size:27px;line-height:1.5;margin-top:8px;font-weight:600; }
.wallet-card > small { display:block;font-size:11px;color:#ece9ffca;margin-top:6px; }
.activation-form label,.admin-auth label,.generate-form label { font-size:12px;line-height:1.8;display:block;font-weight:550; }
.activation-form input,.admin-auth input,.generate-form input,.generate-form select { display:block;width:100%;min-width:0;min-height:48px;margin:8px 0 15px;padding:12px 11px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);outline-offset:2px;font-size:13px; }
.activation-form input { font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.01em; }
input::placeholder { color:var(--muted);opacity:.8; }
.inline-message { font-size:11px;line-height:1.9;color:var(--muted);margin-top:12px;min-height:20px;overflow-wrap:anywhere; }
.inline-message.error,.danger-text { color:var(--danger); }
.inline-message.success { color:var(--green);padding:12px;border-radius:9px;background:var(--green-soft); }
.redemption-steps { margin-top:30px; }
.redemption-steps h2,.active-codes h2,.panel h2 { font-size:16px;line-height:1.7;font-weight:600; }
.redemption-steps p { display:flex;gap:11px;font-size:12px;line-height:1.95;color:var(--muted);margin-top:16px; }
.redemption-steps p > span { color:var(--primary);font-size:11px;font-weight:600;padding-top:2px; }
.active-codes { margin-top:28px; }
.active-codes > div { display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:16px 0;border-bottom:1px solid var(--line);font-size:11px; }
.active-codes strong { font-weight:500;font-family:ui-monospace,monospace; }
.active-codes small { width:100%;color:var(--muted);font-size:10px; }
.panel { padding:20px 17px;background:linear-gradient(135deg,#ffffff,#f9f8ff);border:1px solid var(--line);border-radius:15px;margin-top:23px; }
.panel > p,.admin-auth p { font-size:11px;line-height:1.9;color:var(--muted);margin-top:10px; }
.admin-auth .button { margin-top:16px;font-size:12px; }
.admin-auth form { margin-top:24px;padding-top:19px;border-top:1px solid var(--line); }
.admin-auth form .button { margin-top:0; }
.admin-connected { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);margin-top:19px; }
.admin-connected svg { width:16px;height:16px; }
.admin-connected .text-button { margin-left:auto;font-size:10px; }
.generate-form { margin-top:17px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 12px; }
.generate-form select { appearance:auto; }
.code-list { margin-top:12px; }
.code-row { border-bottom:1px solid var(--line);padding:17px 0; }
.code-row:last-child { border:0;padding-bottom:0; }
.code-row > div:first-child { display:flex;align-items:center;justify-content:space-between;gap:5px; }
.code-row code { font-size:10px;overflow-wrap:anywhere; }
.code-status { white-space:nowrap;font-size:9px;padding:5px 7px;border-radius:5px;color:var(--green);background:var(--green-soft); }
.code-status.revoked { color:var(--danger);background:#f9e7e6; }
.code-row p { font-size:11px;line-height:1.9;margin-top:9px;overflow-wrap:anywhere; }
.code-row small { display:block;font-size:9px;color:var(--muted);line-height:1.9;margin-top:4px; }
.code-row-actions { display:flex;justify-content:space-between;gap:7px;margin-top:6px; }
.code-row-actions .text-button { font-size:10px; }
.codes-raw { max-height:250px;overflow:auto;padding:12px;background:var(--surface);border-radius:9px;margin:16px 0; }
.codes-raw code { display:block;font-size:11px;line-height:2.3;white-space:nowrap; }
.fresh-codes .report-actions-row .button { padding-left:9px;padding-right:9px;font-size:11px; }
.fresh-codes .section-heading span { font-size:10px;color:var(--danger); }
.legacy-prompt { margin-top:18px; }
.legacy-prompt h3 { font-size:13px; }
.legacy-prompt p { font-size:12px;line-height:1.9;color:var(--muted);margin-top:8px; }
@media(max-width:360px) {
 .test-catalog{gap:10px}.test-tile{padding:15px 12px;min-height:211px}.test-tile h2{font-size:17px}.test-tile p{font-size:9px}.wallet-strip{gap:7px;padding:13px 10px}.wallet-link{font-size:10px}.wallet-strip small{font-size:8px}.answer-option{padding:12px;font-size:12px;gap:9px}.activation-form input{font-size:10px}.home-heading{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.quiz-main .question-heading{animation:none}.test-tile,.tile-start svg{transition:none}}
.skip-link:not(:focus-visible) { transform:translateY(-180%);opacity:0;pointer-events:none; }
.skip-link:focus-visible { transform:none;opacity:1;pointer-events:auto; }

/* Detailed interpretation: evidence, tradeoffs and a practical follow-up. */
.report-edition { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:25px 0 14px;font-size:11px;color:var(--primary); }
.report-edition > span { display:flex;align-items:center;gap:6px; }
.report-edition svg { width:15px;height:15px; }
.report-edition small { color:var(--muted);font-size:9px; }
.report-chapters { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:sticky;top:0;z-index:21;padding:9px 0;background:oklch(0.985 0.008 273 / .97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line); }
.report-chapters button { min-height:38px;font-size:11px;border:0;border-radius:9px;background:var(--lilac);color:var(--primary);transition:transform 160ms var(--ease),background 160ms var(--ease); }
.report-chapters button:active { transform:scale(.96); }
.report-chapters button:hover { background:oklch(0.89 0.06 280); }
.insight-section { margin-top:35px;scroll-margin-top:77px; }
.insight-section:focus { outline:none; }
.insight-heading { display:flex;align-items:flex-start;gap:10px;margin-bottom:19px; }
.insight-heading > span { font-size:10px;line-height:1.7;color:var(--primary);background:var(--lilac);padding:4px 7px;border-radius:6px;flex-shrink:0;margin-top:2px; }
.insight-heading h2 { font-size:18px;line-height:1.65;font-weight:600;letter-spacing:-.02em; }
.insight-quote { margin:0 0 19px;padding:4px 0 5px 17px;border-left:3px solid var(--primary-light);font-size:22px;line-height:1.8;font-weight:550;letter-spacing:-.02em; }
.insight-copy { font-size:14px;line-height:2.05;color:var(--muted); }
.pattern-note { margin-top:20px;padding:17px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(125deg,#f8f6ff,#fdfcff); }
.pattern-note > span { color:var(--primary);font-size:11px;font-weight:550; }
.pattern-note p { color:var(--muted);font-size:12px;line-height:1.95;margin-top:8px; }
.insight-caption { font-size:12px;line-height:1.95;color:var(--muted);margin:-5px 0 18px; }
.evidence-list { display:grid;gap:13px; }
.evidence-card { padding:17px 16px;background:#fbfaff;border:1px solid var(--line);border-radius:13px; }
.evidence-top { display:flex;gap:9px;align-items:center; }
.evidence-top > span { font-size:10px;color:var(--primary);letter-spacing:.04em; }
.evidence-top h3 { font-size:13px;line-height:1.8;font-weight:600; }
.evidence-card > blockquote { font-size:13px;line-height:1.9;margin:12px 0 8px;font-weight:550; }
.evidence-card > p,.evidence-card details p { font-size:12px;line-height:1.95;color:var(--muted); }
.evidence-card summary { font-size:10px;color:var(--primary);cursor:pointer;min-height:32px;padding-top:9px; }
.evidence-card details p { margin-top:9px; }
.strengths-list { display:grid;gap:13px; }
.insight-card { padding:20px 17px;border-radius:13px; }
.strength-card { background:linear-gradient(120deg,#edf6f2,#f6faf8);border:1px solid #d9e9e0; }
.blind-card { background:linear-gradient(120deg,#faf2ed,#fdf8f4);border:1px solid #eee0d5; }
.card-eyebrow { color:#3c6456;font-size:10px; }
.blind-card .card-eyebrow { color:#8c6248; }
.insight-card h3 { font-size:16px;line-height:1.75;font-weight:550;margin:9px 0; }
.insight-card p { color:var(--muted);font-size:13px;line-height:2; }
.nuance-section { padding-bottom:25px;border-bottom:1px solid var(--line); }
.domain-list { display:grid;gap:17px; }
.domain-card { display:flex;gap:13px;padding:19px 0;border-bottom:1px solid var(--line); }
.domain-card:last-child { padding-bottom:0;border:0; }
.domain-index { color:var(--primary);font-size:11px;padding-top:5px; }
.domain-card h3 { font-size:16px;line-height:1.75;font-weight:550; }
.domain-card p { color:var(--muted);font-size:13px;line-height:2;margin-top:7px; }
.domain-step { margin-top:13px;padding:12px 14px;border-radius:10px;background:var(--surface); }
.domain-step > span { color:var(--primary);font-size:10px; }
.domain-step p { font-size:12px;margin-top:4px; }
.environment-block { padding:18px 16px;border:1px solid #d9e9e0;border-radius:12px;background:#f5faf7; }
.environment-block + .environment-block { margin-top:12px; }
.environment-block h3 { display:flex;gap:7px;align-items:center;font-size:13px;line-height:1.7;font-weight:550;color:#355a4c;margin-bottom:9px; }
.environment-block h3 svg { width:15px;height:15px; }
.environment-block p { font-size:12px;line-height:1.95;color:var(--muted);position:relative;padding-left:12px;margin-top:7px; }
.environment-block p::before { content:"·";position:absolute;left:0; }
.environment-drain { background:#faf7f4;border-color:#ede2d8; }
.environment-drain h3 { color:#85614c; }
.communication-card { padding:20px 17px;margin-top:15px;border-radius:13px;background:linear-gradient(120deg,#eeeafa,#f7f4ff); }
.communication-card h3 { font-size:11px;color:var(--primary);font-weight:550; }
.communication-card blockquote { margin:11px 0 0;font-size:14px;line-height:2; }
.seven-day-plan { list-style:none;padding:0 0 0 17px;margin:0 0 0 4px;border-left:1px solid #d8d0ef; }
.seven-day-plan li { position:relative;padding:0 0 27px 10px; }
.seven-day-plan li:last-child { padding-bottom:0; }
.seven-day-plan li::before { content:"";position:absolute;left:-22px;top:5px;width:9px;height:9px;background:var(--primary-light);border:2px solid white;border-radius:50%; }
.seven-day-plan li > span { color:var(--primary);font-size:11px; }
.seven-day-plan h3 { font-size:15px;line-height:1.8;font-weight:550;margin:8px 0; }
.seven-day-plan p { font-size:13px;line-height:2;color:var(--muted); }
.reflection-checks { border-top:1px solid var(--line); }
.reflection-checks p { display:flex;align-items:flex-start;gap:11px;border-bottom:1px solid var(--line);padding:15px 0;font-size:13px;line-height:1.9; }
.reflection-checks span { color:var(--primary);font-size:10px;padding-top:2px;flex-shrink:0; }
.insight-closing { text-align:center;font-size:15px;line-height:2;padding:24px 10px 8px; }
.report-method { border:1px solid var(--line);border-radius:11px;padding:12px 15px;margin-top:20px;background:#fbfaff; }
.report-method summary { font-size:11px;line-height:1.8;cursor:pointer;min-height:26px;color:var(--primary); }
.report-method > p { font-size:11px;line-height:1.95;margin-top:11px;color:var(--muted); }
.report-method .preference-bars { margin-top:15px; }
.legacy-upgrade { margin-top:20px;padding:18px;background:var(--lilac);border-radius:13px; }
.legacy-upgrade p { font-size:12px;color:var(--muted);line-height:1.95; }
.legacy-upgrade .button { font-size:12px;margin-top:14px; }
@media(max-width:360px){.insight-quote{font-size:20px}.insight-heading h2{font-size:17px}.report-chapters button{font-size:10px}.insight-card{padding:17px 14px}}

/* Talent explanation and merchant account sign-in. */
.talent-focus { margin-bottom:23px;padding:20px 17px;border:1px solid #dcd5f4;border-radius:15px;background:radial-gradient(ellipse at 100% 0,#e5e0ff90,transparent 70%),linear-gradient(135deg,#fbfaff,#f2effe); }
.talent-focus > h3 { font-size:22px;line-height:1.7;margin:11px 0 12px;letter-spacing:-.025em;font-weight:600; }
.talent-focus > p { font-size:13px;line-height:2;color:var(--muted); }
.talent-lines { display:grid;gap:13px;margin-top:19px; }
.talent-lines article { border-top:1px solid #ded8ef;padding-top:14px; }
.talent-lines h4 { margin:0;font-size:14px;line-height:1.9;font-weight:550;color:var(--primary); }
.talent-lines p { font-size:12px;line-height:2;color:var(--muted);margin-top:5px; }
.talent-focus details { margin-top:17px; }
.talent-focus summary { font-size:11px;line-height:1.9;color:var(--primary);cursor:pointer;min-height:35px; }
.talent-focus details p { font-size:12px;line-height:2;color:var(--muted);margin-top:9px; }
.talent-focus > .talent-note { font-size:10px;line-height:1.95;margin-top:17px;padding-top:13px;border-top:1px solid #ded8ef; }
.hero-talent { margin-top:17px;padding:12px 13px;border:1px solid #ffffff30;border-radius:10px;background:#ffffff09; }
.hero-talent > span { display:block;font-size:10px;color:#e3e0f7; }
.hero-talent > strong { display:block;font-size:16px;line-height:1.8;font-weight:550;margin-top:5px;color:white; }
.job-description { margin-top:15px; }
.job-description > span { font-size:10px;color:var(--primary);display:block;margin-top:12px; }
.job-description > p { font-size:13px;line-height:2;margin-top:5px; }
.job-skills { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.job-skills > span { color:var(--primary);background:var(--lilac);font-size:10px;line-height:1.6;border-radius:6px;padding:6px 8px; }
.share-report-link { margin-top:17px;font-size:12px; }
.admin-auth #merchant-login-form { border-top:0;margin-top:15px;padding-top:0; }
.admin-auth #merchant-login-form .button { margin-top:5px; }
@media(max-width:360px){.brand-name{font-size:19px;letter-spacing:.07em}.brand-sub{font-size:8px}.talent-focus > h3{font-size:20px}.hero-talent > strong{font-size:14px}}

.migration-notice{display:grid;gap:10px;padding:20px 22px;margin:14px;border:1px solid #bcb4ed;border-radius:20px;background:linear-gradient(135deg,#f1edff,#fff);color:#292351;font-size:13px;line-height:1.6}.migration-notice a{display:flex;align-items:center;gap:8px;color:#4237b2;font-weight:700}.migration-notice svg{width:18px;height:18px}.migration-notice span{color:#66617c}