:root {
  --v4-abyss:#071f25;
  --v4-sea:#123b42;
  --v4-paper:#eee8dc;
  --v4-ivory:#fffaf0;
  --v4-gold:#d8b979;
  --v4-red:#a8433e;
  --v4-muted:#6c7d7f;
  --v4-line:rgba(9,43,49,.14);
  --v4-enter:cubic-bezier(.18,.88,.24,1);
  --v4-exit:cubic-bezier(.5,0,.8,.2);
}

body { font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif; }
button { touch-action:manipulation; }
.choice,.action,.agreement-next { min-height:48px; }
.icon-button { width:44px; height:44px; }
.sheet-close,.sheet-tab { min-width:44px; min-height:44px; }
.chapter-number,.case-index,.start-route,.scene-label,.agreement-reader-head span,
.agreement-reader-head > b,.agreement-paper > small,.compact-stage-head span,
.receipt-amount,.product-price,.share-score b { font-family:"Times New Roman","Noto Sans SC",serif; }

/* Opening art direction: a night-departure dossier, not a generic card stack. */
.start-screen {
  padding:94px 22px max(20px,env(safe-area-inset-bottom));
  justify-content:flex-end;
}
.start-screen::after {
  background:
    linear-gradient(180deg,rgba(3,16,20,.02) 0%,rgba(3,16,20,.18) 32%,rgba(3,16,20,.78) 67%,rgba(3,16,20,.98) 100%),
    radial-gradient(circle at 82% 22%,rgba(227,188,112,.18),transparent 28%),
    linear-gradient(105deg,rgba(255,255,255,.08),transparent 34%);
}
.case-index {
  position:absolute; z-index:3; top:139px; left:22px; right:22px;
  display:flex; align-items:center; justify-content:space-between;
  color:rgba(255,255,255,.58); font-size:10px; letter-spacing:.15em;
  animation:v4FadeDown .55s .08s var(--v4-enter) both;
}
.case-index::before { content:""; position:absolute; left:0; right:0; bottom:-9px; height:1px; background:linear-gradient(90deg,var(--v4-gold),rgba(255,255,255,.18) 40%,transparent); }
.case-index b { color:var(--v4-gold); font-weight:700; }
.start-copy { margin-top:112px; }
.start-screen .kicker { margin-bottom:5px; }
.start-screen .title { margin:10px 0 8px; font-size:clamp(54px,15vw,66px); }
.start-screen .title em {
  min-width:258px; padding:9px 17px 11px 13px; gap:10px;
  border-radius:5px 22px 22px 5px;
  background:linear-gradient(100deg,rgba(121,43,40,.96),rgba(76,30,31,.91));
  border:1px solid rgba(255,227,177,.38);
  box-shadow:0 18px 44px rgba(21,5,6,.35);
  clip-path:polygon(0 0,100% 0,100% 38%,97% 50%,100% 62%,100% 100%,0 100%,0 62%,3% 50%,0 38%);
}
.start-screen .title em::before {
  content:"资格编号 3301 · 仅限本人"; position:absolute; top:9px; right:13px;
  color:rgba(255,238,206,.52); font:700 8px/1 "Times New Roman","Microsoft YaHei",sans-serif; letter-spacing:.08em;
}
.start-screen .title em b { padding-top:8px; font:inherit; }
.start-screen .title em > i {
  position:absolute; z-index:3; top:0; bottom:0; left:-8%; width:2px;
  background:#ffe4a4; box-shadow:0 0 8px 2px rgba(255,218,143,.58);
  animation:v4IdentityScan 3.1s 1.2s ease-in-out infinite;
}
.start-screen .title small { margin-top:8px; border-radius:3px; transform:rotate(-2deg); }
.opening-question {
  margin:10px 0 10px; padding-left:13px; display:flex; align-items:center; gap:9px;
  border-left:2px solid var(--v4-gold); color:#fff;
  animation:v4FadeUp .52s .5s var(--v4-enter) both;
}
.opening-question span { color:rgba(255,255,255,.62); font-size:12px; }
.opening-question b { font-size:15px; letter-spacing:.02em; }
.start-screen .subtitle { margin-top:0; color:rgba(255,255,255,.78); }
.incoming-card {
  border-radius:8px 18px 18px 8px; border-left:3px solid var(--v4-gold);
  background:linear-gradient(100deg,rgba(6,29,34,.88),rgba(12,45,50,.67));
}
.incoming-card::after {
  content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit;
  border:1px solid rgba(255,255,255,.17); opacity:0; animation:v4IncomingRing 1.2s .85s ease-out 1;
}
.start-button { border-radius:8px 18px 18px 8px; }
.start-button i { border-radius:8px 13px 13px 8px; }

/* Chats occupy the full device; the decision is a later state, not permanent footer UI. */
.chat-thread { padding-bottom:32px; transition:padding-bottom .24s ease; }
.chat-screen.choices-ready .chat-thread { padding-bottom:112px; }
.chat-contact { position:relative; }
.chat-contact::after {
  content:""; position:absolute; left:35px; top:31px; width:8px; height:8px;
  border:2px solid #15373c; border-radius:50%; background:#7fd3aa;
}
.chat-beat.is-visible { transition:opacity .26s ease,transform .42s var(--v4-enter); }
.chat-beat.is-visible .bubble { animation:v4MessagePop .42s var(--v4-enter) both; transform-origin:10% 0; }
.bubble-row.me.chat-beat.is-visible .bubble { transform-origin:90% 0; }
.bubble mark {
  position:relative; padding:0 2px 1px; color:inherit; border:0; border-radius:0;
  background:linear-gradient(transparent 53%,rgba(218,185,121,.7) 53%,rgba(218,185,121,.7) 90%,transparent 90%);
  box-shadow:none; white-space:normal; animation:v4MarkerReveal .48s .2s var(--v4-enter) both;
}
.bubble mark::after { content:""; display:inline-block; width:4px; height:4px; margin:0 1px 2px 3px; transform:rotate(45deg); background:var(--v4-red); }
.typing-row.is-active > span { animation:v4TypingCard .3s var(--v4-enter) both; }
.chat-decision {
  max-height:min(64%,560px); border-radius:18px 18px 0 0;
  transform:translateY(calc(100% + 20px));
}
.chat-decision .choice { min-height:64px; }
.chat-scrim { backdrop-filter:blur(1px); }

/* Page 03 is deliberately split: readable agreement, then a separate judgement. */
.agreement-reader-screen {
  height:100%; min-height:0!important; padding:104px 14px max(32px,env(safe-area-inset-bottom));
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px;
  overflow:hidden; color:#fff;
}
.agreement-reader-screen::after,.agreement-choice-screen::after {
  background:linear-gradient(180deg,rgba(3,20,24,.37),rgba(3,20,24,.7) 45%,rgba(3,20,24,.96));
}
.agreement-reader-head {
  position:relative; z-index:3; display:flex; align-items:end; justify-content:space-between;
  padding:0 2px 7px; border-bottom:1px solid rgba(255,255,255,.25);
}
.agreement-reader-head span { color:var(--v4-gold); font-size:11px; letter-spacing:.1em; }
.agreement-reader-head h2 { margin:3px 0 0; font-size:21px; line-height:1.15; }
.agreement-reader-head > b { color:rgba(255,255,255,.55); font-size:9px; letter-spacing:.16em; }
.agreement-reader-intro { position:relative; z-index:3; padding:4px 2px 1px; animation:v4FadeUp .5s var(--v4-enter) both; }
.agreement-reader-intro > span { color:var(--v4-gold); font-size:11px; font-weight:700; letter-spacing:.08em; }
.agreement-reader-intro h2 { margin:4px 0 8px; font-family:"STSong","Songti SC",serif; font-size:27px; line-height:1.16; letter-spacing:-.03em; }
.assurance-strip { display:flex; flex-wrap:wrap; gap:6px; }
.assurance-strip i { padding:4px 7px; border:1px solid rgba(255,255,255,.24); border-radius:3px; color:rgba(255,255,255,.8); background:rgba(5,29,34,.38); font-size:10px; font-style:normal; }
.assurance-strip i::before { content:"✓"; margin-right:4px; color:var(--v4-gold); font-family:Arial,sans-serif; }
.agreement-paper-frame {
  position:relative; z-index:3; min-height:0; padding:8px 8px 27px;
  border:1px solid rgba(255,255,255,.28); border-radius:16px;
  background:rgba(239,233,221,.96); box-shadow:0 18px 46px rgba(0,0,0,.22);
  animation:v4PaperIn .56s .12s var(--v4-enter) both;
}
.agreement-paper-scroll { height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(9,43,49,.28) transparent; }
.agreement-paper-scroll:focus-visible { outline:3px solid rgba(216,185,121,.72); outline-offset:2px; border-radius:8px; }
.agreement-paper { min-height:100%; padding:18px 14px 22px; color:#16373c; background:#fffdf8; border-radius:10px; overflow:hidden; }
.agreement-paper::before { height:3px; }
.agreement-paper > small { display:block; color:#9a8056; font-size:9px; letter-spacing:.12em; }
.agreement-paper h3 { margin:8px 0 14px; padding-right:72px; font-size:18px; }
.agreement-paper p { margin:0; padding:11px 0; display:grid; grid-template-columns:29px minmax(0,1fr); gap:8px; border-top:1px solid rgba(11,52,59,.1); font-size:14px; line-height:1.55; }
.agreement-paper p b { color:#b08d50; font:700 12px/1.7 "Times New Roman",serif; }
.agreement-paper p span { min-width:0; }
.agreement-paper strong { color:var(--v4-red); }
.agreement-scroll-cue { position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; align-items:center; gap:7px; color:#63777a; font-size:9px; letter-spacing:.06em; }
.agreement-scroll-cue span { width:28px; height:1px; background:#8c9a9b; }
.agreement-reader-footer {
  position:relative; z-index:4; min-height:67px; padding:8px 8px 8px 13px;
  display:grid; grid-template-columns:minmax(0,1fr) 108px; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.32); border-radius:12px;
  background:rgba(7,31,37,.9); box-shadow:0 10px 30px rgba(0,0,0,.22); backdrop-filter:blur(14px);
}
.agreement-reader-footer small { display:block; margin-bottom:3px; color:var(--v4-gold); font-size:10px; }
.agreement-reader-footer b { display:block; font-size:13px; line-height:1.35; }
.agreement-next { width:108px; height:52px; padding:0 10px 0 13px; display:flex; align-items:center; justify-content:space-between; gap:7px; border:0; border-radius:9px; color:#17383c; background:var(--v4-gold); box-shadow:0 8px 20px rgba(0,0,0,.18); cursor:pointer; font-size:13px; font-weight:800; transition:filter .15s ease,transform .15s ease; }
.agreement-next svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.agreement-next:active { filter:brightness(.9); transform:scale(.95); }
.agreement-next:focus-visible { outline:3px solid #fff; outline-offset:2px; }

.agreement-choice-screen {
  height:100%; min-height:0!important; padding:104px 14px max(32px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px; overflow:hidden; color:#fff;
}
.compact-stage-head { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; min-height:30px; border-bottom:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.7); font-size:11px; }
.compact-stage-head span { color:var(--v4-gold); letter-spacing:.1em; }
.judgement-prompt { position:relative; z-index:3; padding:8px 2px 4px; }
.judgement-kicker { display:block; margin-bottom:6px; color:var(--v4-gold); font-size:11px; font-weight:700; letter-spacing:.07em; }
.judgement-prompt h2 { margin:0; font-family:"STSong","Songti SC",serif; font-size:clamp(28px,8vw,34px); line-height:1.12; }
.judgement-prompt h2 em { position:relative; color:#fff; font-style:normal; }
.judgement-prompt h2 em::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:6px; transform:skewX(-16deg); background:rgba(216,185,121,.55); z-index:-1; }
.judgement-prompt p { margin:8px 0 0; color:rgba(255,255,255,.68); font-size:13px; line-height:1.55; }
.purpose-map { position:relative; z-index:3; min-height:51px; padding:7px 9px; display:flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.21); border-radius:10px; background:rgba(5,28,33,.58); font-size:10px; }
.purpose-map span,.purpose-map b { flex:0 1 auto; line-height:1.25; }
.purpose-map b { color:#ffe2a5; }
.purpose-map i { flex:1; min-width:12px; height:1px; position:relative; background:rgba(255,255,255,.3); }
.purpose-map i::after { content:""; position:absolute; right:-1px; top:-2px; width:5px; height:5px; transform:rotate(45deg); border-top:1px solid rgba(255,255,255,.55); border-right:1px solid rgba(255,255,255,.55); }
.agreement-choice-panel { position:relative; z-index:4; margin-top:auto; padding:10px; border:1px solid rgba(255,255,255,.28); border-radius:15px; background:rgba(239,233,221,.97); box-shadow:0 18px 44px rgba(0,0,0,.24); }
.agreement-choice-panel .choice-grid { gap:8px; }
.agreement-choice-panel .choice { min-height:64px; padding:9px 10px 9px 13px; border-radius:11px; }
.agreement-choice-panel .choice strong { font-size:15px; }
.agreement-choice-panel .choice small { margin-top:2px; font-size:11px; }
.agreement-choice-panel .choice-arrow { flex-basis:32px; width:32px; height:32px; border-radius:8px; }

@keyframes v4FadeDown { from{opacity:0;transform:translateY(-9px)} to{opacity:1;transform:none} }
@keyframes v4FadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes v4IdentityScan { 0%,15%{left:-8%;opacity:0} 23%{opacity:1} 70%{left:105%;opacity:1} 78%,100%{left:105%;opacity:0} }
@keyframes v4IncomingRing { 0%{opacity:0;transform:scale(.97)} 34%{opacity:1} 100%{opacity:0;transform:scale(1.035)} }
@keyframes v4MessagePop { from{opacity:.25;transform:scale(.94)} to{opacity:1;transform:none} }
@keyframes v4MarkerReveal { from{background-size:0 100%} to{background-size:100% 100%} }
@keyframes v4TypingCard { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
@keyframes v4PaperIn { from{opacity:0;transform:translateY(20px) rotateX(5deg)} to{opacity:1;transform:none} }

@media (max-height:740px) {
  .start-screen { padding-top:86px; }
  .case-index { top:124px; }
  .start-copy { margin-top:92px; }
  .start-screen .title { font-size:50px; margin-top:7px; }
  .start-screen .title em { min-width:226px; padding-top:7px; padding-bottom:8px; }
  .opening-question { margin:7px 0; }
  .start-screen .subtitle { font-size:13px; line-height:1.5; }
  .incoming-card { margin:9px 0 8px; padding-top:8px; padding-bottom:8px; }
  .agreement-reader-screen,.agreement-choice-screen { padding-top:96px; gap:7px; }
  .agreement-reader-intro h2 { margin:2px 0 5px; font-size:23px; }
  .agreement-paper { padding-top:14px; }
  .agreement-paper p { padding:8px 0; font-size:14px; }
  .agreement-reader-footer { min-height:60px; }
  .agreement-reader-footer { grid-template-columns:minmax(0,1fr) 100px; }
  .agreement-next { width:100px; height:46px; padding-left:10px; font-size:12px; }
  .judgement-prompt { padding-top:3px; }
  .judgement-prompt h2 { font-size:28px; }
  .judgement-prompt p { margin-top:5px; font-size:12px; }
  .purpose-map { min-height:45px; }
  .agreement-choice-panel .choice { min-height:59px; }
}

@media (max-width:370px) {
  .start-screen { padding-left:18px; padding-right:18px; }
  .case-index,.start-route { left:18px; }
  .agreement-reader-screen,.agreement-choice-screen { padding-left:10px; padding-right:10px; }
  .agreement-reader-footer b { font-size:12px; }
  .purpose-map { font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
  .start-screen .title em > i,.incoming-card::after { animation:none!important; }
  .chat-beat.is-visible .bubble,.bubble mark,.typing-row.is-active > span,.agreement-paper-frame,
  .case-index,.opening-question { animation:none!important; }
  .chat-thread { scroll-behavior:auto; }
  .chat-beat.is-visible { transform:none!important; transition:opacity .16s ease!important; }
}