:root {
  color: #321c12;
  background: #eee8e1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #fcf8f2;
  --surface: rgba(255, 255, 255, 0.94);
  --ink: #321c12;
  --muted: #756258;
  --accent: #ed5b31;
  --accent-deep: #d94d28;
  --line: rgba(218, 183, 153, 0.38);
  --shadow: 0 12px 34px rgba(104, 66, 38, 0.09);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #eee8e1; }
body { min-width: 320px; min-height: 100%; margin: 0; font-size: 16px; background: #eee8e1; }
button, input, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, label:has(input:focus-visible) { outline: 3px solid rgba(239, 98, 50, .26); outline-offset: 2px; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }

.site-frame { width: 100%; max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--bg); box-shadow: 0 0 44px rgba(58, 34, 20, .11); }
.page { min-height: 100vh; min-height: 100dvh; padding: 16px 20px calc(32px + env(safe-area-inset-bottom)); }
.page-enter { animation: pageEnter .3s ease-out both; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

.primary-btn, .secondary-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; padding: 10px 18px; border-radius: 28px;
  color: #fff; border: 0; font-size: 18px; font-weight: 750; line-height: 1.25; transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.primary-btn { background: linear-gradient(110deg, #f25e35, #f47e54); box-shadow: 0 9px 20px rgba(226, 88, 48, .24); }
.secondary-btn { color: #d9572d; border: 1.5px solid rgba(234, 103, 58, .58); background: rgba(255, 255, 255, .76); box-shadow: none; }
.primary-btn:active, .secondary-btn:active, .source-actions button:active, .change-actions button:active { transform: scale(.98); opacity: .92; }
.primary-btn:disabled, .secondary-btn:disabled { cursor: wait; opacity: .58; }
.button-spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

.app-header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 54px; margin: -4px -4px 16px; }
.app-header h1 { overflow: hidden; color: #29170f; font-size: 20px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.back-button { display: flex; align-items: center; justify-content: flex-start; width: 48px; height: 48px; padding: 0; color: #25170f; border: 0; background: transparent; }
.back-button span { font-family: Arial, sans-serif; font-size: 48px; font-weight: 300; line-height: 1; transform: translateY(-2px); }
.header-spacer { width: 48px; }

.page-title { margin-top: 7px; color: var(--ink); font-size: clamp(27px, 7.4vw, 34px); font-weight: 850; line-height: 1.24; }
.page-subtitle { margin-top: 9px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.eyebrow { color: #e45e32; font-size: 16px; font-weight: 750; letter-spacing: .5px; }

/* Home */
.home-page { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.home-brand { min-height: 56px; padding: 17px 20px; color: #2c1a11; font-size: 19px; font-weight: 800; text-align: center; border: 1px solid rgba(218, 183, 153, .32); border-radius: 30px; background: rgba(255,255,255,.6); box-shadow: 0 7px 22px rgba(104,66,38,.06); }
.hero-copy { padding: 48px 12px 0; }
.hero-eyebrow { animation: copyEnter .36s ease-out both; }
.hero-title { margin-top: 14px; color: #2d190f; font-family: "Songti SC", "STSong", "SimSun", serif; font-size: clamp(45px, 12.8vw, 61px); font-weight: 700; line-height: 1.12; letter-spacing: -2px; animation: copyEnter .42s .06s ease-out both; }
.hero-title span { color: var(--accent); }
.hero-subtitle { margin-top: 12px; color: #4d3428; font-size: 21px; font-weight: 650; line-height: 1.4; animation: copyEnter .42s .12s ease-out both; }
.hero-image-wrap { position: relative; overflow: hidden; height: min(56vw, 270px); min-height: 220px; margin-top: 26px; border: 1px solid rgba(205,163,125,.36); border-radius: 24px; background: #eadbc9; box-shadow: 0 12px 30px rgba(104,66,38,.13); animation: imageEnter .52s .1s ease-out both; }
.hero-image { width: 100%; height: 100%; object-fit: cover; animation: imageSettle .7s .12s ease-out both; }
.hero-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(74,39,20,.08)); pointer-events: none; }
.steps { display: flex; gap: 8px; margin-top: 25px; }
.step-item { position: relative; display: flex; align-items: center; flex: 1; flex-direction: column; min-width: 0; padding: 22px 4px 16px; border: 1px solid rgba(218,183,153,.34); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(104,66,38,.07); }
.step-number { position: absolute; top: -14px; left: 50%; display: grid; place-items: center; width: 31px; height: 31px; transform: translateX(-50%); border: 3px solid var(--bg); border-radius: 50%; background: linear-gradient(145deg,#f26a42,#f58a60); color: #fff; font-size: 15px; font-weight: 850; }
.step-icon { width: 38px; height: 38px; object-fit: contain; }
.step-label { margin-top: 8px; color: #3a2418; font-size: 15px; font-weight: 750; white-space: nowrap; }
.step-arrow { position: absolute; top: 30px; right: -13px; z-index: 2; color: #ed6c43; font-size: 33px; font-weight: 300; }
.step-enter:nth-child(1) { animation: stepEnter .32s .18s ease-out both; }.step-enter:nth-child(2) { animation: stepEnter .32s .235s ease-out both; }.step-enter:nth-child(3) { animation: stepEnter .32s .29s ease-out both; }
.start-btn { margin-top: 24px; animation: buttonEnter .34s .3s ease-out both, gentlePulse 2.4s .9s ease-in-out 3; }.sparkle { font-size: 24px; }.resume-btn { margin-top: 12px; }
.scope-note { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 15px 15px 0; color: #5e493e; border: 1px solid rgba(218,183,153,.28); border-radius: 15px; background: rgba(255,255,255,.56); font-size: 15px; }
.scope-shield { display: grid; place-items: center; width: 24px; height: 27px; color: #d96238; border: 2px solid #d96238; border-radius: 11px 11px 14px 14px; font-size: 13px; font-weight: 900; }

/* Questionnaire */
.questionnaire-page { padding: calc(8px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
.progress-head { display: flex; align-items: flex-start; gap: 13px; margin: 0 3px 20px; }
.progress-count { min-width: 58px; padding: 7px 11px; color: #fff; border-radius: 999px; background: linear-gradient(135deg,#ff7a4c,#eb4e26); font-size: 16px; font-weight: 800; text-align: center; }
.progress-copy { flex: 1; }.progress-label { margin-bottom: 7px; color: #ee582e; font-size: 16px; font-weight: 750; }
.progress-track { overflow: hidden; height: 5px; border-radius: 999px; background: #f1ded0; }.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff9b55,#ed4e2a); transition: width .3s ease; }
.profile-banner { width: 100%; height: 170px; margin-top: 18px; object-fit: cover; border-radius: 22px; box-shadow: 0 10px 28px rgba(93,55,27,.1); }
.form-card { margin-top: 18px; padding: 22px 18px; }.input-label { display: block; color: #382319; font-size: 16px; font-weight: 750; }.required { margin-left: 4px; color: #e85c35; font-size: 14px; }.field-gap { margin-top: 22px; }
.input-shell { display: flex; align-items: center; margin-top: 9px; border: 1px solid #eadbce; border-radius: 15px; background: #fffaf5; }.text-input { width: 100%; height: 49px; padding: 0 14px; color: #302017; border: 1px solid #eadbce; border-radius: 15px; background: #fffaf5; font-size: 17px; }.input-shell .text-input { border: 0; background: transparent; }.unit { padding-right: 15px; color: #8c7b70; }
.segment-group { display: flex; gap: 8px; }.sex-group { margin-top: 10px; }.segment { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; min-height: 45px; padding: 6px; color: #5b4b42; border: 1px solid #eee1d6; border-radius: 14px; background: #fcf7f1; font-size: 15px; text-align: center; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease; }
.segment.selected { color: #e7502b; border-color: #ef6b40; background: #fff3ec; box-shadow: inset 0 -3px 0 rgba(239,91,46,.75); font-weight: 750; }.segment:active { transform: scale(.98); }
.measure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }.compact-input { margin-top: 9px; }
.switch-row { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px; border-radius: 16px; background: #fcf3e9; }.switch-copy { flex: 1; }.switch-copy strong, .switch-copy small { display: block; }.switch-copy strong { color: #382319; font-size: 16px; }.switch-copy small { margin-top: 5px; color: #7b685c; font-size: 14px; line-height: 1.45; }
.switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }.switch-ui { position: relative; flex: 0 0 auto; width: 49px; height: 29px; border-radius: 99px; background: #d9d2cb; transition: background .2s ease; }.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(42,30,22,.2); transition: transform .2s ease; }.switch-input:checked + .switch-ui { background: #ef6a40; }.switch-input:checked + .switch-ui::after { transform: translateX(20px); }
.next-btn { margin-top: 20px; }.ability-card { margin-top: 20px; overflow: hidden; padding: 0 16px 6px; }.section-banner { height: 112px; margin: 0 -16px 8px; padding: 18px; background-size: cover; background-position: center; }.section-banner h3 { display: inline-block; padding: 8px 13px; color: #fff; border-radius: 12px; background: rgba(58,31,16,.65); font-size: 20px; }.daily-banner { background-image: linear-gradient(90deg,rgba(86,47,22,.25),rgba(86,47,22,.03)),url('/assets/images/daily-banner.jpg'); }.cognition-banner { background-image: linear-gradient(90deg,rgba(86,47,22,.25),rgba(86,47,22,.03)),url('/assets/images/cognition-banner.jpg'); }
.assessment-row { padding: 17px 0; }.assessment-row + .assessment-row { border-top: 1px solid #efe3d9; }.assessment-label { margin-bottom: 9px; color: #332017; font-size: 17px; font-weight: 780; }.assessment-options { gap: 7px; }.option-segment { min-height: 47px; padding: 6px 3px; font-size: 14px; line-height: 1.3; }
.cognition-card { margin-top: 16px; }.medical-card { position: relative; display: block; margin-top: 16px; padding: 20px 18px 34px; }.medical-title { color: #382319; font-size: 17px; font-weight: 780; }.medical-title small { margin-left: 5px; color: #9b8a7e; font-size: 14px; }.medical-input { display: block; width: 100%; min-height: 110px; margin-top: 12px; padding: 13px; resize: vertical; color: #3e2b21; border: 1px solid #eadbcf; border-radius: 14px; background: #fffaf5; font-size: 16px; line-height: 1.6; }.character-count { position: absolute; right: 30px; bottom: 12px; color: #8e8178; font-size: 14px; }
.step-actions { display: grid; grid-template-columns: .8fr 1.35fr; gap: 10px; margin-top: 20px; }.step-actions button { padding-inline: 8px; font-size: 16px; }

/* Upload */
.upload-page { padding: calc(8px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }.page-kicker { margin-bottom: 6px; color: #ed572f; font-size: 16px; font-weight: 750; }
.profile-strip { display: flex; align-items: center; gap: 10px; margin: 20px 0 16px; padding: 14px; }.profile-mark { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; color: #fff; border-radius: 50%; background: linear-gradient(135deg,#ff964f,#ec5129); font-weight: 850; }.profile-copy { flex: 1; min-width: 0; }.profile-copy strong, .profile-copy small { display: block; }.profile-copy strong { font-size: 16px; }.profile-copy small { margin-top: 3px; color: #74645a; font-size: 14px; }.edit-link { padding: 9px 4px; color: #ed572f; border: 0; background: transparent; font-weight: 750; }
.photo-stage { position: relative; overflow: hidden; height: 54vh; min-height: 390px; max-height: 570px; border-radius: 23px; background: #d8c4ae; box-shadow: 0 14px 32px rgba(80,47,24,.16); }.stage-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.stage-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(40,19,8,.08),rgba(40,19,8,.5)); }.camera-icon { position: absolute; top: 42%; left: 50%; width: 78px; height: 78px; padding: 20px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(52,27,13,.25); }.upload-title { position: absolute; right: 20px; bottom: 93px; left: 20px; color: #fff; font-size: 20px; font-weight: 800; text-align: center; text-shadow: 0 2px 8px rgba(39,18,8,.5); }
.heic-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 34px; color: #fff; background: radial-gradient(circle at 50% 34%,#d59862,#8d5d3d 72%); text-align: center; }.heic-placeholder img { width: 72px; height: 72px; padding: 18px; border-radius: 50%; background: rgba(255,255,255,.94); }.heic-placeholder strong { font-size: 19px; }.heic-placeholder small { max-width: 100%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.source-actions, .change-actions { position: absolute; right: 16px; bottom: 22px; left: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.source-actions button, .change-actions button { min-height: 48px; color: #3a261c; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; background: rgba(255,255,255,.91); font-size: 15px; font-weight: 750; transition: transform .12s ease; }.change-actions button { color: #fff; background: rgba(42,27,18,.68); backdrop-filter: blur(8px); }.source-actions button:disabled, .change-actions button:disabled { cursor: wait; opacity: .58; }.selected-badge { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 7px 13px; color: #fff; border-radius: 99px; background: rgba(44,27,16,.72); font-size: 14px; }
.raw-heic-note { position: absolute; right: 20px; bottom: 92px; left: 20px; padding: 10px 13px; color: #fff; border-radius: 13px; background: rgba(42,27,18,.72); font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; backdrop-filter: blur(8px); }
.guide-section { margin-top: 16px; padding: 19px 14px 14px; }.guide-heading { padding-left: 10px; color: #30190e; border-left: 5px solid #f06a38; font-size: 21px; font-weight: 850; }.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; }.guide-grid article { position: relative; min-height: 114px; padding: 30px 6px 12px; text-align: center; border: 1px solid #eadbcf; border-radius: 15px; background: linear-gradient(180deg,#fff,#fdf7f0); }.guide-grid article > span { position: absolute; top: -13px; left: 50%; display: grid; place-items: center; width: 31px; height: 31px; transform: translateX(-50%); color: #fff; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg,#ff934f,#ef512a); font-weight: 850; }.guide-grid strong, .guide-grid small { display: block; }.guide-grid strong { font-size: 15px; }.guide-grid small { margin-top: 8px; color: #77675e; font-size: 14px; line-height: 1.4; }.guide-note { margin-top: 13px; padding: 11px 12px; color: #745f51; border-radius: 12px; background: #fcf1e5; font-size: 14px; line-height: 1.55; }
.upload-status { margin-top: 16px; }.upload-track { overflow: hidden; height: 7px; border-radius: 99px; background: #efe1d5; }.upload-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff974d,#ed4f27); transition: width .18s ease; }.upload-status p { margin-top: 8px; color: #765f51; font-size: 14px; text-align: center; }.analyze-btn { margin-top: 18px; }

/* Analyzing */
.analyzing-page { padding: calc(8px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }.analysis-card { padding: 22px 16px 21px; text-align: center; border: 1px solid rgba(184,112,56,.14); border-radius: 23px; background: radial-gradient(circle at 50% 32%,#fff 0,#fffaf3 52%,#f9efe3 100%); box-shadow: 0 13px 32px rgba(89,52,25,.1); }.analysis-visual { position: relative; width: 190px; height: 190px; margin: 0 auto 10px; }.orbit { position: absolute; inset: 13px; border: 7px solid #f2dfca; border-top-color: #f17435; border-right-color: #ff9d4e; border-radius: 50%; animation: spin 3.8s linear infinite; }.orbit::before { content: ""; position: absolute; inset: -20px; border: 1px dashed rgba(238,101,48,.18); border-radius: 50%; }.center-mark { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 112px; height: 112px; overflow: hidden; transform: translate(-50%,-50%); color: #ee592e; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(220,104,46,.16); font-size: 38px; }.scan-line { position: absolute; top: 17px; right: 14px; left: 14px; height: 3px; border-radius: 99px; background: linear-gradient(90deg,transparent,#ff6e39,transparent); box-shadow: 0 0 10px rgba(255,90,44,.5); animation: scanMove 2.4s ease-in-out infinite alternate; }.analysis-card h2 { font-size: 27px; font-weight: 850; }.analysis-card > p { margin-top: 8px; color: #6f5e54; font-size: 15px; line-height: 1.6; }.stage-pill { display: inline-flex; align-items: center; min-height: 39px; margin-top: 14px; padding: 7px 16px; color: #e6542d; border-radius: 99px; background: #fff1e5; font-size: 14px; font-weight: 750; }
.state-card { margin-top: 16px; padding: 4px 15px; }.state-row { display: flex; align-items: center; gap: 10px; min-height: 77px; color: #a39991; }.state-row + .state-row { border-top: 1px solid #efe2d7; }.state-dot { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ece8e4; font-weight: 850; }.state-copy { flex: 1; min-width: 0; }.state-copy strong, .state-copy small { display: block; }.state-copy strong { color: #6f665f; font-size: 16px; }.state-copy small { margin-top: 4px; font-size: 14px; line-height: 1.4; }.state-status { min-width: 58px; font-size: 14px; text-align: right; }.state-row.done .state-dot { color: #fff; background: #e96b34; }.state-row.done .state-copy strong { color: #342015; }.state-row.done .state-status { color: #579a5c; }.state-row.active .state-dot { color: #fff; background: linear-gradient(135deg,#ff9a49,#ed512a); }.state-row.active .state-copy strong, .state-row.active .state-status { color: #ed572e; }
.wait-card { display: flex; gap: 11px; margin-top: 16px; padding: 15px; border: 1px solid #f0d9c1; border-radius: 16px; background: rgba(255,250,243,.9); }.wait-card > span { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; color: #e96331; border: 1.5px solid #e96331; border-radius: 50%; font-weight: 850; }.wait-card strong { font-size: 15px; }.wait-card p { margin-top: 4px; color: #78685e; font-size: 14px; line-height: 1.55; }
.error-card { margin-top: 70px; padding: 34px 20px; text-align: center; }.error-symbol, .empty-card > span { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; color: #fff; border-radius: 50%; background: linear-gradient(135deg,#ff8b45,#e94328); font-size: 34px; font-weight: 850; }.error-card h2 { font-size: 22px; }.error-card > p { margin: 12px 0 24px; color: #75645a; line-height: 1.65; }.error-card .secondary-btn { margin-top: 11px; }

/* Unsupported */
.unsupported-page { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; padding: calc(32px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 18%,#fff 0,#fcf7ef 48%,#f8eee2 100%); }.room-icon { position: relative; width: 118px; height: 118px; border-radius: 50%; background: #fff1e1; box-shadow: 0 12px 28px rgba(118,70,34,.12); animation: iconReveal .52s ease-out both; }.door { position: absolute; top: 25px; left: 29px; width: 39px; height: 58px; border: 5px solid #9f563c; border-bottom: 0; border-radius: 5px 5px 0 0; }.door::after { content: ""; position: absolute; top: 26px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #9f563c; }.question { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border-radius: 50%; background: #d9825b; font-size: 22px; font-weight: 900; }.unsupported-page h1 { margin-top: 24px; font-size: 26px; }.unsupported-message { margin-top: 11px; color: #55453d; font-size: 16px; line-height: 1.65; text-align: center; }.guide-card { width: 100%; margin: 20px 0; padding: 18px 20px 18px 37px; color: #66564d; border: 1px solid #ead9c9; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(93,55,27,.08); font-size: 15px; line-height: 2; }.guide-card li::marker { color: #d9825b; }.unsupported-page .secondary-btn { margin-top: 11px; }

/* Result */
.result-page { padding: calc(8px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); }.result-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 8px 18px; }.shield-wrap { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 48% 48% 54% 54%; background: radial-gradient(circle at 38% 28%,#ffae5b,#f45c28 72%); box-shadow: 0 12px 28px rgba(236,82,38,.24),inset 0 0 0 6px rgba(255,255,255,.38); animation: shieldReveal .6s cubic-bezier(.2,.75,.25,1) both; }.shield-wrap img { width: 64px; height: 64px; }.summary-copy { flex: 1; min-width: 190px; }.summary-copy p { color: #3a2418; font-size: 17px; font-weight: 750; letter-spacing: .5px; }.summary-copy h2 { margin-top: 9px; color: #e74328; font-size: clamp(43px, 12vw, 58px); font-weight: 900; line-height: 1.05; letter-spacing: 2px; }.risk-medium .summary-copy h2 { color: #e88124; }.risk-low .summary-copy h2 { color: #4f9a58; }.risk-unknown .summary-copy h2 { color: #7b736c; }.summary-sentence { width: 100%; padding: 15px 6px 0; color: #4d392e; border-top: 1px solid #efdfd1; font-size: 16px; line-height: 1.65; }.summary-sentence strong { margin: 0 3px; color: #e84929; font-size: 21px; }
.advice-card { margin-top: 10px; padding: 18px; border-color: #efd7bb; background: linear-gradient(135deg,#fffaf2,#fff); }.advice-card header { display: flex; align-items: center; gap: 11px; }.advice-card header span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: linear-gradient(135deg,#ff9b48,#ef582b); }.advice-card header img { width: 26px; height: 26px; }.advice-card h3 { font-size: 22px; }.advice-card > p { margin: 14px 3px 0 54px; color: #4f3c31; font-size: 16px; line-height: 1.78; }
.section-heading { display: flex; align-items: center; gap: 11px; margin: 28px 4px 15px; font-size: 24px; font-weight: 850; }.section-heading > span { width: 6px; height: 32px; border-radius: 99px; background: linear-gradient(180deg,#ff9b44,#ed4e27); }.risk-card { margin-bottom: 15px; padding: 18px 17px 5px; }.risk-card-head { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; }.risk-number { display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; color: #fff; border-radius: 50%; background: linear-gradient(135deg,#ff9a45,#ec522a); box-shadow: 0 6px 15px rgba(235,83,40,.18); font-weight: 850; }.risk-card-head h3 { flex: 1; min-width: 0; font-size: 23px; }.risk-tag { flex: 0 0 auto; padding: 7px 11px; color: #e7442d; border: 1px solid #f4b39f; border-radius: 99px; background: #fff3ed; font-size: 14px; font-weight: 750; }.risk-medium .risk-tag { color: #d77b1d; border-color: #f1c58f; background: #fff7e9; }.risk-low .risk-tag { color: #4e9755; border-color: #b9dcb9; background: #f0f8ef; }.risk-unknown .risk-tag { color: #77716c; border-color: #d7d1cc; background: #f5f3f1; }
.content-block { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid #efe1d6; }.content-block > div { flex: 1; min-width: 0; }.block-icon { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; color: #fff; border-radius: 50%; background: #ee642f; font-weight: 850; }.evidence-icon { color: #de7c21; border: 1.5px solid #e49a4d; background: #fff7ea; }.content-block h4 { color: #e75a2a; font-size: 16px; }.content-block p, .suggestion-list { margin-top: 7px; color: #514038; font-size: 15px; line-height: 1.72; overflow-wrap: anywhere; }.element-icon-wrap { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; }.element-icon-wrap img { width: 30px; height: 30px; }.suggestion-list { margin-bottom: 0; padding-left: 18px; }.suggestion-list li + li { margin-top: 7px; }.suggestion-list li::marker { color: #ef7138; }
.no-risk { padding: 24px 18px; text-align: center; }.no-risk h3 { font-size: 19px; }.no-risk p { margin-top: 8px; color: #77675d; font-size: 15px; line-height: 1.65; }.potential-card { display: flex; gap: 12px; margin-bottom: 11px; padding: 16px; }.potential-card > img { flex: 0 0 auto; width: 36px; height: 36px; }.potential-card h3 { font-size: 17px; }.potential-card p, .potential-card strong { display: block; margin-top: 5px; color: #66564d; font-size: 14px; line-height: 1.6; }.potential-card strong { color: #df622f; }.disclaimer-card { margin-top: 21px; padding: 16px; border: 1px solid #eaded3; border-radius: 16px; background: rgba(255,255,255,.66); }.disclaimer-card h3 { font-size: 16px; }.disclaimer-card p { margin-top: 6px; color: #82756c; font-size: 14px; line-height: 1.62; }.disclaimer-card small { display: block; margin-top: 9px; color: #8a7e76; font-size: 14px; }.bottom-actions { margin-top: 18px; }.bottom-actions .secondary-btn { margin-top: 11px; }.empty-card { margin-top: 80px; padding: 34px 20px; text-align: center; }.empty-card h2 { font-size: 23px; }.empty-card p { margin: 9px 0 24px; color: #74645b; }.risk-enter { animation: riskCardEnter .43s ease-out both; }.risk-enter-1 { animation-delay: .09s; }.risk-enter-2 { animation-delay: .17s; }.risk-enter-3 { animation-delay: .25s; }

/* Global notices and transitions */
.global-toast { position: fixed; z-index: 100; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; max-width: min(360px, calc(100vw - 40px)); padding: 11px 17px; transform: translateX(-50%); color: #fff; border-radius: 99px; background: rgba(44,31,23,.9); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 15px; text-align: center; backdrop-filter: blur(10px); }
.modal-backdrop { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(39,29,23,.46); backdrop-filter: blur(3px); }.global-modal { width: min(390px,100%); overflow: hidden; padding: 28px 24px 0; border-radius: 23px; background: #fff; box-shadow: 0 22px 70px rgba(24,16,12,.28); text-align: center; }.global-modal h2 { font-size: 23px; }.global-modal p { margin-top: 15px; color: #746b65; font-size: 16px; line-height: 1.65; white-space: pre-line; }.modal-confirm { width: calc(100% + 48px); min-height: 58px; margin: 24px -24px 0; color: #49678d; border: 0; border-top: 1px solid #ece8e5; background: #fff; font-size: 18px; font-weight: 750; }
.page-swap-enter-active, .page-swap-leave-active { transition: opacity .16s ease, transform .16s ease; }.page-swap-enter-from { opacity: 0; transform: translateY(8px); }.page-swap-leave-to { opacity: 0; transform: translateY(-4px); }.toast-enter-active, .toast-leave-active { transition: opacity .18s ease, transform .18s ease; }.toast-enter-from, .toast-leave-to { opacity: 0; transform: translate(-50%,8px); }.modal-enter-active, .modal-leave-active { transition: opacity .18s ease; }.modal-enter-from, .modal-leave-to { opacity: 0; }.step-slide-enter-active, .step-slide-leave-active { transition: opacity .2s ease, transform .2s ease; }.step-slide-enter-from { opacity: 0; transform: translateX(14px); }.step-slide-leave-to { opacity: 0; transform: translateX(-10px); }

@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes copyEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes imageEnter, stepEnter, buttonEnter, riskCardEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes imageSettle { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes shieldReveal, iconReveal { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes gentlePulse { 0%,100% { transform: scale(1); box-shadow: 0 9px 20px rgba(226,88,48,.24); } 50% { transform: scale(1.008); box-shadow: 0 10px 25px rgba(226,88,48,.31); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scanMove { from { transform: translateY(10px); opacity: .45; } to { transform: translateY(67px); opacity: 1; } }

@media (min-width: 700px) { body { padding: 22px 0; }.site-frame { min-height: calc(100vh - 44px); border-radius: 28px; overflow: hidden; }.page, .unsupported-page { min-height: calc(100vh - 44px); } }
@media (max-width: 355px) { .page { padding-inline: 14px; }.hero-title { font-size: 43px; }.step-label { font-size: 14px; }.guide-grid { gap: 5px; }.guide-grid strong { font-size: 14px; }.assessment-options { gap: 4px; }.option-segment { font-size: 14px; }.risk-card { padding-inline: 13px; }.risk-card-head { gap: 8px; }.risk-card-head h3 { font-size: 20px; }.risk-tag { padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}