/* Shared appearance picker. Halloween decorations are a local device preference. */
:root {
  --theme-surface: #fff;
  --theme-elevated: #f5f5f6;
  --theme-hover: #f5f6f8;
  --theme-field: #fff;
  --theme-border: #e1e4e8;
}
.appearance-login { margin-top: 27px; padding-top: 18px; border-top: 1px solid var(--theme-border); }
.appearance-login > p { margin: 0 0 11px; color: var(--muted); font-size: 11px; font-weight: 800; }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.appearance-option { min-width: 0; min-height: 70px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; justify-content: center; padding: 9px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface); color: var(--ink); text-align: left; font-size: 11px; transition: border-color .18s, box-shadow .18s, transform .18s; }
.appearance-option:hover { transform: translateY(-2px); border-color: var(--yellow); }
.appearance-option:focus-visible, .theme-open-button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.appearance-option[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.appearance-option strong { line-height: 1.15; }
.appearance-option small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.appearance-preview { width: 100%; height: 25px; display: flex; align-items: center; gap: 4px; padding: 4px 5px; border-radius: 5px; overflow: hidden; }
.appearance-preview i { display: block; width: 21%; height: 65%; border-radius: 2px; }
.appearance-preview i:last-child { flex: 1; }
.light-preview { background: linear-gradient(90deg, #14161c 26%, #f1f2f5 26%); }
.light-preview i { background: #f2e51b; }
.light-preview i:last-child { background: #fff; }
.dark-preview { background: linear-gradient(90deg, #0b0e15 26%, #242a37 26%); }
.dark-preview i { background: #ebe329; }
.dark-preview i:last-child { background: #3b4455; }
.future-preview { background: linear-gradient(120deg, #071326, #162347 65%, #421e65); }
.future-preview i { background: #45e6ee; box-shadow: 0 0 8px #45e6ee; }
.future-preview i:last-child { background: #7146db; box-shadow: 0 0 8px #a478ff; }
.glass-preview { background: linear-gradient(135deg, #60b9df, #d0edfb 50%, #8cb6d8); }
.glass-preview i { background: #ffffffa3; border: 1px solid #fff; box-shadow: 0 2px 6px #1f6e9444; }
.glass-preview i:last-child { background: #fff9; }
.lighting-preview { background: radial-gradient(circle at 70% 20%, #ffde8d, #b96a2a 50%, #372018); }
.lighting-preview i { background: #ffd985; box-shadow: 0 0 7px #ffcc72; }
.lighting-preview i:last-child { background: #fff2cf; }
.nature-preview { background: linear-gradient(120deg, #123d2b, #5d9862 55%, #dceacb); }
.nature-preview i { background: #afd694; }
.nature-preview i:last-child { background: #f0f5dd; }
.theme-open-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 10px; border: 1px solid #4a4b51; border-radius: 9px; background: #222329; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.theme-open-button:hover { border-color: var(--yellow); color: var(--yellow); }
.theme-open-button > span:first-child { font-size: 19px; line-height: 1; }
.appearance-modal-card { width: min(100%, 580px); }
.appearance-options-modal { margin-top: 21px; gap: 12px; }
.appearance-options-modal .appearance-option { min-height: 126px; padding: 14px; }
.appearance-options-modal .appearance-preview { height: 39px; margin-bottom: 5px; }
@media (max-width: 850px) { .theme-open-button { width: 38px; padding: 5px; } .theme-open-button > span:last-child { display: none; } }
@media (max-width: 430px) { .appearance-options { gap: 6px; } .appearance-option { padding: 7px; font-size: 10px; } .appearance-options-modal { grid-template-columns: 1fr; } .appearance-options-modal .appearance-option { min-height: 70px; display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; align-content: center; } .appearance-options-modal .appearance-preview { grid-row: span 2; height: 46px; margin: 0; } }
@media (max-width: 430px) { .appearance-login .appearance-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Both dark appearances retain the layout and all existing status colors. */
html[data-theme="dark"], html[data-theme="future"] {
  color-scheme: dark;
  --black: #10141e;
  --dark: #181e2a;
  --ink: #e9edf5;
  --muted: #aeb8c8;
  --line: #354051;
  --soft: #252e3c;
  --white: #1b2431;
  --danger: #ff8991;
  --danger-soft: #442630;
  --success: #71dbad;
  --success-soft: #203f35;
  --warning: #ffd481;
  --warning-soft: #4a3922;
  --info: #84bfff;
  --info-soft: #243b55;
  --shadow: 0 20px 50px rgba(1, 5, 14, .45);
  --theme-surface: #1b2431;
  --theme-elevated: #252e3c;
  --theme-hover: #303a49;
  --theme-field: #141d2a;
  --theme-border: #3b485b;
}
html[data-theme="dark"] { --yellow: #f2e851; }
html[data-theme="dark"] body, html[data-theme="future"] body { background: #111722; color: var(--ink); }
html[data-theme="dark"] .login-panel, html[data-theme="future"] .login-panel,
html[data-theme="dark"] .sidebar, html[data-theme="future"] .sidebar,
html[data-theme="dark"] .panel, html[data-theme="future"] .panel,
html[data-theme="dark"] .stat-card, html[data-theme="future"] .stat-card,
html[data-theme="dark"] .modal-card, html[data-theme="future"] .modal-card,
html[data-theme="dark"] .availability-group, html[data-theme="future"] .availability-group,
html[data-theme="dark"] .sp-kpis > div, html[data-theme="future"] .sp-kpis > div,
html[data-theme="dark"] .sp-day, html[data-theme="future"] .sp-day,
html[data-theme="dark"] .sp-swap-row, html[data-theme="future"] .sp-swap-row { background: var(--theme-surface); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="dark"] .sidebar, html[data-theme="future"] .sidebar { border-color: var(--line); }
html[data-theme="dark"] .login-screen, html[data-theme="future"] .login-screen { background: var(--black); }
html[data-theme="dark"] .login-brand, html[data-theme="future"] .login-brand { background: #0c1018; }
html[data-theme="dark"] .page-heading h1, html[data-theme="future"] .page-heading h1,
html[data-theme="dark"] .sp-kpis strong, html[data-theme="future"] .sp-kpis strong { color: var(--ink); }
html[data-theme="dark"] .field input, html[data-theme="future"] .field input,
html[data-theme="dark"] .field select, html[data-theme="future"] .field select,
html[data-theme="dark"] .field textarea, html[data-theme="future"] .field textarea,
html[data-theme="dark"] .filters select, html[data-theme="future"] .filters select,
html[data-theme="dark"] .chart-filter select, html[data-theme="future"] .chart-filter select,
html[data-theme="dark"] .sp-day input, html[data-theme="future"] .sp-day input,
html[data-theme="dark"] .sp-day select, html[data-theme="future"] .sp-day select,
html[data-theme="dark"] .sp-form-stack input, html[data-theme="future"] .sp-form-stack input,
html[data-theme="dark"] .sp-form-stack textarea, html[data-theme="future"] .sp-form-stack textarea,
html[data-theme="dark"] .sp-form-stack select, html[data-theme="future"] .sp-form-stack select {
  background: var(--theme-field); border-color: var(--theme-border); color: var(--ink);
}
html[data-theme="dark"] input::placeholder, html[data-theme="future"] input::placeholder,
html[data-theme="dark"] textarea::placeholder, html[data-theme="future"] textarea::placeholder { color: #9caabd; opacity: 1; }
html[data-theme="dark"] .field input[readonly], html[data-theme="future"] .field input[readonly],
html[data-theme="dark"] .field input:disabled, html[data-theme="future"] .field input:disabled { background: var(--theme-elevated); color: var(--muted); }
html[data-theme="dark"] .secondary-button, html[data-theme="future"] .secondary-button,
html[data-theme="dark"] .mini-button, html[data-theme="future"] .mini-button,
html[data-theme="dark"] .clock-button, html[data-theme="future"] .clock-button,
html[data-theme="dark"] .sp-tabs button, html[data-theme="future"] .sp-tabs button { background: var(--theme-elevated); color: var(--ink); border-color: var(--theme-border); }
html[data-theme="dark"] .clock-button.primary, html[data-theme="future"] .clock-button.primary { background: var(--yellow); color: #0c1422; border-color: var(--yellow); }
html[data-theme="dark"] .clock-button.primary:before, html[data-theme="future"] .clock-button.primary:before { background: #14263c; }
html[data-theme="dark"] .nav-item, html[data-theme="future"] .nav-item { color: var(--muted); }
html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .nav-item.active,
html[data-theme="future"] .nav-item:hover, html[data-theme="future"] .nav-item.active { background: var(--theme-hover); color: #fff; }
html[data-theme="dark"] .primary-button, html[data-theme="future"] .primary-button { color: #0d1624; }
html[data-theme="dark"] .login-progress, html[data-theme="future"] .login-progress,
html[data-theme="dark"] .activity-indicator, html[data-theme="future"] .activity-indicator,
html[data-theme="dark"] .settings-switches, html[data-theme="future"] .settings-switches,
html[data-theme="dark"] .action-list-item, html[data-theme="future"] .action-list-item,
html[data-theme="dark"] .presence-state, html[data-theme="future"] .presence-state { background: var(--theme-elevated); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="dark"] .calendar-day, html[data-theme="future"] .calendar-day { background: var(--theme-surface); color: var(--ink); }
html[data-theme="dark"] .calendar-day.outside, html[data-theme="future"] .calendar-day.outside { background: var(--theme-field); color: var(--muted); }
html[data-theme="dark"] .calendar-event, html[data-theme="future"] .calendar-event { background: #293b42; color: #dffaff; }
html[data-theme="dark"] .calendar-event.pending, html[data-theme="future"] .calendar-event.pending { background: #493824; color: #ffe3ae; }
html[data-theme="dark"] tbody tr:hover, html[data-theme="future"] tbody tr:hover { background: var(--theme-hover); }
html[data-theme="dark"] .sp-table tbody th, html[data-theme="future"] .sp-table tbody th { background: var(--theme-elevated); color: var(--ink); }
html[data-theme="dark"] .sp-cell.yes, html[data-theme="future"] .sp-cell.yes { background: #204333; color: #a7efca; }
html[data-theme="dark"] .sp-cell.no, html[data-theme="future"] .sp-cell.no { background: #492831; color: #ffc3c5; }
html[data-theme="dark"] .sp-cell.maybe, html[data-theme="future"] .sp-cell.maybe { background: #4d3a23; color: #ffe0a1; }
html[data-theme="dark"] .sp-tabs button.selected, html[data-theme="future"] .sp-tabs button.selected { background: var(--theme-hover); color: var(--ink); border-color: var(--yellow); }
html[data-theme="dark"] .availability-group.available, html[data-theme="future"] .availability-group.available,
html[data-theme="dark"] .availability-group.unavailable, html[data-theme="future"] .availability-group.unavailable { background: var(--theme-surface); border-color: var(--theme-border); }
html[data-theme="dark"] .toast, html[data-theme="future"] .toast { background: var(--theme-surface); color: var(--ink); }
html[data-theme="dark"] .data-sync-status, html[data-theme="future"] .data-sync-status { background: #3a3422; color: #ffe9a2; border-color: #8d7838; }
html[data-theme="dark"] .data-sync-status.failed, html[data-theme="future"] .data-sync-status.failed { background: #3b242b; color: #ffd2d3; border-color: #bd626b; }
html[data-theme="dark"] .theme-open-button { background: #242b38; border-color: #586274; }
html[data-theme="dark"] :is(.user-card,.user-card-readonly,.user-grid-empty,.nav-section,.audit-event,.pending-review-choice,.substitution-card,.absence-substitution,.automatic-attendance-setting,.team-checkbox-list,.team-checkbox-option,.mobile-stale-notice:not(.hidden),.sp-holiday-card,.sp-rule-badge,.sp-rules span,.sp-service-toggle,.sp-choices button),
html[data-theme="future"] :is(.user-card,.user-card-readonly,.user-grid-empty,.nav-section,.audit-event,.pending-review-choice,.substitution-card,.absence-substitution,.automatic-attendance-setting,.team-checkbox-list,.team-checkbox-option,.mobile-stale-notice:not(.hidden),.sp-holiday-card,.sp-rule-badge,.sp-rules span,.sp-service-toggle,.sp-choices button) {
  background: var(--theme-elevated); border-color: var(--theme-border); color: var(--ink);
}
html[data-theme="dark"] :is(.team-checkbox-option:hover,.sp-choices button:hover),
html[data-theme="future"] :is(.team-checkbox-option:hover,.sp-choices button:hover) { background: var(--theme-hover); }
html[data-theme="dark"] :is(.field small,.text-button:hover,.link-button:hover),
html[data-theme="future"] :is(.field small,.text-button:hover,.link-button:hover) { color: var(--yellow); }
html[data-theme="dark"] code, html[data-theme="future"] code { background: var(--theme-elevated); color: var(--ink); }
html[data-theme="dark"] :is(.mini-button.email,.sp-tabs button,.sp-choices button.chosen),
html[data-theme="future"] :is(.mini-button.email,.sp-tabs button,.sp-choices button.chosen) { border-color: var(--theme-border); color: var(--ink); }

/* A brighter, animated option with a distinct surface and neon controls. */
html[data-theme="future"] {
  --yellow: #6af5ff;
  --black: #081222;
  --dark: #111b31;
  --ink: #edfaff;
  --muted: #acc6de;
  --line: #2a4f70;
  --soft: #152944;
  --theme-surface: #10243c;
  --theme-elevated: #19314b;
  --theme-hover: #224160;
  --theme-field: #0a1c31;
  --theme-border: #34627f;
  --shadow: 0 20px 55px rgba(0, 7, 26, .58);
}
html[data-theme="future"] body { background: radial-gradient(ellipse 85% 55% at 75% 0%, #234572 0%, transparent 65%), radial-gradient(ellipse 65% 60% at 4% 98%, #25204d 0%, transparent 65%), #081222; }
html[data-theme="future"] .topbar { background: linear-gradient(110deg, #071523 0%, #132949 62%, #1d214a 100%); border-top-color: #68f3ff; box-shadow: 0 8px 32px #39bfff19; }
html[data-theme="future"] .login-brand { background: radial-gradient(circle at 68% 64%, #1d4567, transparent 48%), linear-gradient(145deg, #071524, #151b3b); }
html[data-theme="future"] .login-brand:after { border-color: #65efff18; box-shadow: 0 0 90px #5eeaff1d; animation: aulixOrbit 13s ease-in-out infinite alternate; }
html[data-theme="future"] .login-panel { background: linear-gradient(150deg, #0b1c33, #121d39); }
html[data-theme="future"] .sidebar { background: #0c2038; }
html[data-theme="future"] .panel, html[data-theme="future"] .stat-card, html[data-theme="future"] .sp-kpis > div, html[data-theme="future"] .modal-card { box-shadow: inset 0 1px 0 #97f1ff16, 0 12px 34px #0004; }
html[data-theme="future"] .stat-card:after { background: linear-gradient(90deg, #67f3ff, #a984ff); box-shadow: 0 -2px 16px #67f3ff6b; }
html[data-theme="future"] .eyebrow { color: #89dbea; }
html[data-theme="future"] .eyebrow.yellow { color: #6af5ff; }
html[data-theme="future"] .page-heading h1 { text-shadow: 0 0 28px #52ebff45; }
html[data-theme="future"] .primary-button:not(:disabled), html[data-theme="future"] .clock-button.primary:not(:disabled) {
  position: relative; isolation: isolate; overflow: hidden;
  color: #071726; border-color: #79faff;
  background: linear-gradient(108deg, #51edfb 0%, #b2fcff 38%, #72b4ff 62%, #5df2ff 100%);
  background-size: 230% 100%;
  box-shadow: 0 0 0 1px #61ebff73, 0 0 22px #47e8ff51, inset 0 1px #ffffff99;
  animation: aulixNeonFlow 4s linear infinite, aulixNeonPulse 3s ease-in-out infinite;
}
html[data-theme="future"] .primary-button:not(:disabled)::after, html[data-theme="future"] .clock-button.primary:not(:disabled)::after {
  content: ""; position: absolute; inset: -50% -80%; z-index: 1; opacity: .24; pointer-events: none;
  background: linear-gradient(95deg, transparent 38%, #ffffff80 50%, transparent 62%);
  transform: translateX(-100%); animation: aulixInnerLight 3.5s ease-in-out infinite;
}
html[data-theme="future"] .primary-button:hover:not(:disabled), html[data-theme="future"] .clock-button.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 0 2px #b8fcff, 0 0 30px #47e8ff9e; }
html[data-theme="future"] :is(.secondary-button,.mini-button,.icon-button,.refresh-button,.theme-open-button,.topbar-shortcut,.sp-tabs button,.nav-item):hover:not(:disabled) {
  border-color: #75edff; box-shadow: 0 0 0 1px #67ecff7c, 0 0 18px #67ecff4d; transform: translateY(-2px);
}
html[data-theme="future"] :is(.secondary-button,.mini-button,.icon-button,.refresh-button,.theme-open-button,.topbar-shortcut,.nav-item,.sp-tabs button) { transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease; }
html[data-theme="future"] .appearance-option[aria-pressed="true"] { border-color: #6af5ff; box-shadow: 0 0 0 2px #6af5ff, 0 0 19px #55d4ff84; }
html[data-theme="future"] .appearance-option[data-theme-choice="future"] .future-preview i { animation: aulixPreview 2.8s ease-in-out infinite alternate; }
html[data-theme="future"] .view.active .stat-card { animation: aulixCardEnter .4s ease backwards; }
html[data-theme="future"] .view.active .stat-card:nth-child(2) { animation-delay: .06s; }
html[data-theme="future"] .view.active .stat-card:nth-child(3) { animation-delay: .12s; }
html[data-theme="future"] .view.active .stat-card:nth-child(4) { animation-delay: .18s; }

/* Office lunch rows use a light fill in the original design. In dark modes that
   fill made the inherited pale text in every attendance column illegible. */
html[data-theme="dark"] {
  --office-lunch-row: #193248;
  --office-lunch-row-hover: #24425c;
  --office-lunch-pill: #24445d;
  --office-lunch-accent: #a8deff;
}
html[data-theme="future"] {
  --office-lunch-row: #12374e;
  --office-lunch-row-hover: #1c4c67;
  --office-lunch-pill: #1b526b;
  --office-lunch-accent: #99efff;
}
html[data-theme="dark"] .office-lunch-record > td,
html[data-theme="future"] .office-lunch-record > td {
  background: var(--office-lunch-row);
  color: var(--ink);
}
html[data-theme="dark"] .office-lunch-record:hover > td,
html[data-theme="future"] .office-lunch-record:hover > td { background: var(--office-lunch-row-hover); }
html[data-theme="dark"] .office-lunch-record > td:first-child,
html[data-theme="future"] .office-lunch-record > td:first-child { box-shadow: inset 4px 0 0 var(--office-lunch-accent); }
html[data-theme="dark"] .office-lunch-record .table-subline,
html[data-theme="future"] .office-lunch-record .table-subline { color: #b4ccdf; }
html[data-theme="dark"] :is(.office-lunch-badge,.office-lunch-evidence,.action-list-item.office-lunch-action),
html[data-theme="future"] :is(.office-lunch-badge,.office-lunch-evidence,.action-list-item.office-lunch-action) {
  background: var(--office-lunch-pill);
  border-color: var(--office-lunch-accent);
  color: #eefaff;
}
html[data-theme="dark"] :is(.office-lunch-time,.office-lunch-enabled,.action-list-item.office-lunch-action span),
html[data-theme="future"] :is(.office-lunch-time,.office-lunch-enabled,.action-list-item.office-lunch-action span) { color: var(--office-lunch-accent); }
html[data-theme="dark"] .clock-button.office-lunch,
html[data-theme="future"] .clock-button.office-lunch,
html[data-theme="dark"] .office-lunch-setting,
html[data-theme="future"] .office-lunch-setting {
  background: var(--office-lunch-pill);
  border-color: var(--office-lunch-accent);
  color: #eefaff;
}
html[data-theme="dark"] .clock-button.office-lunch:hover,
html[data-theme="future"] .clock-button.office-lunch:hover { background: var(--office-lunch-row-hover); }
html[data-theme="dark"] .clock-button.office-lunch::before,
html[data-theme="future"] .clock-button.office-lunch::before { color: var(--office-lunch-accent); }
html[data-theme="dark"] .office-lunch-setting small,
html[data-theme="future"] .office-lunch-setting small { color: #c3d7e6; }

/* Liquid glass: translucent surfaces over a cool, layered backdrop. */
html[data-theme="glass"] {
  color-scheme: light;
  --yellow: #7addf5;
  --black: #18334e;
  --ink: #173148;
  --muted: #526b7d;
  --line: #b9d3e2;
  --soft: #dceef6;
  --white: #edf7fbd9;
  --theme-surface: #f5fbffe0;
  --theme-elevated: #dceef4df;
  --theme-field: #ffffffd9;
  --theme-border: #b1d4e4;
  --shadow: 0 18px 45px #234b7040;
}
html[data-theme="glass"] body {
  background: radial-gradient(ellipse at 14% 12%, #86cae8 0%, transparent 47%),
              radial-gradient(ellipse at 87% 68%, #b5c7f0 0%, transparent 52%),
              linear-gradient(125deg, #cee9f3, #d6e8f4 50%, #c1e4da);
}
html[data-theme="glass"] .topbar { background: #17334fe8; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="glass"] .login-screen { background: linear-gradient(125deg, #173b58, #9ac9df); }
html[data-theme="glass"] .login-brand { background: radial-gradient(circle at 66% 65%, #62accc, transparent 48%), #16354e; }
html[data-theme="glass"] :is(.login-panel,.sidebar,.panel,.stat-card,.modal-card,.availability-group,.sp-day,.sp-kpis > div,.sp-swap-row) {
  background: #f4fbffe0;
  border: 1px solid #ffffffc7;
  box-shadow: 0 14px 36px #234c6a29, inset 0 1px #fff;
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}
html[data-theme="glass"] .login-panel { background: #eaf7ffdb; }
html[data-theme="glass"] .sidebar { background: #f4fbffcf; }
html[data-theme="glass"] :is(.field input,.field select,.field textarea,.filters select,.sp-day input,.sp-day select,.sp-form-stack input,.sp-form-stack select,.sp-form-stack textarea,.appearance-option) {
  background: var(--theme-field); border-color: var(--theme-border); color: var(--ink);
}
html[data-theme="glass"] :is(.secondary-button,.mini-button,.clock-button) { background: #ffffffc7; border-color: var(--theme-border); color: var(--ink); }
html[data-theme="glass"] .primary-button { background: linear-gradient(115deg, #9beafa, #69b9df); color: #102e42; }
html[data-theme="glass"] .primary-button:hover { box-shadow: 0 0 0 2px #fff9, 0 9px 24px #4e9dc877; }
html[data-theme="glass"] .nav-item.active { background: #234967; color: #fff; }

/* Lighting: warm illumination, amber controls and a soft cream canvas. */
html[data-theme="lighting"] {
  color-scheme: light;
  --yellow: #ffcf78;
  --black: #38241a;
  --ink: #382820;
  --muted: #705f50;
  --line: #eadcc8;
  --soft: #fff2dc;
  --white: #fffaf0;
  --theme-surface: #fffaf0;
  --theme-elevated: #fff1d8;
  --theme-field: #fffdfa;
  --theme-border: #e6cfab;
  --shadow: 0 18px 42px #68411c25;
}
html[data-theme="lighting"] body { background: radial-gradient(circle at 79% 10%, #fff1bd, transparent 35%), linear-gradient(125deg, #fff9e9, #f6eee2); }
html[data-theme="lighting"] .topbar { background: linear-gradient(105deg, #2b1c17, #513122); border-top-color: #ffd585; }
html[data-theme="lighting"] .login-screen { background: #38221a; }
html[data-theme="lighting"] .login-brand { background: radial-gradient(circle at 70% 65%, #9a5f33, transparent 50%), #352117; }
html[data-theme="lighting"] .login-brand:after { border-color: #ffda7040; box-shadow: 0 0 90px #ffce6d77; }
html[data-theme="lighting"] :is(.login-panel,.sidebar,.panel,.stat-card,.modal-card,.availability-group,.sp-day,.sp-kpis > div,.sp-swap-row) { background: var(--theme-surface); border-color: var(--theme-border); box-shadow: 0 12px 30px #a5672720; }
html[data-theme="lighting"] :is(.field input,.field select,.field textarea,.filters select,.sp-day input,.sp-day select,.sp-form-stack input,.sp-form-stack select,.sp-form-stack textarea,.appearance-option) { background: var(--theme-field); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="lighting"] :is(.secondary-button,.mini-button,.clock-button) { background: var(--theme-elevated); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="lighting"] .primary-button { background: linear-gradient(105deg, #ffe39b, #ffc16a); color: #342116; box-shadow: 0 5px 19px #eead5a60; }
html[data-theme="lighting"] .primary-button:hover { box-shadow: 0 6px 26px #ee9c4788; }
html[data-theme="lighting"] .nav-item.active { background: #4e3224; color: #fff; }

/* Nature: green foliage, paper surfaces and earthy details. */
html[data-theme="nature"] {
  color-scheme: light;
  --yellow: #b7de97;
  --black: #173c2b;
  --ink: #243b2d;
  --muted: #5a715d;
  --line: #d4e1d0;
  --soft: #edf5e8;
  --white: #fbfdf7;
  --theme-surface: #fbfdf7;
  --theme-elevated: #e9f2e3;
  --theme-field: #fffefa;
  --theme-border: #c9daba;
  --shadow: 0 16px 40px #274b2425;
}
html[data-theme="nature"] body { background: radial-gradient(circle at 90% 4%, #d5e6bf, transparent 34%), linear-gradient(135deg, #f4f8ef, #edf4e8); }
html[data-theme="nature"] .topbar { background: linear-gradient(108deg, #143928, #28503a); border-top-color: #b7de97; }
html[data-theme="nature"] .login-screen { background: #183b29; }
html[data-theme="nature"] .login-brand { background: radial-gradient(circle at 70% 72%, #4c8357, transparent 49%), #183b29; }
html[data-theme="nature"] .login-brand:after { border-color: #badc9455; }
html[data-theme="nature"] :is(.login-panel,.sidebar,.panel,.stat-card,.modal-card,.availability-group,.sp-day,.sp-kpis > div,.sp-swap-row) { background: var(--theme-surface); border-color: var(--theme-border); box-shadow: 0 10px 25px #204e2420; }
html[data-theme="nature"] :is(.field input,.field select,.field textarea,.filters select,.sp-day input,.sp-day select,.sp-form-stack input,.sp-form-stack select,.sp-form-stack textarea,.appearance-option) { background: var(--theme-field); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="nature"] :is(.secondary-button,.mini-button,.clock-button) { background: var(--theme-elevated); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="nature"] .primary-button { background: linear-gradient(100deg, #cfe9a8, #9ccb85); color: #1b3624; }
html[data-theme="nature"] .primary-button:hover { box-shadow: 0 5px 20px #78b56677; }
html[data-theme="nature"] .nav-item.active { background: #21553c; color: #fff; }

html[data-theme="glass"] :is(.user-card,.absence-substitution,.automatic-attendance-setting,.settings-switches,.sp-holiday-card),
html[data-theme="lighting"] :is(.user-card,.absence-substitution,.automatic-attendance-setting,.settings-switches,.sp-holiday-card),
html[data-theme="nature"] :is(.user-card,.absence-substitution,.automatic-attendance-setting,.settings-switches,.sp-holiday-card) { background: var(--theme-elevated); border-color: var(--theme-border); color: var(--ink); }
html[data-theme="glass"] .absence-substitution p, html[data-theme="lighting"] .absence-substitution p, html[data-theme="nature"] .absence-substitution p { color: var(--muted); }

@keyframes aulixNeonFlow { to { background-position: 230% 0; } }
@keyframes aulixNeonPulse { 50% { box-shadow: 0 0 0 1px #61ebffb0, 0 0 30px #47e8ff7a, inset 0 1px #fff; } }
@keyframes aulixInnerLight { 45%, 100% { transform: translateX(100%); } }
@keyframes aulixPreview { to { filter: brightness(1.6); box-shadow: 0 0 14px #65efff; } }
@keyframes aulixCardEnter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes aulixOrbit { to { transform: translate(-35px, -16px) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="future"] :is(.primary-button,.clock-button.primary,.appearance-preview i,.view.active .stat-card),
  html[data-theme="future"] .login-brand:after,
  html[data-theme="future"] .primary-button::after, html[data-theme="future"] .clock-button.primary::after { animation: none !important; }
  html[data-theme="future"] :is(button,a,.view.active) { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Give the logo and all controls separate rows on narrow phones. The previous
   shared row could exceed viewport width and paint the actions over the logo. */
@media (max-width: 720px) {
  .topbar {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "actions" "shortcuts";
    gap: 7px;
  }
  .topbar > .brand-lockup { min-width: 0; justify-self: start; }
  .topbar:has(.team-view-field:not([hidden])) {
    min-height:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "actions" "team" "shortcuts";padding:8px 12px 7px;
  }
  .topbar:has(.team-view-field:not([hidden])) .topbar-actions { justify-self:stretch; }
  .team-view-field { width:100%;min-width:0; }
  .topbar-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar-actions #logoutBtn { margin-left: auto; }
  .topbar-shortcuts { width: 100%; min-width: 0; }
  .activity-indicator { top: 154px; }
}
@media (max-width: 380px) {
  .topbar .connection-badge {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .topbar .connection-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Glass surfaces stay translucent: the blue and lilac background is visible
   through panels and through interactive controls, including on Safari. */
html[data-theme="glass"] body {
  background: radial-gradient(circle at 12% 24%, #76cbef 0%, transparent 40%),
              radial-gradient(circle at 83% 52%, #9e9ae9 0%, transparent 43%),
              radial-gradient(circle at 45% 93%, #75d8bd 0%, transparent 48%), #b6d8e9;
}
html[data-theme="glass"] :is(.login-screen,.login-brand) { background: transparent; }
html[data-theme="glass"] .login-screen {
  background: radial-gradient(circle at 21% 62%, #5eafd3, transparent 49%),
              radial-gradient(circle at 88% 12%, #9bb2e7, transparent 51%), #3b789a;
}
html[data-theme="glass"] .login-brand { background: linear-gradient(110deg, #10344eb8, #164f6880); }
html[data-theme="glass"] .login-message > p:last-child, html[data-theme="glass"] .login-security { color: #e2f4fb; }
html[data-theme="glass"] .topbar { background: #17374bbb; border-top-color: #a6efff; }
html[data-theme="glass"] .modal { background: #0d365c50; }
html[data-theme="glass"] :is(.login-panel,.sidebar,.panel,.stat-card,.modal-card,.availability-group,.sp-day,.sp-kpis > div,.sp-swap-row) {
  background: #ffffff62;
  border-color: #ffffffad;
  box-shadow: inset 0 1px #fff, 0 14px 38px #2352722e;
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}
html[data-theme="glass"] .login-panel { background: #ffffff6b; }
html[data-theme="glass"] .modal-card { background: #f3fbffb8; }
html[data-theme="glass"] .sidebar { background: #ffffff77; }
html[data-theme="glass"] :is(.appearance-option,.primary-button,.secondary-button,.mini-button,.clock-button,.icon-button,.refresh-button,.theme-open-button,.topbar-shortcut,.nav-item,.sp-tabs button,.sp-choices button) {
  background: #ffffff42;
  border: 1px solid #ffffffb5;
  box-shadow: inset 0 1px #ffffffc9, 0 5px 15px #204c6524;
  color: #18374e;
  backdrop-filter: blur(12px) saturate(155%);
  -webkit-backdrop-filter: blur(12px) saturate(155%);
}
html[data-theme="glass"] :is(.primary-button,.clock-button.primary) { background: #a5eeffa1; border-color: #ffffffd9; color: #133448; }
html[data-theme="glass"] :is(.primary-button,.secondary-button,.mini-button,.clock-button,.appearance-option):hover:not(:disabled) {
  background: #ffffff80;
  box-shadow: inset 0 1px #fff, 0 8px 24px #2877a04d;
}
html[data-theme="glass"] :is(.theme-open-button,.topbar-shortcut,.icon-button,.refresh-button) { background: #ffffff31; color: #fff; }
html[data-theme="glass"] :is(.theme-open-button,.topbar-shortcut,.icon-button,.refresh-button):hover { background: #ffffff52; color: #fff; }
html[data-theme="glass"] .nav-item.active { background: #1c5162ac; color: #fff; }
html[data-theme="glass"] :is(.field input,.field select,.field textarea,.filters select,.sp-day input,.sp-day select,.sp-form-stack input,.sp-form-stack select,.sp-form-stack textarea) {
  background: #ffffff6c; border-color: #ffffffb9; color: #173148;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html[data-theme="glass"] select option { background: #eaf7fb; color: #173148; }
html[data-theme="glass"] .office-lunch-record > td { background: #d7f2ff8c; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="glass"] :is(.login-panel,.sidebar,.panel,.stat-card,.modal-card,.appearance-option,.primary-button,.secondary-button,.mini-button,.clock-button) { background: #e6f3f4dc; }
}

/* Lighting: drawn bulbs behind the content and a moving warm highlight inside
   the most important controls. Less prominent controls light up on interaction. */
html[data-theme="lighting"] body {
  background-image: url("assets/lighting-pattern.svg"), radial-gradient(circle at 78% 6%, #fff1ae, transparent 36%), linear-gradient(125deg, #fff9e9, #f6eee2);
  background-size: 300px 240px, auto, auto;
}
html[data-theme="lighting"] .login-brand {
  background-image: url("assets/lighting-pattern.svg"), radial-gradient(circle at 72% 62%, #a8612d, transparent 56%);
  background-color: #352117;
}
html[data-theme="lighting"] :is(.primary-button,.clock-button.primary,.theme-open-button) {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(112deg, #ffeaba, #ffc872 55%, #ffe9aa);
  color: #352116; border: 1px solid #ffe5a1;
  animation: aulixLampHalo 3.4s ease-in-out infinite;
}
html[data-theme="lighting"] .theme-open-button { color: #ffecbd; background: #65482bd1; }
html[data-theme="lighting"] :is(.primary-button,.clock-button.primary,.theme-open-button)::after {
  content: ""; position: absolute; inset: -65% -85%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 42%, #fffdfac2 50%, transparent 58%);
  transform: translateX(-90%); animation: aulixLampSweep 4.1s ease-in-out infinite;
}
html[data-theme="lighting"] :is(.secondary-button,.mini-button,.clock-button:not(.primary),.icon-button,.refresh-button,.topbar-shortcut):hover:not(:disabled) {
  border-color: #f3bd61; background: #fff1d2; box-shadow: 0 0 18px #f7bd62ae, inset 0 0 12px #fff9dd;
}
html[data-theme="lighting"] .topbar-shortcut:hover, html[data-theme="lighting"] .refresh-button:hover, html[data-theme="lighting"] .icon-button:hover { color: #38251b; }
html[data-theme="lighting"] .stat-card:after { background: linear-gradient(90deg, #ffc06e, #ffdf9f); box-shadow: 0 -3px 18px #ffc36c6b; }
@keyframes aulixLampHalo {
  0%,100% { box-shadow: 0 0 0 1px #ffc96d70, 0 0 12px #ffc36e57; }
  50% { box-shadow: 0 0 0 2px #ffda99bd, 0 0 28px #ffae53a6; }
}
@keyframes aulixLampSweep { 0%,18% { transform: translateX(-90%); } 56%,100% { transform: translateX(90%); } }

/* Nature: drawn branches remain visible at button edges and soft leaves
   decorate the canvas and cards. Buttons retain clear text in the center. */
html[data-theme="nature"] body {
  background-image: url("assets/nature-pattern.svg"), radial-gradient(circle at 88% 9%, #c8dea9, transparent 37%), linear-gradient(130deg, #f3f8ee, #e9f2e5);
  background-size: 300px 250px, auto, auto;
}
html[data-theme="nature"] .login-brand {
  background-image: url("assets/nature-pattern.svg"), radial-gradient(circle at 75% 66%, #4f865d, transparent 54%);
  background-color: #183b29;
}
html[data-theme="nature"] :is(.panel,.stat-card,.login-panel,.appearance-option) {
  background-image: url("assets/nature-pattern.svg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 220px auto;
}
html[data-theme="nature"] :is(.primary-button,.secondary-button,.mini-button,.clock-button,.appearance-option,.theme-open-button,.topbar-shortcut,.refresh-button,.icon-button,.sp-tabs button) {
  background-image: url("assets/nature-vine.svg");
  background-repeat: no-repeat;
  background-size: 68px 57px;
  background-position: calc(100% + 10px) center;
  border: 1px solid #8bb88c;
  transition: background-position .35s ease, box-shadow .25s ease, transform .25s ease;
}
html[data-theme="nature"] :is(.primary-button,.clock-button.primary) {
  background-image: url("assets/nature-vine.svg"), linear-gradient(105deg, #cfe9a8, #9ccb85);
  background-size: 68px 57px, auto;
  background-position: calc(100% + 10px) center, center;
}
html[data-theme="nature"] :is(.theme-open-button,.topbar-shortcut,.refresh-button,.icon-button) { background-color: #315b3d; color: #fff; border-color: #78aa7b; }
html[data-theme="nature"] :is(.primary-button,.secondary-button,.mini-button,.clock-button,.appearance-option,.theme-open-button,.topbar-shortcut,.refresh-button,.icon-button):hover:not(:disabled) {
  background-position: calc(100% + 3px) center;
  box-shadow: 0 7px 20px #51945f69;
}
html[data-theme="nature"] :is(.primary-button,.clock-button.primary):hover:not(:disabled) { background-position: calc(100% + 3px) center, center; }
html[data-theme="nature"] .stat-card:after { background: linear-gradient(90deg, #78b683, #bcd998); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="lighting"] :is(.primary-button,.clock-button.primary,.theme-open-button),
  html[data-theme="lighting"] :is(.primary-button,.clock-button.primary,.theme-open-button)::after { animation: none !important; }
  html[data-theme="nature"] :is(button,a) { transition: none !important; }
}
@media print {
  html[data-theme="dark"], html[data-theme="future"] { color-scheme: light; --ink: #202126; --muted: #666; --line: #ccc; }
  html[data-theme="dark"] body, html[data-theme="future"] body { background: #fff !important; color: #202126 !important; }
  html[data-theme="dark"] :is(.panel,.stat-card,td,th), html[data-theme="future"] :is(.panel,.stat-card,td,th) { background: #fff !important; color: #202126 !important; box-shadow: none !important; }
  .appearance-login, .theme-open-button, .appearance-modal-card { display: none !important; }
  html[data-theme="glass"] :is(.panel,.stat-card,td,th), html[data-theme="lighting"] :is(.panel,.stat-card,td,th), html[data-theme="nature"] :is(.panel,.stat-card,td,th) { background: #fff !important; color: #202126 !important; box-shadow: none !important; backdrop-filter: none !important; }
}

/* 5.2.40: two clear header rows; wrapped controls never paint over the brand. */
@media screen {
  :root { --aulix-topbar-height:124px; }
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) {
    height:auto;min-height:0;grid-template-columns:auto minmax(0,1fr) minmax(170px,230px);
    grid-template-areas:"brand actions actions" "shortcuts shortcuts shortcuts";
    grid-template-rows:auto auto;gap:9px 20px;padding:10px 24px 12px;
  }
  .topbar:has(.team-view-field:not([hidden])) {
    grid-template-areas:"brand actions actions" "shortcuts shortcuts team";
  }
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) > .brand-lockup {
    grid-area:brand;min-width:0;max-width:100%;gap:14px;justify-self:start;
  }
  .topbar .brand-lockup img { width:164px;height:46px;flex:0 0 auto; }
  .topbar .brand-lockup > span { padding-left:14px;font-size:11px; }
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) > .topbar-actions {
    grid-area:actions;width:auto;max-width:100%;min-width:0;justify-self:stretch;
    display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;
  }
  .topbar-actions > * { flex:0 0 auto;max-width:100%; }
  .topbar-actions #logoutBtn { margin-left:0; }
  .topbar .user-chip { min-width:0;max-width:230px; }
  .topbar .user-chip > span:last-child { min-width:0;max-width:174px; }
  .topbar .user-chip :is(strong,small) { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) > .topbar-shortcuts {
    grid-area:shortcuts;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
    min-width:0;width:100%;max-width:100%;overflow:visible;gap:7px;padding:0;
  }
  .topbar .topbar-shortcut { flex:0 0 auto;min-height:36px;max-width:100%; }
  .topbar .team-view-field { grid-area:team;min-width:0;width:100%;max-width:100%;margin:0; }
  .topbar .team-view-field[hidden] { display:none; }
  .topbar .team-view-field select { min-width:0;max-width:100%;min-height:38px; }
  .app-shell,body:has(.team-view-field:not([hidden])) .app-shell {
    min-height:calc(100vh - var(--aulix-topbar-height,124px));
  }
  .sidebar,body:has(.team-view-field:not([hidden])) .sidebar {
    top:var(--aulix-topbar-height,124px);height:calc(100vh - var(--aulix-topbar-height,124px));
  }
  .activity-indicator { top:calc(var(--aulix-topbar-height,124px) + 12px); }
}
@media screen and (max-width:1400px) {
  .topbar .brand-lockup > span { display:none; }
}
@media screen and (max-width:1200px) {
  .topbar .user-chip > span:last-child { display:none; }
  .topbar .user-chip { border:0;padding-left:0; }
}
@media screen and (max-width:760px) {
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) {
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "shortcuts shortcuts";
    grid-template-rows:auto;gap:9px 10px;padding:8px 12px 10px;
  }
  .topbar:has(.team-view-field:not([hidden])) { grid-template-areas:"brand actions" "team team" "shortcuts shortcuts"; }
  .topbar .brand-lockup img { width:104px;height:36px; }
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) > .topbar-actions { flex-wrap:wrap;gap:4px; }
  .topbar .user-chip { display:none; }
  .topbar :is(.theme-open-button,.icon-button,.refresh-button) { display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0; }
  .topbar :is(.theme-open-button,.refresh-button) > span:last-child { display:none; }
  .topbar .connection-badge { display:flex;flex:0 0 40px;width:40px;min-width:40px;height:40px;padding:0;justify-content:center; }
  .topbar .connection-copy { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  .topbar .topbar-shortcut { min-height:36px;padding:7px 9px; }
  .sidebar,body:has(.team-view-field:not([hidden])) .sidebar { top:auto; }
}
@media screen and (max-width:380px) {
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) {
    grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "actions" "shortcuts";
  }
  .topbar:has(.team-view-field:not([hidden])) { grid-template-areas:"brand" "actions" "team" "shortcuts"; }
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) > .topbar-actions { justify-content:flex-start;gap:8px; }
  .topbar-actions #logoutBtn { margin-left:auto; }
  .topbar :is(.theme-open-button,.icon-button,.refresh-button) { width:44px;height:44px;min-width:44px; }
  .topbar .connection-badge { flex-basis:44px;width:44px;min-width:44px;height:44px; }
}

@media screen and (max-width:850px) {
  .sidebar,body:has(.team-view-field:not([hidden])) .sidebar { top:auto;height:82px; }
}
@media screen and (max-width:560px) {
  .sidebar,body:has(.team-view-field:not([hidden])) .sidebar { height:86px; }
}

/* Daily events remain at the start of one compact, horizontally scrollable mobile shortcut row. */
@media screen and (max-width:850px) {
  :is(.topbar,.topbar:has(.team-view-field:not([hidden]))) > .topbar-shortcuts {
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-bottom:3px;
  }
  .topbar .header-today-button { order:-1;position:sticky;left:0;z-index:1;background:#222329; }
}
/* Halloween stays decorative and never captures a tap or changes account data. */
.halloween-choice{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:13px;border:1px solid var(--theme-border);border-radius:12px;color:var(--ink);background:var(--theme-elevated);font-size:12px;cursor:pointer}
.halloween-choice input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px;accent-color:#cf681d}
.halloween-choice strong,.halloween-choice small{display:block}
.halloween-choice small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.5}
.halloween-decor{display:none;position:fixed;inset:0;overflow:hidden;pointer-events:none!important;user-select:none;z-index:0}
.halloween-decor img{position:absolute;pointer-events:none!important;object-fit:contain}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) .halloween-decor{display:block}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]){--yellow:#ffad43}
html[data-halloween="on"][data-theme="light"]{--line:#e6dcd3;--soft:#fcf4e9;--theme-elevated:#fff5e8;--theme-surface:#fffdf9;--theme-border:#e6d7c7}
html[data-halloween="on"][data-theme="dark"]{--black:#18111f;--line:#4d384f;--soft:#2b2432;--theme-surface:#211b29;--theme-elevated:#2c2334;--theme-border:#503b56;--theme-hover:#34283f;--theme-field:#19131f}
html[data-halloween="on"][data-theme="light"] body{background:radial-gradient(ellipse at 0 20%,#ffdfad77,transparent 55%),radial-gradient(ellipse at 100% 90%,#dfc6e966,transparent 50%),#faf6f0}
html[data-halloween="on"][data-theme="dark"] body{background:radial-gradient(ellipse at 0 20%,#80371944,transparent 50%),radial-gradient(ellipse at 100% 85%,#62358044,transparent 50%),#120f19}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) .content{position:relative;z-index:1}
.halloween-web{width:190px;height:190px;right:0;top:140px;opacity:.45}
.halloween-spider{width:75px;height:116px;left:12px;top:180px;transform-origin:50% 0;animation:halloween-sway 9s ease-in-out infinite}
.halloween-pumpkin{width:140px;height:132px;right:14px;bottom:30px;filter:drop-shadow(0 5px 20px #ed852955)}
.halloween-bat{width:125px;height:56px;left:24%;top:130px;opacity:.4;animation:halloween-drift 12s ease-in-out infinite}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) :is(.workflow-toolbar h2,.page-heading h1,.login-card h2):after{content:"";display:inline-block;width:34px;height:32px;margin-left:10px;vertical-align:middle;background:url('assets/halloween-pumpkin.svg') center/contain no-repeat;pointer-events:none}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) .workflow-toolbar{position:relative}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) .workflow-toolbar h2{padding-right:40px}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) .workflow-toolbar:after{content:"";position:absolute;top:0;right:12px;width:42px;height:65px;background:url('assets/halloween-spider.svg') center/contain no-repeat;pointer-events:none;transform-origin:50% 0;animation:halloween-sway 9s ease-in-out infinite}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) .workflow-section>summary{padding-right:42px;background:url('assets/halloween-web.svg') right top/48px 48px no-repeat}
html[data-halloween="on"]:is([data-theme="light"],[data-theme="dark"]) :is(.light-preview,.dark-preview):after{content:"";width:22px;height:24px;background:url('assets/halloween-pumpkin.svg') center/contain no-repeat;flex:0 0 22px}
@keyframes halloween-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes halloween-drift{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(8px) rotate(3deg)}}
@media(max-width:850px){.halloween-pumpkin{width:82px;height:77px;bottom:105px;right:3px}.halloween-spider{width:48px;height:74px;left:0;top:210px}.halloween-web{width:100px;height:100px;top:170px}.halloween-bat{width:76px;height:34px;left:30%;top:190px}}
@media(prefers-reduced-motion:reduce){.halloween-decor img,html[data-halloween] .workflow-toolbar:after{animation:none!important}}
@media print{.halloween-decor,.halloween-choice,html[data-halloween] .workflow-toolbar:after{display:none!important}html[data-halloween] :is(.workflow-toolbar h2,.page-heading h1,.login-card h2):after{display:none!important}}