/* 且坐组件样式。只用 tokens 里的变量，不写字面颜色。类名前缀 qz-。 */

/* ── 疗愈师主题色：把 data-accent 放在案主端根元素上，白天夜间自动跟随 ── */
[data-accent="preset-1"] { --color-brand: var(--preset-1-brand); --color-brand-pressed: var(--preset-1-brand-pressed); --color-on-brand: var(--preset-1-on-brand); --color-brand-soft: var(--preset-1-brand-soft); --color-on-brand-soft: var(--preset-1-on-brand-soft); }
[data-accent="preset-2"] { --color-brand: var(--preset-2-brand); --color-brand-pressed: var(--preset-2-brand-pressed); --color-on-brand: var(--preset-2-on-brand); --color-brand-soft: var(--preset-2-brand-soft); --color-on-brand-soft: var(--preset-2-on-brand-soft); }
[data-accent="preset-3"] { --color-brand: var(--preset-3-brand); --color-brand-pressed: var(--preset-3-brand-pressed); --color-on-brand: var(--preset-3-on-brand); --color-brand-soft: var(--preset-3-brand-soft); --color-on-brand-soft: var(--preset-3-on-brand-soft); }
[data-accent="preset-4"] { --color-brand: var(--preset-4-brand); --color-brand-pressed: var(--preset-4-brand-pressed); --color-on-brand: var(--preset-4-on-brand); --color-brand-soft: var(--preset-4-brand-soft); --color-on-brand-soft: var(--preset-4-on-brand-soft); }
[data-accent="preset-5"] { --color-brand: var(--preset-5-brand); --color-brand-pressed: var(--preset-5-brand-pressed); --color-on-brand: var(--preset-5-on-brand); --color-brand-soft: var(--preset-5-brand-soft); --color-on-brand-soft: var(--preset-5-on-brand-soft); }
[data-accent="preset-6"] { --color-brand: var(--preset-6-brand); --color-brand-pressed: var(--preset-6-brand-pressed); --color-on-brand: var(--preset-6-on-brand); --color-brand-soft: var(--preset-6-brand-soft); --color-on-brand-soft: var(--preset-6-on-brand-soft); }

/* ── 基础 ── */
.qz-page { box-sizing: border-box; min-height: 100%; background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--font-size-300); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.qz-page strong, .qz-page b { font-weight: var(--font-weight-regular); }
.qz-page *, .qz-page *::before, .qz-page *::after, [class^="qz-"], [class*=" qz-"] { box-sizing: border-box; }
/* 光晕：只铺在不滚动的页面根元素上。--low 把光压到低平线，用于封面和开始前 */
.qz-page--glow { background: radial-gradient(96% 44% at 50% var(--qz-glow-y, 30%), var(--color-glow) 0%, var(--color-glow-mid) 46%, var(--color-glow-end) 100%), var(--color-bg-page); }
.qz-page--glow-low { --qz-glow-y: 84%; }
.qz-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.qz-icon--sm { width: 18px; height: 18px; stroke-width: 1.5; }
.qz-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.qz-btn, .qz-icon-btn, .qz-row, .qz-input, .qz-textarea, .qz-composer__input, .qz-switch input, .qz-choice input, .qz-day, .qz-slot, .qz-bottomnav__item, .qz-card--action, .qz-link, .qz-composer__send):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.qz-link { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qz-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.qz-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.qz-display { margin: 0; font-size: var(--font-size-800); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); }
.qz-title { margin: 0; font-size: var(--font-size-700); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); text-wrap: balance; }

/* ── 按钮：描边胶囊。实底只留给按下 ── */
.qz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-control); min-width: var(--size-control); padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-full); background: none; color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--font-size-300); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
.qz-btn--block { display: flex; width: 100%; }
.qz-btn--sm { min-height: var(--size-control-sm); min-width: var(--size-control-sm); padding: 0 var(--space-5); }
.qz-btn--primary { border: 1.5px solid var(--color-brand); color: var(--color-brand); }
.qz-btn--primary:active, .qz-btn--primary.is-pressed { background: var(--color-brand); color: var(--color-on-brand); }
.qz-btn--secondary { border-color: var(--color-border-strong); }
.qz-btn--secondary:active, .qz-btn--secondary.is-pressed { background: var(--color-bg-pressed); }
.qz-btn--text { padding: 0 var(--space-3); color: var(--color-brand); }
.qz-btn--text:active, .qz-btn--text.is-pressed { background: var(--color-bg-pressed); }
.qz-btn--danger { border: 1.5px solid var(--color-danger); color: var(--color-danger); }
.qz-btn--danger:active, .qz-btn--danger.is-pressed { background: var(--color-danger); color: var(--color-on-danger); }
.qz-btn--danger-quiet { padding: 0 var(--space-3); color: var(--color-danger); }
.qz-btn--danger-quiet:active, .qz-btn--danger-quiet.is-pressed { background: var(--color-danger-soft); color: var(--color-on-danger-soft); }
.qz-btn:disabled, .qz-btn[aria-disabled="true"] { border: 1px dashed var(--color-border-strong); background: none; color: var(--color-text-disabled); cursor: not-allowed; }
.qz-btn--text:disabled { border-color: transparent; }
.qz-btn.is-loading { cursor: progress; }
.qz-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--size-tap); height: var(--size-tap); border: 0; border-radius: var(--radius-full); background: none; color: var(--color-text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-icon-btn:active, .qz-icon-btn.is-pressed { background: var(--color-bg-pressed); }
.qz-icon-btn:disabled { color: var(--color-text-disabled); cursor: not-allowed; }

/* ── 加载 ── */
.qz-spinner { display: inline-block; width: 18px; height: 18px; flex: none; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: qz-spin 900ms linear infinite; }
.qz-loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8); color: var(--color-text-secondary); font-size: var(--font-size-200); }
.qz-skeleton { display: block; height: 14px; border-radius: var(--radius-full); background: var(--color-bg-sunken); animation: qz-breathe 1800ms ease-in-out infinite; }
.qz-skeleton--title { height: 18px; width: 40%; }
.qz-skeleton--circle { width: 44px; height: 44px; border-radius: var(--radius-full); flex: none; }
.qz-dots { display: inline-flex; gap: 6px; align-items: center; height: 1.9em; }
.qz-dots i { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-text-tertiary); animation: qz-breathe 1400ms ease-in-out infinite; }
.qz-dots i:nth-child(2) { animation-delay: 200ms; }
.qz-dots i:nth-child(3) { animation-delay: 400ms; }
@keyframes qz-spin { to { transform: rotate(360deg); } }
@keyframes qz-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .qz-spinner, .qz-skeleton, .qz-dots i, .qz-caret::after { animation: none; } .qz-btn, .qz-switch__track, .qz-switch__track::after { transition: none; } }

/* ── 输入 ── */
.qz-field { display: flex; flex-direction: column; gap: var(--space-2); }
.qz-field__label { font-size: var(--font-size-200); color: var(--color-text-primary); }
.qz-field__hint { font-size: var(--font-size-200); color: var(--color-text-secondary); }
.qz-field__error { display: flex; align-items: flex-start; gap: var(--space-1); font-size: var(--font-size-200); color: var(--color-danger); }
.qz-field__control { position: relative; display: flex; align-items: center; }
.qz-field__control .qz-spinner { position: absolute; right: var(--space-4); color: var(--color-text-tertiary); }
.qz-input, .qz-textarea { width: 100%; border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--font-size-input); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); -webkit-appearance: none; appearance: none; }
.qz-input { height: var(--size-control); padding: 0 var(--space-5); border-radius: var(--radius-full); }
.qz-textarea { display: block; min-height: 132px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); resize: vertical; }
.qz-input::placeholder, .qz-textarea::placeholder, .qz-composer__input::placeholder { color: var(--color-text-tertiary); }
.qz-input:focus, .qz-textarea:focus, .qz-input.is-focus { border-color: var(--color-brand); box-shadow: inset 0 0 0 .5px var(--color-brand); outline: none; }
.qz-input.is-error, .qz-textarea.is-error { border-color: var(--color-danger); box-shadow: inset 0 0 0 .5px var(--color-danger); }
.qz-input:disabled, .qz-textarea:disabled { border-style: dashed; background: none; color: var(--color-text-disabled); cursor: not-allowed; }

/* ── 对话：案主有气泡靠右；AI 无气泡通栏、细体、更大，读起来像一封信 ── */
.qz-chat { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-5) var(--space-5) var(--space-4); }
.qz-bubble { max-width: 82%; overflow-wrap: anywhere; }
.qz-bubble p { margin: 0; }
.qz-bubble p + p { margin-top: var(--space-3); }
.qz-bubble--client { align-self: flex-end; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-size: var(--font-size-300); line-height: var(--line-height-normal); }
.qz-bubble--client:active, .qz-bubble--client.is-pressed { background: var(--color-bg-pressed); color: var(--color-text-primary); }
.qz-bubble--ai { align-self: stretch; max-width: none; padding-right: var(--space-3); color: var(--color-text-primary); font-size: var(--font-size-400); font-weight: var(--font-weight-light); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-text); }
.qz-bubble--ai:active, .qz-bubble--ai.is-pressed { background: var(--color-bg-pressed); box-shadow: 0 0 0 8px var(--color-bg-pressed); border-radius: 2px; }
.qz-bubble--system { display: flex; align-items: center; gap: var(--space-3); align-self: stretch; max-width: none; color: var(--color-text-secondary); font-size: var(--font-size-100); line-height: var(--line-height-normal); text-align: center; }
.qz-bubble--system::before, .qz-bubble--system::after { content: ""; flex: 1 1 16px; border-top: 1px solid var(--color-border); }
.qz-bubble--system > span { flex: 0 1 auto; }
.qz-bubble__status { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); align-self: flex-end; min-height: var(--size-tap); margin-top: calc(var(--space-4) * -1); padding: 0 var(--space-1); border: 0; background: none; color: var(--color-danger); font-family: var(--font-sans); font-size: var(--font-size-200); cursor: pointer; }
.qz-bubble__status--sending { color: var(--color-text-tertiary); cursor: default; }
.qz-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--color-text-tertiary); animation: qz-breathe 1000ms ease-in-out infinite; }
.qz-composer { position: relative; display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px)); background: var(--color-veil); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.qz-composer__input { flex: 1; min-width: 0; min-height: var(--size-control); max-height: 132px; padding: 11px var(--space-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--font-size-input); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); resize: none; }
.qz-composer__input:disabled { border-style: dashed; background: none; color: var(--color-text-disabled); }
.qz-composer__send { display: inline-flex; align-items: center; justify-content: center; width: var(--size-control); height: var(--size-control); flex: none; border: 1.5px solid var(--color-brand); border-radius: var(--radius-full); background: none; color: var(--color-brand); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.qz-composer__send:active, .qz-composer__send.is-pressed { background: var(--color-brand); color: var(--color-on-brand); }
.qz-composer__send:disabled { border: 1px dashed var(--color-border-strong); color: var(--color-text-disabled); cursor: not-allowed; }

/* ── AI 标识 ── */
.qz-ai-badge { display: inline-flex; align-items: flex-start; justify-content: center; gap: 6px; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--font-size-100); line-height: var(--line-height-tight); text-align: center; }
.qz-ai-badge::before { content: ""; flex: none; width: 10px; height: 5px; margin-top: 5px; border-radius: 10px 10px 0 0; background: var(--color-brand); box-shadow: 0 2px 0 -0.5px var(--color-brand); }

/* ── 头像与品牌位 ── */
.qz-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; overflow: hidden; border-radius: var(--radius-full); background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-family: var(--font-sans); font-size: var(--font-size-400); font-weight: var(--font-weight-light); }
.qz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qz-avatar--lg { width: 88px; height: 88px; font-size: var(--font-size-700); }
.qz-avatar--sm { width: 32px; height: 32px; font-size: var(--font-size-200); }
.qz-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.qz-brand__name { margin: var(--space-4) 0 0; max-width: 100%; font-size: var(--font-size-700); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); text-wrap: balance; overflow-wrap: anywhere; }
.qz-brand__slogan { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-300); line-height: var(--line-height-normal); }
.qz-brand__welcome { margin: var(--space-8) 0 0; font-size: var(--font-size-400); font-weight: var(--font-weight-light); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-text); text-align: center; }

/* ── 列表行 ── */
.qz-list { display: flex; flex-direction: column; background: var(--color-bg-surface); border-block: 1px solid var(--color-border); }
.qz-list--card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.qz-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 68px; padding: var(--space-3) var(--space-4); border: 0; background: none; color: inherit; font-family: var(--font-sans); font-size: var(--font-size-300); line-height: var(--line-height-tight); text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-row + .qz-row { box-shadow: inset 0 1px 0 var(--color-border); }
.qz-row:active, .qz-row.is-pressed { background: var(--color-bg-pressed); }
.qz-row:disabled, .qz-row[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.qz-row:disabled .qz-row__sub { color: var(--color-text-disabled); }
.qz-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qz-row__title { display: flex; align-items: center; gap: var(--space-2); }
.qz-row__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-row__sub { color: var(--color-text-secondary); font-size: var(--font-size-200); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-row__sub--error { display: flex; align-items: center; gap: var(--space-1); color: var(--color-danger); white-space: normal; }
.qz-row__meta { flex: none; display: flex; align-items: center; gap: var(--space-1); color: var(--color-text-tertiary); font-size: var(--font-size-100); }

/* ── 卡片 ── */
.qz-card { display: block; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); color: inherit; text-align: left; }
.qz-card.qz-stack { display: flex; }
.qz-card--action { width: 100%; font: inherit; cursor: pointer; }
.qz-card--action:active, .qz-card--action.is-pressed { background: var(--color-bg-pressed); }
.qz-card--action:disabled { border-style: dashed; color: var(--color-text-disabled); background: none; cursor: not-allowed; }
.qz-card__title { margin: 0 0 var(--space-2); font-size: var(--font-size-500); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); }
.qz-card__section-title { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-200); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); }

/* ── 标签与数字徽标 ── */
.qz-tag { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 1px 9px; border-radius: var(--radius-full); background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-size-100); line-height: var(--line-height-tight); white-space: nowrap; }
.qz-tag--brand { background: var(--color-brand-soft); color: var(--color-on-brand-soft); }
.qz-tag--success { background: var(--color-success-soft); color: var(--color-on-success-soft); }
.qz-tag--danger { background: var(--color-danger-soft); color: var(--color-on-danger-soft); }
.qz-tag--alert { background: var(--color-alert-soft); color: var(--color-on-alert-soft); }
.qz-tag--info { background: var(--color-info-soft); color: var(--color-on-info-soft); }
.qz-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-numeric); font-size: var(--font-size-100); }
.qz-count--alert { background: var(--color-alert); color: var(--color-bg-surface); }

/* ── 数字块 ── */
.qz-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-5); }
.qz-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.qz-stat__label { color: var(--color-text-secondary); font-size: var(--font-size-200); }
.qz-stat__value { font-family: var(--font-numeric); font-size: var(--font-size-700); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); }
.qz-stat__value--sm { font-size: var(--font-size-600); padding-top: 6px; }

/* ── 顶部栏与导航 ── */
.qz-topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: var(--size-tap) minmax(0, 1fr) var(--size-tap); align-items: center; gap: var(--space-1); min-height: var(--size-topbar); padding: env(safe-area-inset-top, 0px) var(--space-2) 0; background: var(--color-veil); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.qz-topbar__center { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding-block: var(--space-1); }
.qz-topbar__title { max-width: 100%; margin: 0; overflow: hidden; font-size: var(--font-size-400); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); text-overflow: ellipsis; white-space: nowrap; }
.qz-topbar--brand { grid-template-columns: minmax(0, 1fr) var(--size-tap); padding-inline: var(--space-5) var(--space-2); }
/* 半透明底的边缘淡出，光晕上不留硬边 */
.qz-topbar::after, .qz-composer::before, .qz-bottomnav::before { content: ""; position: absolute; left: 0; right: 0; height: var(--space-6); pointer-events: none; }
.qz-topbar::after { top: 100%; background: linear-gradient(to bottom, var(--color-veil), var(--color-veil-end)); }
.qz-composer::before, .qz-bottomnav::before { bottom: 100%; background: linear-gradient(to top, var(--color-veil), var(--color-veil-end)); }
/* 细进度线和步数：只用于「开始前两件事」这类分步流程 */
.qz-steps { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.qz-steps__line { position: relative; display: block; height: 1px; background: var(--color-border-strong); }
.qz-steps__line i { position: absolute; left: 0; top: -.5px; height: 2px; border-radius: var(--radius-full); background: var(--color-text-primary); transition: width var(--duration-slow) var(--ease-standard); }
.qz-steps__count { color: var(--color-text-tertiary); font-family: var(--font-numeric); font-size: var(--font-size-300); letter-spacing: var(--letter-spacing-wide); }
.qz-steps__count b { color: var(--color-text-primary); font-weight: var(--font-weight-regular); }
.qz-wordmark { display: block; height: 32px; width: auto; color: var(--color-mark); }
.qz-wordmark g, .qz-wordmark path { fill: currentColor; stroke: none; }
.qz-wordmark--small { height: 18px; }
.qz-bottomnav { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-veil); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.qz-bottomnav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--size-bottomnav); border: 0; background: none; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--font-size-100); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-bottomnav__item:active, .qz-bottomnav__item.is-pressed { background: var(--color-bg-pressed); }
.qz-bottomnav__item[aria-current="page"] { color: var(--color-brand); }
.qz-bottomnav__item .qz-count { position: absolute; top: 4px; left: calc(50% + 6px); }
.qz-shell { display: flex; flex-direction: column; min-height: 100%; }
.qz-shell > .qz-bottomnav { order: 2; }
.qz-shell__main { flex: 1; min-width: 0; }
.qz-shell__body { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-3) var(--space-5) var(--space-6); }
.qz-shell__rail { display: none; }
@media (min-width: 960px) {
  .qz-shell { display: grid; grid-template-columns: var(--size-sidenav) minmax(0, 1fr); min-height: 100vh; }
  .qz-shell > .qz-bottomnav { position: sticky; top: 0; grid-row: 1; grid-auto-flow: row; grid-auto-rows: min-content; align-content: start; gap: var(--space-1); height: 100vh; padding: var(--space-5) var(--space-3); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-right: 1px solid var(--color-border); }
  .qz-shell > .qz-bottomnav .qz-bottomnav__item { flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: var(--size-control-sm); padding: 0 var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-300); }
  .qz-shell > .qz-bottomnav .qz-count { position: static; margin-left: auto; }
  .qz-shell > .qz-bottomnav .qz-bottomnav__item[aria-current="page"] { background: var(--color-brand-soft); color: var(--color-on-brand-soft); }
  .qz-shell > .qz-shell__main { grid-column: 2; grid-row: 1; }
  .qz-shell__rail { display: block; padding: var(--space-2) var(--space-4) var(--space-6); }
  .qz-shell__body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: var(--space-6); max-width: 1120px; margin-inline: auto; padding: var(--space-4) var(--space-8) var(--space-8); }
  .qz-shell__body > .qz-span { grid-column: 1 / -1; }
  .qz-shell .qz-topbar--brand { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .qz-shell .qz-topbar--brand::after, .qz-shell > .qz-bottomnav::before { display: none; }
  .qz-shell .qz-topbar--brand .qz-wordmark { visibility: hidden; }
}

/* ── 弹窗、底部抽屉、轻提示 ── */
.qz-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--color-scrim); }
.qz-scrim--bottom { align-items: flex-end; padding: 0; }
.qz-dialog { width: 100%; max-width: 340px; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-bg-raised); box-shadow: var(--shadow-lg); }
.qz-dialog__title { margin: 0 0 var(--space-3); font-size: var(--font-size-600); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); }
.qz-dialog__body { margin: 0; color: var(--color-text-secondary); }
.qz-dialog__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); }
.qz-sheet { width: 100%; max-width: var(--size-content-max); max-height: 85%; overflow: auto; padding: var(--space-3) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-bg-raised); box-shadow: var(--shadow-md); }
.qz-sheet__grip { display: block; width: 32px; height: 3px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); background: var(--color-border-strong); }
.qz-sheet__title { margin: 0 0 var(--space-3); font-size: var(--font-size-600); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); }
.qz-toast { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 358px; min-height: var(--size-tap); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); background: var(--color-toast); color: var(--color-on-toast); box-shadow: var(--shadow-sm); font-size: var(--font-size-300); line-height: var(--line-height-tight); }

/* ── 空状态与出错 ── */
.qz-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-14) var(--space-5); text-align: center; }
.qz-state__mark { width: 72px; height: 36px; margin-bottom: var(--space-3); color: var(--color-border-strong); }
.qz-state__mark--error { color: var(--color-danger); width: 32px; height: 32px; }
.qz-state__title { margin: 0; font-size: var(--font-size-600); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); }
.qz-state__desc { margin: 0; max-width: 24em; color: var(--color-text-secondary); }
.qz-state .qz-btn { margin-top: var(--space-4); }

/* ── 提示条 ── */
.qz-notice { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-info-soft); color: var(--color-on-info-soft); font-size: var(--font-size-200); }
.qz-notice--danger { background: var(--color-danger-soft); color: var(--color-on-danger-soft); }
.qz-notice--success { background: var(--color-success-soft); color: var(--color-on-success-soft); }
.qz-notice__action { margin-left: auto; flex: none; }

/* ── 危机告警（仅疗愈师端）：系统里唯一保留实底按钮和粗边的地方 ── */
.qz-crisis { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-1) var(--space-2); padding: var(--space-5); border: 2px solid var(--color-alert); border-radius: var(--radius-lg); background: var(--color-alert-soft); color: var(--color-on-alert-soft); }
.qz-crisis__icon { color: var(--color-alert); margin-top: 1px; stroke-width: 1.8; }
.qz-crisis__title { margin: 0; font-size: var(--font-size-400); font-weight: var(--font-weight-regular); line-height: 1.5; }
.qz-crisis__meta { grid-column: 2; margin: 0; font-size: var(--font-size-200); }
.qz-crisis__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.qz-crisis__actions .qz-btn { flex: 1; }
@media (min-width: 960px) { .qz-crisis__actions .qz-btn { flex: 0 1 200px; } }
.qz-crisis__btn { background: var(--color-on-alert-soft); color: var(--color-alert-soft); }
.qz-crisis__btn:active, .qz-crisis__btn.is-pressed { background: var(--color-alert); color: var(--color-alert-soft); }
.qz-crisis__btn--quiet { border-color: var(--color-on-alert-soft); background: none; color: var(--color-on-alert-soft); }
.qz-crisis__btn--quiet:active, .qz-crisis__btn--quiet.is-pressed { background: var(--color-alert-soft); }
.qz-crisis--done { border-width: 1px; border-color: var(--color-border); background: var(--color-bg-surface); color: var(--color-text-primary); }
.qz-crisis--done .qz-crisis__icon { color: var(--color-success); }

/* ── 开关、单选、多选 ── */
.qz-switch { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: var(--size-tap); cursor: pointer; }
.qz-switch input { position: absolute; right: 0; width: 48px; height: 28px; margin: 0; opacity: 0; cursor: inherit; }
.qz-switch__track { position: relative; flex: none; width: 48px; height: 28px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: none; transition: background-color var(--duration-fast) var(--ease-standard); }
.qz-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-text-secondary); transition: transform var(--duration-fast) var(--ease-standard); }
.qz-switch input:checked + .qz-switch__track { border-color: var(--color-brand); background: var(--color-brand); }
.qz-switch input:checked + .qz-switch__track::after { transform: translateX(20px); background: var(--color-on-brand); }
.qz-switch input:focus-visible + .qz-switch__track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.qz-switch.is-pressed .qz-switch__track::after, .qz-switch:active .qz-switch__track::after { width: 24px; }
.qz-switch input:disabled + .qz-switch__track { border: 1px dashed var(--color-border-strong); background: none; }
.qz-switch input:disabled + .qz-switch__track::after { background: var(--color-text-disabled); }
.qz-switch:has(input:disabled) { color: var(--color-text-disabled); cursor: not-allowed; }
.qz-switch__state { color: var(--color-text-secondary); font-size: var(--font-size-200); }
.qz-choices { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; }
.qz-choices legend { padding: 0; }
.qz-choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-control); padding: var(--space-2) var(--space-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-surface); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-choice input { flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: none; -webkit-appearance: none; appearance: none; cursor: inherit; }
.qz-choice input[type="checkbox"] { border-radius: 6px; }
.qz-choice input:checked { border-color: var(--color-brand); background: var(--color-brand); box-shadow: inset 0 0 0 4px var(--color-bg-surface); }
.qz-choice:active, .qz-choice.is-pressed { background: var(--color-bg-pressed); }
.qz-choice:has(input:checked) { border-color: var(--color-brand); box-shadow: inset 0 0 0 .5px var(--color-brand); }
.qz-choice:has(input:disabled) { border-style: dashed; background: none; color: var(--color-text-disabled); cursor: not-allowed; }
.qz-choice.is-error { border-color: var(--color-danger); }
.qz-choice__sub { display: block; color: var(--color-text-secondary); font-size: var(--font-size-200); }

/* ── 日期和时段 ── */
.qz-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: var(--space-1); overflow-x: auto; padding: 2px; }
.qz-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; min-width: var(--size-tap); padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); background: none; color: var(--color-text-primary); font-family: var(--font-sans); cursor: pointer; }
.qz-day__week { color: var(--color-text-secondary); font-size: var(--font-size-100); }
.qz-day__date { font-family: var(--font-numeric); font-size: var(--font-size-400); font-weight: var(--font-weight-light); }
.qz-day__has { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-brand); }
.qz-day:active, .qz-day.is-pressed { background: var(--color-bg-pressed); }
.qz-day[aria-pressed="true"] { background: var(--color-brand); color: var(--color-on-brand); }
.qz-day[aria-pressed="true"] .qz-day__week { color: inherit; }
.qz-day[aria-pressed="true"] .qz-day__has { background: var(--color-on-brand); }
.qz-day:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.qz-day:disabled .qz-day__week { color: inherit; }
.qz-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.qz-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; padding: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: none; color: var(--color-text-primary); font-family: var(--font-numeric); font-size: var(--font-size-300); line-height: var(--line-height-tight); cursor: pointer; }
.qz-slot small { font-family: var(--font-sans); font-size: var(--font-size-100); color: var(--color-text-secondary); }
.qz-slot:active, .qz-slot.is-pressed { background: var(--color-bg-pressed); }
.qz-slot[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-on-brand); }
.qz-slot[aria-pressed="true"] small { color: inherit; }
.qz-slot:disabled { border-color: var(--color-border-strong); border-style: dashed; color: var(--color-text-disabled); cursor: not-allowed; }
.qz-slot:disabled small { color: inherit; }
.qz-slot.is-error { border-color: var(--color-danger); color: var(--color-danger); }
.qz-slot.is-error small { color: inherit; }

/* ── 表格 ── */
.qz-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.qz-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-300); line-height: var(--line-height-tight); }
.qz-table th { padding: var(--space-3) var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-200); font-weight: var(--font-weight-regular); text-align: left; white-space: nowrap; }
.qz-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); vertical-align: top; }
.qz-table .is-num { text-align: right; font-family: var(--font-numeric); white-space: nowrap; }
.qz-table tbody tr.is-pressed td, .qz-table tbody tr:active td { background: var(--color-bg-pressed); }
.qz-table caption { padding: var(--space-3) var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-200); text-align: left; caption-side: bottom; border-top: 1px solid var(--color-border); }
@media (max-width: 480px) {
  .qz-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .qz-table--stack, .qz-table--stack tbody, .qz-table--stack tr, .qz-table--stack td { display: block; width: 100%; }
  .qz-table--stack tbody tr + tr { border-top: 1px solid var(--color-border); }
  .qz-table--stack tr { padding-block: var(--space-2); }
  .qz-table--stack td { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) var(--space-4); border: 0; text-align: right; }
  .qz-table--stack td::before { content: attr(data-label); color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--font-size-200); text-align: left; }
}

/* ── v2.1（QZ-057）列表行的两种写法、图片 ── */
.qz-row--switch { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-1); cursor: default; }
.qz-row--switch:active { background: none; }
.qz-row--split { padding-block: 0; padding-right: var(--space-1); cursor: default; }
.qz-row--split:active { background: none; }
.qz-row__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 68px; padding: var(--space-3) 0; border: 0; background: none; color: inherit; font-family: var(--font-sans); font-size: var(--font-size-300); line-height: var(--line-height-tight); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-row__open:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.qz-row__open:active, .qz-row__open.is-pressed { background: var(--color-bg-pressed); }
.qz-composer { flex-wrap: wrap; }
.qz-composer__attach { flex: none; height: var(--size-control); }
.qz-composer__tray { flex: 0 0 100%; display: flex; gap: var(--space-2); padding-bottom: var(--space-1); }
.qz-thumb { position: relative; width: 72px; height: 72px; flex: none; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg-sunken); }
.qz-thumb > img, .qz-thumb > svg, .qz-bubble__image > img, .qz-bubble__image > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.qz-thumb__remove { position: absolute; top: 0; right: 0; display: flex; align-items: flex-start; justify-content: flex-end; width: var(--size-tap); height: var(--size-tap); padding: var(--space-1); border: 0; background: none; color: var(--color-on-toast); cursor: pointer; }
.qz-thumb__remove .qz-icon { width: 20px; height: 20px; padding: 3px; border-radius: var(--radius-full); background: var(--color-toast); }
.qz-thumb__remove:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.qz-bubble__images { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block: var(--space-1); }
.qz-bubble__image { position: relative; display: block; width: 116px; height: 116px; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-sunken); cursor: zoom-in; }
.qz-bubble__image:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.qz-bubble__image.is-uploading { cursor: default; }
.qz-bubble__image.is-uploading::after { content: ""; position: absolute; inset: 0; background: var(--color-scrim); }
.qz-bubble__image.is-uploading .qz-spinner { position: absolute; top: 50%; left: 50%; z-index: 1; margin: -8px 0 0 -8px; color: var(--color-on-toast); }

/* ── v2.2（QZ-010）档期的时段状态和周视图、头像裁剪、封面预览 ── */
.qz-slot--booked { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-on-brand-soft); }
.qz-slot--charity { background: var(--color-info-soft); color: var(--color-on-info-soft); }
.qz-slot--blocked { border-style: dashed; color: var(--color-text-secondary); }
.qz-slot--booked small, .qz-slot--charity small, .qz-slot--blocked small { color: inherit; }
.qz-slot--booked:active, .qz-slot--charity:active, .qz-slot--blocked:active, .qz-slot--booked.is-pressed, .qz-slot--charity.is-pressed, .qz-slot--blocked.is-pressed { background: var(--color-bg-pressed); color: var(--color-text-primary); }
.qz-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.qz-week__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.qz-week__head { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--size-tap); color: var(--color-text-secondary); font-size: var(--font-size-100); }
.qz-week__head b { color: var(--color-text-primary); font-family: var(--font-numeric); font-size: var(--font-size-400); font-weight: var(--font-weight-light); }
.qz-week__head[aria-current="date"], .qz-week__head[aria-current="date"] b { color: var(--color-brand); }
.qz-week__none { display: flex; align-items: center; justify-content: center; min-height: 60px; color: var(--color-text-tertiary); font-size: var(--font-size-100); }
.qz-cropper { display: flex; flex-direction: column; gap: var(--space-3); }
.qz-cropper__stage { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-bg-sunken); cursor: grab; touch-action: none; }
.qz-cropper__stage > img, .qz-cropper__stage > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.qz-cropper__mask { position: absolute; inset: 8%; border: 1px solid var(--color-on-toast); border-radius: var(--radius-full); box-shadow: 0 0 0 200px var(--color-scrim); pointer-events: none; }
.qz-range { display: block; width: 100%; height: var(--size-tap); margin: 0; background: none; accent-color: var(--color-brand); cursor: pointer; }
.qz-range:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.qz-preview { position: relative; flex: none; width: 195px; height: 422px; margin-inline: auto; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-page); }
.qz-preview__screen { position: absolute; top: 0; left: 0; width: 390px; height: 844px; transform: scale(.5); transform-origin: 0 0; }
.qz-preview--lg { width: 293px; height: 633px; }
.qz-preview--lg .qz-preview__screen { transform: scale(.75); }
.qz-preview--lg .qz-preview__screen { transform: scale(.75); }

/* v2.3 QZ-089：练习里自己说的话（样子同 --client），轨迹图 GenogramFigure */
.qz-bubble--self { align-self: flex-end; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-size: var(--font-size-300); line-height: var(--line-height-normal); }
.qz-bubble--self:active, .qz-bubble--self.is-pressed { background: var(--color-bg-pressed); color: var(--color-text-primary); }
.qz-genogram { overflow-x: auto; touch-action: pan-x pan-y; }
.qz-genogram > svg { display: block; width: 100%; max-width: 640px; margin: 0 auto; border-radius: var(--radius-md); }
.qz-genogram__paper { fill: var(--color-bg-surface); }
.qz-genogram__grid { fill: none; stroke: var(--color-border); stroke-width: 1; }
.qz-genogram__hatch { fill: none; stroke: var(--color-text-primary); stroke-width: 1.5; }
.qz-genogram__line { fill: none; stroke: var(--color-text-primary); stroke-width: 2; }
.qz-genogram__line--child { stroke-width: 1.6; }
.qz-genogram__line--vague { stroke-dasharray: 7 5; }
.qz-genogram__break { fill: none; stroke: var(--color-text-primary); stroke-width: 2.4; }
.qz-genogram__person { fill: var(--color-bg-surface); stroke: var(--color-text-primary); stroke-width: 2; }
.qz-genogram__person--client { stroke-width: 3.4; }
.qz-genogram__person--deceased { fill: url(#qz-genogram-hatch); }
.qz-genogram__node { cursor: grab; }
.qz-genogram__node.is-dragging { cursor: grabbing; opacity: .85; }
.qz-genogram__emotion { fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-dasharray: 6 5; }
.qz-genogram__relation { fill: none; stroke: var(--color-text-secondary); stroke-width: 1.6; stroke-dasharray: 2 4; }
.qz-genogram__arrowhead { fill: var(--color-brand); }
.qz-genogram__name { fill: var(--color-text-primary); font-family: var(--font-sans); font-size: 14px; }
.qz-genogram__note { fill: var(--color-text-secondary); font-family: var(--font-sans); font-size: 12px; }
.qz-genogram__feel { fill: var(--color-brand); font-family: var(--font-sans); font-size: 13px; }
.qz-genogram__legend { margin: var(--space-2) 0 0; color: var(--color-text-tertiary); font-size: var(--font-size-100); line-height: var(--line-height-normal); }