:root {
  color: var(--ink);
  background: var(--paper);
  color-scheme: light;
  --paper: #F5F1E9;
  --paper-deep: #ECE3D6;
  --porcelain: #FCFAF6;
  --ink: #302A25;
  --ink-muted: #655B52;
  --ink-faint: #8E8378;
  --celadon: #326D61;
  --gold: #92784C;
  --wood: #D5BD9B;
  --wood-dark: #4A382B;
  --wood-ink: var(--wood-dark);
  --wood-muted: var(--ink-muted);
  --wood-line: rgba(123, 94, 68, .24);
  --wood-wash: rgba(213, 189, 155, .48);
  --wood-wash-soft: rgba(213, 189, 155, .30);
  --glass: rgba(255, 252, 247, .58);
  --glass-strong: rgba(255, 253, 249, .68);
  --glass-edge: rgba(255, 255, 255, .82);
  --glass-shadow: rgba(118, 101, 86, .07);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 96% -7%, rgba(210, 181, 148, .46), transparent 30rem), radial-gradient(circle at -12% 47%, rgba(238, 225, 207, .72), transparent 27rem), linear-gradient(160deg, #f9f5ee 0%, #eee6da 100%); background-attachment: fixed; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { max-width: 720px; min-height: 100vh; margin: 0 auto; padding: env(safe-area-inset-top) 20px calc(40px + env(safe-area-inset-bottom)); }
.boot-screen, .empty-state, .error-state { min-height: 58vh; display: grid; place-content: center; gap: 14px; text-align: center; color: var(--ink-muted); }
.boot-mark { width: 28px; height: 28px; margin: 0 auto; border: 2px solid rgba(213, 189, 155, .34); border-top-color: var(--wood-dark); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px 20px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--wood-dark); font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 700; letter-spacing: .06em; }
.brand-mark, .ring-mark { position: relative; display: inline-block; border: 2px solid currentColor; border-radius: 50%; }
.brand-mark { width: 22px; height: 22px; color: #418272; }
.brand-mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #d6c284; }
.top-date { color: #718079; font-size: 13px; }
.collapse-button { padding: 6px 9px; color: var(--wood-muted); border: 1px solid var(--glass-edge); border-radius: 99px; background: var(--glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 12px; }
.companion-top-action { padding: 6px 9px; color: #765a31; border: 1px solid rgba(183, 151, 104, .25); border-radius: 99px; background: rgba(255, 250, 239, .54); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 12px; font-weight: 700; }

.page-head { margin: 8px 0 22px; }
.compact-head { margin-bottom: 16px; }
.eyebrow { display: block; color: #7b8b83; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 8px 0; color: var(--wood-dark); font-family: Georgia, "Songti SC", serif; font-size: 32px; line-height: 1.2; letter-spacing: .02em; }
h2 { color: var(--wood-dark); font-size: 19px; line-height: 1.35; }
h3 { color: #5D4737; font-size: 16px; }
.page-copy, .muted, .small-note { color: var(--ink-muted); font-size: 14px; line-height: 1.7; }

.card { margin: 14px 0; padding: 20px; border: 1px solid var(--glass-edge); border-radius: 20px; background: var(--glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 14px 36px var(--glass-shadow); -webkit-backdrop-filter: blur(28px) saturate(1.12); backdrop-filter: blur(28px) saturate(1.12); }
.hero-card { overflow: hidden; position: relative; min-height: 194px; color: var(--wood-ink); border: 1px solid var(--glass-edge); background: radial-gradient(circle at 87% 20%, rgba(255, 255, 255, .58), transparent 29%), linear-gradient(142deg, rgba(247, 239, 228, .66), rgba(209, 180, 146, .38)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 16px 38px var(--glass-shadow); -webkit-backdrop-filter: blur(30px) saturate(1.12); backdrop-filter: blur(30px) saturate(1.12); }
.hero-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -58px; top: -74px; border: 1px solid rgba(238, 224, 172, .35); border-radius: 50%; box-shadow: 0 0 0 22px rgba(238, 224, 172, .06), 0 0 0 47px rgba(238, 224, 172, .04); }
.hero-card h2, .hero-card .muted, .hero-card .eyebrow { color: inherit; position: relative; z-index: 1; }
.hero-card h2 { margin: 7px 0 5px; font-family: Georgia, "Songti SC", serif; font-size: 23px; }
.hero-card .eyebrow { color: #7b624d; }
.sync-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #d8bf72; }
.hero-copy { position: relative; z-index: 2; max-width: 69%; }
.hero-copy .secondary-button { margin-top: 10px; color: #513d2f; border-color: rgba(91, 68, 49, .24); background: rgba(255, 252, 245, .28); }
.hero-visual { position: absolute; z-index: 1; right: -11px; bottom: -15px; width: 160px; height: 160px; color: #e4c979; pointer-events: none; }
.hero-orbit { position: absolute; border: 1px solid rgba(231, 215, 160, .3); border-radius: 50%; transform: rotate(-28deg); }
.hero-orbit-one { inset: 5px 8px 16px 2px; }
.hero-orbit-two { inset: 25px 20px 31px 23px; border-color: rgba(180, 220, 198, .32); }
.hero-orbit-three { inset: 45px 40px 52px 43px; border-color: rgba(231, 215, 160, .48); }
.hero-core { position: absolute; right: 51px; bottom: 54px; display: grid; width: 44px; height: 44px; place-content: center; color: #876c48; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; background: rgba(224, 205, 179, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 9px rgba(235, 217, 163, .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hero-core .metric-glyph { width: 23px; height: 23px; }
.hero-spark { position: absolute; display: block; width: 5px; height: 5px; border-radius: 50%; background: #dbeee1; box-shadow: 0 0 12px rgba(219, 238, 225, .8); }
.hero-spark-one { top: 26px; right: 31px; }
.hero-spark-two { right: 94px; bottom: 26px; width: 3px; height: 3px; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 2px 11px; }
.section-title h2 { margin: 0; font-family: Georgia, "Songti SC", serif; }
.module-head, .module-title, .module-actions { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.module-head > div, .module-title > div { min-width: 0; }
.module-head h2, .module-title h2 { margin: 6px 0 0; font-family: Georgia, "Songti SC", serif; }
.module-actions { margin-top: 15px; color: var(--wood-muted); font-size: 12px; }
.module-meta { margin: 6px 0 0; color: var(--wood-muted); font-size: 12px; }
.context-ask { flex: 0 0 auto; padding: 7px 11px; color: #6d523e; border: 1px solid var(--wood-line); border-radius: 99px; background: rgba(255, 253, 249, .46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 12px; font-weight: 700; }
.knowledge-module { position: relative; overflow: hidden; }
.knowledge-module .knowledge-art { position: relative; top: auto; right: auto; flex: 0 0 auto; }
.knowledge-module > p { margin: 14px 0 0; color: var(--wood-muted); font-size: 14px; line-height: 1.7; }
.constitution-module { min-height: 154px; }
.trend-module { margin: 24px 0 0; }
.trend-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }
.trend-summary-card { min-width: 0; padding: 14px; border: 1px solid var(--glass-edge); border-radius: 17px; background: linear-gradient(145deg, rgba(255, 254, 250, .60), rgba(239, 231, 219, .34)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 10px 26px var(--glass-shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.trend-summary-main { display: grid; width: 100%; padding: 0; color: var(--wood-ink); border: 0; background: transparent; text-align: left; }
.trend-summary-main span { overflow: hidden; color: var(--wood-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.trend-summary-main strong { margin-top: 9px; font-family: Georgia, "Songti SC", serif; font-size: 20px; }
.trend-summary-main small { margin: 4px 0 11px; color: #8b7d72; font-size: 11px; }
.trend-summary-card .context-ask { width: 100%; }
.text-link, .plain-button { padding: 0; color: #6c503b; border: 0; background: transparent; }
.text-link { font-size: 14px; }
.primary-button, .secondary-button, .mini-button { border: 0; border-radius: 12px; font-weight: 600; }
.primary-button { width: 100%; padding: 14px 16px; color: var(--wood-ink); border: 1px solid var(--glass-edge); background: var(--wood-wash); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 9px 22px var(--glass-shadow); -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08); }
.primary-button:disabled, .secondary-button:disabled { opacity: .55; cursor: not-allowed; }
.secondary-button { padding: 11px 14px; color: var(--wood-ink); border: 1px solid var(--wood-line); background: var(--glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mini-button { padding: 8px 11px; color: var(--wood-ink); border: 1px solid var(--wood-line); background: rgba(255, 253, 248, .46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metric-card { position: relative; min-width: 0; overflow: hidden; padding: 15px 13px; border: 1px solid var(--glass-edge); border-radius: 18px; text-align: left; color: #31564c; background: linear-gradient(145deg, rgba(255, 254, 250, .64), rgba(244, 238, 229, .38)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 12px 28px var(--glass-shadow); -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1); }
.metric-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #76a495; }
.metric-card-sleep::before { background: #8698b6; }
.metric-card-steps::before { background: #b99c5b; }
.metric-card-blood_oxygen::before { background: #6faaa6; }
.metric-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.metric-card-label { display: block; color: #738178; font-size: 12px; }
.metric-value { display: block; margin: 9px 0 2px; color: #254f44; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 700; white-space: nowrap; }
.metric-unit { color: #6b7c75; font-size: 11px; }
.metric-card-glow { position: absolute; right: -17px; bottom: -24px; width: 66px; height: 66px; border: 1px solid rgba(111, 160, 143, .2); border-radius: 50%; box-shadow: 0 0 0 12px rgba(111, 160, 143, .05); }
.metric-card-sleep .metric-card-glow { border-color: rgba(110, 132, 173, .2); box-shadow: 0 0 0 12px rgba(110, 132, 173, .05); }
.metric-glyph { display: inline-grid; width: 22px; height: 22px; place-content: center; color: #548b7b; }
.metric-glyph svg { width: 100%; height: 100%; overflow: visible; }
.metric-card-sleep .metric-glyph { color: #7187a7; }
.metric-card-steps .metric-glyph { color: #a88a48; }
.metric-card-blood_oxygen .metric-glyph { color: #559592; }

.split-card, .reminder-row, .feature-row, .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.split-card { align-items: flex-start; }
.split-card h3 { margin: 6px 0; }
.article-title { margin: 7px 0 8px; color: #274e43; font-family: Georgia, "Songti SC", serif; font-size: 20px; line-height: 1.45; }
.article-summary { margin-bottom: 13px; color: #65766e; font-size: 14px; line-height: 1.65; }
.tag { display: inline-block; margin: 0 6px 6px 0; padding: 5px 9px; color: #5e7168; border: 1px solid rgba(255, 255, 255, .54); border-radius: 99px; background: rgba(255, 253, 249, .36); font-size: 12px; }
.disclaimer { margin: 23px 4px 0; color: #84918b; font-size: 12px; line-height: 1.7; text-align: center; }

.metric-selector { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px 15px; padding: 0 20px 6px; scrollbar-width: none; }
.metric-selector::-webkit-scrollbar { display: none; }
.metric-tab { flex: 0 0 auto; padding: 8px 12px; color: var(--wood-muted); border: 1px solid var(--glass-edge); border-radius: 99px; background: rgba(255, 253, 249, .44); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13px; }
.metric-tab.active { color: var(--wood-ink); border-color: rgba(177, 143, 103, .34); background: var(--wood-wash-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54), 0 6px 18px rgba(117, 91, 67, .06); }
.metric-detail { padding: 22px; overflow: hidden; background: linear-gradient(155deg, rgba(255, 254, 250, .60), rgba(241, 234, 224, .35)); }
.metric-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.metric-detail-value { margin: 2px 0 17px; color: #214f43; font-family: Georgia, "Songti SC", serif; font-size: 41px; line-height: 1; }
.metric-detail-value span { margin-left: 5px; color: #60736b; font-family: inherit; font-size: 14px; font-weight: 400; }
.metric-sigil { position: relative; display: grid; width: 79px; height: 79px; flex: 0 0 auto; place-content: center; color: #4e8978; border: 1px solid #b8d1c4; border-radius: 50%; background: radial-gradient(circle, #fffdf7 0 35%, #e0eee3 36% 38%, transparent 39%); }
.metric-sigil::after { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(73, 135, 117, .34); border-radius: 50%; }
.metric-sigil .metric-glyph { width: 28px; height: 28px; }
.metric-sigil span { position: absolute; right: -5px; bottom: -7px; padding: 4px 6px; color: #60786d; border: 1px solid var(--glass-edge); border-radius: 99px; background: rgba(255, 253, 249, .58); font-size: 9px; white-space: nowrap; box-shadow: 0 3px 9px rgba(38, 77, 64, .05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.metric-sigil-sleep { color: #7187a7; border-color: #c2cede; background: radial-gradient(circle, #fffdf7 0 35%, #e3e9f0 36% 38%, transparent 39%); }
.metric-sigil-steps { color: #a88a48; border-color: #ddcda8; background: radial-gradient(circle, #fffdf7 0 35%, #f0e8d5 36% 38%, transparent 39%); }
.chart { width: 100%; height: 170px; overflow: visible; }
.chart-grid { stroke: #dce7df; stroke-width: 1; }
.chart-fill { fill: url(#chart-area); }
.chart-line { fill: none; stroke: #2d7464; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: #fffdf8; stroke: #2d7464; stroke-width: 2; }
.chart-dot.latest { fill: #d9c47d; stroke: #fffdf8; stroke-width: 2.5; }
.chart-caption { display: flex; justify-content: space-between; color: #809087; font-size: 12px; }
.empty-chart { display: grid; height: 170px; place-content: center; color: #77867e; text-align: center; font-size: 14px; line-height: 1.7; }
.metric-followup { display: flex; justify-content: flex-end; margin-top: 15px; }
.pulse-history-list { margin-top: 16px; border-top: 1px solid rgba(137, 105, 76, .12); }
.pulse-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(137, 105, 76, .10); color: var(--wood-muted); font-size: 12px; }
.pulse-history-row b { color: var(--wood-ink); font-size: 12px; font-weight: 600; text-align: right; }

.reference-grid { display: grid; gap: 12px; }
.reference-card { margin: 14px 0; padding: 20px; border: 1px solid var(--glass-edge); border-radius: 20px; background: linear-gradient(140deg, rgba(255, 254, 249, .58), rgba(242, 235, 225, .34)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 14px 32px var(--glass-shadow); -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1); }
.reference-card h2 { margin: 8px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 25px; }
.reference-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reference-action-link { padding: 4px 0; color: #6d523e; border: 0; background: transparent; font-size: 13px; font-weight: 600; }
.reference-badge { display: inline-block; padding: 5px 9px; color: #5f7168; border: 1px solid rgba(255, 255, 255, .52); border-radius: 99px; background: rgba(255, 253, 249, .36); font-size: 12px; }
.reference-subcopy, .pulse-subcopy { margin: 0; color: #63766c; font-size: 14px; line-height: 1.65; }
.constitution-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.constitution-hero > div { min-width: 0; }
.constitution-sigil { position: relative; display: block; width: 82px; height: 82px; flex: 0 0 auto; border: 1px solid rgba(93, 145, 122, .4); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #e4c979 0 12%, transparent 13%), radial-gradient(circle, #fdfcf5 0 43%, #e3efdf 44% 46%, transparent 47%); }
.constitution-sigil i, .constitution-sigil b, .constitution-sigil em { position: absolute; display: block; border: 1px solid rgba(86, 140, 119, .42); border-radius: 50%; }
.constitution-sigil i { inset: 7px; }
.constitution-sigil b { inset: 17px; border-style: dashed; }
.constitution-sigil em { top: 13px; right: 14px; width: 5px; height: 5px; border: 0; background: #5b927e; }
.constitution-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.constitution-secondary span { color: #75847d; font-size: 12px; }
.constitution-secondary b { padding: 5px 9px; color: #3e695c; border: 1px solid #cbdccf; border-radius: 99px; background: rgba(255, 255, 252, .66); font-size: 12px; font-weight: 600; }
.guidance-heading { margin-top: 20px; color: #39665a; font-size: 14px; font-weight: 700; }
.guidance-list { margin: 16px 0 0; padding: 0; list-style: none; }
.guidance-list li { padding: 10px 0; border-top: 1px solid #e5ece5; color: #5e7169; font-size: 14px; line-height: 1.6; }
.guidance-list strong { display: block; color: #3a6358; }
.guidance-list span { display: block; margin-top: 2px; }
.guidance-empty { margin: 18px 0 0; color: #64766d; font-size: 14px; line-height: 1.65; }
.reference-meta { margin: 16px 0 0; color: #7a8981; font-size: 12px; line-height: 1.6; }
.reference-note { margin: 9px 0 0; color: #819088; font-size: 12px; line-height: 1.6; }
.reference-empty { background: linear-gradient(140deg, rgba(255, 253, 248, .58), rgba(240, 233, 222, .34)); }
.reference-empty .secondary-button { margin-top: 7px; }
.pulse-card { overflow: hidden; background: linear-gradient(145deg, rgba(255, 254, 250, .60), rgba(240, 234, 225, .36)); }
.pulse-card h2 { margin: 8px 0 7px; font-family: Georgia, "Songti SC", serif; }
.pulse-card-head { display: flex; justify-content: space-between; gap: 12px; }
.pulse-card-head > div { min-width: 0; }
.pulse-sigil { position: relative; display: block; width: 83px; height: 76px; flex: 0 0 auto; overflow: hidden; border-radius: 17px; background: linear-gradient(155deg, #e1efe8, #f7f5e9); }
.pulse-sigil::before { content: ""; position: absolute; top: 50%; right: 8px; left: 8px; border-top: 1px solid rgba(73, 127, 108, .18); }
.pulse-sigil i { position: absolute; top: 24px; width: 7px; height: 7px; border: 1px solid #5d927f; border-radius: 50%; background: #fdfcf6; box-shadow: 0 0 0 4px rgba(95, 147, 128, .1); }
.pulse-sigil i:nth-child(1) { left: 13px; }
.pulse-sigil i:nth-child(2) { top: 42px; left: 37px; }
.pulse-sigil i:nth-child(3) { top: 17px; left: 61px; }
.pulse-sigil b { position: absolute; top: 36px; right: 7px; left: 6px; height: 22px; border-top: 1.7px solid #4e8d77; border-radius: 50%; transform: rotate(-9deg); }
.sleep-stage-summary { display: block; margin-top: 7px; color: #708078; font-size: 11px; font-weight: 400; line-height: 1.45; }
.sleep-stage-detail { margin: -3px 0 16px; color: #61746b; font-size: 13px; line-height: 1.65; }
.pulse-group { margin-top: 17px; padding: 13px 14px 3px; border: 1px solid rgba(255, 255, 255, .48); border-radius: 14px; background: rgba(255, 253, 249, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44); }
.pulse-group h3 { margin: 0 0 3px; font-size: 14px; }
.feature-row { padding: 11px 0; border-bottom: 1px solid #e8eee7; color: #61736b; font-size: 14px; }
.feature-row:last-child { border-bottom: 0; }
.feature-row b { color: #315c51; font-weight: 600; }

/* Constitution reference flow. Photos and answers stay in memory only until
   their same-origin request completes. */
.focus-topbar { padding-bottom: 12px; }
.assessment-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 1px 0 24px; }
.assessment-progress-item { min-width: 0; display: grid; justify-items: center; gap: 5px; color: #8a938e; }
.assessment-progress-item span { display: grid; width: 27px; height: 27px; place-content: center; border: 1px solid var(--glass-edge); border-radius: 50%; background: rgba(255, 253, 249, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58); font-family: Georgia, serif; font-size: 12px; }
.assessment-progress-item b { overflow: hidden; width: 100%; font-size: 11px; font-weight: 500; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.assessment-progress-item.active { color: #674d39; }
.assessment-progress-item.active span { color: var(--wood-ink); border-color: rgba(177, 143, 103, .34); background: var(--wood-wash-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 6px 16px rgba(117, 91, 67, .07); }
.assessment-progress-item.done { color: #8a6e35; }
.assessment-progress-item.done span { color: #735919; border-color: #d9c78e; background: #eee5c8; }

.assessment-entry { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin: 14px 0 22px; padding: 22px; color: var(--wood-ink); border: 1px solid var(--glass-edge); border-radius: 20px; background: linear-gradient(140deg, rgba(250, 244, 235, .64), rgba(210, 181, 147, .36)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 14px 34px var(--glass-shadow); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1); }
.assessment-entry::after { content: ""; position: absolute; right: -31px; bottom: -52px; width: 130px; height: 130px; border: 1px solid rgba(229, 205, 134, .24); border-radius: 50%; box-shadow: 0 0 0 19px rgba(229, 205, 134, .05); pointer-events: none; }
.assessment-entry-copy, .assessment-orbit, .assessment-entry-actions, .assessment-entry .reference-note { position: relative; z-index: 1; }
.assessment-entry .eyebrow { color: #80664f; }
.assessment-entry h2 { margin: 8px 0 6px; color: #443328; font-family: Georgia, "Songti SC", serif; font-size: 24px; }
.assessment-entry-copy p { margin: 0; color: #6b5543; font-size: 14px; line-height: 1.7; }
.assessment-orbit { width: 84px; height: 84px; display: grid; align-content: center; justify-items: center; align-self: center; border: 1px solid var(--glass-edge); border-radius: 50%; background: rgba(225, 207, 184, .44); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 22px rgba(103, 77, 54, .06); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.assessment-orbit strong { color: #6a503c; font-family: Georgia, serif; font-size: 28px; line-height: 1; }
.assessment-orbit small { font-size: 13px; font-weight: 400; }
.assessment-orbit span { margin-top: 5px; color: #826b59; font-size: 9px; }
.assessment-entry-actions { grid-column: 1 / -1; display: flex; gap: 9px; }
.assessment-entry-actions .primary-button { flex: 1; background: var(--wood-wash); color: var(--wood-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58); }
.assessment-entry-actions .secondary-button { flex: 1; color: #533e30; border-color: rgba(91, 68, 49, .24); background: rgba(255, 252, 245, .25); }
.assessment-entry .reference-note { grid-column: 1 / -1; margin: 0; color: #735b47; }
.compact-button { width: auto; }

.assessment-hero { position: relative; overflow: hidden; min-height: 230px; margin: 0 -20px 24px; padding: 35px 26px 28px; color: var(--wood-ink); border-top: 1px solid var(--glass-edge); border-bottom: 1px solid rgba(255, 255, 255, .56); background: linear-gradient(138deg, rgba(249, 242, 232, .64), rgba(207, 177, 143, .38)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64), 0 14px 34px var(--glass-shadow); -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1); }
.assessment-hero .eyebrow { color: #7d634d; }
.assessment-hero h1 { max-width: 420px; margin: 11px 0; color: #423127; font-size: 35px; }
.assessment-hero p { max-width: 440px; margin: 0; color: #68513f; font-size: 15px; line-height: 1.8; }
.compact-assessment-hero { min-height: 0; margin-bottom: 12px; padding-top: 24px; padding-bottom: 22px; }
.compact-assessment-hero h1 { margin-bottom: 0; }
.assessment-count { position: absolute; right: 26px; bottom: 25px; width: 92px; height: 92px; display: grid; place-content: center; border: 1px solid var(--glass-edge); border-radius: 50%; text-align: center; background: rgba(224, 204, 180, .46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 10px 26px rgba(103, 77, 54, .07); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.assessment-count strong { color: #6b513d; font-family: Georgia, serif; font-size: 32px; line-height: 1; }
.assessment-count span { margin-top: 5px; color: #806b5b; font-size: 10px; }
.assessment-list { border-top: 1px solid #dce4dc; border-bottom: 1px solid #dce4dc; }
.assessment-list-row { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 82px; border-bottom: 1px solid #e2e7e1; }
.assessment-list-row:last-child { border-bottom: 0; }
.assessment-list-row .step-number { display: grid; width: 32px; height: 32px; place-content: center; color: #667970; border: 1px solid #cbd5ce; border-radius: 50%; font-family: Georgia, serif; }
.assessment-list-row .step-number.done { color: #6f5517; border-color: #d8c584; background: #efe5c7; }
.assessment-list-row h2 { margin: 0 0 3px; font-size: 16px; }
.assessment-list-row p { margin: 0; color: #6d7c75; font-size: 13px; line-height: 1.5; }
.assessment-list-row > b { color: #77847e; font-size: 12px; font-weight: 500; }
.compact-assessment-list .assessment-list-row { min-height: 58px; }

.consent-row { width: 100%; display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 0; padding: 15px; color: #52665d; border: 1px solid var(--glass-edge); border-radius: 12px; background: rgba(255, 253, 249, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: left; font-size: 14px; line-height: 1.65; }
.consent-row.selected { border-color: rgba(177, 143, 103, .38); background: var(--wood-wash-soft); }
.consent-mark { flex: 0 0 auto; display: grid; width: 22px; height: 22px; margin-top: 1px; place-content: center; color: #fff; border: 1px solid #9aaba3; border-radius: 50%; }
.consent-row.selected .consent-mark { color: var(--wood-ink); border-color: rgba(177, 143, 103, .42); background: rgba(211, 187, 158, .56); }
.assessment-actions, .question-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 19px; }
.assessment-actions > *, .question-actions > * { flex: 1; min-width: 0; min-height: 49px; }
.compact-question-actions { align-items: center; }
.compact-question-actions .text-link { flex: 0 0 auto; min-height: 40px; padding: 8px 4px; }
.compact-question-actions .primary-button { flex: 1; }

.assessment-page-head { margin-top: 3px; }
.capture-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-content: center; justify-items: center; margin-bottom: 14px; color: #718078; border: 1px solid #d7dfd8; border-radius: 18px; background: #eceee9; }
.capture-stage.has-preview { background: #1e2925; }
.capture-stage img { width: 100%; height: 100%; object-fit: contain; }
.capture-guide { position: relative; width: 112px; height: 142px; border: 1px dashed #9eada5; border-radius: 50% 50% 46% 46%; }
.capture-guide.tongue { width: 105px; height: 122px; border-radius: 50% 50% 42% 42%; }
.capture-guide span { position: absolute; right: 28px; bottom: 20px; left: 28px; height: 32px; border: 1px solid #aeb9b2; border-radius: 50%; }
.photo-picker { display: block; min-height: 50px; padding: 14px 16px; color: var(--wood-ink); border: 1px solid rgba(177, 143, 103, .34); border-radius: 12px; background: rgba(255, 253, 249, .56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 15px; font-weight: 700; text-align: center; cursor: pointer; }
.photo-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.observation-processing { display: grid; gap: 8px; margin-top: 15px; color: #715944; font-size: 12px; letter-spacing: .08em; }
.observation-processing-track { position: relative; height: 5px; overflow: hidden; border: 1px solid rgba(177, 143, 103, .18); border-radius: 99px; background: rgba(211, 193, 171, .24); box-shadow: inset 0 1px 2px rgba(89, 67, 48, .06); }
.observation-processing-track i { position: absolute; top: 0; bottom: 0; left: -42%; width: 42%; border-radius: inherit; background: linear-gradient(90deg, rgba(181, 146, 105, .2), rgba(173, 132, 86, .82), rgba(226, 205, 179, .32)); box-shadow: 0 0 12px rgba(159, 119, 77, .2); animation: observation-progress 1.35s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes observation-progress { from { transform: translateX(0); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .observation-processing-track i { left: 0; width: 62%; animation: none; } }
.completed-note { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 13px 15px; color: #315c51; border-left: 3px solid #c1a453; background: #eff3eb; }
.completed-note > span { font-size: 21px; }
.completed-note strong { display: block; }

.pulse-ready-state { padding: 29px 22px; border-top: 1px solid #d6e0d9; border-bottom: 1px solid #d6e0d9; text-align: center; }
.pulse-rings { position: relative; width: 112px; height: 112px; margin: 0 auto 20px; }
.pulse-rings i { position: absolute; inset: 0; border: 1px solid #8daf9f; border-radius: 50%; }
.pulse-rings i:nth-child(2) { inset: 18px; border-color: #c6ad69; }
.pulse-rings i:nth-child(3) { inset: 38px; border: 0; background: #346f60; }
.pulse-ready-state h2 { margin-bottom: 7px; }
.pulse-ready-state p { color: #65766e; font-size: 14px; line-height: 1.7; }

.questionnaire-head { display: flex; align-items: end; justify-content: space-between; margin: 3px 0 8px; }
.questionnaire-head h1 { margin: 4px 0 0; font-size: 41px; }
.questionnaire-head h1 small { color: #849089; font-family: inherit; font-size: 16px; font-weight: 400; }
.questionnaire-completion { display: grid; justify-items: end; margin-bottom: 7px; }
.questionnaire-completion strong { color: #9a675c; font-family: Georgia, serif; font-size: 24px; }
.questionnaire-completion span { color: #7e8a84; font-size: 11px; }
.question-progress { height: 4px; overflow: hidden; margin-bottom: 17px; border-radius: 99px; background: #dfe5df; }
.question-progress i { display: block; height: 100%; border-radius: inherit; background: #b99548; transition: width .2s ease; }
.question-progress .progress-1 { width: 10%; }
.question-progress .progress-2 { width: 20%; }
.question-progress .progress-3 { width: 30%; }
.question-progress .progress-4 { width: 40%; }
.question-progress .progress-5 { width: 50%; }
.question-progress .progress-6 { width: 60%; }
.question-progress .progress-7 { width: 70%; }
.question-progress .progress-8 { width: 80%; }
.question-progress .progress-9 { width: 90%; }
.question-progress .progress-10 { width: 100%; }
.gender-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #708078; font-size: 12px; }
.gender-choice > div { display: flex; padding: 3px; border: 1px solid var(--glass-edge); border-radius: 10px; background: rgba(255, 253, 249, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.gender-choice button { min-width: 52px; padding: 7px 9px; color: #607169; border: 0; border-radius: 7px; background: transparent; font-size: 13px; }
.gender-choice button.active { color: var(--wood-ink); background: var(--wood-wash-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48); }
.question-panel { min-height: 380px; padding: 22px 0 5px; border-top: 1px solid #dbe2dc; border-bottom: 1px solid #dbe2dc; }
.question-panel .selection-hint { color: #9a675c; font-size: 12px; }
.question-panel h2 { margin: 8px 0 18px; font-family: Georgia, "Songti SC", serif; font-size: 22px; line-height: 1.5; }
.answer-list { display: grid; gap: 9px; }
.answer-option { min-height: 54px; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; color: #475b53; border: 1px solid var(--glass-edge); border-radius: 12px; background: rgba(255, 253, 249, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: left; }
.answer-option > span { flex: 0 0 auto; display: grid; width: 24px; height: 24px; place-content: center; color: #fff; border: 1px solid #aebbb5; border-radius: 50%; }
.answer-option b { font-size: 15px; font-weight: 500; line-height: 1.5; }
.answer-option.selected { color: var(--wood-ink); border-color: rgba(177, 143, 103, .38); background: var(--wood-wash-soft); }
.answer-option.selected > span { color: var(--wood-ink); border-color: rgba(177, 143, 103, .42); background: rgba(211, 187, 158, .56); }

.result-pending { min-height: 56vh; display: grid; justify-items: center; align-content: center; text-align: center; }
.result-seal { display: grid; width: 76px; height: 76px; margin-bottom: 17px; place-content: center; color: #684f3d; border: 1px solid var(--glass-edge); border-radius: 50%; background: rgba(215, 191, 163, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 10px 24px var(--glass-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-family: "Songti SC", serif; font-size: 29px; }
.result-pending p { color: #697971; line-height: 1.7; }
.result-pending .primary-button { max-width: 260px; }
.result-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 22px; margin: 0 0 18px; padding: 30px 24px 22px; overflow: hidden; color: var(--wood-ink); border: 1px solid var(--glass-edge); border-radius: 28px; background: linear-gradient(145deg, rgba(255, 253, 248, .67), rgba(223, 202, 177, .28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 18px 44px rgba(109, 88, 69, .08); -webkit-backdrop-filter: blur(34px) saturate(1.16); backdrop-filter: blur(34px) saturate(1.16); }
.result-hero::after { content: ""; position: absolute; top: -84px; right: -76px; width: 230px; height: 230px; border: 1px solid rgba(171, 136, 95, .13); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255, 255, 255, .09), 0 0 0 52px rgba(185, 150, 109, .04); }
.result-hero > * { position: relative; z-index: 1; }
.result-hero-copy { min-width: 0; }
.result-hero .eyebrow { color: #8b7159; }
.result-hero-copy > p { margin: 28px 0 5px; color: #806b59; font-size: 12px; letter-spacing: .12em; }
.result-hero h1 { margin: 0; color: #5b4331; font-family: Georgia, "Songti SC", serif; font-size: 46px; font-weight: 600; letter-spacing: .06em; }
.result-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 13px; }
.result-secondary span { margin-right: 2px; color: #927d6c; font-size: 11px; }
.result-secondary b { padding: 4px 8px; color: #705642; border: 1px solid rgba(160, 126, 90, .21); border-radius: 99px; background: rgba(255, 253, 249, .4); font-size: 11px; font-weight: 600; }
.result-hero-orbit { position: absolute; top: 17px; left: 18px; width: 82px; height: 82px; opacity: .24; }
.result-hero-orbit i, .result-hero-orbit b, .result-hero-orbit em { position: absolute; display: block; border: 1px solid #8d6c4f; border-radius: 50%; }
.result-hero-orbit i { inset: 0; }
.result-hero-orbit b { inset: 13px; border-style: dashed; }
.result-hero-orbit em { inset: 28px; background: rgba(209, 184, 143, .48); }
.report-agreement { align-self: center; display: grid; justify-items: center; }
.report-agreement svg { grid-area: 1 / 1; width: 88px; height: 88px; overflow: visible; transform: rotate(-90deg); }
.report-agreement circle { fill: none; stroke-width: 2.7; }
.report-agreement-track { stroke: rgba(125, 101, 79, .13); }
.report-agreement-value { stroke: #9c7d59; stroke-linecap: round; filter: drop-shadow(0 3px 5px rgba(99, 74, 51, .14)); }
.report-agreement strong { grid-area: 1 / 1; align-self: center; color: #604832; font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 500; }
.report-agreement strong small { font-size: 10px; }
.report-agreement > span { margin-top: -4px; color: #8f7b69; font-size: 10px; letter-spacing: .08em; }
.result-source { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 17px; border-top: 1px solid rgba(151, 122, 94, .12); }
.result-source span { padding: 5px 8px; color: #75604f; border: 1px solid rgba(177, 143, 103, .18); border-radius: 99px; background: rgba(255, 253, 249, .28); font-size: 10px; }

.report-card { margin: 14px 0; padding: 22px; border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(145deg, rgba(255, 254, 251, .58), rgba(244, 237, 227, .31)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 15px 38px rgba(107, 87, 69, .065); -webkit-backdrop-filter: blur(30px) saturate(1.14); backdrop-filter: blur(30px) saturate(1.14); }
.report-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.report-section-head h2 { margin: 5px 0 0; color: #49392e; font-family: Georgia, "Songti SC", serif; font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.report-section-number { color: rgba(116, 91, 68, .26); font-family: Georgia, serif; font-size: 30px; line-height: 1; }
.modality-analysis-list { display: grid; gap: 10px; }
.modality-analysis-card { padding: 16px; overflow: hidden; border: 1px solid rgba(137, 115, 96, .10); border-radius: 19px; background: rgba(255, 255, 255, .18); }
.modality-analysis-card.ready { border-color: rgba(158, 121, 85, .15); background: linear-gradient(145deg, rgba(244, 233, 218, .38), rgba(255, 255, 255, .24)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64); }
.modality-analysis-card header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.modality-analysis-card header > span { display: grid; width: 42px; height: 42px; place-content: center; color: #795b3f; border: 1px solid rgba(150, 112, 77, .20); border-radius: 14px; background: rgba(222, 201, 173, .28); font-family: "Songti SC", serif; font-size: 16px; }
.modality-analysis-card header small { color: #a28f7d; font-family: Georgia, serif; font-size: 8px; letter-spacing: .10em; }
.modality-analysis-card header h3 { margin: 3px 0 0; color: #514034; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 600; }
.modality-analysis-card header > b { color: #a18770; font-size: 10px; font-weight: 500; }
.modality-analysis-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 15px 0 0; }
.modality-analysis-card dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid rgba(139, 114, 91, .08); border-radius: 11px; background: rgba(255, 255, 255, .22); }
.modality-analysis-card dt { color: #988675; font-size: 10px; }
.modality-analysis-card dd { margin: 0; color: #5d4c3e; font-family: "Songti SC", serif; font-size: 12px; font-weight: 600; text-align: right; }
.modality-analysis-card > p { margin: 13px 1px 0; padding-top: 12px; color: #655a51; border-top: 1px solid rgba(132, 106, 83, .09); font-size: 12px; line-height: 1.75; }
.combined-analysis-copy { position: relative; margin: 0 0 17px; padding: 17px 17px 17px 20px; color: #57483c; border: 1px solid rgba(148, 112, 79, .12); border-radius: 16px; background: linear-gradient(135deg, rgba(224, 203, 176, .32), rgba(255, 255, 255, .18)); font-family: Georgia, "Songti SC", serif; font-size: 15px; line-height: 1.8; }
.combined-analysis-copy::before { content: ""; position: absolute; top: 17px; bottom: 17px; left: 9px; width: 2px; border-radius: 2px; background: rgba(155, 116, 78, .34); }
.combined-analysis-action { display: flex; justify-content: flex-end; margin-top: 13px; }
.combined-analysis-action .context-ask { margin: 0; }
.constitution-profile-layout { display: grid; grid-template-columns: minmax(240px, 1.15fr) minmax(150px, .85fr); align-items: center; gap: 10px; }
.constitution-radar { display: block; width: 100%; max-width: 360px; margin: -8px auto; overflow: visible; }
.radar-grid { fill: rgba(218, 199, 176, .075); stroke: rgba(113, 88, 65, .16); stroke-width: 1; }
.radar-grid:nth-child(2) { fill: rgba(216, 194, 167, .10); }
.radar-axis { stroke: rgba(113, 88, 65, .12); stroke-width: 1; }
.radar-shape { fill: rgba(176, 137, 93, .25); stroke: #987654; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 5px 7px rgba(105, 78, 52, .11)); }
.radar-point { fill: #f8f0e3; stroke: #826142; stroke-width: 1.5; }
.radar-label { fill: #705f51; font-family: "Songti SC", serif; font-size: 10px; text-anchor: middle; dominant-baseline: middle; }
.profile-ranking { display: grid; gap: 15px; }
.profile-rank-row > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; align-items: baseline; gap: 5px; margin-bottom: 7px; }
.profile-rank-row span { color: #b09c89; font-family: Georgia, serif; font-size: 10px; }
.profile-rank-row b { color: #5d4a3a; font-family: "Songti SC", serif; font-size: 13px; font-weight: 600; }
.profile-rank-row strong { color: #927252; font-size: 11px; text-align: right; }
.profile-rank-row svg { display: block; width: 100%; height: 5px; }
.profile-track { fill: rgba(132, 105, 80, .10); }
.profile-value { fill: #b28d65; }
.report-caption { margin: 12px 0 0; color: #968a7f; font-size: 10px; line-height: 1.6; text-align: center; }

.report-source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.report-source-item { display: grid; justify-items: center; gap: 6px; padding: 14px 5px 12px; color: #a79d94; border: 1px solid rgba(132, 112, 94, .10); border-radius: 17px; background: rgba(255, 255, 255, .17); }
.report-source-item > span { display: grid; width: 38px; height: 38px; place-content: center; color: #a79d94; border: 1px solid rgba(143, 124, 107, .18); border-radius: 50%; font-family: "Songti SC", serif; font-size: 15px; }
.report-source-item b { font-size: 11px; font-weight: 500; white-space: nowrap; }
.report-source-item small { font-size: 9px; }
.report-source-item.ready { color: #66503d; border-color: rgba(155, 119, 84, .17); background: linear-gradient(145deg, rgba(236, 221, 201, .42), rgba(255, 255, 255, .25)); }
.report-source-item.ready > span { color: #745638; border-color: rgba(147, 109, 72, .25); background: rgba(219, 196, 165, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65); }
.report-source-item.ready small { color: #9a7d62; }

.result-guidance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.result-guidance-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 14px; border: 1px solid rgba(136, 108, 82, .11); border-radius: 17px; background: rgba(255, 255, 255, .20); }
.result-guidance-row > span { display: grid; width: 34px; height: 34px; place-content: center; color: #76593e; border: 1px solid rgba(150, 112, 77, .18); border-radius: 12px; background: rgba(222, 201, 173, .28); font-family: "Songti SC", serif; font-size: 13px; }
.result-guidance-row strong { color: #775b43; font-size: 12px; }
.result-guidance-row p { margin: 5px 0 0; color: #625a53; font-size: 12px; line-height: 1.7; }
.result-meta { margin-top: 17px; text-align: center; }

.form-card label { display: block; margin-bottom: 6px; color: #536b61; font-size: 13px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.select, .time-input { width: 100%; padding: 11px; color: var(--wood-ink); border: 1px solid var(--glass-edge); border-radius: 10px; background: rgba(255, 253, 249, .50); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.weekday-row { display: flex; justify-content: space-between; gap: 5px; margin: 10px 0 18px; }
.weekday-button { width: 30px; height: 30px; padding: 0; color: #60736b; border: 1px solid var(--glass-edge); border-radius: 50%; background: rgba(255, 253, 249, .46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54); }
.weekday-button.active { color: var(--wood-ink); border-color: rgba(177, 143, 103, .38); background: var(--wood-wash-soft); }
.reminder-card { padding: 17px 19px; background: linear-gradient(135deg, rgba(255, 254, 249, .58), rgba(239, 232, 220, .34)); }
.reminder-main { display: flex; align-items: flex-start; gap: 12px; }
.reminder-main > div { min-width: 0; flex: 1; }
.reminder-glyph { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-content: center; color: #877543; border: 1px solid #e2d6ad; border-radius: 13px; background: #fbf6e5; }
.reminder-glyph .metric-glyph { width: 21px; height: 21px; color: inherit; }
.reminder-card h3 { margin: 0 0 5px; }
.switch { position: relative; width: 45px; height: 27px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(255, 255, 255, .68); border-radius: 99px; background: rgba(189, 182, 172, .48); box-shadow: inset 0 1px 3px rgba(92, 72, 54, .06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.switch::after { content: ""; position: absolute; width: 21px; height: 21px; top: 3px; left: 3px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch.on { background: rgba(198, 164, 123, .58); }
.switch.on::after { transform: translateX(18px); }
.check-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.done-text { color: #3f7868; font-size: 14px; }
.skip-text { color: #7d8b83; font-size: 14px; }
.companion-chat-page { display: flex; min-height: calc(100vh - 28px); flex-direction: column; padding: 0 2px 84px; }
.companion-chat-head { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 56px; margin: 0 -2px 14px; padding: 7px 4px; background: rgba(244, 239, 230, .72); -webkit-backdrop-filter: blur(24px) saturate(1.12); backdrop-filter: blur(24px) saturate(1.12); }
.companion-back { width: 38px; height: 38px; padding: 0; color: #614b3a; border: 0; background: transparent; font: 300 31px/1 Georgia, serif; }
.companion-chat-head h1 { display: inline; margin: 0; color: #3f3026; font-family: Georgia, "Songti SC", serif; font-size: 20px; }
.companion-chat-head span { margin-left: 9px; color: #8a7564; font-size: 12px; }
.companion-focus-card { padding: 14px 15px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 18px; background: linear-gradient(135deg, rgba(255, 253, 248, .58), rgba(229, 214, 192, .32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 10px 26px rgba(83, 61, 44, .05); -webkit-backdrop-filter: blur(28px) saturate(1.08); backdrop-filter: blur(28px) saturate(1.08); }
.companion-focus-card > span { color: #a17d4b; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.companion-focus-card h2 { margin: 5px 0 4px; color: #4a382c; font-family: Georgia, "Songti SC", serif; font-size: 17px; }
.companion-focus-card p { display: -webkit-box; overflow: hidden; margin: 0; color: #705b4b; font-size: 13px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.companion-focus-card ul { display: grid; gap: 3px; margin: 9px 0 0; padding: 0; list-style: none; }
.companion-focus-card li { overflow: hidden; color: #7c6959; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.companion-focus-card small { display: block; margin-top: 7px; color: #9a8879; font-size: 10px; }
.companion-status-notice { margin: 10px 2px 0; color: #806f62; font-size: 11px; line-height: 1.55; }
.companion-status-notice.pending { color: #8a6b34; }
.companion-thread { display: grid; gap: 12px; padding: 18px 3px 8px; }
.companion-thread.empty { display: none; }
.companion-message { max-width: 86%; padding: 11px 13px; border-radius: 16px; font-size: 14px; line-height: 1.65; }
.companion-message p { margin: 0; white-space: pre-wrap; }
.companion-message.assistant { color: #3f534b; border: 1px solid rgba(255, 255, 255, .64); border-top-left-radius: 5px; background: rgba(255, 253, 249, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.companion-message.assistant small { display: block; margin-top: 9px; color: #789087; font-size: 11px; }
.companion-message.user { justify-self: end; color: #4d3a2e; border: 1px solid rgba(255, 255, 255, .52); border-bottom-right-radius: 5px; background: rgba(210, 186, 153, .36); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.voice-message-bar { display: flex; width: min(230px, 100%); min-height: 38px; align-items: center; gap: 8px; margin-top: 9px; padding: 7px 11px; color: #5f4b3d; border: 1px solid rgba(255, 255, 255, .52); border-radius: 18px; background: rgba(255, 253, 248, .36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.voice-message-bar.playing { background: rgba(224, 207, 182, .45); }
.voice-play-mark { width: 15px; color: #8b6c4e; font-size: 10px; text-align: center; }
.voice-wave { display: flex; height: 18px; align-items: center; gap: 3px; }
.voice-wave i, .recording-wave i { display: block; width: 2px; border-radius: 99px; background: #9b7653; }
.voice-wave i:nth-child(1), .recording-wave i:nth-child(1) { height: 7px; }
.voice-wave i:nth-child(2), .recording-wave i:nth-child(2) { height: 13px; }
.voice-wave i:nth-child(3), .recording-wave i:nth-child(3) { height: 18px; }
.voice-wave i:nth-child(4), .recording-wave i:nth-child(4) { height: 10px; }
.voice-wave i:nth-child(5), .recording-wave i:nth-child(5) { height: 15px; }
.voice-message-bar.playing .voice-wave i, .recording-wave i { animation: voice-pulse .62s ease-in-out infinite alternate; }
.voice-message-bar.playing .voice-wave i:nth-child(2), .recording-wave i:nth-child(2) { animation-delay: .12s; }
.voice-message-bar.playing .voice-wave i:nth-child(3), .recording-wave i:nth-child(3) { animation-delay: .24s; }
.voice-message-bar.playing .voice-wave i:nth-child(4), .recording-wave i:nth-child(4) { animation-delay: .36s; }
.voice-message-bar b { flex: 1; font-size: 11px; font-weight: 600; text-align: left; }
.voice-message-bar small { color: #95785e !important; font-size: 10px !important; margin: 0 !important; }
@keyframes voice-pulse { from { opacity: .45; transform: scaleY(.55); } to { opacity: 1; transform: scaleY(1); } }
.companion-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.companion-suggestion, .companion-quick-prompts button { padding: 8px 11px; color: #6b5240; border: 1px solid rgba(180, 148, 109, .22); border-radius: 99px; background: rgba(255, 253, 249, .46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 12px; }
.companion-quick-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 3px 8px; }
.companion-form { position: fixed; right: max(16px, calc((100vw - 680px) / 2)); bottom: max(14px, env(safe-area-inset-bottom)); left: max(16px, calc((100vw - 680px) / 2)); z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border: 1px solid rgba(255, 255, 255, .68); border-radius: 22px; background: rgba(253, 250, 244, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 12px 32px rgba(72, 53, 39, .11); -webkit-backdrop-filter: blur(30px) saturate(1.14); backdrop-filter: blur(30px) saturate(1.14); }
.companion-form.has-voice { grid-template-columns: 38px minmax(0, 1fr) 38px; padding-left: 8px; }
.companion-form.voice-mode { grid-template-columns: 38px minmax(0, 1fr); }
.companion-form textarea { width: 100%; min-height: 24px; max-height: 78px; resize: none; padding: 3px 0; color: var(--wood-ink); border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; }
.companion-mode-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: #806249; border: 0; border-radius: 50%; background: rgba(232, 217, 196, .32); font-size: 17px; }
.companion-mode-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.companion-voice-hold { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 12px; padding: 0 18px; color: #5b4434; border: 1px solid rgba(180, 148, 109, .18); border-radius: 18px; background: rgba(255, 253, 249, .35); font-size: 13px; letter-spacing: .08em; touch-action: none; -webkit-user-select: none; user-select: none; }
.companion-voice-hold.recording { color: #684a31; background: rgba(221, 198, 167, .52); }
.companion-voice-hold:disabled { opacity: .56; }
.recording-wave { display: flex; height: 18px; align-items: center; gap: 3px; }
.companion-send { width: 36px; height: 36px; padding: 0; color: #fffaf3; border: 0; border-radius: 50%; background: #8b6c4e; font-size: 19px; line-height: 36px; }
.companion-send:disabled { opacity: .52; }
.settings-group { margin-top: 25px; }
.settings-group h2 { margin-bottom: 9px; font-family: Georgia, "Songti SC", serif; }
.setting-row { padding: 16px 0; border-bottom: 1px solid #e4ebe4; }
.setting-row:last-child { border-bottom: 0; }
.setting-row p { margin: 3px 0 0; color: #718078; font-size: 13px; line-height: 1.5; }

.knowledge-card { position: relative; overflow: hidden; padding-right: 86px; background: linear-gradient(140deg, rgba(255, 254, 250, .58), rgba(241, 233, 221, .34)); }
.knowledge-card-head { min-height: 24px; }
.knowledge-art { position: absolute; top: 18px; right: 16px; display: block; width: 55px; height: 55px; border-radius: 18px 20px 16px 22px; background: #dbeae0; }
.knowledge-art i, .knowledge-art b, .knowledge-art em { position: absolute; display: block; }
.knowledge-art-lifestyle { background: linear-gradient(135deg, #d8e8dc, #f4eed9); }
.knowledge-art-lifestyle i { top: 10px; left: 24px; width: 15px; height: 31px; border: 1px solid #67947c; border-radius: 50% 50% 45% 45%; transform: rotate(33deg); }
.knowledge-art-lifestyle b { top: 27px; left: 17px; width: 17px; border-top: 1px solid #7aa187; transform: rotate(-35deg); }
.knowledge-art-ring_data { background: radial-gradient(circle at 50% 50%, #f6efd9 0 18%, #c8dfd5 19% 38%, #e6eee5 39%); }
.knowledge-art-ring_data i { inset: 12px; border: 1px solid #628d7d; border-radius: 50%; }
.knowledge-art-ring_data b { top: 23px; right: 16px; left: 16px; border-top: 1px solid #799f90; }
.knowledge-art-food_as_medicine { background: linear-gradient(135deg, #f1e1b3, #dbe8d0); }
.knowledge-art-food_as_medicine i { top: 12px; left: 20px; width: 18px; height: 26px; border: 1px solid #a58445; border-radius: 50% 50% 48% 48%; transform: rotate(33deg); }
.knowledge-art-food_as_medicine b { top: 29px; left: 15px; width: 24px; border-top: 1px solid #7e9d6d; transform: rotate(-30deg); }
.knowledge-art-seasonal_wellness { background: linear-gradient(145deg, #d6e8df, #e9dfbd); }
.knowledge-art-seasonal_wellness i { top: 13px; left: 14px; width: 26px; height: 26px; border: 1px solid #6d9785; border-radius: 50%; }
.knowledge-art-seasonal_wellness b { top: 22px; left: 21px; width: 12px; border-top: 1px solid #af8f4c; transform: rotate(90deg); }
.knowledge-art-seasonal_wellness em { top: 18px; left: 17px; width: 20px; border-top: 1px solid #af8f4c; }
.article-body { color: #4f625a; font-size: 16px; line-height: 2; }
.article-body p { margin: 0 0 1.2em; }
.back-link { margin: 7px 0 19px; }
.error-box { margin: 15px 0; padding: 14px; color: #7a5548; border-radius: 12px; background: #fbefe8; font-size: 14px; line-height: 1.6; }
.session-actions { display: flex; justify-content: center; gap: 10px; }

/* The compact card is the only H5 surface used before a user asks to expand. */
.preview-shell { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 85% 2%, #eadfce, transparent 45%), #f4f1e9; }
.preview-card { width: min(100%, 420px); overflow: hidden; padding: 19px; color: var(--wood-ink); border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(138deg, rgba(249, 243, 234, .64), rgba(205, 173, 137, .38)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 15px 38px var(--glass-shadow); -webkit-backdrop-filter: blur(30px) saturate(1.12); backdrop-filter: blur(30px) saturate(1.12); }
.preview-card[role="button"] { cursor: pointer; }
.preview-card:focus-visible { outline: 3px solid #d9c078; outline-offset: 4px; }
.preview-head, .preview-footer, .preview-chart-wrap > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-brand { display: flex; align-items: center; gap: 8px; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 700; letter-spacing: .05em; }
.preview-brand .brand-mark { width: 18px; height: 18px; color: #806047; }
.preview-brand .brand-mark::after { inset: 4px; background: #e0c77e; }
.preview-action { color: #6f5745; font-size: 12px; }
.preview-copy { margin: 22px 0 17px; }
.preview-copy .eyebrow { color: #80654e; }
.preview-copy h1 { margin: 6px 0 8px; color: #3f3026; font-size: 24px; }
.preview-copy p { margin: 0; color: #69513f; font-size: 13px; line-height: 1.55; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preview-metric { min-width: 0; padding: 11px 9px; border: 1px solid rgba(255, 255, 255, .58); border-radius: 13px; background: rgba(255, 253, 249, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46); }
.preview-metric span, .preview-metric small { display: block; color: #765d49; font-size: 11px; }
.preview-metric b { display: block; overflow: hidden; margin-top: 6px; color: #3f3026; font-family: Georgia, "Songti SC", serif; font-size: 21px; white-space: nowrap; text-overflow: ellipsis; }
.preview-metric b small { display: inline; margin-left: 3px; color: #765d49; font-family: inherit; font-size: 10px; font-weight: 400; }
.preview-chart-wrap { margin: 17px -2px 0; padding: 12px 12px 7px; border: 1px solid rgba(255, 255, 255, .48); border-radius: 14px; background: rgba(255, 253, 249, .30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42); }
.preview-chart-wrap > div { color: #634d3d; font-size: 11px; }
.preview-chart-wrap small { color: #876d57; font-size: 10px; }
.preview-chart { display: block; width: 100%; height: 92px; margin-top: 2px; overflow: visible; }
.preview-chart-area { fill: rgba(181, 217, 196, .13); }
.preview-chart-line { fill: none; stroke: #d8c37d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.preview-chart-dot { fill: #936f50; }
.preview-chart-dot.latest { fill: #fffaf1; stroke: #9d794f; stroke-width: 2; }
.preview-chart-empty { display: grid; height: 92px; place-content: center; color: #806752; font-size: 12px; text-align: center; }
.preview-empty { margin: 12px 0; padding: 14px; color: #755d49; border: 1px dashed rgba(92, 68, 48, .23); border-radius: 13px; font-size: 13px; text-align: center; }
.preview-footer { margin-top: 15px; color: #725946; font-size: 11px; }
.preview-knowledge-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .48); border-radius: 13px; background: rgba(255, 253, 249, .30); color: #725946; font-size: 12px; }
.preview-knowledge-meta small { color: #876d57; font-size: 11px; }
.preview-expand { padding: 7px 10px; color: var(--wood-ink); border: 1px solid rgba(255, 255, 255, .58); border-radius: 99px; background: var(--wood-wash-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); font-size: 12px; font-weight: 700; }
.preview-error { color: #5f4939; text-align: center; }
.preview-error h1 { color: #3f3026; font-size: 23px; }
.preview-error p { color: #725946; line-height: 1.6; }

/* The embedded preview is short; preserve the data sketch without making a
   second scroll surface inside the APP home page. */
@media (max-width: 620px) {
  .constitution-profile-layout { grid-template-columns: 1fr; gap: 0; }
  .constitution-radar { max-width: 330px; }
  .profile-ranking { grid-template-columns: repeat(2, 1fr); gap: 12px 18px; }
}

@media (max-height: 300px) {
  .preview-shell { min-height: 100vh; padding: 0; place-items: stretch; background: transparent; }
  .preview-card { width: 100%; min-height: 100vh; padding: 12px 14px; border-radius: 0; box-shadow: none; }
  .preview-head { min-height: 18px; }
  .preview-brand { font-size: 15px; }
  .preview-brand .brand-mark { width: 16px; height: 16px; }
  .preview-action { font-size: 11px; }
  .preview-copy { margin: 7px 0 8px; }
  .preview-copy .eyebrow, .preview-copy p, .preview-footer { display: none; }
  .preview-copy h1 { overflow: hidden; margin: 0; font-size: 21px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
  .preview-metrics { gap: 7px; }
  .preview-metric { padding: 7px 8px; border-radius: 11px; }
  .preview-metric span, .preview-metric small { font-size: 10px; }
  .preview-metric b { margin-top: 3px; font-size: 18px; }
  .preview-chart-wrap { margin: 8px 0 0; padding: 0; background: transparent; }
  .preview-chart-wrap > div { display: none; }
  .preview-chart { height: 48px; margin: 0; }
  .preview-chart-empty { height: 48px; font-size: 11px; }
  .preview-empty { margin: 8px 0 0; padding: 10px; font-size: 12px; }
}

@media (max-width: 400px) {
  .app-shell { padding-right: 15px; padding-left: 15px; }
  .metric-value { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 5px; }
  .assessment-hero { margin-right: -15px; margin-left: -15px; }
  .assessment-hero { min-height: 250px; padding-right: 20px; padding-left: 20px; }
  .assessment-hero p { max-width: calc(100% - 86px); }
  .assessment-count { right: 18px; bottom: 27px; width: 78px; height: 78px; }
  .assessment-progress { gap: 2px; }
  .assessment-progress-item b { font-size: 10px; }
  .assessment-entry { padding: 18px; }
  .assessment-orbit { width: 74px; height: 74px; }
  .assessment-list-row { grid-template-columns: 33px minmax(0, 1fr); }
  .assessment-list-row > b { grid-column: 2; margin-top: -10px; margin-bottom: 12px; }
  .gender-choice { align-items: flex-start; flex-direction: column; }
  .question-panel { min-height: 405px; }
  .result-hero { grid-template-columns: minmax(0, 1fr) 78px; gap: 12px; padding: 25px 18px 19px; border-radius: 23px; }
  .result-hero h1 { font-size: 39px; }
  .report-agreement svg { width: 74px; height: 74px; }
  .report-agreement strong { font-size: 21px; }
  .report-card { padding: 18px 15px; border-radius: 21px; }
  .modality-analysis-card { padding: 14px 12px; }
  .modality-analysis-card header { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .modality-analysis-card header > span { width: 38px; height: 38px; }
  .modality-analysis-card dl { grid-template-columns: 1fr; }
  .profile-ranking { gap: 11px 14px; }
  .report-source-grid { gap: 6px; }
  .report-source-item { padding: 11px 2px 10px; }
  .report-source-item > span { width: 34px; height: 34px; }
  .report-source-item b { font-size: 10px; }
  .result-guidance-grid { grid-template-columns: 1fr; }
  .top-date { display: none; }
  .trend-summary-grid { gap: 8px; }
  .trend-summary-card { padding: 12px 10px; }
  .pulse-history-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pulse-history-row b { text-align: left; }
}