/* ================================================================
   DESIGN "WRAP" — pelle alternativa dell'app (switchabile).
   Attiva solo con body.design-wrap. Non tocca la logica: ridefinisce
   le variabili del tema e riveste i componenti. I controlli speciali
   (bubble slider, mood gauge, spatola) li monta js/wrap.js.
   ================================================================ */

/* ---------------- variabili: TEMA CHIARO ---------------- */
body.design-wrap {
  --wrap-flip: linear-gradient(110deg, #8a6cff, #2adfc6 34%, #ffc861 68%, #8a6cff);
  --wrap-teal: #0e7c74;
  --wrap-line: rgba(20, 22, 40, 0.12);
  --wrap-sheet: #ffffff;
  --wrap-sheet-up: #e7e8f0;
  --wrap-field: #eef0f6;

  --neo-bg: #f1f2f7;
  --neo-bg-dark: #e3e5ee;
  --neo-bg-light: #ffffff;
  --neo-shadow-dark: transparent;
  --neo-shadow-light: transparent;
  --neo-primary: var(--wrap-teal);
  --neo-primary-light: #19a89c;
  --neo-primary-glow: rgba(14, 124, 116, 0.25);
  --neo-out: none; --neo-out-sm: none; --neo-out-lg: none;
  --neo-in: none; --neo-in-sm: none; --neo-flat: none;
  --elevation-1: none; --elevation-2: none; --elevation-3: none;
  --elevation-4: none; --elevation-5: none;
  --text-primary: #1d2030;
  --text-secondary: rgba(29, 32, 48, 0.66);
  --text-tertiary: rgba(29, 32, 48, 0.42);
  --md-sys-color-primary: var(--wrap-teal);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-background: #f1f2f7;
  --md-sys-color-on-background: #1d2030;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1d2030;
  --md-sys-color-surface-variant: #e9eaf2;
  --md-sys-color-on-surface-variant: rgba(29, 32, 48, 0.66);
  --md-sys-color-outline: rgba(20, 22, 40, 0.18);
  --md-sys-color-outline-variant: rgba(20, 22, 40, 0.1);
  --md-sys-color-surface-container-low: #f6f7fb;
  --md-sys-color-surface-container: #f1f2f7;
  --md-sys-color-surface-container-high: #e9eaf2;
  --md-sys-color-surface-container-highest: #e3e5ee;
  --border-radius-small: 14px;
  --border-radius-medium: 18px;
  --border-radius-large: 24px;
  color-scheme: only light;
  background: var(--neo-bg);
  font-family: 'Space Grotesk', 'Poppins', system-ui, sans-serif;
  --body-font-family: 'Space Grotesk', 'Poppins', system-ui, sans-serif;
}

/* ---------------- variabili: TEMA SCURO (grafite WRAP) ---------------- */
body.design-wrap.dark-theme {
  --wrap-teal: #35e0c6;
  --wrap-line: rgba(255, 255, 255, 0.1);
  --wrap-sheet: #1d1f27;
  --wrap-sheet-up: #2a2d38;
  --wrap-field: #15171e;

  --neo-bg: #131419;
  --neo-bg-dark: #0e0f13;
  --neo-bg-light: #23252e;
  --neo-primary: var(--wrap-teal);
  --neo-primary-light: #6ceedd;
  --neo-primary-glow: rgba(53, 224, 198, 0.3);
  --text-primary: #f2f3f8;
  --text-secondary: rgba(242, 243, 248, 0.68);
  --text-tertiary: rgba(242, 243, 248, 0.42);
  --md-sys-color-primary: var(--wrap-teal);
  --md-sys-color-on-primary: #10231f;
  --md-sys-color-background: #131419;
  --md-sys-color-on-background: #f2f3f8;
  --md-sys-color-surface: #1d1f27;
  --md-sys-color-on-surface: #f2f3f8;
  --md-sys-color-surface-variant: #262834;
  --md-sys-color-on-surface-variant: rgba(242, 243, 248, 0.68);
  --md-sys-color-outline: rgba(255, 255, 255, 0.16);
  --md-sys-color-outline-variant: rgba(255, 255, 255, 0.09);
  --md-sys-color-surface-container-low: #181a20;
  --md-sys-color-surface-container: #1d1f27;
  --md-sys-color-surface-container-high: #23252e;
  --md-sys-color-surface-container-highest: #2a2d38;
  color-scheme: dark;
  background: linear-gradient(180deg, #16171f 0%, #131419 40%) fixed;
}

/* ---------------- scenografia (montata da wrap.js) ---------------- */
body.design-wrap .wrap-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.design-wrap header, body.design-wrap main, body.design-wrap .bottom-nav { position: relative; z-index: 1; }
body.design-wrap .wrap-roll { position: absolute; top: -120px; right: -130px; width: 380px; height: 380px;
  opacity: .35; animation: wrapHue 14s linear infinite, wrapSpin 60s linear infinite; }
body.design-wrap.dark-theme .wrap-roll { opacity: .7; }
@keyframes wrapSpin { to { transform: rotate(360deg); } }
@keyframes wrapHue { to { filter: hue-rotate(360deg); } }
body.design-wrap .wrap-pageglint { position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(0,0,0,.04) 50%, transparent 58%);
  background-size: 300% 100%; animation: wrapPan 8s ease-in-out infinite; }
body.design-wrap.dark-theme .wrap-pageglint {
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
  background-size: 300% 100%; }
@keyframes wrapPan { 0% { background-position: 120% 0; } 55%, 100% { background-position: -60% 0; } }
body.design-wrap .wrap-scrap { position: absolute; width: 46px; height: 30px; opacity: .25; filter: blur(.5px);
  background: var(--wrap-flip); background-size: 300% 100%;
  clip-path: polygon(8% 0, 100% 12%, 88% 100%, 0 84%);
  animation: wrapFloat 16s ease-in-out infinite alternate, wrapShift 7s linear infinite; }
@keyframes wrapFloat { to { transform: translate(26px, -50px) rotate(38deg); } }
@keyframes wrapShift { to { background-position: 300% 0; } }

/* ---------------- header ---------------- */
body.design-wrap header { background: color-mix(in srgb, var(--wrap-sheet) 86%, transparent);
  border-bottom: 1px solid var(--wrap-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; }
body.design-wrap .theme-toggle-btn { width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--wrap-line); background: var(--wrap-sheet); color: var(--wrap-teal);
  box-shadow: none; }
body.design-wrap .app-version { border: 1px solid var(--wrap-line); border-radius: 999px;
  padding: 4px 11px; background: none; color: var(--text-secondary); box-shadow: none; }

/* ---------------- fogli (card) con angolo piegato ---------------- */
body.design-wrap .card { position: relative; background: var(--wrap-sheet);
  border: 1px solid var(--wrap-line); border-radius: 24px; box-shadow: none; overflow: visible; }
body.design-wrap .card::before { content: ""; position: absolute; top: 0; right: 0;
  width: 28px; height: 28px; background: var(--neo-bg); border-radius: 0 24px 0 12px;
  pointer-events: none; z-index: 2; }
body.design-wrap .card::after { content: ""; position: absolute; top: 0; right: 0;
  width: 28px; height: 28px; pointer-events: none; z-index: 2;
  background: linear-gradient(225deg, transparent 48%, var(--wrap-sheet-up) 50%);
  border-radius: 0 24px 0 12px; box-shadow: -2px 2px 6px rgba(0,0,0,.18); }
body.design-wrap .card h2 { letter-spacing: -0.01em; }

/* ---------------- campi ---------------- */
body.design-wrap .form-control, body.design-wrap .settings-input,
body.design-wrap select, body.design-wrap textarea {
  background: var(--wrap-field); border: 1px solid var(--wrap-line);
  border-radius: 14px; box-shadow: none; color: var(--text-primary);
  transition: border-color .2s, box-shadow .25s; }
body.design-wrap .form-control:focus, body.design-wrap .settings-input:focus,
body.design-wrap select:focus, body.design-wrap textarea:focus {
  border-color: var(--wrap-teal); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrap-teal) 22%, transparent); }

/* ---------------- bottoni: base + glint ---------------- */
body.design-wrap button { position: relative; overflow: hidden; }
body.design-wrap .wgl { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%);
  transform: translateX(-130%); animation: wrapGlide .5s ease-out forwards; }
@keyframes wrapGlide { to { transform: translateX(130%); } }
body.design-wrap #submitBtn, body.design-wrap #saveFerieMalattie,
body.design-wrap #saveRatesBtn, body.design-wrap #saveUserName {
  background: var(--wrap-flip); background-size: 300% 100%;
  animation: wrapShift 6s linear infinite;
  color: #15171e; border: none; border-radius: 16px; font-weight: 700; box-shadow: none;
  transition: transform .15s cubic-bezier(0.22, 1, 0.36, 1); }
body.design-wrap #submitBtn:active, body.design-wrap #saveFerieMalattie:active,
body.design-wrap #saveRatesBtn:active, body.design-wrap #saveUserName:active { transform: scale(.95); }
body.design-wrap .export-btn, body.design-wrap .action-btn,
body.design-wrap #exportData, body.design-wrap #importData, body.design-wrap #forceUpdate {
  border: 1px solid var(--wrap-line); background: var(--wrap-field);
  color: var(--text-primary); border-radius: 14px; box-shadow: none;
  transition: transform .15s cubic-bezier(0.22, 1, 0.36, 1), border-color .2s; }
body.design-wrap .export-btn:active, body.design-wrap .action-btn:active { transform: scale(.95); border-color: var(--wrap-teal); }

/* ---------------- dock di navigazione ---------------- */
body.design-wrap .bottom-nav { left: 50%; transform: translateX(-50%);
  bottom: calc(8px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 14px));
  background: color-mix(in srgb, var(--wrap-sheet) 92%, transparent);
  border: 1px solid var(--wrap-line); border-radius: 22px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 6px 4px; }
body.design-wrap .nav-item { color: var(--text-tertiary); border-radius: 14px;
  transition: color .3s, transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
body.design-wrap .nav-item:active { transform: scale(.9); }
body.design-wrap .nav-item.active { color: var(--text-primary); background: none; box-shadow: none; }
body.design-wrap .nav-item.active::after { content: ""; display: block; width: 14px; height: 3px;
  margin: 2px auto 0; border-radius: 2px; background: var(--wrap-flip);
  background-size: 300% 100%; animation: wrapShift 5s linear infinite; }

/* ---------------- trasferta ---------------- */
body.design-wrap .trasferta-button { background: var(--wrap-field);
  border: 1px solid var(--wrap-line); border-radius: 14px; box-shadow: none;
  transition: border-color .3s; }
body.design-wrap .trasferta-button[aria-checked="true"] { border-color: var(--wrap-teal); }
body.design-wrap .trasferta-button .switch { background: var(--wrap-sheet-up); box-shadow: none; }
body.design-wrap .trasferta-button[aria-checked="true"] .switch { background: var(--wrap-teal); }

/* ---------------- interruttori impostazioni ---------------- */
body.design-wrap .toggle-slider { background: var(--wrap-sheet-up); box-shadow: none; }
body.design-wrap .toggle-switch input:checked + .toggle-slider { background: var(--wrap-teal); }

/* ---------------- modale (Dettagli Giorno e simili) ---------------- */
body.design-wrap .modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(8, 9, 14, 0.55); }
body.design-wrap .modal-content { position: relative; background: var(--wrap-sheet);
  border: 1px solid var(--wrap-line); border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
body.design-wrap .modal-content::before { content: ""; position: absolute; top: 0; right: 0;
  width: 28px; height: 28px; background: linear-gradient(225deg, transparent 48%, var(--wrap-sheet-up) 50%);
  border-radius: 0 24px 0 12px; pointer-events: none; }
body.design-wrap .close-modal { border-radius: 50%; border: 1px solid var(--wrap-line);
  background: var(--wrap-field); box-shadow: none; }
body.design-wrap .day-summary-item { background: var(--wrap-field);
  border: 1px solid var(--wrap-line); border-radius: 14px; box-shadow: none; }
body.design-wrap .day-summary-value { color: var(--wrap-teal); font-weight: 700; }

/* ---------------- flatpickr (mini calendario) ---------------- */
body.design-wrap .flatpickr-calendar { background: var(--wrap-sheet);
  border: 1px solid var(--wrap-line); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); color: var(--text-primary);
  font-family: 'Space Grotesk', sans-serif; }
body.design-wrap .flatpickr-calendar.arrowTop::before,
body.design-wrap .flatpickr-calendar.arrowTop::after,
body.design-wrap .flatpickr-calendar.arrowBottom::before,
body.design-wrap .flatpickr-calendar.arrowBottom::after { display: none; }
body.design-wrap .flatpickr-months .flatpickr-month,
body.design-wrap .flatpickr-current-month,
body.design-wrap .flatpickr-monthDropdown-months,
body.design-wrap .flatpickr-weekday { color: var(--text-primary) !important; fill: var(--text-primary); background: transparent; }
body.design-wrap .flatpickr-months .flatpickr-prev-month,
body.design-wrap .flatpickr-months .flatpickr-next-month { color: var(--wrap-teal); fill: var(--wrap-teal); }
body.design-wrap .flatpickr-day { color: var(--text-primary); border-radius: 12px; border: none; }
body.design-wrap .flatpickr-day.prevMonthDay,
body.design-wrap .flatpickr-day.nextMonthDay { color: var(--text-tertiary); }
body.design-wrap .flatpickr-day:hover { background: var(--wrap-field); }
body.design-wrap .flatpickr-day.today { border: 1px solid var(--wrap-teal); }
body.design-wrap .flatpickr-day.selected { background: var(--wrap-flip); background-size: 300% 100%;
  animation: wrapShift 5s linear infinite; color: #15171e; font-weight: 700; border: none; }
body.design-wrap .flatpickr-monthDropdown-months option { color: #1d2030; }
body.design-wrap .numInputWrapper span { border-color: var(--wrap-line); }

/* ---------------- bubble slider (montato da wrap.js) ---------------- */
/* inizio/fine erano affiancati: in WRAP ogni slider prende tutta la larghezza */
body.design-wrap .time-row { display: block; }
body.design-wrap .time-row .form-group { width: 100%; }
body.design-wrap .wrap-bslider { margin: 2px 0 6px; }
body.design-wrap .wrap-bslider svg { display: block; width: 100%; height: auto; overflow: hidden;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(110, 90, 220, 0.35)); }
body.design-wrap .wrap-bslider .sdot { cursor: pointer; }
body.design-wrap .wrap-bslider .hitArea { cursor: grab; }
body.design-wrap .wrap-bslider .slbl { fill: #fff; font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 700; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; }
body.design-wrap .wrap-bslider .lblContainer { pointer-events: none; }
body.design-wrap .wrap-hide { display: none !important; }

/* ---------------- mood gauge ---------------- */
body.design-wrap .wrap-moodgauge { pointer-events: none; margin-top: 10px; }
body.design-wrap .wrap-moodgauge svg { display: block; width: 100%; height: auto; overflow: hidden; }
body.design-wrap .wrap-moodgauge .sface { font-size: 30px; text-anchor: middle; pointer-events: none; }
body.design-wrap .wrap-moodgauge .mbubble path { fill: var(--wrap-sheet-up);
  stroke: var(--wrap-teal); stroke-width: 3; }
body.design-wrap .wrap-moodgauge .mbubble text { fill: var(--text-primary);
  font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 700; text-anchor: middle; }

/* ---------------- spatola al salvataggio ---------------- */
body.design-wrap .wrap-apply { position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  pointer-events: none; z-index: 5; }
body.design-wrap .wrap-apply .film { position: absolute; inset: 0; opacity: .8;
  background: var(--wrap-flip); background-size: 300% 100%;
  animation: wrapShift 6s linear infinite, wrapSpread 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    wrapCoverFade .5s 1.5s forwards;
  clip-path: inset(0 100% 0 0); }
@keyframes wrapSpread { to { clip-path: inset(0 0 0 0); } }
@keyframes wrapCoverFade { to { opacity: 0; } }
body.design-wrap .wrap-apply .blade { position: absolute; top: -6px; bottom: -6px; left: -8%;
  width: 16px; border-radius: 8px;
  background: linear-gradient(180deg, #f2f3f8, #9a9dad);
  box-shadow: 0 0 18px rgba(255,255,255,.5);
  animation: wrapSwipe 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards, wrapBladeOut .3s 1.2s forwards; }
@keyframes wrapSwipe { to { left: 104%; } }
@keyframes wrapBladeOut { to { opacity: 0; } }
body.design-wrap .wrap-apply .stamp { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 700; color: var(--text-primary); opacity: 0;
  animation: wrapStamp 1s 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes wrapStamp { 0% { opacity: 0; transform: scale(.7); }
  30% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; } }

/* ---------------- switch design in Impostazioni ---------------- */
.design-switch { display: flex; gap: 8px; }
.design-switch button { padding: 10px 16px; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 600; }
.design-switch button.on { outline: 2px solid var(--md-sys-color-primary); }
body.design-wrap .design-switch button { border: 1px solid var(--wrap-line);
  background: var(--wrap-field); color: var(--text-primary); box-shadow: none; }
body.design-wrap .design-switch button.on { outline: none; border-color: var(--wrap-teal);
  background: var(--wrap-flip); background-size: 300% 100%;
  animation: wrapShift 6s linear infinite; color: #15171e; }

/* ================================================================
   FEDELTÀ ALLA DEMO — spegne il vecchio mondo (aurora viola,
   particelle) e porta i componenti al look del concept 4.
   ================================================================ */

/* l'override aurora NON esiste in WRAP */
body.design-wrap { background: var(--neo-bg) !important; }
body.design-wrap.dark-theme {
  background: linear-gradient(180deg, #16171f 0%, #131419 40%) fixed !important; }
body.design-wrap .card { background: var(--wrap-sheet) !important; }
body.design-wrap.dark-theme .card { box-shadow: none !important; }

/* hero del giorno in home (nodi spostati da wrap.js: listener intatti) */
body.design-wrap .wrap-hero { padding: 16px 6px 6px; }
body.design-wrap .wrap-kicker { color: var(--wrap-teal); font-weight: 600; font-size: .85rem; }
body.design-wrap .wrap-hero #dayNameIndicator {
  font-size: clamp(2.4rem, 10vw, 3rem) !important; font-weight: 700 !important;
  letter-spacing: -0.03em; line-height: 1; color: var(--text-primary) !important;
  margin: 2px 0 12px !important; background: none !important; }
body.design-wrap .wrap-hero #dateIndicator {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--wrap-line) !important; background: var(--wrap-sheet) !important;
  border-radius: 999px !important; padding: 13px 10px !important;
  color: var(--wrap-teal) !important; font-weight: 600; box-shadow: none !important; }

/* etichette: niente urlato */
body.design-wrap label, body.design-wrap .setting-label {
  text-transform: none !important; letter-spacing: .02em !important;
  font-weight: 600 !important; font-size: .82rem !important;
  color: var(--text-secondary) !important; }

/* ORE TOTALI come nella demo: label a sinistra, numero grande a destra */
body.design-wrap .form-group:has(#totalHours) { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.design-wrap .form-group:has(#totalHours) .wrap-moodgauge { flex: 1 1 100%; width: 100%; }
body.design-wrap .form-group:has(#totalHours) label { margin: 0; }
body.design-wrap #totalHours { background: none !important; border: none !important;
  box-shadow: none !important; font-size: 2.3rem !important; font-weight: 700 !important;
  text-align: right; color: var(--text-primary) !important; padding: 0 !important;
  width: auto; max-width: 50%; font-family: 'Space Grotesk', sans-serif !important; }

/* bottoni primari: gradiente flip, sempre (batte l'override aurora) */
body.design-wrap #submitBtn, body.design-wrap #saveFerieMalattie,
body.design-wrap #saveRatesBtn, body.design-wrap #saveUserName {
  background: var(--wrap-flip) !important; background-size: 300% 100% !important;
  animation: wrapShift 6s linear infinite !important;
  color: #15171e !important; border: none !important; border-radius: 16px !important;
  font-weight: 700 !important; box-shadow: none !important; }
body.design-wrap #submitBtn .material-symbols-outlined,
body.design-wrap #saveFerieMalattie .material-symbols-outlined,
body.design-wrap #saveUserName .material-symbols-outlined { color: #15171e !important; }

/* Genera Excel verde come nella demo */
body.design-wrap .excel-btn, body.design-wrap #exportMonthlyExcelTemplate {
  background: linear-gradient(180deg, #3fdd90, #1fae67) !important;
  color: #0c2417 !important; border: none !important; border-radius: 14px !important;
  font-weight: 700 !important; box-shadow: none !important; }
body.design-wrap .excel-btn .material-symbols-outlined { color: #0c2417 !important; }

/* valori statistiche: teal WRAP, mai viola aurora */
body.design-wrap .monthly-stat-value { color: var(--wrap-teal) !important;
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; }
body.design-wrap .monthly-stat-label { color: var(--text-tertiary) !important; }
body.design-wrap [class*="stat-item"], body.design-wrap [class*="summary-item"] {
  background: var(--wrap-field) !important; border: 1px solid var(--wrap-line) !important;
  border-radius: 14px !important; box-shadow: none !important; }

/* calendario: celle foglio, selezione flip */
body.design-wrap .calendar-day { background: var(--wrap-field) !important;
  border: 1px solid var(--wrap-line) !important; border-radius: 12px !important;
  box-shadow: none !important; }
body.design-wrap .calendar-day.today, body.design-wrap .calendar-day.selected {
  border-color: var(--wrap-teal) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wrap-teal) 30%, transparent) !important; }

/* ultime entrate / liste generate dal JS */
body.design-wrap #timeEntries > div, body.design-wrap #ferieMalattieEntries > div {
  background: var(--wrap-field) !important; border: 1px solid var(--wrap-line) !important;
  border-radius: 14px !important; box-shadow: none !important; }

/* impostazioni: righe pulite, non blocchi giganti */
body.design-wrap .setting-item { background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--wrap-line) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 14px 2px !important; }
body.design-wrap .setting-item:last-child { border-bottom: none !important; }
body.design-wrap .settings-container { background: transparent !important;
  border: none !important; box-shadow: none !important; }

/* contenitori interni scuri dell'aurora dentro le card */
body.design-wrap .form-container, body.design-wrap .ferie-malattie-form,
body.design-wrap .cash-settings-container, body.design-wrap .cash-results-container {
  background: transparent !important; border: none !important; box-shadow: none !important; }

/* ---------------- riduzione movimento ---------------- */
@media (prefers-reduced-motion: reduce) {
  body.design-wrap *, body.design-wrap *::before, body.design-wrap *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}