/* Shared night palette, loaded after the screen-specific styles. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #19181b;
  --paper: #252329;
  --text: #f5f0e9;
  --muted: #bbb5c0;
  --line: #45414b;
  --olive: #dce8ad;
  --olive-dark: #c8d995;
  --olive-light: #34382f;
  --peach: #e6b98d;
}

html[data-theme="dark"] body { background: #19181b !important; color: #f5f0e9 !important; }
html[data-theme="dark"] main { background: #19181b !important; color: #f5f0e9 !important; }
html[data-theme="dark"] .app-shell { background: transparent !important; }
html[data-theme="dark"] footer { background: transparent !important; color: #bdb5c1 !important; border-color: #403b45 !important; }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .mobile-nav { background: #232126 !important; border-color: #403b45 !important; color: #f5f0e9 !important; }
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .topbar a,
html[data-theme="dark"] .sidebar .workspace-label,
html[data-theme="dark"] .sidebar .sidebar-profile,
html[data-theme="dark"] .sidebar .sidebar-profile small,
html[data-theme="dark"] .sidebar nav a,
html[data-theme="dark"] .topbar .breadcrumb,
html[data-theme="dark"] .feature-page .eyebrow { color: #d5cbd9 !important; }
html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .mobile-nav a.active { background: #3b4033 !important; color: #f6f1e7 !important; }
html[data-theme="dark"] #sidebar nav a { color: #d5cbd9 !important; }
html[data-theme="dark"] #sidebar nav a.active { background: #3b4033 !important; color: #f6f1e7 !important; box-shadow: inset 3px 0 #c4d38f !important; }
html[data-theme="dark"] body #sidebar nav a { color: #e0d8e3 !important; }
html[data-theme="dark"] body #sidebar nav a.active { background: #3b4033 !important; color: #fff9ee !important; }
html[data-theme="dark"] .sidebar .sidebar-profile { background: #302b31 !important; border-color: #4a424d !important; }
html[data-theme="dark"] .profile-context strong,
html[data-theme="dark"] .profile-context span,
html[data-theme="dark"] .active-family-banner strong,
html[data-theme="dark"] .active-family-banner span { color: #e6deea !important; }
html[data-theme="dark"] .profile-context a,
html[data-theme="dark"] .active-family-banner a { color: #e8c39e !important; }
html[data-theme="dark"] #main,
html[data-theme="dark"] #main h1,
html[data-theme="dark"] #main h2,
html[data-theme="dark"] #main h3,
html[data-theme="dark"] #main h4 { color: #f5f0e9; }
html[data-theme="dark"] #main p,
html[data-theme="dark"] #main li,
html[data-theme="dark"] #main small,
html[data-theme="dark"] #main label,
html[data-theme="dark"] #main .muted,
html[data-theme="dark"] #main .card-meta { color: #c9c2cc; }
html[data-theme="dark"] #main input,
html[data-theme="dark"] #main textarea,
html[data-theme="dark"] #main select,
html[data-theme="dark"] dialog input,
html[data-theme="dark"] dialog textarea,
html[data-theme="dark"] dialog select { background: #1f1d23 !important; color: #f5f0e9 !important; border-color: #57505e !important; }

html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-detail,
html[data-theme="dark"] .product-info-grid article,
html[data-theme="dark"] .ritual-card,
html[data-theme="dark"] .recipe-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .content-card-body,
html[data-theme="dark"] .family-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .feature-form,
html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .diagnostic-panel,
html[data-theme="dark"] .result-panel,
html[data-theme="dark"] .learning-guide,
html[data-theme="dark"] .learning-guide article,
html[data-theme="dark"] .style-step,
html[data-theme="dark"] .calendar-zone,
html[data-theme="dark"] .community-feed,
html[data-theme="dark"] .community-chat,
html[data-theme="dark"] .community-post,
html[data-theme="dark"] .community-online,
html[data-theme="dark"] .community-conversation {
  background-color: #252329 !important;
  color: #f5f0e9 !important;
  border-color: #45414b !important;
}
html[data-theme="dark"] .notice,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .orders-notice,
html[data-theme="dark"] .tailored-note,
html[data-theme="dark"] .profile-context,
html[data-theme="dark"] .active-family-banner { background-color: #2c2931 !important; color: #eee7dc !important; border-color: #514b56 !important; }
html[data-theme="dark"] .feature-dialog,
html[data-theme="dark"] .modal,
html[data-theme="dark"] dialog { background: #252329 !important; color: #f5f0e9 !important; border-color: #514b56 !important; }
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .feature-page .text-link,
html[data-theme="dark"] .community-safety button { color: #edc49e !important; }
html[data-theme="dark"] .filter,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .light-button { background: #37343d !important; color: #f5f0e9 !important; border-color: #5a5361 !important; }
html[data-theme="dark"] .filter.active { background: #414735 !important; color: #f5f0e9 !important; border-color: #77835c !important; }
html[data-theme="dark"] .primary-button { color: #211b17 !important; }
html[data-theme="dark"] #toast { background: #533b31 !important; color: #fff6ec !important; border: 1px solid #795a48 !important; }
html[data-theme="dark"] .admin-tabs { background: #242228 !important; border-color: #48434d !important; }
html[data-theme="dark"] .admin-tabs button { color: #d5cbd9 !important; }
html[data-theme="dark"] .admin-tabs button.active { background: #37343d !important; border-color: #5a5361 !important; color: #f5f0e9 !important; }
html[data-theme="dark"] .admin-form-section,
html[data-theme="dark"] .admin-toolbar,
html[data-theme="dark"] .admin-empty-note { background: #2b2930 !important; border-color: #48434d !important; color: #e5dfea !important; }
html[data-theme="dark"] .admin-form input,
html[data-theme="dark"] .admin-form textarea,
html[data-theme="dark"] .admin-form select { background: #1f1d23 !important; color: #f5f0e9 !important; border-color: #57505e !important; }

/* Orders: compact timeline and a more useful empty state in both themes. */
.order-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18px 0 7px; padding: 0; list-style: none; }
.order-progress li { position: relative; display: grid; justify-items: center; gap: 7px; min-width: 0; color: #958b9a; font-size: 10px; text-align: center; }
.order-progress li::before { position: absolute; z-index: 0; top: 7px; left: -50%; width: 100%; height: 2px; background: #e7e0e8; content: ""; }
.order-progress li:first-child::before { display: none; }
.order-progress li i { z-index: 1; width: 15px; height: 15px; border: 3px solid #e7e0e8; border-radius: 50%; background: #fff; }
.order-progress li.done, .order-progress li.current { color: #675039; font-weight: 700; }
.order-progress li.done::before, .order-progress li.current::before { background: #b58b63; }
.order-progress li.done i { border-color: #8c9a6c; background: #8c9a6c; }
.order-progress li.current i { border-color: #b58b63; background: #fff; box-shadow: 0 0 0 4px #b58b6320; }
.order-item-mark { font-size: 11px !important; font-weight: 750; }
.orders-empty { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 62px); min-height: 260px; padding: clamp(25px, 4vw, 48px); text-align: left; }
.orders-empty-art { position: relative; display: grid; min-height: 160px; place-items: center; overflow: hidden; border: 1px solid #e5d7c4; border-radius: 24px; background: radial-gradient(circle at 45% 38%, #fff8e9, #e9d9c4 72%); }
.orders-empty-art::before, .orders-empty-art::after { position: absolute; width: 142px; height: 142px; border: 1px solid #987a5728; border-radius: 50%; content: ""; }
.orders-empty-art::after { width: 108px; height: 108px; }
.orders-empty-art .orders-empty-icon { z-index: 1; width: 58px; height: 58px; margin: 0; background: #fffaf0; box-shadow: 0 8px 22px #54391a1a; }
.orders-empty-art small { position: absolute; bottom: 14px; z-index: 1; color: #82684b; font-size: 8px; font-weight: 750; letter-spacing: .2em; }
.orders-empty-art>i { position: absolute; top: 24px; right: 26px; width: 7px; height: 7px; border-radius: 50%; background: #b48a60; box-shadow: -112px 80px 0 #81916d, -20px 104px 0 #d0a37b; }
.orders-empty-copy { max-width: 620px; }
.orders-empty-copy h2 { max-width: 550px; }
.orders-empty-copy p { margin-bottom: 18px; }
html[data-theme="dark"] .order-progress li { color: #aaa2af; }
html[data-theme="dark"] .order-progress li::before { background: #4a4650; }
html[data-theme="dark"] .order-progress li i { background: #242228; border-color: #4a4650; }
html[data-theme="dark"] .order-progress li.done,
html[data-theme="dark"] .order-progress li.current { color: #e8d1b5; }
html[data-theme="dark"] .order-progress li.done::before,
html[data-theme="dark"] .order-progress li.current::before { background: #bd956b; }
html[data-theme="dark"] .order-progress li.done i { background: #9eac7d; border-color: #9eac7d; }
html[data-theme="dark"] .order-progress li.current i { background: #252329; border-color: #d2a779; }
html[data-theme="dark"] .orders-intro { background: linear-gradient(115deg, #29262c, #302c31 68%, #332c27) !important; border-color: #514a4c !important; }
html[data-theme="dark"] .orders-empty { background: linear-gradient(110deg, #27252b, #242329 70%) !important; border-color: #514a50 !important; }
html[data-theme="dark"] .orders-empty-art { background: radial-gradient(circle at 45% 38%, #51463b, #322d2d 72%) !important; border-color: #665345 !important; }
html[data-theme="dark"] .orders-empty-art::before,
html[data-theme="dark"] .orders-empty-art::after { border-color: #e4c59c30; }
html[data-theme="dark"] .orders-empty-art .orders-empty-icon { background: #40372f !important; color: #efd2ae !important; }
html[data-theme="dark"] .orders-empty-art small { color: #ddc1a0 !important; }
html[data-theme="dark"] .order-card { background: #252329 !important; border-color: #49444e !important; }
html[data-theme="dark"] .order-status { background: #35313a !important; color: #e7d8bf !important; }
html[data-theme="dark"] .order-card[data-order-status=pending] .order-status { background: #493824 !important; color: #f2cb87 !important; }
html[data-theme="dark"] .order-card[data-order-status=paid] .order-status { background: #303d30 !important; color: #c8e0bb !important; }
html[data-theme="dark"] .order-card[data-order-status=shipped] .order-status { background: #303746 !important; color: #c6d5f1 !important; }
html[data-theme="dark"] .order-card[data-order-status=delivered] .order-status { background: #2d3d32 !important; color: #c4e2cb !important; }
html[data-theme="dark"] .order-date,
html[data-theme="dark"] .order-totals,
html[data-theme="dark"] .order-address p { color: #c2bbc6 !important; }

@media (max-width: 620px) {
  .orders-empty { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .orders-empty-art { min-height: 115px; }
  .order-progress li { font-size: 9px; }
}

/* One palette for all screens, including cards added after initial navigation. */
html[data-theme="dark"] {
  --night-bg: #17181c;
  --night-surface: #23252b;
  --night-raised: #2d3037;
  --night-border: #484c57;
  --night-text: #f6f1e9;
  --night-muted: #c6c5cc;
  --night-accent: #e8b88b;
  --bg: var(--night-bg);
  --paper: var(--night-surface);
  --text: var(--night-text);
  --muted: var(--night-muted);
  --line: var(--night-border);
}
html[data-theme="dark"] body,
html[data-theme="dark"] body #main { background: var(--night-bg) !important; color: var(--night-text) !important; }
html[data-theme="dark"] body :is(.sidebar,.topbar,.mobile-nav) { background: var(--night-surface) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] body #main :is(.game-menu>article,.game-board,.video-grid>article,.studio-links>a,.people-grid>a,.people-grid>a>div,.routine-home-grid>a,.home-install,.auth-story,.account-info,.account-form-panel,.profile-tile,.family-add,.family-welcome,.calendar-zone,.month-card,.day-card,.calendar-empty,.recipe-feature,.content-card,.recipe-card,.product-card,.product-detail,.product-info-grid>article,.feature-card,.feature-form,.news-card,.admin-panel,.admin-table-wrap,.community-post,.community-feed,.community-chat,.community-online,.diagnostic-panel,.result-panel,.learning-guide,.learning-guide article,.film-card,.gesture-video,.timer-card,.quick-card,.recovery-card,.qr-card,.search-field) {
  background: var(--night-surface) !important;
  color: var(--night-text) !important;
  border-color: var(--night-border) !important;
  box-shadow: 0 8px 28px #00000014;
}
html[data-theme="dark"] body #main :is(.studio-hero,.play-heading,.profile-dashboard,.household-heading,.feature-hero,.library-hero) {
  background: linear-gradient(125deg, #303039, #26272e) !important;
  color: var(--night-text) !important;
  border-color: var(--night-border) !important;
}
html[data-theme="dark"] body #main :is(.notice,.empty-state,.tailored-note,.profile-context,.active-family-banner,.install-instructions,.community-conversation,.admin-toolbar,.admin-form-section) {
  background: var(--night-raised) !important;
  color: var(--night-text) !important;
  border-color: var(--night-border) !important;
}
html[data-theme="dark"] body :is(#main,.modal,dialog) :is(h1,h2,h3,h4,strong,label,summary) { color: var(--night-text) !important; }
html[data-theme="dark"] body :is(#main,.modal,dialog) :is(p,li,small,.card-meta,.form-note) { color: var(--night-muted) !important; }
html[data-theme="dark"] body #main :is(.eyebrow,.studio-footnote,.game-symbol,h1 em,h2 em,.text-link,.studio-links b) { color: var(--night-accent) !important; }
html[data-theme="dark"] body :is(#main,.modal,dialog) :is(.primary-button) {
  background: #e8b88b !important; color: #251c17 !important; border-color: #e8b88b !important;
}
html[data-theme="dark"] body :is(#main,.modal,dialog) .primary-button:hover { background: #f3caa5 !important; }
html[data-theme="dark"] body :is(#main,.modal,dialog) :is(.secondary-button,.light-button,.game-options button,.memory-grid button,.auth-tabs button,.avatar-picker button,.arcade-dpad button,.filter) {
  background: var(--night-raised) !important; color: var(--night-text) !important; border-color: #626773 !important;
}
html[data-theme="dark"] body :is(#main,.modal,dialog) :is(.filter.active,.option.selected,.auth-tabs button.active,.avatar-picker button.selected) {
  background: #414d3d !important; color: #f1f6e7 !important; border-color: #b7cb94 !important;
}
html[data-theme="dark"] body :is(#main,.modal,dialog) :is(input,textarea,select) { background: #1a1c21 !important; color: var(--night-text) !important; border-color: #626773 !important; }
html[data-theme="dark"] body :is(input,textarea)::placeholder { color: #aaaeb9 !important; opacity: 1; }
html[data-theme="dark"] body :is(.modal,dialog) { background: var(--night-surface) !important; color: var(--night-text) !important; }
html[data-theme="dark"] body #main .form-error:not(:empty),
html[data-theme="dark"] body .modal .form-error:not(:empty) { background: #462a32 !important; color: #ffd2d9 !important; padding: 10px 12px; border-radius: 8px; }
html[data-theme="dark"] body #main :is(.coin-badge,.art-sticker,.tag,.texture-badge,.product-tag) { background: #3c342c !important; color: #f1c89f !important; border-color: #6b5544 !important; }
html[data-theme="dark"] body #main .coin-badge { color: #f1c89f !important; }
html[data-theme="dark"] body #main .memory-grid button.matched { background: #3b503f !important; border-color: #a7c99a !important; }
html[data-theme="dark"] body #main .game-options button.correct { background: #3b503f !important; border-color: #a7c99a !important; color: #edffe4 !important; opacity: 1; }
html[data-theme="dark"] body #main .game-options button.incorrect { background: #4c3039 !important; border-color: #d699aa !important; color: #ffe3eb !important; opacity: 1; }
html[data-theme="dark"] body :is(a,button,input,textarea,select,summary):focus-visible { outline: 3px solid #f1c89f !important; outline-offset: 4px; }
.assessment-evidence { margin: 24px 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #f4efe7; }
.assessment-evidence p { line-height: 1.75; }
.assessment-evidence small { display: block; line-height: 1.7; }
.assessment-zones { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.assessment-zones article { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper,#fff); }
.assessment-zones span { font-size: 21px; font-weight: 700; }
html[data-theme="dark"] body #main :is(.assessment-evidence,.assessment-zones article,.insights-grid article) { background: var(--night-raised) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
.ad-placement { margin: 32px 0 12px; padding: 18px 0; border-top: 1px solid var(--line); overflow: hidden; }
.ad-placement>small { display: block; margin-bottom: 12px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
@media(max-width:580px) { .assessment-zones { grid-template-columns:1fr; } .assessment-zones article { display:flex; align-items:center; justify-content:space-between; } }
html[data-theme="dark"] body #main :is(.result-frequency,.result-top,.bilan-heading-mark,.type-seal) { background: var(--night-raised) !important; border-color: var(--night-border) !important; color: var(--night-text) !important; }
html[data-theme="dark"] body #main .type-seal strong,
html[data-theme="dark"] body #main .type-seal .hair-drawing { color: var(--night-accent) !important; }
html[data-theme="dark"] body #main .result-tags span { background: #3e4938 !important; color: #eff6e6 !important; }