:root { color-scheme:light; --ink:#24262b; --muted:#6c7175; --line:#e4e6e7; --berry:#b73559; --teal:#125559; --soft:#f8eff2; --mint:#edf5f4; }
* { box-sizing:border-box; margin:0; padding:0; letter-spacing:0 !important; }
body { background:#f3f5f5; color:var(--ink); font:15px/1.7 -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; } button:disabled { cursor:wait; opacity:.55; }
button:focus-visible,a:focus-visible { outline:3px solid #69aeb1; outline-offset:3px; }
button { border:0; background:none; } a { color:var(--teal); text-underline-offset:3px; }
svg { width:21px; height:21px; flex-shrink:0; stroke-width:1.6; vertical-align:middle; }
h1,h2,h3 { font-family:'Noto Serif SC','Songti SC','STSong',serif; font-weight:600; line-height:1.5; }
h1 { font-size:30px; } h2 { font-size:24px; } h3 { font-size:19px; } p { overflow-wrap:anywhere; }
.app-shell { width:100%; max-width:600px; min-height:100dvh; margin:auto; background:white; padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
.topbar { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); }
.brand { font-family:'Songti SC',serif; font-weight:700; font-size:18px; }
.icon-button { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; border-radius:6px; }
.icon-button:hover { background:var(--soft); }
.home-head { text-align:center; padding:26px 20px 22px; }
.home-head h1 { color:var(--berry); font-size:38px; }
.home-head p { margin-top:3px; font-size:18px; color:var(--berry); }
.hero-art { width:100%; aspect-ratio:2.1; display:block; object-fit:cover; object-position:center 39%; }
.entry-list { padding:0 22px; }
.entry { display:flex; gap:16px; align-items:center; text-align:left; width:100%; padding:20px 0; border-bottom:1px solid var(--line); }
.entry>svg:first-child { width:28px; height:28px; color:var(--berry); }
.entry span { flex:1; min-width:0; } .entry b { display:block; font-weight:500; font-size:17px; }
.entry small { font-size:12px; color:var(--muted); display:block; margin-top:3px; }
.entry:hover b { color:var(--berry); }
.trust { padding:18px 22px 8px; text-align:center; color:var(--muted); font-size:12px; }
.home-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; padding:10px 16px; font-size:10px; }
.home-footer a { color:var(--muted); text-decoration:none; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); max-width:600px; width:100%; display:flex; background:rgba(255,255,255,.97); border-top:1px solid var(--line); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); }
.bottom-nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-size:11px; min-height:48px; }
.bottom-nav button.active { color:var(--berry); }
.page { padding:26px 24px; } .page>h1,.page>h2 { margin-bottom:14px; }
.muted { color:var(--muted); } .small { font-size:12px; } .eyebrow { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--berry); margin-bottom:20px; }
.quiz-progress { height:3px; background:var(--line); margin:12px 0 28px; }
.quiz-progress span { display:block; height:100%; background:var(--berry); transition:width .2s; }
.quiz-page { min-height:calc(100dvh - 160px); display:flex; flex-direction:column; }
.question-options { display:grid; gap:12px; margin-top:24px; }
.option { width:100%; min-height:66px; display:flex; align-items:center; text-align:left; gap:12px; border:1px solid var(--line); border-radius:8px; padding:16px; background:white; }
.option span { flex:1; } .option svg { color:var(--muted); }
.option[aria-pressed=true] { border-color:var(--berry); background:var(--soft); color:var(--berry); }
.option[aria-pressed=true] svg { color:var(--berry); }
.primary,.secondary { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:12px 16px; border-radius:7px; font-weight:600; }
.primary { background:var(--teal); color:white; } .primary.berry { background:var(--berry); }
.secondary { background:white; border:1px solid var(--line); color:var(--teal); }
.quiz-footer { margin-top:auto; padding-top:30px; }
label { display:block; font-weight:600; margin:20px 0 8px; }
select { width:100%; min-height:48px; padding:10px 12px; border:1px solid #bdc6c8; border-radius:6px; background:white; font-size:16px; }
.code-input { width:100%; min-height:52px; padding:12px; border:1px solid #bdc6c8; border-radius:6px; font-size:16px; background:white; }
.redeem-entry { text-align:center; margin:12px 0; }
textarea { width:100%; resize:vertical; min-height:160px; border:1px solid #bdc6c8; border-radius:8px; padding:14px; outline:none; font-size:16px; background:#fcfdfd; line-height:1.8; }
textarea:focus,input:focus { border-color:var(--teal); box-shadow:0 0 0 2px #dceeee; }
.field-meta { display:flex; justify-content:space-between; gap:16px; font-size:11px; color:var(--muted); margin:5px 0 18px; }
.consent { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--muted); font-weight:400; }
.consent input { margin-top:5px; width:16px; height:16px; accent-color:var(--teal); flex-shrink:0; }
.summary-list { border-block:1px solid var(--line); margin-top:20px; padding:12px 0; }
.summary-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:12px; } .summary-row b { font-weight:500; }
.error { background:#fff0f2; border-left:3px solid var(--berry); color:#8f2444; padding:12px 14px; font-size:13px; margin:14px 0; }
.loading { min-height:70dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:32px; gap:18px; }
.spinner { width:36px; height:36px; border:2px solid var(--line); border-top-color:var(--berry); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.report-title { font-size:28px; color:var(--ink); margin:14px 0 22px; }
.report-section { padding:22px 0; border-bottom:1px solid var(--line); }
.report-section h3 { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:var(--berry); }
.report-section ul { padding-left:20px; } .report-section li { padding:5px 0; }
.report-section p { line-height:1.9; } .report-section .muted { margin-top:10px; }
.next-step { border-left:3px solid var(--teal); padding:12px 16px; background:var(--mint); margin:16px 0; }
.pay-offer { padding:24px; margin:24px -24px; background:var(--mint); }
.price-line { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; } .price { font:600 32px/1.3 Georgia,serif; color:var(--berry); }
.pay-offer ul { padding-left:18px; margin-bottom:18px; font-size:13px; } .pay-offer p { font-size:12px; margin-top:10px; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; } .actions>* { flex:1; min-width:120px; }
.link-button { color:var(--teal); text-decoration:underline; padding:10px; font-size:13px; }
.persona { width:100%; height:260px; display:block; object-fit:contain; object-position:50% 20%; background:#17140f; margin:16px 0 8px; border-radius:8px; }
.quote { font-family:'Songti SC',serif; font-size:21px; border-left:3px solid var(--berry); padding-left:16px; margin:16px 0; }
.prompt-list { display:flex; flex-direction:column; gap:8px; margin:18px 0; }
.prompt-list button { text-align:left; color:var(--teal); padding:12px; border:1px solid var(--line); border-radius:6px; }
.turn { padding:18px 0; border-bottom:1px solid var(--line); } .turn .user-message { background:var(--mint); border-radius:8px; padding:12px 16px; margin-bottom:18px; white-space:pre-wrap; }
.turn .answer { white-space:pre-wrap; line-height:1.9; } .turn .question { margin-top:14px; color:var(--teal); }
.composer { margin-top:24px; } .composer textarea { min-height:115px; }
.share-preview { width:100%; display:block; border:1px solid var(--line); border-radius:8px; margin:20px 0; }
.toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); padding:10px 20px; background:var(--ink); color:white; border-radius:8px; max-width:90%; z-index:30; }
dialog { margin:auto; border:0; border-radius:8px; padding:26px; width:calc(100% - 40px); max-width:420px; color:var(--ink); }
dialog::backdrop { background:rgba(25,30,35,.45); } dialog p { margin:14px 0; }
@media(min-width:900px) { .app-shell { margin:24px auto; min-height:calc(100dvh - 48px); border:1px solid var(--line); } .home-head { padding-top:30px; } }
@media(max-width:360px) { .page { padding:22px 18px; } .home-head h1 { font-size:33px; } .entry { padding:16px 0; } .entry b { font-size:15px; } .report-title { font-size:25px; } .pay-offer { margin-inline:-18px; padding:22px 18px; } }
@media(prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; transition:none !important; } }