/* 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; }
}