:root {
    --paper: #f3f8f7;
    --paper-deep: #e9f2f0;
    --surface: #ffffff;
    --surface-soft: #ebf3f1;
    --ink: #142521;
    --muted: #647773;
    --line: #dde9e6;
    --accent: #13857b;
    --accent-deep: #0d6d65;
    --accent-soft: #e5f4f2;
    --warm: #b86824;
    --warm-soft: #fff6ed;
    --danger: #c46057;
    --shadow: 0 18px 48px rgba(29, 69, 64, .08);
    --shadow-small: 0 8px 24px rgba(29, 69, 64, .07);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --space: 16px;
    --content: 720px;
    font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.65; }
.larger-text { font-size: 17px; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { border: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.28; letter-spacing: -.025em; }
p { color: var(--muted); }

.eyebrow { display: block; margin-bottom: 6px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .16s ease, background .16s ease, opacity .16s ease; }
.button:active { transform: scale(.98); }
.button:disabled { opacity: .55; cursor: wait; }
.button-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(19, 133, 123, .18); }
.button-primary:hover { background: var(--accent-deep); }
.button-secondary { background: var(--accent-soft); color: var(--accent-deep); }
.button-secondary:hover { background: #d7eeeb; }
.button-quiet { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.button-block { width: 100%; }
.button-wide { min-width: 220px; }
.text-button { min-height: 36px; padding: 6px 11px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: var(--accent); font-weight: 700; cursor: pointer; }
.danger { color: var(--danger) !important; }

input, select, textarea { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 10px 12px; outline: none; transition: border .16s, box-shadow .16s; }
textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19, 133, 123, .12); }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.field-help { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.form-stack { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-error { padding: 12px 14px; border-left: 3px solid var(--danger); border-radius: 6px; background: #fbefed; color: #7e3f3f; }

.flash { max-width: var(--content); margin: 0 auto 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-small); }
.flash-success { border-color: #b9d5c5; background: #eef7f1; }
.flash-error { border-color: #e4c5c1; background: #fbefed; }
.flash-info { border-color: #cbd8df; background: #f0f5f7; }

/* Installation and authentication */
.install-page, .auth-page, .onboarding-page { background: var(--paper); }
.install-shell { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(420px, 1fr); gap: 56px; width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0; align-items: start; }
.install-intro { position: sticky; top: 60px; padding: 54px 10px; }
.install-intro h1 { max-width: 500px; margin: 12px 0 18px; font-family: "STSong", "Songti SC", serif; font-size: clamp(36px, 5vw, 64px); font-weight: 500; }
.install-intro p { max-width: 430px; font-size: 17px; }
.install-card { padding: 34px; border: 1px solid rgba(19,133,123,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.install-card h2 { margin: 10px 0 16px; font-size: 18px; }
.install-card details { padding: 12px 0; }
.install-card summary { cursor: pointer; color: var(--muted); }
.success-mark { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.auth-shell { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); min-height: 100vh; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 48px clamp(36px, 6vw, 88px); background: var(--accent-deep); color: #f7faf7; }
.auth-story .wordmark { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .04em; }
.auth-story .wordmark small { margin-left: 7px; color: #cde9e5; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.auth-story .eyebrow { color: #d7efec; }
.auth-story h1 { margin: 14px 0 22px; font-family: "STSong", "Songti SC", serif; font-size: clamp(40px, 5vw, 68px); font-weight: 500; }
.auth-story p { max-width: 520px; color: #d9eeeb; font-size: 17px; }
.auth-story small { color: #c2dfdb; }
.auth-panel { display: grid; place-items: center; padding: 40px; }
.auth-card { width: min(420px, 100%); }
.auth-card h2 { margin: 5px 0 28px; font-size: 30px; }
.auth-switch { margin-top: 22px; text-align: center; font-size: 13px; }
.auth-switch a { font-weight: 700; }

.onboarding-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 80px; }
.onboarding-progress { display: flex; gap: 8px; margin-bottom: 48px; }
.onboarding-progress span { width: 42px; height: 4px; border-radius: 4px; background: var(--accent); }
.onboarding-progress span:nth-child(2) { opacity: .65; }
.onboarding-progress span:nth-child(3) { opacity: .35; }
.onboarding-shell h1 { margin-bottom: 12px; font-family: "STSong", "Songti SC", serif; font-size: clamp(34px, 6vw, 54px); font-weight: 500; }
.onboarding-form { display: grid; gap: 42px; margin-top: 42px; }
.onboarding-form fieldset { margin: 0; padding: 0; border: 0; }
.onboarding-form legend { margin-bottom: 16px; font-size: 17px; font-weight: 800; }
.onboarding-form legend small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.choice-grid.compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
.choice-card { position: relative; display: block; cursor: pointer; }
.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card > span { display: flex; min-height: 70px; align-items: center; justify-content: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-align: center; transition: border .16s, background .16s, transform .16s; }
.choice-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); box-shadow: 0 0 0 2px rgba(66,107,91,.08); }
.choice-card:active > span { transform: scale(.985); }
.choice-card.detail span { display: grid; align-content: center; gap: 3px; }
.choice-card.detail small { color: var(--muted); font-weight: 400; }

/* User application */
.user-app { padding-bottom: 96px; background: linear-gradient(180deg, #edf2eb 0, var(--paper) 320px); }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; opacity: .38; }
.ambient-one { top: -120px; left: calc(50% - 500px); width: 300px; height: 300px; background: #d0e1d7; }
.ambient-two { top: 90px; right: calc(50% - 560px); width: 260px; height: 260px; background: #efe2d7; }
.app-shell { width: min(var(--content), calc(100% - 32px)); margin: 0 auto; padding: 28px 0 52px; }
.app-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.app-header h1 { margin: 0 0 8px; font-family: "STSong", "Songti SC", serif; font-size: 38px; font-weight: 600; }
.app-header p { margin: 0; }
.avatar-link { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(66,107,91,.18); border-radius: 50%; background: rgba(255,255,252,.82); color: var(--accent); font-weight: 800; text-decoration: none; box-shadow: var(--shadow-small); }
.bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 520px; margin: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border: 1px solid rgba(66,107,91,.12); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(255,255,252,.94); box-shadow: 0 -10px 32px rgba(44,61,53,.09); backdrop-filter: blur(18px); }
.nav-item { display: grid; min-height: 52px; place-items: center; align-content: center; gap: 3px; color: var(--muted); font-size: 12px; text-decoration: none; }
.nav-mark { width: 18px; height: 4px; border-radius: 5px; background: var(--line); transition: width .16s, background .16s; }
.nav-item.active { color: var(--accent-deep); font-weight: 800; }
.nav-item.active .nav-mark { width: 30px; background: var(--accent); }

.home-rescue-board { min-width: 0; max-width: 100%; overflow: hidden; margin-bottom: 30px; border: 1px solid rgba(66,107,91,.16); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.home-rescue-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 28px 22px; border-bottom: 1px solid var(--line); }
.home-rescue-heading h2 { margin: 2px 0 6px; font-family: "STSong", "Songti SC", serif; font-size: 30px; font-weight: 600; }
.home-rescue-heading p { margin: 0; font-size: 13px; }
.home-rescue-heading > a { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; padding: 8px 13px; border: 1px solid #cad6cf; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.home-rescue-list { display: grid; }
.home-rescue-card { min-width: 0; border-bottom: 1px solid var(--line); background: #fff; }
.home-rescue-card:last-child { border-bottom: 0; }
.home-rescue-card > summary { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 16px; min-height: 112px; align-items: center; padding: 19px 28px; cursor: pointer; list-style: none; transition: background .16s ease; }
.home-rescue-card > summary::-webkit-details-marker { display: none; }
.home-rescue-card > summary:hover { background: #f7f8f4; }
.home-rescue-number { align-self: start; padding-top: 3px; color: var(--warm); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.home-rescue-card > summary strong { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.home-rescue-card > summary > div, .rescue-script-lines > div { min-width: 0; }
.home-rescue-card > summary blockquote { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-family: "STSong", "Songti SC", serif; font-size: 21px; font-weight: 600; line-height: 1.55; }
.home-rescue-open { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent-deep); font-size: 12px; font-weight: 700; white-space: nowrap; }
.home-rescue-open::after { content: "+"; font-size: 17px; font-weight: 400; line-height: 1; }
.home-rescue-card[open] > summary { background: var(--surface-soft); }
.home-rescue-card[open] .home-rescue-open::after { content: "−"; }
.home-rescue-detail { display: grid; gap: 12px; padding: 18px 28px 26px 82px; border-top: 1px solid var(--line); background: #fbfcf9; }
.home-rescue-detail section { border-radius: 14px; }
.rescue-first { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding: 14px 16px; background: var(--accent-soft); }
.rescue-first span, .rescue-avoid > span { color: var(--accent-deep); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.rescue-first p, .rescue-avoid p { margin: 0; color: var(--ink); font-size: 13px; }
.rescue-script { padding: 18px; border: 1px solid #ead8ca; background: #fdf7f1; }
.rescue-script h3 { margin: 0 0 11px; color: #7a4f39; font-size: 12px; letter-spacing: .04em; }
.rescue-script-lines { display: grid; }
.rescue-script-lines > div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(191,123,89,.18); }
.rescue-script-lines > div:first-child { padding-top: 0; border-top: 0; }
.rescue-script-lines > div:last-child { padding-bottom: 0; }
.rescue-script-lines span { color: #9a6347; font-size: 11px; font-weight: 800; }
.rescue-script-lines p { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--ink); font-family: "STSong", "Songti SC", serif; font-size: 17px; font-weight: 600; line-height: 1.65; }
.rescue-avoid { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding: 14px 16px; border: 1px solid #ecd3cc; background: #fbefeb; }
.rescue-avoid > span { color: #985245; }
.home-rescue-empty { padding: 32px 28px; text-align: center; }
.home-rescue-empty h3 { margin-bottom: 6px; }
.home-rescue-empty p { margin-bottom: 18px; }

.home-card-manager-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-small); }
.home-card-manager-head h2 { margin: 2px 0 6px; font-family: "STSong", "Songti SC", serif; font-size: 28px; font-weight: 600; }
.home-card-manager-head p { margin: 0; font-size: 13px; }
.home-card-manager-head > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; }
.home-card-editor { margin-bottom: 20px; padding: 24px; border: 1px solid #c9d7cf; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 18px; }
.home-card-editor-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.home-card-editor-form .full, .home-card-editor-actions { grid-column: 1 / -1; }
.home-card-editor-form textarea { background: #fff; }
.home-card-editor-form .full textarea { border-color: #dfc4b3; background: #fffaf6; font-family: "STSong", "Songti SC", serif; font-size: 17px; font-weight: 600; }
.home-card-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.home-card-manage-list { display: grid; gap: 10px; }
.home-card-manage-list > article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-small); }
.manage-order { color: var(--warm); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.manage-card-copy h3 { margin: 0 0 4px; font-size: 15px; }
.manage-card-copy p { margin: 0; color: var(--ink); font-family: "STSong", "Songti SC", serif; font-size: 17px; font-weight: 600; }
.manage-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.manage-card-actions a, .manage-card-actions button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--accent-deep); font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; }
.manage-card-actions button:disabled { opacity: .35; cursor: default; }
.manage-card-actions .danger { border-color: #e5cbc5; background: #fff8f6; }
.section-block { margin: 34px 0; }
.section-heading, .panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.section-heading h2, .panel-head h2 { margin: 0; font-size: 22px; }
.section-heading a, .panel-head a { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 700; text-decoration: none; }
.continue-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.continue-card p { margin: 3px 0 0; }
.continue-card { justify-content: space-between; margin: 24px 0; background: var(--warm-soft); border-color: transparent; }
.continue-card h3 { margin: 4px 0; }
.home-continue { margin: 30px 0 12px; }
.home-micro-practice { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 12px; padding: 24px; border: 1px solid rgba(66,107,91,.12); border-radius: var(--radius-md); background: var(--accent-deep); color: #fff; }
.home-micro-practice h2 { margin: 3px 0 6px; font-family: "STSong", "Songti SC", serif; font-size: 23px; font-weight: 500; }
.home-micro-practice p { margin: 0; color: #c7d7d0; font-size: 13px; }
.home-micro-practice .eyebrow { color: #bdd2c8; }
.home-micro-practice .button { flex: 0 0 auto; background: #f8f7f0; color: var(--accent-deep); box-shadow: none; }

.practice-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.tool-card { position: relative; display: grid; min-height: 150px; align-content: end; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.tool-card::after { position: absolute; top: 17px; right: 18px; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 11px; font-weight: 700; content: "进入 →"; }
.tool-card:hover { border-color: #b9cbbf; transform: translateY(-2px); }
.tool-card.primary { background: var(--warm-soft); border-color: transparent; }
.tool-card > span { margin-bottom: auto; color: var(--muted); font-size: 12px; font-weight: 700; }
.tool-card strong { margin-top: 30px; font-size: 19px; }
.tool-card small { color: var(--muted); }
.category-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.category-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
.category-list a::after { flex: 0 0 auto; color: var(--accent); font-size: 22px; content: "›"; }
.category-list a:hover { background: var(--surface-soft); }
.category-list a:last-child { border-bottom: 0; }
.category-list strong { display: block; }
.category-list p { margin: 2px 0 0; font-size: 12px; }
.category-list > a > span { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.simulation-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.simulation-list article { display: grid; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.simulation-list h3 { margin: 18px 0 7px; }
.simulation-list p { min-height: 48px; font-size: 13px; }
.simulation-list article > div { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; }
.simulation-list a { display: inline-flex; min-height: 36px; align-items: center; padding: 6px 11px; border-radius: 9px; background: var(--accent-soft); font-weight: 800; text-decoration: none; }
.soft-tag { display: inline-flex; width: max-content; padding: 4px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--accent); font-size: 11px; font-weight: 700; }

.practice-progress { height: 5px; margin-bottom: 10px; overflow: hidden; border-radius: 5px; background: var(--line); }
.practice-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.practice-meta { display: flex; justify-content: space-between; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
.practice-meta a { display: inline-flex; min-height: 36px; align-items: center; margin-top: -8px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); text-decoration: none; }
.question-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.question-card h2 { margin: 14px 0 8px; font-family: "STSong", "Songti SC", serif; font-size: 30px; font-weight: 600; }
.scene-summary { margin-bottom: 22px; }
.scene-prompt { padding: 18px; border-radius: var(--radius-md); background: var(--surface-soft); }
.scene-prompt strong { font-size: 16px; }
.option-list { display: grid; gap: 10px; margin-top: 18px; }
.option-list label { position: relative; cursor: pointer; }
.option-list input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.option-list label > span { display: flex; min-height: 60px; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; font-weight: 500; transition: border .16s, background .16s; }
.option-list i { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-style: normal; font-size: 12px; }
.option-list input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.option-list input:checked + span i { background: var(--accent); color: #fff; }
.answer-result { margin: 20px 0 16px; padding: 16px 18px; border-radius: var(--radius-md); }
.answer-result span { font-weight: 800; }
.answer-result p { margin: 4px 0 0; }
.answer-result.steady { background: #e5f1e9; }
.answer-result.okay { background: #f6efe3; }
.answer-result.adjust { background: #f7ece9; }
.response-guide { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.response-guide > div { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.response-guide > div:last-child { border-bottom: 0; }
.response-guide span { color: var(--muted); font-size: 11px; }
.response-guide p { margin: 3px 0 0; color: var(--ink); font-weight: 700; }
.question-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.result-card { display: grid; place-items: center; padding: 48px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.result-ring { display: grid; width: 126px; height: 126px; place-items: center; align-content: center; margin-bottom: 28px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--accent-soft) 0); box-shadow: inset 0 0 0 12px var(--surface); }
.result-ring span { font-family: "STSong", "Songti SC", serif; font-size: 38px; line-height: 1; }
.result-ring small { font-size: 11px; }
.result-card h2 { margin: 8px 0; font-size: 27px; }
.result-card p { max-width: 450px; }
.result-actions { display: flex; gap: 10px; margin-top: 14px; }

.prepare-hero { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-small); }
.prepare-hero h2 { margin-bottom: 20px; font-size: 25px; }
.prepare-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; }
.prep-results { margin-top: 34px; }
.prep-card { position: relative; margin-bottom: 14px; overflow: hidden; border: 1px solid #cbd4ca; border-radius: 22px; background: #fffdf8; box-shadow: 0 3px 0 #c7d0c6, 0 20px 42px rgba(44,61,53,.12); }
.prep-card::before { position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--accent-deep), #6f8d7d 68%, #b98567); content: ""; }
.prep-card-head { padding: 28px 28px 20px; border-bottom: 1px solid rgba(66,107,91,.13); background: linear-gradient(135deg, #fbfcf7, #f3f6ef); }
.prep-card h3 { margin: 12px 0 0; font-family: "STSong", "Songti SC", serif; font-size: 24px; font-weight: 600; }
.prep-card-content { display: grid; gap: 12px; padding: 18px; }
.prep-card-section { border: 1px solid transparent; border-radius: 15px; padding: 17px 18px 18px; }
.prep-card-section > p { margin: 10px 0 0; color: var(--ink); line-height: 1.75; }
.prep-section-title { display: flex; align-items: center; gap: 9px; }
.prep-section-title span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; font-size: 10px; font-weight: 800; }
.prep-section-title h4 { margin: 0; font-size: 15px; letter-spacing: .01em; }
.prep-first { border-color: #cfddd2; background: #edf4ee; }
.prep-first .prep-section-title span { background: #d6e6da; color: var(--accent-deep); }
.prep-words { border-color: #e5dcc9; background: #fffaf0; }
.prep-words .prep-section-title span { background: #eee2c9; color: #745b32; }
.speech-flow { display: grid; gap: 0; margin-top: 12px; }
.speech-flow > div { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(116,91,50,.13); }
.speech-flow > div:first-child { padding-top: 4px; border-top: 0; }
.speech-flow span { padding-top: 2px; color: #806b48; font-size: 11px; font-weight: 700; }
.speech-flow p { position: relative; margin: 0; color: #35352f; font-weight: 700; line-height: 1.75; }
.speech-flow p::before { color: #b7a279; content: "“"; }
.speech-flow p::after { color: #b7a279; content: "”"; }
.prep-avoid { border-color: #ead7ce; background: #faf0eb; }
.prep-avoid .prep-section-title span { background: #f0dcd1; color: #8a513c; }
.prep-avoid > p { color: #704f43; }
.prep-card-actions { display: flex; align-items: center; justify-content: flex-start; padding: 15px 28px 18px; border-top: 1px solid rgba(66,107,91,.1); background: #f5f7f1; }
.prep-card.featured { box-shadow: 0 3px 0 #c7d0c6, 0 20px 42px rgba(44,61,53,.12); }
.switch-card-link { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.variant-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.variant-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.variant-dots span.active { width: 22px; border-radius: 7px; background: var(--accent); }
.empty-state { display: grid; min-height: 220px; place-items: center; align-content: center; margin: 26px 0; padding: 26px; border: 1px dashed #c9d1c8; border-radius: var(--radius-lg); text-align: center; }
.empty-state.compact { min-height: 130px; }
.empty-state h3, .empty-state h2 { margin: 12px 0 6px; }
.empty-state p { max-width: 430px; }
.empty-line { width: 40px; height: 4px; border-radius: 4px; background: var(--accent); }
.library-shortcut { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 16px; margin-top: 26px; padding: 20px; border: 1px solid #c9d8cf; border-radius: var(--radius-md); background: linear-gradient(135deg,#fbfcf8,#eef4ef); text-decoration: none; box-shadow: var(--shadow-small); transition: transform .16s ease, border-color .16s ease; }
.library-shortcut:hover { border-color: #9fb8aa; transform: translateY(-2px); }
.library-shortcut-mark { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: var(--accent-deep); color: #fff; font-family: "STSong",serif; font-size: 22px; }
.library-shortcut .eyebrow { margin-bottom: 3px; }
.library-shortcut h3 { margin: 0 0 4px; font-size: 19px; }
.library-shortcut p { margin: 0; font-size: 12px; }
.library-shortcut-action { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: #fff; color: var(--accent-deep); font-size: 12px; font-weight: 800; box-shadow: 0 3px 10px rgba(44,61,53,.07); }

.library-intro { position: relative; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 24px; border: 1px solid #365a4c; border-radius: var(--radius-md); background: linear-gradient(135deg,var(--accent-deep),#3e6858); color: #fff; box-shadow: var(--shadow-small); }
.library-intro > div { display: grid; }
.library-intro strong { font-family: "STSong", "Songti SC", serif; font-size: 38px; line-height: 1; }
.library-intro span { color: #c8d8d0; font-size: 12px; }
.library-intro .button { background: #fff; color: var(--accent-deep); }
.inline-editor { display: none; margin: 18px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.inline-editor.open { display: block; }
.library-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.library-search { display: grid; flex: 1; gap: 6px; }
.library-search > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.library-search input { min-height: 48px; }
.library-count { flex: 0 0 auto; padding-bottom: 13px; color: var(--muted); font-size: 12px; }
.response-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.response-mini-card { display: grid; grid-template-rows: auto auto auto 1fr auto; min-width: 0; min-height: 210px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.response-mini-card[hidden] { display: none; }
.response-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.response-mini-top > a { display: inline-flex; min-height: 40px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); font-size: 12px; font-weight: 700; text-decoration: none; }
.response-mini-card h3 { margin: 12px 0 4px; overflow-wrap: anywhere; font-size: 16px; }
.response-mini-context { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.response-mini-card blockquote { display: -webkit-box; margin: 8px 0 14px; padding: 11px; overflow: hidden; border-radius: 12px; background: var(--surface-soft); color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.response-mini-footer { display: flex; align-self: end; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.response-mini-footer > span { color: var(--muted); font-size: 10px; }
.response-mini-footer form { margin: 0; }
.response-mini-remove { min-height: 40px; padding: 6px 8px; border: 0; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.library-search-empty { margin: 20px 0; padding: 30px 20px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; }
.library-search-empty h3 { margin-bottom: 4px; }
.library-search-empty p { margin: 0; font-size: 12px; }
.response-list { display: grid; gap: 12px; margin-top: 24px; }
.response-list article { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 8px 24px rgba(44,61,53,.05); }
.response-list article::before { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,var(--accent),#9bb2a5); content: ""; }
.response-head { display: flex; justify-content: space-between; gap: 12px; }
.response-head h3 { margin: 10px 0 3px; }
.response-head p { margin: 0; font-size: 12px; }
.response-head > a { display: inline-flex; min-height: 38px; align-items: center; padding: 6px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.response-list blockquote { margin: 17px 0 12px; padding: 15px 17px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: #f4f5ed; font-weight: 700; }
.response-more { display: grid; grid-template-columns: 70px 1fr; gap: 10px; }
.response-more span { color: var(--muted); font-size: 11px; }
.response-more p { margin: 0; color: var(--ink); }
.response-list form { margin-top: 10px; text-align: right; }
.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0 0 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); }
.profile-stats div { display: grid; padding: 18px; background: var(--surface); text-align: center; }
.profile-stats strong { font-family: "STSong", serif; font-size: 27px; }
.profile-stats span { color: var(--muted); font-size: 11px; }
.profile-home-content-card { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 16px; margin-bottom: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; box-shadow: var(--shadow-small); transition: transform .16s ease, border-color .16s ease; }
.profile-home-content-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.profile-home-content-mark { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: var(--accent-soft); color: var(--accent-deep); }
.profile-home-content-mark .app-icon { width: 23px; height: 23px; }
.profile-home-content-card .eyebrow { margin-bottom: 3px; }
.profile-home-content-card h2 { margin: 0 0 4px; font-size: 20px; }
.profile-home-content-card p { margin: 0; font-size: 12px; }
.profile-home-content-action { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; font-weight: 800; }
.profile-library-card { position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 20px; overflow: hidden; padding: 28px; border: 1px solid #b9cdc1; border-radius: 24px; background: linear-gradient(135deg,#fdfdf8,#e8f0ea); text-decoration: none; box-shadow: 0 16px 38px rgba(44,61,53,.1); transition: transform .16s ease, border-color .16s ease; }
.profile-library-card::before { position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,var(--accent-deep),#92ab9d 72%,#c38a68); content: ""; }
.profile-library-card:hover { border-color: #91ad9d; transform: translateY(-2px); }
.profile-library-mark { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; background: var(--accent-deep); color: #fff; font-family: "STSong",serif; font-size: 26px; box-shadow: 0 8px 18px rgba(47,81,68,.18); }
.profile-library-card .eyebrow { margin-bottom: 4px; }
.profile-library-card h2 { margin: 0 0 6px; font-family: "STSong","Songti SC",serif; font-size: 25px; }
.profile-library-card p { margin: 0; }
.profile-library-action { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px; background: #fff; color: var(--accent-deep); font-size: 12px; font-weight: 800; box-shadow: 0 5px 14px rgba(44,61,53,.08); }
.profile-session-action { display: flex; justify-content: flex-end; margin-top: 24px; }

/* Admin */
.admin-app { background: #f2f4f0; }
.admin-shell { display: grid; grid-template-columns: 238px 1fr; min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 26px 18px; background: #25352f; color: #fff; }
.admin-brand { display: grid; margin: 0 10px 32px; color: #fff; text-decoration: none; }
.admin-brand span { font-size: 19px; font-weight: 800; }
.admin-brand small { color: #aebfb7; }
.admin-sidebar nav { display: grid; gap: 4px; }
.admin-sidebar nav a { padding: 10px 12px; border-radius: 9px; color: #b9c7c0; text-decoration: none; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: #384c44; color: #fff; }
.admin-account { display: flex; justify-content: space-between; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid #3b4c45; }
.admin-account a { color: #b9c7c0; font-size: 12px; }
.admin-main { min-width: 0; padding: 30px clamp(24px,4vw,54px) 70px; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.admin-top h1 { margin: 0; font-size: 30px; }
.metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.content-update { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 20px 22px; border: 1px solid #bed1c7; border-radius: var(--radius-md); background: #edf5f0; }
.content-update h2 { margin: 0 0 4px; font-size: 20px; }
.content-update p { margin: 0; }
.metric-grid.compact { grid-template-columns: repeat(2,minmax(0,260px)); }
.metric-grid article { display: grid; min-height: 138px; align-content: end; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.metric-grid article > span { margin-bottom: auto; color: var(--muted); font-size: 12px; }
.metric-grid strong { margin: 12px 0 2px; font-family: "STSong", serif; font-size: 34px; }
.metric-grid small { color: var(--muted); }
.admin-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.admin-panel { margin-bottom: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 26px rgba(44,61,53,.04); }
.admin-panel .panel-head p { margin: 0; font-size: 12px; }
.data-list > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.data-list > div:last-child { border-bottom: 0; }
.data-list div > div { display: grid; }
.data-list small { color: var(--muted); }
.data-list > div > span { color: var(--muted); font-size: 12px; }
.admin-empty { padding: 36px; color: var(--muted); text-align: center; }
.admin-next { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.admin-next a { position: relative; display: grid; min-height: 110px; align-content: end; padding: 16px; border-radius: 12px; background: var(--surface-soft); text-decoration: none; }
.admin-next a::after { position: absolute; top: 13px; right: 14px; color: var(--accent); font-weight: 800; content: "进入 →"; }
.admin-next span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.admin-toolbar form { display: flex; flex: 1; gap: 8px; }
.admin-toolbar form input { max-width: 280px; }
.admin-toolbar form select { max-width: 180px; }
.admin-toolbar p { margin: 0; }
.editor-panel { border-color: #bfd0c7; }
.admin-form { display: grid; gap: 14px; }
.table-panel { padding: 0; overflow: hidden; }
.table-panel > .panel-head { padding: 20px 20px 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 12px 14px; background: var(--surface-soft); color: var(--muted); text-align: left; white-space: nowrap; }
td { padding: 14px; border-top: 1px solid var(--line); vertical-align: middle; }
td strong, td small { display: block; }
td small { max-width: 360px; color: var(--muted); }
.status { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #edf0ec; color: var(--muted); font-size: 11px; white-space: nowrap; }
.status.published, .status.active { background: #e4f0e8; color: #39664f; }
.status.draft { background: #f4ecdf; color: #8b653d; }
.status.archived, .status.disabled { background: #f0e6e5; color: #8d5550; }
.option-editor { display: grid; gap: 12px; }
.option-row { display: grid; grid-template-columns: 1.4fr 110px 1.4fr; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface-soft); }
.simulation-admin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.simulation-admin-grid article { display: grid; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.simulation-admin-grid h3 { margin: 16px 0 6px; }
.simulation-admin-grid p { min-height: 48px; }
.simulation-admin-grid small { color: var(--muted); }
.simulation-admin-grid a { margin-top: 14px; font-weight: 700; }

@media (max-width: 900px) {
    .install-shell { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
    .install-intro { position: static; padding: 20px 0; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { min-height: 330px; padding: 34px; }
    .auth-story h1 { font-size: 40px; }
    .auth-story small { display: none; }
    .admin-shell { display: block; }
    .admin-sidebar { position: static; height: auto; }
    .admin-sidebar nav { grid-template-columns: repeat(3,1fr); }
    .admin-account { margin-top: 20px; }
    .metric-grid { grid-template-columns: repeat(2,1fr); }
    .admin-next, .simulation-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .app-shell { width: min(calc(100% - 24px), var(--content)); padding-top: 20px; }
    .app-header { margin-bottom: 20px; }
    .app-header h1 { font-size: 32px; }
    .app-header p { max-width: 260px; }
    .home-rescue-heading { display: grid; gap: 14px; padding: 22px 18px 18px; }
    .home-rescue-heading h2 { font-size: 27px; }
    .home-rescue-heading > a { justify-self: start; }
    .home-rescue-card > summary { grid-template-columns: 28px minmax(0,1fr); gap: 10px; min-height: 108px; padding: 17px 18px; }
    .home-rescue-card > summary blockquote { font-size: 19px; }
    .home-rescue-open { grid-column: 2; justify-self: start; min-height: 34px; margin-top: 3px; }
    .home-rescue-detail { padding: 15px 18px 20px; }
    .rescue-first, .rescue-avoid { grid-template-columns: 1fr; gap: 4px; }
    .rescue-script-lines > div { grid-template-columns: 1fr; gap: 4px; }
    .rescue-script-lines p { font-size: 16px; }
    .home-card-manager-head { display: grid; align-items: start; padding: 20px 18px; }
    .home-card-manager-head > div:last-child { width: 100%; }
    .home-card-manager-head .button { flex: 1; padding-right: 10px; padding-left: 10px; }
    .home-card-editor { padding: 20px 18px; }
    .home-card-editor-form { grid-template-columns: 1fr; }
    .home-card-editor-form .full, .home-card-editor-actions { grid-column: auto; }
    .home-card-editor-actions .button { flex: 1; }
    .home-card-manage-list > article { grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; padding: 16px; }
    .manage-card-actions { grid-column: 2; justify-content: flex-start; margin-top: 4px; }
    .manage-card-actions a, .manage-card-actions button { min-height: 44px; }
    .home-continue { align-items: stretch; flex-direction: column; }
    .home-continue .button { width: 100%; }
    .home-micro-practice { display: grid; padding: 21px 18px; }
    .home-micro-practice .button { width: 100%; }
    .practice-tools, .simulation-list { grid-template-columns: 1fr; }
    .question-card { padding: 20px; border-radius: 22px; }
    .question-actions, .result-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .question-actions form, .question-actions .button, .result-actions .button { width: 100%; }
    .prepare-form { grid-template-columns: 1fr; }
    .prep-card-head { padding: 25px 18px 17px; }
    .prep-card h3 { font-size: 21px; }
    .prep-card-content { gap: 10px; padding: 12px; }
    .prep-card-section { padding: 15px 14px 16px; }
    .speech-flow > div { grid-template-columns: 58px minmax(0,1fr); gap: 9px; }
    .prep-card-actions { padding: 13px 18px 16px; }
    .library-shortcut { grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 17px; }
    .library-shortcut-mark { width: 48px; height: 48px; }
    .library-shortcut-action { grid-column: 1/-1; justify-content: center; }
    .profile-home-content-card, .profile-library-card { grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 22px 18px 18px; }
    .profile-home-content-action { grid-column: 1/-1; justify-content: center; }
    .profile-library-mark { width: 54px; height: 54px; border-radius: 15px; font-size: 23px; }
    .profile-library-card h2 { font-size: 22px; }
    .profile-library-action { grid-column: 1/-1; justify-content: center; }
    .library-intro { align-items: stretch; flex-direction: column; gap: 18px; }
    .library-intro .button { width: 100%; }
    .form-grid, .form-grid.three { grid-template-columns: 1fr; }
    .choice-grid, .choice-grid.compact, .choice-grid.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .onboarding-shell { padding-top: 30px; }
    .install-card { padding: 24px; }
    .auth-panel { padding: 34px 22px; }
    .profile-stats div { padding: 14px 6px; }
    .admin-main { padding: 22px 14px 50px; }
    .admin-sidebar nav { grid-template-columns: repeat(2,1fr); }
    .admin-top { align-items: flex-start; }
    .admin-top .button { display: none; }
    .metric-grid, .metric-grid.compact, .admin-columns { grid-template-columns: 1fr; }
    .content-update { align-items: stretch; flex-direction: column; }
    .content-update .button { width: 100%; }
    .admin-toolbar { align-items: stretch; flex-direction: column; }
    .admin-toolbar form { flex-wrap: wrap; }
    .admin-toolbar form input, .admin-toolbar form select { max-width: none; }
    .option-row { grid-template-columns: 1fr; }
}

/* User app 2.0 — quiet, touch-first application system */
.user-app {
    --app-bg: #f3f8f7;
    --app-surface: #ffffff;
    --app-surface-2: #ebf3f1;
    --app-ink: #142521;
    --app-muted: #647773;
    --app-line: #dde9e6;
    --app-accent: #13857b;
    --app-accent-deep: #0d6d65;
    --app-accent-2: #e5f4f2;
    --app-accent-3: #cde9e5;
    --app-success: #2f8c68;
    --app-success-soft: #e5f5ed;
    --app-warm: #b86824;
    --app-warm-2: #fff6ed;
    --app-danger: #c46057;
    --app-danger-soft: #fff3f1;
    --app-shadow-rgb: 29, 69, 64;
    min-height: 100vh;
    padding-bottom: 112px;
    background: var(--app-bg);
    color: var(--app-ink);
}
.user-app .ambient { display: none; }
.user-app .app-shell { width: min(760px, calc(100% - 32px)); padding: 22px 0 64px; animation: app-enter .22s ease both; }
@keyframes app-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.user-app .app-header { min-height: 74px; align-items: center; margin-bottom: 18px; }
.user-app .app-header-copy { min-width: 0; }
.user-app .app-wordmark { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--app-accent); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.user-app .app-wordmark i { padding-left: 7px; border-left: 1px solid var(--app-accent-3); color: var(--app-muted); font-style: normal; font-weight: 600; letter-spacing: .02em; }
.user-app .app-header h1 { margin: 0; color: var(--app-ink); font-family: inherit; font-size: 30px; font-weight: 760; letter-spacing: -.045em; }
.user-app .app-header p { max-width: 540px; margin-top: 3px; color: var(--app-muted); font-size: 13px; line-height: 1.45; }
.app-icon { display: block; width: 22px; height: 22px; }
.user-app .avatar-link { width: 44px; height: 44px; border: 1px solid rgba(19,133,123,.15); background: rgba(255,255,255,.92); color: var(--app-accent); box-shadow: 0 8px 24px rgba(var(--app-shadow-rgb),.07); transition: transform .16s ease, background .16s ease; }
.user-app .avatar-link:active { transform: scale(.94); background: var(--app-accent-2); }
.user-app .bottom-nav { right: 50%; bottom: 14px; left: auto; width: min(500px, calc(100% - 24px)); max-width: none; transform: translateX(50%); gap: 4px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border: 1px solid rgba(19,133,123,.13); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 15px 44px rgba(var(--app-shadow-rgb),.13); backdrop-filter: blur(22px) saturate(130%); }
.user-app .nav-item { min-height: 55px; gap: 2px; border-radius: 17px; color: var(--app-muted); font-size: 10px; font-weight: 650; transition: transform .15s ease, color .15s ease, background .15s ease; }
.user-app .nav-item:active { transform: scale(.95); }
.user-app .nav-icon { display: grid; width: 38px; height: 30px; place-items: center; border-radius: 12px; transition: background .16s ease, transform .16s ease; }
.user-app .nav-icon .app-icon { width: 20px; height: 20px; }
.user-app .nav-item.active { background: var(--app-accent-2); color: var(--app-accent-deep); }
.user-app .nav-item.active .nav-icon { background: var(--app-accent-2); transform: translateY(-1px); }
.user-app .nav-mark { display: none; }
.user-app a { text-underline-offset: 3px; }
.user-app .button, .auth-page .button, .onboarding-page .button { min-height: 48px; padding: 11px 18px; border-radius: 14px; font-size: 14px; box-shadow: none; transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
.user-app .button:active, .auth-page .button:active, .onboarding-page .button:active { transform: scale(.975); }
.user-app .button-primary, .auth-page .button-primary, .onboarding-page .button-primary { background: var(--app-accent, #13857b); color: #fff; box-shadow: 0 9px 20px rgba(19,133,123,.17); }
.user-app .button-primary:hover, .auth-page .button-primary:hover, .onboarding-page .button-primary:hover { background: var(--app-accent-deep, #0d6d65); }
.user-app .button-secondary { background: var(--app-accent-2); color: var(--app-accent); }
.user-app .button-quiet { border-color: var(--app-line); background: rgba(255,255,255,.82); color: var(--app-ink); }
.user-app .text-button { min-height: 42px; padding: 8px 12px; border-color: var(--app-line); border-radius: 11px; background: var(--app-surface); }
.user-app button.is-loading, .auth-page button.is-loading, .onboarding-page button.is-loading { position: relative; gap: 9px; opacity: .76; }
.user-app button.is-loading::before, .auth-page button.is-loading::before, .onboarding-page button.is-loading::before { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: app-spin .65s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.user-app input, .user-app select, .user-app textarea, .auth-page input, .onboarding-page input, .onboarding-page select { min-height: 50px; border-color: var(--app-line, #dde9e6); border-radius: 13px; background: #fff; }
.user-app textarea { min-height: 92px; }
.user-app input:focus, .user-app select:focus, .user-app textarea:focus, .auth-page input:focus, .onboarding-page input:focus, .onboarding-page select:focus { border-color: var(--app-accent, #13857b); box-shadow: 0 0 0 4px rgba(19,133,123,.1); }
.user-app label { color: #385b56; font-size: 12px; }
.user-app .eyebrow { color: var(--app-accent); font-size: 10px; letter-spacing: .09em; }
.user-app .soft-tag { padding: 5px 9px; background: var(--app-accent-2); color: var(--app-accent-deep); font-size: 10px; }
.user-app .flash { position: fixed; z-index: 50; right: 50%; bottom: 94px; width: min(430px, calc(100% - 28px)); margin: 0; transform: translateX(50%); border: 0; border-radius: 15px; background: var(--app-ink); color: #fff; text-align: center; box-shadow: 0 14px 38px rgba(var(--app-shadow-rgb),.22); }
.user-app .flash-success, .user-app .flash-info, .user-app .flash-error { background: var(--app-ink); color: #fff; }

.user-app .home-rescue-board { margin-bottom: 18px; border-color: rgba(19,133,123,.12); border-radius: 26px; background: var(--app-surface); box-shadow: 0 14px 38px rgba(var(--app-shadow-rgb),.07); }
.user-app .home-rescue-heading { align-items: center; padding: 23px 24px 18px; border-color: var(--app-line); }
.user-app .home-rescue-heading h2 { margin: 0 0 3px; font-family: inherit; font-size: 23px; font-weight: 760; letter-spacing: -.04em; }
.user-app .home-rescue-heading p { font-size: 12px; }
.user-app .home-rescue-heading > a, .user-app .section-heading a, .user-app .panel-head a { min-height: 42px; padding: 8px 12px; border-color: var(--app-line); border-radius: 12px; background: var(--app-surface-2); color: var(--app-accent); text-decoration: none; }
.user-app .home-rescue-card { border-color: var(--app-line); }
.user-app .home-rescue-card > summary { grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; min-height: 100px; padding: 17px 24px; }
.user-app .home-rescue-card > summary:hover { background: var(--app-surface-2); }
.user-app .home-rescue-number { width: 27px; height: 27px; padding: 5px 0 0; border-radius: 9px; background: var(--app-accent-2); color: var(--app-accent); text-align: center; }
.user-app .home-rescue-card > summary strong { margin-bottom: 4px; color: var(--app-muted); font-size: 11px; }
.user-app .home-rescue-card > summary blockquote { font-family: inherit; font-size: 19px; font-weight: 720; letter-spacing: -.02em; }
.user-app .home-rescue-open { min-height: 38px; border-color: var(--app-line); border-radius: 12px; background: #fff; color: var(--app-accent); }
.user-app .home-rescue-card[open] > summary { background: var(--app-accent-2); }
.user-app .home-rescue-detail { gap: 10px; padding: 15px 24px 22px 66px; border-color: var(--app-line); background: #f8fbfa; }
.user-app .home-rescue-detail section { border-radius: 15px; }
.user-app .rescue-first { background: var(--app-accent-2); }
.user-app .rescue-script { border-color: var(--app-line); background: var(--app-surface); }
.user-app .rescue-script h3, .user-app .rescue-script-lines span { color: var(--app-accent-deep); }
.user-app .rescue-script-lines > div { border-color: var(--app-line); }
.user-app .rescue-script-lines p { font-family: inherit; font-size: 15px; font-weight: 650; }
.user-app .rescue-avoid { border-color: #f0d8d5; background: var(--app-danger-soft); }
.user-app .rescue-avoid > span, .user-app .rescue-avoid p { color: var(--app-danger); }
.user-app .continue-card { border: 0; border-radius: 20px; background: var(--app-accent-2); box-shadow: none; }
.user-app .home-micro-practice { margin-top: 14px; padding: 22px 24px; border: 0; border-radius: 22px; background: var(--app-accent-deep); box-shadow: 0 13px 28px rgba(var(--app-shadow-rgb),.16); }
.user-app .home-micro-practice h2 { font-family: inherit; font-size: 21px; font-weight: 720; }

.user-app .practice-tools { gap: 12px; }
.user-app .tool-card { min-height: 142px; padding: 20px; border-color: rgba(19,133,123,.12); border-radius: 22px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(var(--app-shadow-rgb),.055); }
.user-app .tool-card.primary { border-color: var(--app-accent-3); background: var(--app-accent-2); }
.user-app .tool-card::after { top: 15px; right: 15px; min-height: 32px; padding: 5px 9px; border-radius: 10px; background: rgba(255,255,255,.72); color: var(--app-accent); }
.user-app .tool-card:hover { border-color: var(--app-accent-3); transform: translateY(-1px); }
.user-app .tool-card:active { transform: scale(.985); }
.user-app .tool-card strong { font-size: 20px; }
.user-app .section-block { margin: 28px 0; }
.user-app .section-heading, .user-app .panel-head { align-items: center; margin-bottom: 13px; }
.user-app .section-heading h2, .user-app .panel-head h2 { font-size: 19px; letter-spacing: -.035em; }
.user-app .category-list { border-color: rgba(19,133,123,.12); border-radius: 22px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(var(--app-shadow-rgb),.045); }
.user-app .category-list a { min-height: 68px; padding: 14px 18px; border-color: var(--app-line); color: var(--app-ink); transition: background .15s ease, transform .15s ease; }
.user-app .category-list a:active { transform: scale(.99); background: var(--app-surface-2); }
.user-app .category-list a::after { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: var(--app-accent-2); font-size: 19px; }
.user-app .category-list p { margin-top: 1px; line-height: 1.45; }
.user-app .simulation-list { gap: 12px; }
.user-app .simulation-list article { border-color: rgba(19,133,123,.12); border-radius: 21px; background: var(--app-surface); box-shadow: 0 10px 27px rgba(var(--app-shadow-rgb),.045); }
.user-app .simulation-list a { min-height: 40px; border-radius: 11px; }

.user-app .practice-progress { height: 7px; margin: 1px 0 10px; background: var(--app-accent-3); }
.user-app .practice-progress span { background: var(--app-accent); }
.user-app .practice-meta { align-items: center; margin-bottom: 14px; }
.user-app .practice-meta a { min-height: 40px; margin: 0; border-color: var(--app-line); border-radius: 12px; background: rgba(255,255,255,.78); }
.user-app .question-card { padding: 26px; border-color: rgba(19,133,123,.11); border-radius: 25px; background: var(--app-surface); box-shadow: 0 16px 40px rgba(var(--app-shadow-rgb),.075); }
.user-app .question-card h2 { margin: 12px 0 5px; font-family: inherit; font-size: 25px; font-weight: 760; }
.user-app .scene-prompt { padding: 16px 17px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-bg); }
.user-app .option-list { gap: 11px; }
.user-app .option-list label > span { min-height: 66px; padding: 13px 15px; border-color: var(--app-line); border-radius: 16px; background: #fff; font-weight: 570; transition: transform .14s ease, border .14s ease, background .14s ease; }
.user-app .option-list label:active > span { transform: scale(.985); }
.user-app .option-list i { width: 32px; height: 32px; background: var(--app-surface-2); color: var(--app-muted); }
.user-app .option-list input:checked + span { border-color: var(--app-accent); background: var(--app-accent-2); box-shadow: 0 0 0 2px rgba(19,133,123,.07); }
.user-app .answer-result.steady { background: var(--app-success-soft); }
.user-app .answer-result.okay { background: var(--app-warm-2); }
.user-app .answer-result.adjust { background: var(--app-danger-soft); }
.user-app .answer-result { border-radius: 17px; }
.user-app .response-guide { border-color: var(--app-line); border-radius: 18px; }
.user-app .response-guide > div { border-color: var(--app-line); }
.user-app .question-actions { align-items: center; }
.user-app .result-card { padding: 42px 28px; border-color: rgba(19,133,123,.11); border-radius: 26px; background: var(--app-surface); box-shadow: 0 16px 40px rgba(var(--app-shadow-rgb),.075); }
.user-app .result-ring { background: conic-gradient(var(--app-accent) calc(var(--value) * 1%), var(--app-accent-2) 0); box-shadow: inset 0 0 0 12px var(--app-surface); }

.user-app .prepare-hero { padding: 24px; border-color: rgba(19,133,123,.12); border-radius: 24px; background: var(--app-surface); box-shadow: 0 12px 32px rgba(var(--app-shadow-rgb),.055); }
.user-app .prepare-hero h2 { margin-bottom: 17px; font-size: 22px; letter-spacing: -.035em; }
.user-app .prepare-form { gap: 10px; }
.user-app .prepare-form select { min-height: 54px; padding-right: 38px; background-color: #f8fbfa; font-size: 15px; font-weight: 650; }
.user-app .prep-results { margin-top: 27px; }
.user-app .prep-card { border-color: var(--app-accent-3); border-radius: 24px; background: var(--app-surface); box-shadow: 0 3px 0 #c7deda, 0 18px 38px rgba(var(--app-shadow-rgb),.1); }
.user-app .prep-card::before { height: 5px; background: var(--app-accent); }
.user-app .prep-card-head { background: linear-gradient(135deg,#ffffff,#f0f8f6); }
.user-app .prep-card h3 { font-size: 23px; }
.user-app .prep-card-section { border-radius: 17px; }
.user-app .prep-first { border-color: var(--app-accent-3); background: var(--app-accent-2); }
.user-app .prep-first .prep-section-title span { background: #d6eeea; color: var(--app-accent-deep); }
.user-app .prep-words { border-color: #d7e9e7; background: #f8fbfa; }
.user-app .prep-words .prep-section-title span { background: #e1f0ee; color: var(--app-accent-deep); }
.user-app .speech-flow > div { border-color: var(--app-line); }
.user-app .speech-flow span { color: var(--app-muted); }
.user-app .speech-flow p { color: var(--app-ink); }
.user-app .speech-flow p::before, .user-app .speech-flow p::after { color: #72a9a2; }
.user-app .prep-avoid { border-color: #efd7d4; background: var(--app-danger-soft); }
.user-app .prep-avoid .prep-section-title span { background: #f7dfdc; color: var(--app-danger); }
.user-app .prep-avoid > p { color: #8f4b45; }
.user-app .prep-card-actions { background: #f5faf9; }
.user-app .switch-card-link { border-color: var(--app-line); border-radius: 12px; background: var(--app-surface); color: var(--app-accent); text-decoration: none; }
.user-app .library-shortcut { border-color: var(--app-accent-3); border-radius: 22px; background: linear-gradient(135deg,#ffffff,#edf8f6); box-shadow: 0 11px 30px rgba(var(--app-shadow-rgb),.065); }
.user-app .library-shortcut-mark { border-radius: 16px; background: var(--app-accent); }
.user-app .library-shortcut-action { border: 1px solid var(--app-line); box-shadow: none; }

.user-app .library-intro { padding: 22px; border: 0; border-radius: 22px; background: var(--app-accent-deep); }
.user-app .library-intro span { color: #c9e8e4; }
.user-app .inline-editor { padding: 22px; border-color: rgba(19,133,123,.13); border-radius: 22px; background: var(--app-surface); box-shadow: 0 15px 38px rgba(var(--app-shadow-rgb),.07); }
.user-app .library-search input { background: var(--app-surface); }
.user-app .response-mini-card { border-color: rgba(19,133,123,.12); background: var(--app-surface); }
.user-app .response-mini-top > a { min-height: 44px; border-color: var(--app-line); background: var(--app-accent-2); color: var(--app-accent); }
.user-app .response-mini-card blockquote { background: var(--app-surface-2); }
.user-app .response-mini-footer { border-color: var(--app-line); }
.user-app .response-mini-remove { min-height: 44px; color: var(--app-danger); }
.user-app .library-search-empty { border-color: var(--app-accent-3); background: rgba(255,255,255,.55); }
.user-app .response-list { gap: 11px; }
.user-app .response-list article { padding: 20px; border-color: rgba(19,133,123,.12); border-radius: 21px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(var(--app-shadow-rgb),.045); }
.user-app .response-list article::before { height: 3px; background: var(--app-accent); }
.user-app .response-head > a { min-height: 40px; border-color: var(--app-line); border-radius: 11px; background: var(--app-surface-2); color: var(--app-accent); }
.user-app .response-list blockquote { border-left: 0; border-radius: 15px; background: var(--app-surface-2); font-size: 16px; font-weight: 650; }
.user-app .empty-state { border-color: var(--app-accent-3); border-radius: 22px; background: rgba(255,255,255,.58); }

.user-app .profile-stats { gap: 8px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.user-app .profile-stats div { min-height: 90px; align-content: center; border: 1px solid rgba(19,133,123,.11); border-radius: 18px; background: var(--app-surface); box-shadow: 0 8px 24px rgba(var(--app-shadow-rgb),.04); }
.user-app .profile-stats strong { font-family: inherit; font-size: 26px; font-weight: 760; }
.user-app .profile-home-content-card { border-color: var(--app-accent-3); border-radius: 20px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(var(--app-shadow-rgb),.05); }
.user-app .profile-home-content-mark { background: var(--app-accent-2); color: var(--app-accent); }
.user-app .profile-home-content-card h2 { font-family: inherit; font-weight: 750; }
.user-app .profile-home-content-action { border: 1px solid var(--app-accent-3); background: var(--app-accent-2); color: var(--app-accent-deep); }
.user-app .profile-library-card { border-color: var(--app-accent-3); border-radius: 24px; background: linear-gradient(135deg,#ffffff,#e9f7f5); box-shadow: 0 14px 34px rgba(var(--app-shadow-rgb),.09); }
.user-app .profile-library-card::before { height: 4px; background: var(--app-accent); }
.user-app .profile-library-mark { background: var(--app-accent); }
.user-app .profile-library-card h2 { font-family: inherit; font-weight: 750; }
.user-app .profile-library-action { border: 1px solid var(--app-line); box-shadow: none; }
.user-app .profile-session-action .button { min-width: 132px; }
.user-app .home-card-manager-head, .user-app .home-card-editor, .user-app .home-card-manage-list > article { border-color: rgba(19,133,123,.12); border-radius: 21px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(var(--app-shadow-rgb),.05); }
.user-app .home-card-manager-head h2 { font-family: inherit; font-weight: 750; }
.user-app .manage-card-copy p { font-family: inherit; font-weight: 620; }
.user-app .manage-card-actions a, .user-app .manage-card-actions button { min-height: 42px; border-color: var(--app-line); border-radius: 11px; background: var(--app-surface-2); }

.auth-page, .onboarding-page { --app-accent: #13857b; --app-accent-deep: #0d6d65; --app-line: #dde9e6; background: #f3f8f7; color: #142521; }
.auth-page .auth-shell { width: min(1040px, calc(100% - 36px)); min-height: calc(100vh - 36px); margin: 18px auto; overflow: hidden; border: 1px solid rgba(19,133,123,.12); border-radius: 30px; background: #fff; box-shadow: 0 22px 70px rgba(29,69,64,.12); }
.auth-page .auth-story { min-height: calc(100vh - 36px); background: var(--app-accent-deep); }
.auth-page .auth-story h1 { font-size: clamp(38px,4.5vw,58px); }
.auth-page .auth-panel { background: #fff; }
.auth-page .auth-card h2 { font-size: 27px; }
.auth-page .auth-switch a { color: var(--app-accent); font-weight: 800; }
.onboarding-page .onboarding-shell { width: min(760px, calc(100% - 28px)); padding-top: 38px; }
.onboarding-page .onboarding-form fieldset { padding: 22px; border: 1px solid #dde9e6; border-radius: 22px; background: #fff; }
.onboarding-page .choice-card > span { border-radius: 16px; }

.app-confirm { width: min(420px, calc(100% - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #fff; color: #142521; box-shadow: 0 24px 70px rgba(29,69,64,.25); }
.app-confirm::backdrop { background: rgba(20,37,33,.36); backdrop-filter: blur(4px); }
.app-confirm-card { padding: 24px; }
.app-confirm-mark { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 16px; border-radius: 14px; background: #fff3f1; color: #c46057; font-size: 20px; font-weight: 800; }
.app-confirm h2 { margin-bottom: 7px; font-size: 21px; }
.app-confirm p { margin-bottom: 20px; }
.app-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.app-confirm-actions button { min-height: 48px; border-radius: 13px; font-weight: 750; cursor: pointer; }
.app-confirm-cancel { border: 1px solid #dde9e6; background: #fff; }
.app-confirm-accept { background: #b7554e; color: #fff; }

@media (max-width: 640px) {
    .user-app { padding-bottom: 96px; background: var(--app-bg); }
    .user-app .app-shell { width: calc(100% - 24px); padding: 14px 0 42px; }
    .user-app .app-header { min-height: 66px; margin-bottom: 14px; }
    .user-app .app-header h1 { font-size: 27px; }
    .user-app .app-header p { max-width: 280px; font-size: 12px; }
    .user-app .app-wordmark { margin-bottom: 2px; font-size: 10px; }
    .user-app .avatar-link { width: 42px; height: 42px; }
    .user-app .bottom-nav { bottom: 0; width: 100%; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
    .user-app .nav-item { min-height: 54px; }
    .user-app .home-rescue-board { border-radius: 23px; }
    .user-app .home-rescue-heading { display: flex; align-items: center; gap: 12px; padding: 20px 17px 16px; }
    .user-app .home-rescue-heading h2 { font-size: 21px; }
    .user-app .home-rescue-heading p { display: none; }
    .user-app .home-rescue-heading > a { min-height: 40px; padding: 7px 10px; font-size: 11px; }
    .user-app .home-rescue-card > summary { grid-template-columns: 27px minmax(0,1fr); gap: 10px; min-height: 96px; padding: 15px 17px; }
    .user-app .home-rescue-number { width: 25px; height: 25px; padding-top: 4px; }
    .user-app .home-rescue-card > summary blockquote { font-size: 17px; line-height: 1.55; }
    .user-app .home-rescue-open { grid-column: 2; min-height: 34px; margin-top: 3px; font-size: 10px; }
    .user-app .home-rescue-detail { padding: 13px 16px 18px; }
    .user-app .home-micro-practice { padding: 20px 18px; }
    .user-app .practice-tools, .user-app .simulation-list { grid-template-columns: 1fr; }
    .user-app .tool-card { min-height: 126px; }
    .user-app .question-card { padding: 19px 16px 18px; border-radius: 22px; }
    .user-app .question-card h2 { font-size: 22px; }
    .user-app .option-list label > span { min-height: 64px; }
    .user-app .option-list > .button { position: sticky; z-index: 8; bottom: 12px; margin-top: 4px; box-shadow: 0 12px 30px rgba(19,133,123,.22); }
    .user-app .question-actions { grid-template-columns: 1fr; }
    .user-app .prepare-hero { padding: 20px 17px; border-radius: 22px; }
    .user-app .prepare-form { grid-template-columns: 1fr; }
    .user-app .prepare-form .button { width: 100%; }
    .user-app .prep-card-head { padding: 24px 18px 16px; }
    .user-app .section-heading { align-items: center; }
    .user-app .section-heading h2 { font-size: 18px; }
    .user-app .switch-card-link { min-height: 42px; padding: 7px 10px; font-size: 11px; }
    .user-app .library-shortcut, .user-app .profile-home-content-card, .user-app .profile-library-card { border-radius: 21px; }
    .user-app .profile-stats { gap: 7px; }
    .user-app .profile-stats div { min-height: 82px; padding: 12px 5px; }
    .user-app .profile-stats strong { font-size: 23px; }
    .user-app .home-card-manager-head { display: grid; }
    .auth-page .auth-shell { display: block; width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
    .auth-page .auth-story { min-height: 250px; padding: 28px 24px; }
    .auth-page .auth-story h1 { margin: 10px 0 12px; font-size: 34px; }
    .auth-page .auth-story p { font-size: 14px; }
    .auth-page .auth-panel { padding: 30px 22px 42px; }
    .onboarding-page .onboarding-form fieldset { padding: 18px 15px; }
}

/* Mobile web baseline — 390px first, browser use only */
.user-app {
    min-width: 320px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
    background: var(--app-bg);
    font-size: 16px;
}
.user-app .app-shell {
    width: min(430px, calc(100% - 32px));
    padding: 16px 0 40px;
}
.user-app .app-header {
    min-height: 64px;
    margin-bottom: 16px;
}
.user-app .app-header h1 { font-size: 28px; }
.user-app .app-header p { max-width: 310px; font-size: 13px; }
.user-app .app-wordmark { font-size: 10px; }
.user-app .bottom-nav {
    right: 50%;
    bottom: 0;
    left: auto;
    width: min(430px, 100%);
    transform: translateX(50%);
    gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 28px rgba(var(--app-shadow-rgb),.1);
}
.user-app .nav-item { min-height: 56px; border-radius: 12px; }
.user-app .nav-icon { border-radius: 10px; }
.user-app .button, .auth-page .button, .onboarding-page .button {
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
}
.user-app input, .user-app select, .user-app textarea,
.auth-page input, .onboarding-page input, .onboarding-page select {
    min-height: 52px;
    border-radius: 12px;
    font-size: 16px;
}
.user-app textarea { min-height: 96px; }
.user-app .text-button { min-height: 44px; border-radius: 12px; }
.user-app .flash { bottom: calc(82px + env(safe-area-inset-bottom)); }
.user-app .soft-tag { font-size: 12px; }

.user-app .home-rescue-board {
    margin-bottom: 16px;
    border-radius: 20px;
    box-shadow: none;
}
.user-app .home-rescue-heading { padding: 20px 16px 16px; }
.user-app .home-rescue-heading h2 { font-size: 20px; }
.user-app .home-rescue-heading p { display: none; }
.user-app .home-rescue-heading > a { min-height: 44px; border-radius: 12px; font-size: 12px; }
.user-app .home-rescue-card > summary {
    grid-template-columns: 28px minmax(0,1fr);
    gap: 12px;
    min-height: 96px;
    padding: 16px;
}
.user-app .home-rescue-number { width: 28px; height: 28px; border-radius: 8px; }
.user-app .home-rescue-card > summary strong { font-size: 12px; }
.user-app .home-rescue-card > summary blockquote { font-size: 16px; line-height: 1.6; }
.user-app .home-rescue-open {
    grid-column: 2;
    min-height: 36px;
    margin-top: 4px;
    border-radius: 12px;
    font-size: 12px;
}
.user-app .home-rescue-detail { padding: 16px; }
.user-app .home-rescue-detail section { border-radius: 12px; }
.user-app .rescue-script-lines p { font-size: 16px; }
.user-app .continue-card { border-radius: 16px; }
.user-app .home-micro-practice {
    padding: 16px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: var(--app-surface);
    color: var(--app-ink);
    box-shadow: none;
}
.user-app .home-micro-practice h2 { color: var(--app-ink); font-size: 18px; }
.user-app .home-micro-practice p { color: var(--app-muted); }
.user-app .home-micro-practice .eyebrow { color: var(--app-muted); }
.user-app .home-micro-practice .button { background: var(--app-accent-2); color: var(--app-accent); }

.user-app .practice-tools, .user-app .simulation-list { grid-template-columns: 1fr; }
.user-app .tool-card {
    min-height: 128px;
    border-radius: 16px;
    box-shadow: none;
}
.user-app .category-list { border-radius: 16px; box-shadow: none; }
.user-app .category-list a { min-height: 68px; }
.user-app .simulation-list article { border-radius: 16px; box-shadow: none; }
.user-app .question-card {
    padding: 20px 16px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(var(--app-shadow-rgb),.07);
}
.user-app .question-card h2 { font-size: 24px; }
.user-app .scene-prompt { border-radius: 12px; }
.user-app .option-list label > span { min-height: 64px; border-radius: 12px; font-size: 16px; }
.user-app .option-list > .button {
    position: sticky;
    z-index: 8;
    bottom: calc(12px + env(safe-area-inset-bottom));
    margin-top: 4px;
    box-shadow: 0 10px 24px rgba(19,133,123,.2);
}
.user-app .answer-result { border-radius: 12px; }
.user-app .response-guide { border-radius: 16px; }
.user-app .result-card { border-radius: 20px; }

.user-app .prepare-hero {
    padding: 20px 16px;
    border-radius: 20px;
    box-shadow: none;
}
.user-app .prepare-hero h2 { font-size: 20px; }
.user-app .prepare-form { grid-template-columns: 1fr; }
.user-app .prepare-form .button { width: 100%; }
.user-app .prep-results { margin-top: 24px; }
.user-app .prep-card { border-radius: 20px; }
.user-app .prep-card-section { border-radius: 16px; }
.user-app .switch-card-link { min-height: 44px; border-radius: 12px; }
.user-app .library-shortcut { border-radius: 16px; box-shadow: none; }

.user-app .library-intro { border-radius: 20px; }
.user-app .inline-editor { border-radius: 16px; box-shadow: none; }
.user-app .response-mini-card { border-radius: 16px; box-shadow: none; }
.user-app .response-mini-top > a { border-radius: 12px; }
.user-app .response-list article { border-radius: 16px; box-shadow: none; }
.user-app .response-list blockquote { border-radius: 12px; }
.user-app .response-head > a { min-height: 44px; border-radius: 12px; }
.user-app .empty-state { border-radius: 16px; }
.user-app .profile-stats { gap: 8px; }
.user-app .profile-stats div { min-height: 88px; border-radius: 16px; box-shadow: none; }
.user-app .profile-home-content-card { border-radius: 16px; box-shadow: none; }
.user-app .profile-home-content-mark { border-radius: 12px; }
.user-app .profile-home-content-action { border-radius: 12px; }
.user-app .profile-library-card { border-radius: 20px; box-shadow: 0 10px 26px rgba(var(--app-shadow-rgb),.07); }
.user-app .profile-library-mark { border-radius: 12px; }
.user-app .profile-library-action { border-radius: 12px; }
.user-app .home-card-manager-head,
.user-app .home-card-editor,
.user-app .home-card-manage-list > article { border-radius: 16px; box-shadow: none; }
.user-app .manage-card-actions a, .user-app .manage-card-actions button { min-height: 44px; border-radius: 12px; }
.auth-page, .onboarding-page { font-size: 16px; }
.app-confirm { border-radius: 20px; }
.app-confirm-actions button { min-height: 48px; border-radius: 12px; }

@media (max-width: 370px) {
    .user-app .app-shell { width: calc(100% - 24px); }
    .user-app .home-rescue-heading { gap: 8px; }
    .user-app .home-rescue-heading > a { padding-right: 8px; padding-left: 8px; }
    .user-app .speech-flow > div { grid-template-columns: 54px minmax(0,1fr); }
    .user-app .library-tools { align-items: stretch; flex-direction: column; }
    .user-app .library-count { padding-bottom: 0; }
    .user-app .response-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

*:focus-visible { outline: 3px solid rgba(19,133,123,.28); outline-offset: 2px; }

/* User app 3.0 — editorial mobile shell with tactile card decks */
.user-app {
    --app-bg: #f5f6f2;
    --app-surface: #ffffff;
    --app-surface-2: #edf2ef;
    --app-ink: #151b19;
    --app-muted: #68736f;
    --app-line: #dfe5e1;
    --app-accent: #168a80;
    --app-accent-deep: #0e7169;
    --app-accent-2: #dff1ee;
    --app-accent-3: #bfe1dc;
    --app-black: #111615;
    --app-cream: #f2ead8;
    --app-sage: #e3ebdd;
    --app-mist: #e2eaf0;
    --app-lilac: #e9e5ef;
    background: var(--app-bg);
    color: var(--app-ink);
}
.user-app .app-shell { width: min(430px, calc(100% - 32px)); padding: 22px 0 122px; }
.user-app .app-header { min-height: 82px; align-items: flex-end; margin: 2px 0 26px; }
.user-app .app-wordmark { margin-bottom: 8px; color: var(--app-muted); font-size: 10px; }
.user-app .app-wordmark i { border-color: #cfd6d2; color: #909996; }
.user-app .app-header h1 { font-size: 36px; font-weight: 800; line-height: 1.06; letter-spacing: -.055em; }
.user-app .app-header p { max-width: 300px; margin-top: 8px; color: var(--app-muted); font-size: 14px; }
.user-app .avatar-link { width: 48px; height: 48px; border: 0; background: var(--app-black); color: #fff; box-shadow: none; }
.user-app .button-primary,
.auth-page .button-primary,
.onboarding-page .button-primary { background: var(--app-black); color: #fff; box-shadow: none; }
.user-app .button-primary:hover,
.auth-page .button-primary:hover,
.onboarding-page .button-primary:hover { background: #28302d; }
.user-app .button-secondary { background: var(--app-accent-2); color: var(--app-accent-deep); }
.user-app .button-quiet { border-color: var(--app-line); background: #fff; }
.user-app .section-heading { margin-bottom: 16px; }
.user-app .section-heading h2 { font-size: 25px; font-weight: 800; line-height: 1.15; letter-spacing: -.045em; }
.user-app .eyebrow { color: var(--app-accent-deep); font-size: 10px; font-weight: 800; }
.user-app .soft-tag { background: rgba(255,255,255,.7); color: var(--app-accent-deep); }

.user-app .bottom-nav {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(406px, calc(100% - 24px));
    gap: 5px;
    padding: 7px;
    border: 0;
    border-radius: 27px;
    background: var(--app-black);
    box-shadow: 0 18px 44px rgba(17,22,21,.25);
    backdrop-filter: none;
}
.user-app .nav-item { min-height: 58px; border-radius: 21px; color: #a9b0ad; font-size: 10px; }
.user-app .nav-icon { width: 36px; height: 29px; border-radius: 10px; }
.user-app .nav-item.active { background: #fff; color: var(--app-black); }
.user-app .nav-item.active .nav-icon { background: transparent; transform: none; }
.user-app .nav-item:active { transform: scale(.96); }

.user-app .home-rescue-board { margin: 0 0 20px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.user-app .home-deck-heading { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 2px; }
.user-app .home-deck-heading h1 { max-width: 260px; margin: 6px 0 0; font-size: 37px; font-weight: 820; line-height: 1.05; letter-spacing: -.06em; }
.user-app .deck-switches { display: flex; align-items: center; gap: 6px; }
.user-app .deck-switches button,
.user-app .prepare-deck-controls a { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--app-black); font-size: 19px; text-decoration: none; box-shadow: 0 7px 18px rgba(17,22,21,.07); cursor: pointer; }
.user-app .deck-switches button:active,
.user-app .prepare-deck-controls a:active { transform: scale(.9); }
.user-app .deck-switches span { min-width: 42px; color: var(--app-muted); font-size: 11px; text-align: center; }
.user-app .home-rescue-list { display: flex; gap: 13px; margin: 0 -16px; padding: 0 16px 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.user-app .home-rescue-list::-webkit-scrollbar { display: none; }
.user-app .home-rescue-card { flex: 0 0 calc(100% - 38px); align-self: flex-start; overflow: hidden; border: 0; border-radius: 28px; background: var(--app-accent-2); box-shadow: 0 12px 32px rgba(24,52,48,.08); scroll-snap-align: center; transform: scale(.965); transform-origin: center; transition: transform .2s ease, opacity .2s ease; }
.user-app .home-rescue-card:nth-child(4n+2) { background: var(--app-cream); }
.user-app .home-rescue-card:nth-child(4n+3) { background: var(--app-mist); }
.user-app .home-rescue-card:nth-child(4n+4) { background: var(--app-sage); }
.user-app .home-rescue-card.active { opacity: 1; transform: scale(1); }
.user-app .home-rescue-card > summary { grid-template-columns: 34px minmax(0,1fr); gap: 13px; min-height: 205px; align-content: start; padding: 24px 22px 20px; background: transparent; }
.user-app .home-rescue-card > summary:hover,
.user-app .home-rescue-card[open] > summary { background: transparent; }
.user-app .home-rescue-number { width: 32px; height: 32px; padding-top: 7px; border-radius: 50%; background: var(--app-black); color: #fff; }
.user-app .home-rescue-card > summary strong { margin: 2px 0 20px; color: var(--app-muted); font-size: 12px; }
.user-app .home-rescue-card > summary blockquote { max-width: 260px; font-size: 24px; font-weight: 810; line-height: 1.45; letter-spacing: -.035em; }
.user-app .home-rescue-open { grid-column: 2; width: max-content; min-height: 42px; align-self: end; margin-top: 18px; padding: 9px 14px; border: 0; border-radius: 22px; background: rgba(255,255,255,.72); color: var(--app-black); font-size: 11px; }
.user-app .home-rescue-detail { gap: 10px; padding: 0 18px 20px; border: 0; background: transparent; }
.user-app .home-rescue-detail section { border: 0; border-radius: 17px; background: rgba(255,255,255,.72); }
.user-app .rescue-script-lines > div { border-color: rgba(21,27,25,.09); }
.user-app .rescue-script-lines p { color: var(--app-ink); }
.user-app .rescue-avoid { background: #fff0ed !important; }
.user-app .deck-dots { display: flex; justify-content: center; gap: 6px; }
.user-app .deck-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #cdd4d0; cursor: pointer; transition: width .18s ease, background .18s ease; }
.user-app .deck-dots button.active { width: 24px; background: var(--app-black); }
.user-app .continue-card { padding: 20px; border: 0; border-radius: 22px; background: var(--app-black); color: #fff; }
.user-app .continue-card h3 { color: #fff; }
.user-app .continue-card p { color: #aeb6b3; }
.user-app .continue-card .eyebrow { color: #9dd6d0; }
.user-app .home-micro-practice { padding: 22px; border: 0; border-radius: 22px; background: var(--app-sage); }
.user-app .home-micro-practice .button { background: #fff; color: var(--app-black); }

.user-app .practice-tools { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.user-app .tool-card { min-height: 190px; justify-content: flex-end; padding: 20px; border: 0; border-radius: 25px; background: var(--app-cream); box-shadow: none; }
.user-app .tool-card.primary { border: 0; background: var(--app-accent-deep); color: #fff; }
.user-app .tool-card::after { top: 16px; right: 16px; width: 40px; min-height: 40px; padding: 0; place-content: center; border-radius: 50%; background: rgba(255,255,255,.86); color: var(--app-black); }
.user-app .tool-card::after { display: none; }
.user-app .tool-card.primary span,
.user-app .tool-card.primary small { color: #c8e5e1; }
.user-app .tool-card strong { font-size: 22px; line-height: 1.15; }
.user-app .category-list { display: grid; gap: 10px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.user-app .category-list a { min-height: 78px; padding: 16px 17px; border: 0; border-radius: 20px; background: #fff; }
.user-app .category-list a::after { background: var(--app-black); color: #fff; }
.user-app .category-list > a > span { background: var(--app-surface-2); }
.user-app .simulation-list article { padding: 21px; border: 0; border-radius: 22px; background: var(--app-mist); box-shadow: none; }
.user-app .simulation-list article:nth-child(even) { background: var(--app-lilac); }
.user-app .simulation-list a { background: var(--app-black); color: #fff; }
.user-app .simulation-list .simulation-card { display: grid; min-height: 150px; align-content: end; padding: 21px; border-radius: 22px; background: var(--app-mist); color: var(--app-ink); text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.user-app .simulation-list .simulation-card:nth-child(even) { background: var(--app-lilac); }
.user-app .simulation-list .simulation-card .soft-tag { align-self: start; margin-bottom: auto; }
.user-app .simulation-list .simulation-card h3 { margin: 28px 0 7px; color: var(--app-ink); }
.user-app .simulation-list .simulation-card p { min-height: 0; margin: 0; color: var(--app-muted); }
.user-app .simulation-list .simulation-card:active { filter: brightness(.96); transform: scale(.98); }
.user-app .question-card { position: relative; padding: 24px 18px 20px; border: 0; border-radius: 27px; background: #fff; box-shadow: 0 14px 34px rgba(17,22,21,.08); }
.user-app .question-card::before,
.user-app .question-card::after { position: absolute; z-index: -1; right: 18px; left: 18px; height: 24px; border-radius: 22px 22px 0 0; content: ""; }
.user-app .question-card::before { top: -14px; background: var(--app-accent-3); }
.user-app .question-card::after { top: -7px; right: 9px; left: 9px; background: var(--app-accent-2); }
.user-app .scene-prompt { border: 0; border-radius: 17px; background: var(--app-surface-2); }
.user-app .option-list label > span { border: 0; border-radius: 17px; background: var(--app-bg); }
.user-app .option-list input:checked + span { border-color: transparent; background: var(--app-accent-2); box-shadow: inset 0 0 0 2px var(--app-accent); }
.user-app .option-list input:checked + span i { background: var(--app-black); color: #fff; }
.user-app .answer-result,
.user-app .response-guide { border: 0; }

.user-app .prepare-hero { padding: 24px 20px; border: 0; border-radius: 25px; background: var(--app-cream); box-shadow: none; }
.user-app .prepare-hero h2 { max-width: 310px; font-size: 25px; }
.user-app .prepare-form select { border: 0; background-color: rgba(255,255,255,.78); }
.user-app .prepare-form .button { background: var(--app-black); }
.user-app .prepare-deck-controls { display: flex; gap: 8px; }
.user-app .prepare-deck-controls a:last-child { background: var(--app-black); color: #fff; }
.user-app .prep-deck { position: relative; z-index: 0; padding-top: 20px; touch-action: pan-y; }
.user-app .prep-deck::before,
.user-app .prep-deck::after { position: absolute; z-index: -1; right: 20px; left: 20px; height: 54px; border-radius: 25px 25px 0 0; content: ""; }
.user-app .prep-deck::before { top: 0; right: 34px; left: 34px; background: var(--app-mist); }
.user-app .prep-deck::after { top: 10px; background: var(--app-accent-3); }
.user-app .prepare-card-track { display: flex; gap: 13px; margin: 0 -16px; padding: 0 16px 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.user-app .prepare-card-track::-webkit-scrollbar { display: none; }
.user-app .prepare-card-track .prep-card { display: flex; flex: 0 0 calc(100% - 38px); flex-direction: column; align-self: stretch; margin: 0; scroll-snap-align: center; transform: scale(.965); transform-origin: center; transition: transform .2s ease; }
.user-app .prepare-card-track .prep-card.active { transform: scale(1); }
.user-app .prepare-card-count { display: inline-flex; min-width: 54px; min-height: 36px; align-items: center; justify-content: center; border-radius: 18px; background: #fff; color: var(--app-muted); font-size: 11px; font-weight: 750; }
.user-app .prep-card { border: 0; border-radius: 28px; background: #fff; box-shadow: 0 18px 40px rgba(17,22,21,.1); }
.user-app .prep-card::before { display: none; }
.user-app .prep-card-head { display: grid; grid-template-columns: minmax(0,1fr) 48px; align-items: start; gap: 14px; padding: 27px 22px 19px; background: #fff; }
.user-app .prep-favorite-form { margin: 0; }
.user-app .prep-favorite-button { display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-surface-2); color: var(--app-black); cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; }
.user-app .prep-favorite-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-app .prep-favorite-button.is-favorite { border-color: var(--app-black); background: var(--app-black); color: #fff; }
.user-app .prep-favorite-button.is-favorite svg { fill: currentColor; }
.user-app .prep-favorite-button:active { transform: scale(.9); }
.user-app .prep-favorite-button.is-loading { opacity: .55; }
.user-app .prep-card h3 { max-width: 310px; font-size: 26px; font-weight: 820; }
.user-app .prep-card-content { padding: 12px; }
.user-app .prep-card-section { border: 0; border-radius: 18px; }
.user-app .prep-first { background: var(--app-accent-2); }
.user-app .prep-words { background: var(--app-surface-2); }
.user-app .prep-avoid { background: #fff0ed; }
.user-app .prep-card-actions { border: 0; background: #fff; }
.user-app .prep-card-actions .button { width: 100%; background: var(--app-black); color: #fff; }
.user-app .variant-dots span { background: #cdd4d0; }
.user-app .variant-dots span.active { background: var(--app-black); }
.user-app .library-shortcut { border: 0; border-radius: 24px; background: var(--app-black); color: #fff; box-shadow: none; }
.user-app .library-shortcut h3 { color: #fff; }
.user-app .library-shortcut p { color: #aeb6b3; }
.user-app .library-shortcut-mark { background: #fff; color: var(--app-black); }
.user-app .library-shortcut-action { border: 0; background: var(--app-accent); color: #fff; }

.user-app .library-intro { border-radius: 25px; background: var(--app-black); }
.user-app .library-intro .button { background: #fff; color: var(--app-black); }
.user-app .response-mini-card { border: 0; border-radius: 20px; background: var(--app-sage); }
.user-app .response-mini-card:nth-child(4n+2) { background: var(--app-cream); }
.user-app .response-mini-card:nth-child(4n+3) { background: var(--app-mist); }
.user-app .response-mini-card:nth-child(4n+4) { background: var(--app-lilac); }
.user-app .response-mini-top > a { border: 0; background: rgba(255,255,255,.72); color: var(--app-black); }
.user-app .response-mini-top > a:active { transform: scale(.94); }
.user-app .response-mini-card blockquote { background: rgba(255,255,255,.68); }
.user-app .inline-editor { border: 0; border-radius: 24px; box-shadow: none; }

.user-app .profile-stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.user-app .profile-stats div { min-height: 112px; border: 0; border-radius: 22px; background: var(--app-sage); box-shadow: none; }
.user-app .profile-stats div:nth-child(2) { background: var(--app-mist); }
.user-app .profile-stats div:nth-child(3) { background: var(--app-cream); }
.user-app .profile-stats strong { font-size: 30px; }
.user-app .profile-home-content-card,
.user-app .profile-library-card { border: 0; border-radius: 26px; box-shadow: none; }
.user-app .profile-home-content-card { background: var(--app-accent-2); }
.user-app .profile-library-card { background: var(--app-black); color: #fff; }
.user-app .profile-library-card::before { display: none; }
.user-app .profile-library-card h2 { color: #fff; }
.user-app .profile-library-card p { color: #aeb6b3; }
.user-app .profile-library-mark { background: #fff; color: var(--app-black); }
.user-app .profile-library-action { border: 0; background: var(--app-accent); color: #fff; }
.user-app .profile-home-content-action { border: 0; background: #fff; color: var(--app-black); }
.user-app .home-card-manager-head,
.user-app .home-card-editor,
.user-app .home-card-manage-list > article { border: 0; border-radius: 23px; box-shadow: none; }
.user-app .home-card-manager-head { background: var(--app-accent-2); }
.user-app .home-card-manage-list > article:nth-child(odd) { background: var(--app-sage); }
.user-app .home-card-manage-list > article:nth-child(even) { background: var(--app-mist); }
.user-app .manage-order { background: var(--app-black); color: #fff; }
.user-app .manage-card-actions a,
.user-app .manage-card-actions button { border: 0; background: rgba(255,255,255,.78); }

.auth-page,
.onboarding-page { --app-bg: #f5f6f2; --app-ink: #151b19; --app-black: #111615; background: var(--app-bg); color: var(--app-ink); }
.auth-page .button-primary { display: inline-flex; align-items: center; justify-content: center; background: #111615; color: #fff; }
.auth-page .button-primary:hover { background: #28302d; }
.auth-page .auth-shell { border: 0; background: #fff; box-shadow: 0 24px 70px rgba(17,22,21,.12); }
.auth-page .auth-story { background: var(--app-black, #111615); }
.onboarding-page .onboarding-form fieldset { border: 0; background: #fff; }
.onboarding-page .onboarding-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }

.user-app .merged-library { grid-template-columns: 1fr; }
.user-app .merged-library .response-mini-card { min-height: 0; }
.user-app .merged-library .response-mini-card.is-on-home { box-shadow: inset 0 0 0 2px var(--app-accent); }
.user-app .response-mini-tags { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px; }
.user-app .home-visible-tag { display: inline-flex; min-height: 25px; align-items: center; padding: 4px 9px; border-radius: 999px; background: var(--app-black); color: #fff; font-size: 10px; font-weight: 800; }
.user-app .response-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px; }
.user-app .response-home-actions form { margin: 0; }
.user-app .response-home-actions button { min-height: 42px; padding: 9px 13px; border: 0; border-radius: 12px; background: rgba(255,255,255,.76); color: var(--app-black); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.user-app .response-home-actions .response-home-toggle { background: var(--app-black); color: #fff; }
.user-app .response-mini-card.is-on-home .response-home-toggle { background: #fff; color: var(--app-black); }
.user-app .response-home-actions button:disabled { opacity: .32; cursor: default; }
.user-app .response-home-actions button:not(:disabled):active { transform: scale(.95); }

/* Practice collection — one tactile card language across the whole page. */
.user-app .practice-feature-cards { gap: 11px; margin-bottom: 34px; }
.user-app .practice-feature-card { position: relative; display: flex; min-height: 188px; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: 20px; border-radius: 28px; }
.user-app .practice-feature-card::before { position: absolute; top: -42px; right: -38px; width: 128px; height: 128px; border: 24px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }
.user-app .practice-feature-card > * { position: relative; z-index: 1; }
.user-app .practice-feature-card .practice-card-kicker { margin: 0 0 auto; color: inherit; font-size: 11px; font-weight: 800; opacity: .72; }
.user-app .practice-feature-card strong { max-width: 120px; margin: 44px 0 5px; font-size: 24px; font-weight: 820; letter-spacing: -.045em; }
.user-app .practice-feature-card small { color: inherit; font-size: 11px; opacity: .7; }
.user-app .practice-feature-card.primary { background: var(--app-accent-deep); color: #fff; }
.user-app .practice-feature-card:not(.primary) { background: var(--app-cream); color: var(--app-ink); }
.user-app .practice-card-action { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--app-black); color: #fff; font-size: 17px; font-style: normal; font-weight: 600; }
.user-app .practice-feature-card .practice-card-action { position: absolute; right: 17px; bottom: 17px; }
.user-app .practice-feature-card.primary .practice-card-action { background: #fff; color: var(--app-black); }
.user-app .practice-feature-card:active { filter: brightness(.96); transform: scale(.98); }

.user-app .practice-category-section,
.user-app .practice-simulation-section { margin-top: 0; }
.user-app .practice-section-count { display: inline-flex; min-height: 32px; align-items: center; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--app-muted); font-size: 10px; font-weight: 800; }
.user-app .practice-category-stack { display: grid; gap: 0; overflow: visible; }
.user-app .practice-category-stack .practice-category-card { position: relative; display: grid; min-height: 112px; grid-template-columns: 40px minmax(0,1fr) 42px; align-items: center; gap: 13px; margin-top: -8px; padding: 22px 18px; border: 0; border-radius: 26px; background: var(--app-accent-2); color: var(--app-ink); text-decoration: none; box-shadow: 0 -3px 0 rgba(255,255,255,.55); transition: filter .15s ease, transform .15s ease; }
.user-app .practice-category-stack .practice-category-card:first-child { margin-top: 0; }
.user-app .practice-category-stack .practice-category-card:nth-child(5n+2) { background: var(--app-cream); }
.user-app .practice-category-stack .practice-category-card:nth-child(5n+3) { background: var(--app-mist); }
.user-app .practice-category-stack .practice-category-card:nth-child(5n+4) { background: var(--app-sage); }
.user-app .practice-category-stack .practice-category-card:nth-child(5n+5) { background: var(--app-lilac); }
.user-app .practice-category-stack .practice-category-card::after { display: none; }
.user-app .practice-category-index { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.62); color: var(--app-black); font-size: 10px; font-weight: 850; }
.user-app .practice-category-card strong { font-size: 22px; font-weight: 820; line-height: 1.1; letter-spacing: -.035em; }
.user-app .practice-category-card small { display: block; margin-top: 7px; color: var(--app-muted); font-size: 11px; font-weight: 650; }
.user-app .practice-category-card .practice-card-action { justify-self: end; }
.user-app .practice-category-card:active { z-index: 2; filter: brightness(.96); transform: scale(.985); }

.user-app .practice-simulation-stack { display: grid; grid-template-columns: 1fr; gap: 11px; }
.user-app .practice-simulation-stack .practice-simulation-card { position: relative; display: grid; min-height: 168px; grid-template-columns: minmax(0,1fr) 44px; align-content: end; align-items: end; gap: 16px; overflow: hidden; padding: 22px; border-radius: 28px; background: var(--app-black); color: #fff; }
.user-app .practice-simulation-stack .practice-simulation-card:nth-child(3n+2) { background: var(--app-mist); color: var(--app-ink); }
.user-app .practice-simulation-stack .practice-simulation-card:nth-child(3n+3) { background: var(--app-accent-2); color: var(--app-ink); }
.user-app .practice-simulation-card::before { position: absolute; top: -44px; right: 18px; width: 112px; height: 112px; border: 20px solid rgba(255,255,255,.11); border-radius: 50%; content: ""; }
.user-app .practice-simulation-card .practice-simulation-index { position: absolute; top: 21px; left: 22px; color: inherit; font-size: 10px; font-weight: 800; opacity: .65; }
.user-app .practice-simulation-stack .practice-simulation-card h3 { max-width: 245px; margin: 48px 0 0; color: inherit; font-size: 24px; font-weight: 820; line-height: 1.18; letter-spacing: -.04em; }
.user-app .practice-simulation-card .practice-card-action { grid-column: 2; grid-row: 1; justify-self: end; }
.user-app .practice-simulation-card:nth-child(3n+1) .practice-card-action { background: #fff; color: var(--app-black); }
.user-app .practice-simulation-card:active { filter: brightness(.94); transform: scale(.985); }

.user-app .library-shortcut.library-shortcut-plain { grid-template-columns: minmax(0,1fr) auto; }
.user-app .profile-library-card.profile-library-card-plain { grid-template-columns: minmax(0,1fr) auto; }
.user-app .library-shortcut.library-shortcut-plain .library-shortcut-action,
.user-app .profile-library-card.profile-library-card-plain .profile-library-action { grid-column: auto; }

@media (max-width: 370px) {
    .user-app .home-deck-heading { align-items: flex-start; flex-direction: column; }
    .user-app .home-deck-heading h1 { font-size: 34px; }
    .user-app .deck-switches { align-self: flex-end; }
    .user-app .practice-tools { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .user-app .tool-card { min-height: 150px; }
    .onboarding-page .onboarding-scenes { grid-template-columns: 1fr; }
    .user-app .practice-feature-card { min-height: 168px; padding: 17px; }
    .user-app .practice-feature-card strong { font-size: 21px; }
    .user-app .practice-category-stack .practice-category-card { min-height: 104px; grid-template-columns: 36px minmax(0,1fr) 40px; padding: 19px 15px; }
    .user-app .practice-category-card strong { font-size: 19px; }
}

@media (max-width: 640px) {
    .auth-page .auth-story { min-height: 170px; padding: 24px; }
    .auth-page .auth-story .wordmark small { display: inline; }
    .auth-page .auth-story h1 { margin: 26px 0 0; font-size: 31px; line-height: 1.12; }
    .auth-page .auth-panel { padding-top: 28px; }
}