/* 统一主题：白天白粉、黑夜黑粉。品牌玫红固定，不修改业务页面布局。 */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #fff9fc; --surface: #ffffff; --surface-alt: #fff3f9; --surface-raised: #f8eff5;
  --text: #251b27; --ink: #251b27; --muted: #746573; --quiet: #8a7886;
  --line: #eadde6; --border: #eadde6; --pink: #ec008c; --pink-soft: #ffedf7;
  --accent-text: #c40073; --accent-line: #f3a8d3; --hover: #fff0f8;
  --green: #267d5b; --success-bg: #eaf6f0; --amber: #946013; --warning-bg: #fff5e2;
  --blue: #376b93; --info-bg: #edf5fb; --danger: #b92f50; --danger-bg: #fff0f3;
  --paper: #fff9fc; --canvas: #fff9fc; --white: #ffffff; --panel: #ffffff; --raised: #f8eff5;
  --hero-bg: #fff0f8; --hero-line: #f4c5df; --hero-text: #2b1727; --hero-muted: #79556d;
  --shadow: 0 20px 65px #56243c15; --overlay: #2b11294d; --pink-shadow: #ec008c13;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #08080b; --surface: #141217; --surface-alt: #0e0e12; --surface-raised: #211b24;
  --text: #f7f0f6; --ink: #f7f0f6; --muted: #b0a0ae; --quiet: #978393;
  --line: #392d38; --border: #392d38; --pink: #ec008c; --pink-soft: #351426;
  --accent-text: #ff8aca; --accent-line: #854364; --hover: #2b1825;
  --green: #9bcdb4; --success-bg: #1b3026; --amber: #ebc990; --warning-bg: #34291c;
  --blue: #a8c7e8; --info-bg: #1f2c3d; --danger: #ffacbc; --danger-bg: #3b1c28;
  --paper: #08080b; --canvas: #08080b; --white: #141217; --panel: #141217; --raised: #211b24;
  --hero-bg: #25121d; --hero-line: #6d3455; --hero-text: #fff5fc; --hero-muted: #ceb0c3;
  --shadow: 0 20px 65px #0007; --overlay: #000a; --pink-shadow: #ec008c1c;
}
html[data-theme] { background: var(--bg); }
html[data-theme] body { color: var(--text); background-color: var(--bg); }
html[data-theme] button, html[data-theme] input, html[data-theme] select, html[data-theme] textarea { color-scheme: inherit; }
html[data-theme] input[type='checkbox'], html[data-theme] input[type='range'] { accent-color: var(--pink); }
html[data-theme] :focus-visible { outline-color: var(--pink); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 31px; padding: 7px 10px; border: 1px solid var(--line); color: var(--text); background: var(--surface); border-radius: 7px; font: inherit; font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle:hover { border-color: var(--accent-line); background: var(--pink-soft); }
.theme-toggle-floating { position: fixed; top: 16px; right: 16px; z-index: 50; box-shadow: var(--shadow); }
html[data-theme] .topbar > .theme-toggle { margin-left: 13px; }
html[data-theme] .topbar .demo-badge { margin-left: auto; }
html[data-theme] .prototype-label .theme-toggle { padding: 4px 7px; min-height: 24px; margin-left: auto; font-size: 12px; border-color: #ffffff80; background: #fff; color: #9a0058; border-radius: 5px; letter-spacing: 0; }
html[data-theme] .prototype-label .theme-toggle svg { width: 12px; height: 12px; }
html[data-theme] .prototype-label .label-date { margin-left: auto; }

/* 管理工作台：覆盖表格、卡片、抽屉及所有局部状态色。 */
html[data-theme] body[data-prototype-page='admin'] .sidebar,
html[data-theme] body[data-prototype-page='admin'] .topbar { background: var(--surface-alt); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] :is(.sidebar-label, .sidebar-label span, .brand > span, .portal-link small, .operator small, .breadcrumb, .today span, .scope-controls label, .scope-note, .eyebrow, .stat-meta, .panel-head .caption, .quiet, .data-table th, .data-table td small, .table-foot, .content-card p, .card-bottom, .detail-item dt, .child-card header small, .timeline-item small, .workspace-footer, .footer-version, .form-hint) { color: var(--quiet); }
html[data-theme] body[data-prototype-page='admin'] :is(.muted, .page-description, .stat-label, .list-row p, .child-card p, .timeline-item p, .lesson-card p, .task-card p, .task-card.completed p, .range-field header, .form-field, .detail-item dd, .summary-box p) { color: var(--muted); }
html[data-theme] body[data-prototype-page='admin'] :is(.breadcrumb b, .today, .score-number, .score-line header b, .check-option, .list-row h3, .detail-item dd, .data-table td, .content-card h3, .lesson-card h3, .lesson-time) { color: var(--text); }
html[data-theme] body[data-prototype-page='admin'] :is(.breadcrumb span, .data-table th, .data-table td, .table-foot, .scopebar, .workspace-footer, .operator, .list-row, .card-bottom, .outline-item, .form-actions, .detail-block + .detail-block, .lesson-card footer, .task-card footer, .dialog-header, .tabs, .scope-divider) { border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .scope-divider { background: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .nav-item { color: var(--muted); }
html[data-theme] body[data-prototype-page='admin'] .nav-item:hover { color: var(--text); background: var(--hover); }
html[data-theme] body[data-prototype-page='admin'] .nav-item.active { color: var(--text); background: var(--pink-soft); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='admin'] .nav-count { color: var(--accent-text); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='admin'] :is(.portal-link, .panel, .stat-card, .content-card, .lesson-card, .module-card, .kanban-column, .dialog) { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] :is(.dialog, .dialog.modal) { box-shadow: var(--shadow); }
html[data-theme] body[data-prototype-page='admin'] :is(.icon-button, .button, .tab.active, .kanban-title small, .check-option, .input, select) { color: var(--text); background: var(--surface-raised); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] :is(.input::placeholder, .check-option small, .empty) { color: var(--quiet); }
html[data-theme] body[data-prototype-page='admin'] .input,
html[data-theme] body[data-prototype-page='admin'] .dialog-body .input { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .button:hover { background: var(--hover); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='admin'] .button.primary { background: var(--pink); border-color: var(--pink); color: #fff; }
html[data-theme] body[data-prototype-page='admin'] .button.primary:hover { background: #ca0078; }
html[data-theme] body[data-prototype-page='admin'] .button.subtle { color: var(--muted); background: transparent; border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .button.text { color: var(--accent-text); background: transparent; border-color: transparent; }
html[data-theme] body[data-prototype-page='admin'] :is(.tab, .kanban-title small, .form-field, .score-line header, .score-number small) { color: var(--muted); }
html[data-theme] body[data-prototype-page='admin'] .tabs { background: var(--surface-alt); }
html[data-theme] body[data-prototype-page='admin'] .data-table tbody tr:hover { background: var(--hover); }
html[data-theme] body[data-prototype-page='admin'] :is(.hero-banner, .summary-box, .child-card, .evidence-card, .task-card) { background: var(--hero-bg); color: var(--hero-text); border-color: var(--hero-line); }
html[data-theme] body[data-prototype-page='admin'] .hero-banner p { color: var(--hero-muted); }
html[data-theme] body[data-prototype-page='admin'] .hero-banner::before,
html[data-theme] body[data-prototype-page='admin'] .hero-banner::after { border-color: var(--hero-line); }
html[data-theme] body[data-prototype-page='admin'] :is(.callout, .callout.neutral) { color: var(--hero-muted); background: var(--hero-bg); border-color: var(--hero-line); border-left-color: var(--pink); }
html[data-theme] body[data-prototype-page='admin'] .callout strong { color: var(--hero-text); }
html[data-theme] body[data-prototype-page='admin'] :is(.avatar, .evidence-icon, .pipeline-step .step-number) { color: var(--accent-text); background: var(--pink-soft); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='admin'] .avatar.green { color: var(--green); background: var(--success-bg); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .avatar.blue { color: var(--blue); background: var(--info-bg); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .avatar.violet { color: var(--muted); background: var(--surface-raised); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .progress,
html[data-theme] body[data-prototype-page='admin'] .pipeline-step::after,
html[data-theme] body[data-prototype-page='admin'] .timeline-item::after { background: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .progress > span { background: var(--pink); }
html[data-theme] body[data-prototype-page='admin'] .badge { color: var(--muted); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='admin'] .badge.pink { color: var(--accent-text); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='admin'] .badge.green { color: var(--green); background: var(--success-bg); }
html[data-theme] body[data-prototype-page='admin'] .badge.amber { color: var(--amber); background: var(--warning-bg); }
html[data-theme] body[data-prototype-page='admin'] .badge.blue { color: var(--blue); background: var(--info-bg); }
html[data-theme] body[data-prototype-page='admin'] .badge.outline { color: var(--muted); background: transparent; border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] :is(.prototype-badge, .child-card.selected) { color: var(--accent-text); border-color: var(--accent-line); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='admin'] :is(.day-button, .module-card) { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] :is(.day-button small, .module-card p) { color: var(--muted); }
html[data-theme] body[data-prototype-page='admin'] :is(.day-button.active, .module-card:hover) { color: var(--text); background: var(--pink-soft); border-color: var(--pink); }
html[data-theme] body[data-prototype-page='admin'] :is(.module-card svg, .module-card footer, .portal-icon, .stat-meta .up, .dialog-header .eyebrow) { color: var(--accent-text); }
html[data-theme] body[data-prototype-page='admin'] :is(.task-card.completed, .approval-box) { color: var(--green); background: var(--success-bg); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .form-error { color: var(--danger); background: var(--danger-bg); border-color: var(--line); }
html[data-theme] body[data-prototype-page='admin'] .overlay { background: var(--overlay); }
html[data-theme] body[data-prototype-page='admin'] .toast { color: var(--hero-text); background: var(--hero-bg); border-color: var(--accent-line); box-shadow: var(--shadow); }

/* 家庭移动端：内容、英雄区、课程视觉和浮层全部随主题变化。 */
html[data-theme] body[data-prototype-page='mobile'] :is(.desktop-intro, .header-brand, .header-title, .page-heading, .section-head h2, .detail-meta strong, .booking-meta b, .check-line b, .growth-top, .goal-card h3, .family-item h3, .menu-item, .order-card, .question-title, .question-option, .form-label) { color: var(--text); }
html[data-theme] body[data-prototype-page='mobile'] :is(.desktop-copy, .desktop-note, .desktop-links a, .quick-grid button, .body-copy, .feedback-quote, .practice-list, .check-line, .score-dimension > span, .section-footer b, .modal .modal-text) { color: var(--muted); }
html[data-theme] body[data-prototype-page='mobile'] :is(.device, .modal) { background: var(--bg); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme] body[data-prototype-page='mobile'] :is(.app-header, .bottom-nav, .child-button, .card, .subtle-card, .empty-card, .brand-tile, .next-step, .quick-icon, .course-card, .search-box, .chip, .sticky-action, .form-input, .form-select, .form-textarea, .interest-choice, .photo-picker, .question-option, .date-tile, .time-button, .calendar-week, .lesson-item, .report-tile, .menu-list, .package-card, .secondary-button) { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme] body[data-prototype-page='mobile'] :is(.desktop-links a, .app-header, .bottom-nav, .line, .outline-item, .calendar-day, .family-item, .menu-item, .insight-row, .order-total) { border-color: var(--line); }
html[data-theme] body[data-prototype-page='mobile'] .device-status { color: var(--text); background: var(--surface-alt); }
html[data-theme] body[data-prototype-page='mobile'] .device-island { background: var(--line); }
html[data-theme] body[data-prototype-page='mobile'] .prototype-label { background: var(--pink); color: #fff; min-height: 31px; }
html[data-theme] body[data-prototype-page='mobile'] :is(.hero, .detail-hero, .activity-preview, .report-summary, .growth-summary, .motion-frame, .project-banner, .profile-hero, .package-head) { color: var(--hero-text); background: var(--hero-bg); border-color: var(--hero-line); }
html[data-theme] body[data-prototype-page='mobile'] :is(.hero h1, .detail-hero h1, .activity-preview h3, .report-summary h2, .growth-summary strong, .project-banner h3, .profile-hero h1, .package-head h3, .profile-stats button, .activity-preview button) { color: var(--hero-text); }
html[data-theme] body[data-prototype-page='mobile'] :is(.hero .hero-kicker, .hero p, .hero-folio, .detail-hero p, .activity-preview p, .report-summary p, .growth-summary .summary-title span, .growth-stat-grid span, .motion-frame span, .project-banner p, .profile-info p, .profile-stats span, .package-head p) { color: var(--hero-muted); }
html[data-theme] body[data-prototype-page='mobile'] .activity-preview button { border-color: var(--hero-line); }
html[data-theme] body[data-prototype-page='mobile'] :is(.course-art, .course-art.dance, .course-art.acting) { color: var(--hero-text); background: var(--hero-bg); }
html[data-theme] body[data-prototype-page='mobile'] .detail-hero .course-art { background: transparent; }
html[data-theme] body[data-prototype-page='mobile'] .course-art .art-label { color: var(--accent-text); }
html[data-theme] body[data-prototype-page='mobile'] .brand-tile:last-child { border-top-color: var(--ink); }
html[data-theme] body[data-prototype-page='mobile'] :is(.avatar, .tiny-avatar, .photo-preview, .assessment-icon, .next-step button, .success-mark, .report-icon, .project-row .project-number) { color: var(--accent-text); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='mobile'] .avatar.alt { color: var(--muted); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='mobile'] .avatar.third { color: var(--blue); background: var(--info-bg); }
html[data-theme] body[data-prototype-page='mobile'] .teacher-avatar { color: var(--accent-text); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='mobile'] :is(.pill, .notice, .recommend-reason) { color: var(--accent-text); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='mobile'] :is(.pill.dark, .profile-info .avatar) { color: var(--accent-text); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='mobile'] .pill.gray { color: var(--muted); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='mobile'] .pill.green { color: var(--green); background: var(--success-bg); }
html[data-theme] body[data-prototype-page='mobile'] .pill.outline { color: var(--hero-text); border-color: var(--hero-line); background: transparent; }
html[data-theme] body[data-prototype-page='mobile'] .notice.neutral { color: var(--muted); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='mobile'] .search-box input { color: var(--text); }
html[data-theme] body[data-prototype-page='mobile'] input::placeholder,
html[data-theme] body[data-prototype-page='mobile'] textarea::placeholder { color: var(--quiet); }
html[data-theme] body[data-prototype-page='mobile'] :is(.primary-button, .hero-cta, .chip.active, .date-tile.active, .step-item.active b, .calendar-day.active b) { background: var(--pink); color: #fff; border-color: var(--pink); }
html[data-theme] body[data-prototype-page='mobile'] :is(.interest-choice.active, .question-option.active, .time-button.active, .family-item button.selected) { background: var(--pink-soft); color: var(--accent-text); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='mobile'] :is(.family-item button, .profile-info button, .project-banner button, .step-item b) { color: var(--text); background: var(--surface-raised); border-color: var(--line); }
html[data-theme] body[data-prototype-page='mobile'] :is(.segment-control, .time-button:disabled, .attendance-day) { color: var(--muted); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='mobile'] .segment-control button.active { color: var(--text); background: var(--surface); }
html[data-theme] body[data-prototype-page='mobile'] .calendar-day b { color: var(--text); }
html[data-theme] body[data-prototype-page='mobile'] :is(.line, .step-line, .assessment-progress i, .progress-bar),
html[data-theme] body[data-prototype-page='mobile'] .timeline-row::before { background: var(--line); }
html[data-theme] body[data-prototype-page='mobile'] :is(.assessment-progress i.done, .progress-bar i) { background: var(--pink); }
html[data-theme] body[data-prototype-page='mobile'] .timeline-node { background: var(--pink-soft); border-color: var(--pink-soft); }
html[data-theme] body[data-prototype-page='mobile'] .attendance-day b { color: var(--green); background: var(--success-bg); }
html[data-theme] body[data-prototype-page='mobile'] .attendance-day.leave b { color: var(--amber); background: var(--warning-bg); }
html[data-theme] body[data-prototype-page='mobile'] :is(.bottom-nav button, .menu-item span, .menu-item i, .family-item p) { color: var(--muted); }
html[data-theme] body[data-prototype-page='mobile'] .bottom-nav button.active { color: var(--pink); }
html[data-theme] body[data-prototype-page='mobile'] .modal-backdrop { background: var(--overlay); }
html[data-theme] body[data-prototype-page='mobile'] .toast { color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
html[data-theme] body[data-prototype-page='mobile'] .form-error { color: var(--danger); }

/* 生命周期设计器：深浅画布、配置表单、实例、版本和发布对话框统一。 */
html[data-theme] body[data-prototype-page='lifecycle'] :is(.sidebar, .topbar) { background: var(--surface-alt); border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.brand, .sidebar-footer, .breadcrumb, .stage-heading strong, .flow-start, .flow-end, .config-selection strong, .instance-title h2, .task-card strong, .evidence-detail strong, .exception-box strong, .guardrail-grid h3, .version-card strong) { color: var(--text); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.nav-label, .brand-sub, .sidebar-note, .sidebar-note p, .sidebar-footer small, .back-link, .eyebrow, .page-head p, .small-label, .canvas-subhead, .canvas-hint, .config-mode, .stage-meta, .tiny-tag, .stage-weight, .stage-deliverables span, .config-panel label, #stage-form label, #stage-form label small, .form-message, .instance-title p, .instance-callout, .evidence-summary p, .evidence-stat > span, .task-card, .evidence-detail span, .evidence-detail small, .version-card p, .guardrail-grid p, .guardrail-footnote, .section-heading > span, .page-footer, .exception-box, .exception-box span) { color: var(--muted); }
html[data-theme] body[data-prototype-page='lifecycle'] .sidebar nav a { color: var(--muted); }
html[data-theme] body[data-prototype-page='lifecycle'] .sidebar nav a:hover { background: var(--hover); color: var(--text); }
html[data-theme] body[data-prototype-page='lifecycle'] .sidebar nav a.active { background: var(--pink-soft); color: var(--text); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='lifecycle'] .demo-badge { color: var(--accent-text); background: var(--pink-soft); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='lifecycle'] .canvas-panel { background-color: var(--surface-alt); background-image: radial-gradient(var(--line) .7px, transparent .7px); border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.template-toolbar, .config-panel, .preview-panel, .panel-head, .stage-card, .task-card, .version-card, .guardrail-grid article, dialog) { background: var(--surface); border-color: var(--line); color: var(--text); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.stage-card.selected, .task-card.active, .mode-banner, .publish-summary) { background: var(--pink-soft); border-color: var(--accent-line); color: var(--text); }
html[data-theme] body[data-prototype-page='lifecycle'] .stage-card.selected { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-shadow); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.tiny-tag, .stage-weight, .tab span, .flow-start, .flow-end, .exception-box, .instance-callout, .evidence-detail) { background: var(--surface-raised); border-color: var(--line); color: var(--muted); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.step-number, .stage-deliverables span) { color: var(--muted); border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.selected .step-number, .tab.active span, .config-selection span, .learner-avatar) { color: var(--accent-text); background: var(--pink-soft); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.stage-controls button, .outline-button, .small-button, input, select, textarea, .toolbar-fields select) { color: var(--text); background: var(--surface); border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(input:disabled, select:disabled, textarea:disabled) { color: var(--quiet); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.outline-button:hover, .small-button:hover, .stage-controls button:hover) { color: var(--text); background: var(--hover); border-color: var(--accent-line); }
html[data-theme] body[data-prototype-page='lifecycle'] .dark-button { color: var(--text); background: var(--surface-raised); border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] .pink-button { color: #fff; background: var(--pink); border-color: var(--pink); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.text-button, .tab) { color: var(--muted); }
html[data-theme] body[data-prototype-page='lifecycle'] .tab.active { color: var(--text); border-bottom-color: var(--pink); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.panel-head, .preview-tabs, .task-evidence, .task-card .task-status, .evidence-summary, .sidebar-note, .sidebar-footer, td) { border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] th { color: var(--muted); background: var(--surface-raised); }
html[data-theme] body[data-prototype-page='lifecycle'] td { color: var(--muted); }
html[data-theme] body[data-prototype-page='lifecycle'] td:first-child { color: var(--text); }
html[data-theme] body[data-prototype-page='lifecycle'] :is(.status-pill, .table-status.green) { color: var(--green); background: var(--success-bg); border-color: var(--line); }
html[data-theme] body[data-prototype-page='lifecycle'] .table-status.orange { color: var(--amber); background: var(--warning-bg); }
html[data-theme] body[data-prototype-page='lifecycle'] .table-status.pink { color: var(--accent-text); background: var(--pink-soft); }
html[data-theme] body[data-prototype-page='lifecycle'] .toast { color: var(--text); background: var(--surface-raised); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme] body[data-prototype-page='lifecycle'] dialog { box-shadow: var(--shadow); }
html[data-theme] body[data-prototype-page='lifecycle'] dialog p { color: var(--muted); }
html[data-theme] body[data-prototype-page='lifecycle'] dialog::backdrop { background: var(--overlay); }
@media (max-width: 760px) {
  html[data-theme] .topbar-right { gap: 9px; }
  html[data-theme] .topbar > .theme-toggle { margin-left: 8px; padding: 6px 8px; }
  html[data-theme] .topbar .demo-badge { display: none; }
  html[data-theme] .prototype-label .label-date { font-size: 12px; letter-spacing: 0; }
  .theme-toggle-floating { top: 10px; right: 10px; }
}