/* Sous le Sapin 3.0.2: same CSS and precedence, grouped to reduce round trips. */

/* --- reset-event.css --- */
.slp-delete-event-card > p { margin: 8px 0 18px; line-height: 1.8; }
.slp-delete-event-card .button-danger { max-width: 100%; }
.slp-delete-dialog { z-index: 1100; max-height: min(90vh, 800px); overflow-y: auto; }
.slp-delete-dialog .slp-delete-confirm-field { margin: 18px 0 6px; }
.slp-delete-dialog .slp-delete-confirm-field input { letter-spacing: .075em; }
.slp-delete-dialog .slp-delete-error:not(:empty) { margin-top: 8px; }
.slp-delete-dialog .icon-button { font-size: 26px; }
@media (max-width: 700px) {
  .slp-delete-event-card .button-danger { width: 100%; justify-content: center; }
  .slp-delete-dialog .button-danger { max-width: 100%; white-space: normal; }
}

/* --- family-annual.css --- */
/* Sous le Sapin v1.4 — carnet permanent. Independently namespaced CSS. */
#slp-family-root[hidden] { display: none !important; }
body.slp-family-visible #root { visibility: hidden; }
body.slp-family-visible { overflow: hidden; }
#slp-family-root { position: fixed; inset: 0; z-index: 10040; overflow: auto; color: #183b32; background: radial-gradient(ellipse 780px 450px at 85% 0%, #dbe9d8 0%, transparent 75%), radial-gradient(ellipse 650px 580px at -10% 90%, #fbf0df 0%, transparent 73%), #f8f5ef; font: 400 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#slp-family-root *, #slp-family-root *::before, #slp-family-root *::after { box-sizing: border-box; }
#slp-family-root button, #slp-family-root input, #slp-family-root textarea { font: inherit; }
#slp-family-root button { cursor: pointer; }
#slp-family-root button:disabled { opacity: .55; cursor: not-allowed; }
#slp-family-root button:focus-visible, #slp-family-root input:focus-visible, #slp-family-root textarea:focus-visible { outline: 3px solid #d8b36c; outline-offset: 3px; }
.slp-family-page { min-height: 100%; padding: 28px max(18px, env(safe-area-inset-left)) calc(35px + env(safe-area-inset-bottom)); }
.slp-family-wrap { max-width: 1120px; margin-inline: auto; }
.slp-family-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 30px; }
.slp-family-head { display: flex; align-items: center; gap: 18px; }
.slp-family-logo { flex: none; display: grid; place-items: center; width: 66px; height: 66px; background: #153f30; border-radius: 20px; box-shadow: 0 10px 25px #133c3020; font-size: 34px; }
.slp-family-eyebrow { display: block; color: #527463; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
#slp-family-root h1 { font-family: Georgia, serif; font-size: clamp(26px,4vw,38px); font-weight: 600; line-height: 1.15; margin: 5px 0 8px; color: #194531; }
#slp-family-root h2 { font-family: Georgia, serif; font-size: clamp(21px,2.3vw,26px); line-height: 1.2; margin: 0; color: #204636; }
#slp-family-root h3 { font-size: 16px; margin: 0; }
#slp-family-root p { margin: 0; }
.slp-family-head p { color: #63756a; max-width: 700px; }
.slp-family-icon-button { flex: none; display: grid; place-items: center; width: 42px; height: 42px; background: #fff9; color: #163f2e; font-size: 27px !important; border: 1px solid #d5dfd4; border-radius: 14px; }
.slp-family-card { border: 1px solid #dce2d8; background: #ffffffcf; border-radius: 26px; padding: 25px; box-shadow: 0 12px 50px #17412c0c; backdrop-filter: blur(16px); min-width: 0; }
.slp-family-card + .slp-family-card { margin-top: 16px; }
.slp-family-two-col { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 18px; align-items: start; }
.slp-family-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 27px 30px; color: #fff; background: radial-gradient(ellipse at 94% 10%, #315d47,transparent 70%), #153e30; border: 1px solid #2f5e47; border-radius: 27px; margin: 0 0 20px; }
.slp-family-welcome .slp-family-eyebrow { color: #b7d3bd; }
.slp-family-welcome h2 { color: #fff !important; margin: 7px 0 8px !important; }
.slp-family-welcome p { max-width: 600px; color: #e2ebe4; }
.slp-family-button { appearance: none; border: 1px solid #21503a; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #215941; color: white; border-radius: 14px; min-height: 43px; padding: 10px 17px; font-weight: 680 !important; text-align: center; text-decoration: none; white-space: normal; }
.slp-family-button:hover:not(:disabled) { filter: brightness(1.06); }
.slp-family-button.secondary { color: #214b38; background: #eef4eb; border-color: #c9d9c9; }
.slp-family-button.gold { color: #263c2c; background: #efc77a; border-color: #e3b45c; }
.slp-family-button.danger { color: #fff; background: #a64343; border-color: #963a3a; }
.slp-family-button.small { min-height: 34px; padding: 6px 12px; border-radius: 11px; font-size: 13px; }
.slp-family-heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; margin-bottom: 16px; }
.slp-family-heading.more { margin-top: 23px; }
.slp-family-tag { display: inline-block; padding: 3px 9px; color: #2a6550; background: #e5f0e8; border: 1px solid #d7e8db; border-radius: 999px; font-size: 11px; font-weight: 750; vertical-align: middle; white-space: nowrap; }
.slp-family-members { display: grid; gap: 9px; }
.slp-family-member { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #e1e8df; border-radius: 15px; background: #fafcf8; }
.slp-family-member.always { margin-bottom: 13px; }
.slp-family-avatar { flex: none; display: grid; place-items: center; height: 39px; width: 39px; border-radius: 13px; background: #e5ede3; color: #2b5c44; font-weight: 800; font-size: 12px; }
.slp-family-member-info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.slp-family-member-info strong { font-size: 14px; font-weight: 740; color: #193f30; overflow-wrap: anywhere; }
.slp-family-member-info span { display: block; color: #6a7b6e; overflow-wrap: anywhere; font-size: 13px; }
.slp-family-text-btn { border: 0; background: none; color: #2b6f52; font-size: 13px !important; font-weight: 700 !important; padding: 6px; text-decoration: underline; text-underline-offset: 3px; }
.slp-family-events { display: grid; gap: 11px; }
.slp-family-event { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px; border-radius: 15px; background: #f8faf6; border: 1px solid #e2e9df; }
.slp-family-event > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.slp-family-event strong { overflow-wrap: anywhere; }
.slp-family-event-year { color: #547d5c; font-size: 12px; font-weight: 800; }
.slp-family-event small { color: #6c796c; }
.slp-family-empty { text-align: center; padding: 25px 8px; color: #69796d; }
.slp-family-empty > span { font-size: 35px; }
.slp-family-empty h3 { color: #315a44; margin: 7px 0 !important; }
.slp-family-button-list { display: grid; gap: 10px; margin-top: 20px; }
.slp-family-form { display: grid; gap: 16px; }
.slp-family-form label:not(.slp-family-checkbox):not(.slp-family-picker-row) { display: grid; gap: 7px; color: #28513c; font-size: 13px; font-weight: 700; }
.slp-family-form input:not([type=checkbox]), .slp-family-form textarea { width: 100%; min-width: 0; border: 1px solid #ccd8cb; border-radius: 12px; padding: 11px 13px; background: #fff; color: #183c2e; font-size: 15px; font-weight: 450; }
.slp-family-form textarea { resize: vertical; }
.slp-family-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.slp-family-checkbox { display: flex; align-items: flex-start; gap: 11px; color: #315640; font-size: 14px; font-weight: 550; line-height: 1.5; }
.slp-family-checkbox input, .slp-family-picker-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: #246248; flex: none; }
.slp-family-checkbox small { display: block; font-size: 12px; color: #6a7e70; margin-top: 3px; font-weight: 450; }
.slp-family-help, .slp-family-muted { color: #647969; font-size: 13px; line-height: 1.6; }
.slp-family-help { margin-top: 10px !important; }
.slp-family-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.slp-family-select-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: #647868; font-size: 13px; margin-bottom: 10px; }
.slp-family-select-top div { display: flex; gap: 9px; }
.slp-family-member-picker { max-height: 335px; overflow: auto; display: grid; gap: 6px; }
.slp-family-picker-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #fafcf9; border: 1px solid #e0e8df; border-radius: 12px; cursor: pointer; }
.slp-family-picker-row:hover { background: #eff5ed; }
.slp-family-new-person { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.15fr) auto; gap: 7px; align-items: center; margin-top: 8px; }
.slp-family-new-person button { border: 1px solid #d2dacf; border-radius: 10px; background: #f4f6f2; color: #af4141; height: 40px; width: 38px; font-size: 22px !important; }
.slp-family-rule { height: 1px; width: 100%; border: 0; background: #e0e8e0; margin: 4px 0; }
.slp-family-notice { background: #edf6ef; color: #285840; border: 1px solid #d1e6d6; padding: 12px 17px; border-radius: 13px; margin: 16px 0; overflow-wrap: anywhere; }
.slp-family-notice.error { background: #fff0ee; color: #9d3535; border-color: #e7bdb7; }
.slp-family-success { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 38px 25px; }
.slp-family-check { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 100%; background: #ddf1e0; color: #1c6a44; font-size: 32px; }
.slp-family-success .slp-family-actions { justify-content: center; }
#slp-family-root footer { text-align: center; color: #809184; font-size: 12px; padding: 35px 0 10px; }
/* Existing React site buttons inserted by the companion script. */
.site-header .slp-family-entry { white-space: nowrap; background: #edf3ea; color: #215139; border: 1px solid #c9dbc7; padding-inline: 14px; }
.welcome-hero .slp-family-home { white-space: normal; }
.settings-grid .slp-family-settings { margin-bottom: 12px; }
@media (max-width: 810px) { .slp-family-two-col { grid-template-columns: 1fr; } .slp-family-page { padding-top: 20px; } .slp-family-welcome { padding: 22px; } .slp-family-top { margin-bottom: 20px; } }
@media (max-width: 520px) { .slp-family-form-two { grid-template-columns: 1fr; } .slp-family-card { padding: 17px; border-radius: 18px; } .slp-family-page { padding-inline: 13px; } .slp-family-head { gap: 10px; } .slp-family-logo { width: 46px; height: 46px; border-radius: 13px; font-size: 25px; } .slp-family-eyebrow { font-size: 9px; } .slp-family-head p { font-size: 13px; } .slp-family-icon-button { width: 36px; height: 36px; } .slp-family-button { flex: 1 1 auto; } .slp-family-welcome .slp-family-button { width: 100%; } .slp-family-new-person { grid-template-columns: 1fr 1fr auto; } .slp-family-new-person input { padding: 9px !important; } .site-header .slp-family-entry { font-size: 11px !important; padding: 6px 8px !important; min-height: 32px; } }
.slp-family-member-info .slp-family-tag { display: inline-block; width: auto; margin-left: 5px; color: #2a6550; }

/* --- liquid-glass-v1.5.css --- */
/* Sous le Sapin 1.5 — Liquid Glass / mode clair et sombre.
   Overrides only the visual layer. No private information or API changes.
   The root theme attribute is applied before first paint by index.html. */
:root {
  --slp-text: #183d34;
  --slp-text-soft: #4c685b;
  --slp-subtle: #61776a;
  --slp-hairline: rgba(255, 255, 255, .79);
  --slp-glass: linear-gradient(120deg, rgba(255,255,255,.59), rgba(247,255,247,.32) 45%, rgba(216,239,222,.29) 100%);
  --slp-glass-inset: inset 0 1.4px rgba(255,255,255,.95), inset 1px 0 rgba(255,255,255,.42), inset 0 -1px rgba(65,114,83,.10);
  --slp-glass-shadow: 0 16px 44px rgba(31,65,49,.12), 0 4px 16px rgba(26,66,44,.055);
  --slp-input: rgba(255,255,255,.55);
  --slp-inner: rgba(255,255,255,.48);
  --slp-accent: #2b674e;
  color-scheme: light;
}
html[data-slp-theme="dark"] {
  --ink: #f0f7ed;
  --muted: #b3c9bb;
  --pine: #b4dfc2;
  --pine-deep: #102a23;
  --line: rgba(194,244,221,.19);
  --shadow: 0 14px 36px rgba(0,0,0,.31);
  --slp-text: #eef9f1;
  --slp-text-soft: #bcd0c4;
  --slp-subtle: #adc5b8;
  --slp-hairline: rgba(205,249,225,.23);
  --slp-glass: linear-gradient(124deg, rgba(39,81,70,.76), rgba(20,52,46,.68) 48%, rgba(15,36,35,.68) 100%);
  --slp-glass-inset: inset 0 1px rgba(235,255,247,.32), inset 1px 0 rgba(201,255,230,.09), inset 0 -1px rgba(0,10,8,.29);
  --slp-glass-shadow: 0 20px 55px rgba(0,9,8,.40), 0 5px 18px rgba(0,12,10,.2);
  --slp-input: rgba(8,31,28,.52);
  --slp-inner: rgba(149,211,175,.10);
  --slp-accent: #b4edcf;
  color-scheme: dark;
}
body {
  background:
    radial-gradient(ellipse 53vw 53vh at 95% 5%, rgba(145,194,162,.49), transparent 78%),
    radial-gradient(ellipse 48vw 58vh at 3% 90%, rgba(231,187,112,.28), transparent 78%),
    linear-gradient(135deg, #edf4eb 0%, #e3ede3 49%, #f6f0e5 100%);
  color: var(--slp-text);
  transition: background-color .25s ease, color .25s ease;
}
.app-shell { background: transparent; }
/* Luminous rims, refraction, and volume are intentionally visible on real cards. */
.glass,
#slp-family-root .slp-family-card {
  background: var(--slp-glass);
  border: 1px solid var(--slp-hairline);
  border-top-color: rgba(255,255,255,.95);
  box-shadow: var(--slp-glass-shadow), var(--slp-glass-inset);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
}
.glass { position: relative; }
/* Do not introduce pseudo-elements on data tables / interactive cards: no hit-target overlay. */
.site-header {
  background: linear-gradient(125deg,rgba(255,255,255,.57),rgba(229,245,231,.35),rgba(255,255,249,.26));
  border-bottom: 1px solid rgba(255,255,255,.83);
  box-shadow: 0 5px 26px rgba(16,52,32,.08), inset 0 1px rgba(255,255,255,.76);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  backdrop-filter: blur(32px) saturate(190%);
}
.desktop-nav button.active, .snow-toggle, .icon-button:hover:not(:disabled),
.site-header .slp-family-entry {
  background: linear-gradient(140deg,rgba(255,255,255,.75),rgba(213,237,220,.38));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px rgba(255,255,255,.74), 0 3px 12px rgba(22,59,39,.055);
}
.welcome-hero, .dashboard-hero, #slp-family-root .slp-family-welcome {
  background:
    radial-gradient(ellipse at 100% 0%,rgba(117,177,126,.35),transparent 63%),
    linear-gradient(114deg,rgba(14,53,40,.92),rgba(26,80,56,.82) 64%,rgba(37,91,57,.75));
  border: 1px solid rgba(230,255,224,.46);
  box-shadow: 0 20px 44px rgba(19,52,35,.21), inset 0 1px rgba(248,255,231,.43), inset 0 -1px rgba(7,27,15,.25);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
}
.welcome-hero::after, .dashboard-hero::after {
  background: linear-gradient(116deg,transparent 41%,rgba(255,255,255,.13) 51%,rgba(255,255,255,.025) 66%,transparent 72%);
}
.button, .slp-family-button {
  box-shadow: 0 7px 17px rgba(9,47,29,.16), inset 0 1px rgba(255,255,255,.23);
  transition: box-shadow .19s ease, transform .19s ease, background-color .19s ease;
}
.button-soft, .button-plain, .slp-family-button.secondary,
.site-header .slp-family-entry {
  background: linear-gradient(130deg,rgba(255,255,255,.60),rgba(216,239,220,.39));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 12px rgba(36,76,52,.065),inset 0 1px rgba(255,255,255,.83);
  color: #244f3e;
  -webkit-backdrop-filter: blur(14px) saturate(175%);
  backdrop-filter: blur(14px) saturate(175%);
}
.privacy-banner, .notice:not(.notice-error), .draw-notification-status,
.slp-family-member, .slp-family-event, .slp-family-picker-row {
  background: linear-gradient(130deg,rgba(255,255,255,.50),rgba(221,238,224,.30));
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px rgba(255,255,255,.60);
  -webkit-backdrop-filter: blur(15px) saturate(165%);
  backdrop-filter: blur(15px) saturate(165%);
}
.step-icon, .setting-icon, .setting-feature-icon, .privacy-icon,
.brand-mark, .gift-art, .slp-family-avatar {
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 4px 15px rgba(35,75,49,.07), inset 0 1px rgba(255,255,255,.55);
}
.field input, .field textarea, .field select,
#slp-family-root .slp-family-form input:not([type="checkbox"]),
#slp-family-root .slp-family-form textarea {
  background: var(--slp-input);
  border: 1px solid rgba(121,151,126,.3);
  box-shadow: inset 0 1px rgba(255,255,255,.53), 0 2px 9px rgba(31,69,43,.045);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.field input:focus, .field textarea:focus, .field select:focus,
#slp-family-root .slp-family-form input:focus,
#slp-family-root .slp-family-form textarea:focus {
  outline-color: #b7a36c;
  border-color: rgba(94,144,102,.8);
  box-shadow: 0 0 0 3px rgba(118,169,120,.17),inset 0 1px rgba(255,255,255,.6);
}
.modal, .install-dialog {
  background: linear-gradient(130deg,rgba(255,255,252,.84),rgba(229,246,230,.75) 55%,rgba(230,241,222,.81));
  border: 1px solid rgba(255,255,255,.97);
  box-shadow: 0 30px 90px rgba(6,39,25,.24), inset 0 2px rgba(255,255,255,.90), inset 1px 0 rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(42px) saturate(190%);
  backdrop-filter: blur(42px) saturate(190%);
}
.modal::backdrop { background: rgba(6,31,23,.30); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal .field input, .modal .field textarea, .modal .field select { background: rgba(255,255,255,.46); }
/* Soft elevated tabs, static alerts, and holiday badges. */
.event-chip, .soft-badge, .tiny-label, .invitation-badge, .recipient-badge,
#slp-family-root .slp-family-tag { border: 1px solid rgba(255,255,255,.56); box-shadow: inset 0 1px rgba(255,255,255,.32); }

/* Shared theme toggle in the React header and in the annual family carnet. */
.slp-theme-toggle {
  appearance: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 39px;
  min-height: 37px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.87);
  background: linear-gradient(135deg,rgba(255,255,255,.69),rgba(213,236,219,.39));
  color: #214c3b;
  font: 650 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(28,62,40,.10), inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .17s ease, background .17s ease, box-shadow .17s ease;
}
.slp-theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(24,64,46,.14),inset 0 1px rgba(255,255,255,.7); }
.slp-theme-toggle:focus-visible { outline: 3px solid #c8a96b; outline-offset: 3px; }
.slp-theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.slp-family-top > .slp-theme-toggle { margin-left: auto; align-self: flex-start; min-height: 42px; }
.slp-family-top > .slp-family-icon-button { flex: none; }
@media (max-width: 900px) {
  .site-header .slp-theme-toggle { width: 35px; min-width: 35px; height: 35px; min-height: 35px; border-radius: 50%; padding: 0; }
  .site-header .slp-theme-toggle span { display: none; }
}
@media (max-width: 520px) {
  .site-header .slp-theme-toggle { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
  .slp-family-top > .slp-theme-toggle { width: 37px; min-width: 37px; height: 37px; min-height: 37px; padding: 0; margin-left: auto; }
  .slp-family-top > .slp-theme-toggle span { display: none; }
}
/* Family backdrop lets the translucent material cast real depth, not plain white. */
#slp-family-root {
  color: var(--slp-text);
  background:
    radial-gradient(ellipse 630px 570px at 98% 0%,rgba(134,188,146,.43),transparent 79%),
    radial-gradient(ellipse 720px 620px at 0% 95%,rgba(230,199,151,.33),transparent 83%),
    linear-gradient(128deg,#eff6ee,#ecf4ed 59%,#f8f2e9);
}
#slp-family-root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background-image:
    repeating-linear-gradient(155deg,transparent 0 56px,rgba(71,133,100,.065) 57px,transparent 58px 118px),
    radial-gradient(circle at 76% 25%,rgba(255,255,255,.75) 0 2px,transparent 4px);
}
#slp-family-root .slp-family-page { position: relative; z-index: 1; }
#slp-family-root .slp-family-card { color: var(--slp-text); }
#slp-family-root .slp-family-welcome { border-radius: 26px; }
#slp-family-root .slp-family-head p,
#slp-family-root .slp-family-muted,
#slp-family-root .slp-family-help { color: var(--slp-text-soft); }
#slp-family-root .slp-family-member,
#slp-family-root .slp-family-event,
#slp-family-root .slp-family-picker-row { background: linear-gradient(125deg,rgba(255,255,255,.59),rgba(228,243,230,.29)); }
#slp-family-root .slp-family-avatar { background: rgba(192,223,204,.48); }
#slp-family-root .slp-family-icon-button { border-color: var(--slp-hairline); background: var(--slp-glass); box-shadow: var(--slp-glass-inset),0 3px 13px rgba(23,61,43,.12); }

/* NIGHT MODE: contrast is defined explicitly for text, input, list, and modal surfaces. */
html[data-slp-theme="dark"] body {
  background:
    radial-gradient(ellipse 70vw 65vh at 100% 0%,rgba(43,106,85,.42),transparent 80%),
    radial-gradient(ellipse 56vw 75vh at 0% 93%,rgba(115,81,50,.22),transparent 80%),
    linear-gradient(125deg,#091c18,#0c211e 60%,#061814);
  color: var(--slp-text);
}
html[data-slp-theme="dark"] .app-shell {
  background: radial-gradient(ellipse at 5% 10%,rgba(75,140,115,.12),transparent 52%);
}
html[data-slp-theme="dark"] .glass,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card {
  background: var(--slp-glass);
  border: 1px solid var(--slp-hairline);
  border-top-color: rgba(224,255,238,.37);
  box-shadow: var(--slp-glass-shadow),var(--slp-glass-inset);
  -webkit-backdrop-filter: blur(30px) saturate(172%);
  backdrop-filter: blur(30px) saturate(172%);
}
html[data-slp-theme="dark"] .site-header {
  background: linear-gradient(120deg,rgba(15,49,42,.89),rgba(15,44,40,.77) 60%,rgba(11,32,31,.83));
  border-bottom: 1px solid rgba(202,251,220,.20);
  box-shadow: 0 6px 24px rgba(0,10,9,.22),inset 0 1px rgba(220,255,234,.15);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  backdrop-filter: blur(32px) saturate(185%);
}
html[data-slp-theme="dark"] .site-header .brand,
html[data-slp-theme="dark"] .site-header .brand>span:last-child,
html[data-slp-theme="dark"] .site-header .desktop-nav button.active,
html[data-slp-theme="dark"] .landing-nav,
html[data-slp-theme="dark"] .slp-family-page,
html[data-slp-theme="dark"] #slp-family-root { color: var(--slp-text); }
html[data-slp-theme="dark"] .desktop-nav button,
html[data-slp-theme="dark"] .brand-sub,
html[data-slp-theme="dark"] .landing-nav button,
html[data-slp-theme="dark"] .intro-strip>p,
html[data-slp-theme="dark"] .intro-strip>span,
html[data-slp-theme="dark"] .site-footer,
html[data-slp-theme="dark"] .muted,
html[data-slp-theme="dark"] .eyebrow,
html[data-slp-theme="dark"] .small,
html[data-slp-theme="dark"] .family-progress p,
html[data-slp-theme="dark"] .card-overline,
html[data-slp-theme="dark"] .page-intro p,
html[data-slp-theme="dark"] .step-card p,
html[data-slp-theme="dark"] .privacy-banner p,
html[data-slp-theme="dark"] .draw-center p,
html[data-slp-theme="dark"] .empty-page p,
html[data-slp-theme="dark"] .settings-option p,
html[data-slp-theme="dark"] .settings-side p,
html[data-slp-theme="dark"] .wish-card-content>p,
html[data-slp-theme="dark"] .field small,
html[data-slp-theme="dark"] .wish-mini p,
html[data-slp-theme="dark"] .person-status,
html[data-slp-theme="dark"] .bottom-tip,
html[data-slp-theme="dark"] .modal-copy,
html[data-slp-theme="dark"] .modal-top p,
html[data-slp-theme="dark"] .draw-notification-intro,
html[data-slp-theme="dark"] .draw-notification-status>p,
html[data-slp-theme="dark"] .draw-notification-count,
html[data-slp-theme="dark"] .draw-notification-note { color: var(--slp-text-soft); }
html[data-slp-theme="dark"] .desktop-nav button:hover,
html[data-slp-theme="dark"] .desktop-nav button.active,
html[data-slp-theme="dark"] .snow-toggle,
html[data-slp-theme="dark"] .icon-button:hover,
html[data-slp-theme="dark"] .site-header .slp-family-entry {
  background: linear-gradient(126deg,rgba(131,198,161,.24),rgba(89,155,134,.11));
  color: #e1f8e9;
  border: 1px solid rgba(205,255,231,.21);
  box-shadow: inset 0 1px rgba(237,255,246,.15);
}
html[data-slp-theme="dark"] .brand-mark:not(.brand-mark-app),
html[data-slp-theme="dark"] .avatar:not(.avatar-extra),
html[data-slp-theme="dark"] .step-icon,
html[data-slp-theme="dark"] .setting-icon,
html[data-slp-theme="dark"] .setting-feature-icon,
html[data-slp-theme="dark"] .privacy-icon {
  background: rgba(115,161,138,.16);
  color: #d4edd8;
  border-color: rgba(222,255,228,.20);
}
html[data-slp-theme="dark"] .soft-badge,
html[data-slp-theme="dark"] .event-chip,
html[data-slp-theme="dark"] .tiny-label,
html[data-slp-theme="dark"] .recipient-badge,
html[data-slp-theme="dark"] .invitation-badge,
html[data-slp-theme="dark"] .slp-family-tag,
html[data-slp-theme="dark"] .connection-status { background: rgba(112,178,143,.17); color: #d3f2dd; border: 1px solid rgba(183,235,202,.23); }
html[data-slp-theme="dark"] .invitation-badge.failed,
html[data-slp-theme="dark"] .notice-error { background: rgba(184,82,72,.18); color: #ffc2b7; border-color: rgba(238,155,140,.4); }
html[data-slp-theme="dark"] .invitation-badge.sent,
html[data-slp-theme="dark"] .invitation-badge.opened,
html[data-slp-theme="dark"] .soft-badge.green,
html[data-slp-theme="dark"] .connection-status.ready { color: #baf4cc; background: rgba(60,144,95,.19); }
html[data-slp-theme="dark"] .button { background: linear-gradient(120deg,#286a51,#154f3c); color: #f2fff2; border: 1px solid rgba(214,255,226,.17); box-shadow: 0 6px 20px rgba(0,12,9,.29),inset 0 1px rgba(233,255,240,.19); }
html[data-slp-theme="dark"] .button-gold { background: linear-gradient(120deg,#e8ca91,#bfa06b); color: #1b2d25; border-color: rgba(255,240,206,.42); }
html[data-slp-theme="dark"] .button-soft,
html[data-slp-theme="dark"] .button-plain,
html[data-slp-theme="dark"] .site-header .slp-family-entry {
  background: linear-gradient(126deg,rgba(128,197,157,.20),rgba(97,159,134,.08));
  border-color: rgba(191,255,215,.23);
  color: #e1f8e9;
  box-shadow: inset 0 1px rgba(240,255,245,.12),0 4px 15px rgba(0,10,9,.12);
}
html[data-slp-theme="dark"] .button-danger { background: #9e3e40; color: #fff9f3; border-color: rgba(255,204,203,.3); }
html[data-slp-theme="dark"] .text-link,
html[data-slp-theme="dark"] .inline-note,
html[data-slp-theme="dark"] .setting-icon,
html[data-slp-theme="dark"] .setting-feature-icon,
html[data-slp-theme="dark"] .settings-option h3,
html[data-slp-theme="dark"] .field>span { color: #bce9cd; }
html[data-slp-theme="dark"] .privacy-banner,
html[data-slp-theme="dark"] .notice:not(.notice-error),
html[data-slp-theme="dark"] .draw-notification-status,
html[data-slp-theme="dark"] .exclusions-list>div {
  background: rgba(117,181,148,.12); border: 1px solid rgba(203,254,222,.17); color: #d4eade; box-shadow: inset 0 1px rgba(228,255,234,.11);
}
html[data-slp-theme="dark"] .notice p,
html[data-slp-theme="dark"] .modal .notice p { color: #d2eadb; }
html[data-slp-theme="dark"] .notice-warm { background: rgba(225,173,98,.15); border-color: rgba(253,215,144,.24); color: #f1d7a6; }
html[data-slp-theme="dark"] .notice-warm p,
html[data-slp-theme="dark"] .modal .notice-warm p { color: #f1d7a6; }
html[data-slp-theme="dark"] .notice-error p,
html[data-slp-theme="dark"] .modal .notice-error p,
html[data-slp-theme="dark"] .form-error { color: #ffc1b6; }
html[data-slp-theme="dark"] .demo-banner { background: rgba(197,147,84,.19);color:#f3d5ac;border-color:rgba(255,213,159,.31); }
html[data-slp-theme="dark"] .gift-art { background: linear-gradient(140deg,rgba(132,193,150,.16),rgba(86,136,108,.09)); border-color: rgba(199,246,218,.12); }
html[data-slp-theme="dark"] .gift-art-1 { background: linear-gradient(135deg,rgba(166,107,94,.20),rgba(64,104,87,.14)); }
html[data-slp-theme="dark"] .gift-art-2 { background: linear-gradient(135deg,rgba(117,172,135,.22),rgba(52,102,83,.13)); }
html[data-slp-theme="dark"] .gift-art-3 { background: linear-gradient(135deg,rgba(187,154,98,.20),rgba(58,92,78,.13)); }
html[data-slp-theme="dark"] .add-wish-card { border-color: rgba(184,241,207,.30); background: rgba(64,126,92,.12); }
html[data-slp-theme="dark"] .add-wish-card strong,
html[data-slp-theme="dark"] .wish-title-row h3,
html[data-slp-theme="dark"] .settings-card h2,
html[data-slp-theme="dark"] .draw-center h2,
html[data-slp-theme="dark"] .person-card h3,
html[data-slp-theme="dark"] .page-intro h1 { color: #effaf0; }
html[data-slp-theme="dark"] .wish-price,
html[data-slp-theme="dark"] .family-progress strong,
html[data-slp-theme="dark"] .step-number,
html[data-slp-theme="dark"] .card-overline>span { color: #dbcd9b; }
html[data-slp-theme="dark"] .progress-track { background: rgba(202,242,210,.16); }
html[data-slp-theme="dark"] .toggle { background: rgba(194,224,200,.25); }
html[data-slp-theme="dark"] .toggle.on { background: #29835f; }
html[data-slp-theme="dark"] .field input,
html[data-slp-theme="dark"] .field textarea,
html[data-slp-theme="dark"] .field select,
html[data-slp-theme="dark"] .modal .field input,
html[data-slp-theme="dark"] .modal .field textarea,
html[data-slp-theme="dark"] .modal .field select,
html[data-slp-theme="dark"] #slp-family-root .slp-family-form input:not([type="checkbox"]),
html[data-slp-theme="dark"] #slp-family-root .slp-family-form textarea {
  color: #f2fbf4;
  background: rgba(6,28,25,.52);
  border-color: rgba(187,234,205,.29);
  box-shadow: inset 0 1px rgba(232,255,244,.10),0 2px 10px rgba(0,5,5,.12);
}
html[data-slp-theme="dark"] input::placeholder,
html[data-slp-theme="dark"] textarea::placeholder { color: #afc6b8; opacity: 1; }
html[data-slp-theme="dark"] select option,
html[data-slp-theme="dark"] .field select option { background: #18392f; color: #eff9f1; }
html[data-slp-theme="dark"] .field input:focus,
html[data-slp-theme="dark"] .field textarea:focus,
html[data-slp-theme="dark"] .field select:focus { background: rgba(11,42,34,.76);border-color:#90d1aa;box-shadow:0 0 0 3px rgba(137,223,167,.18); }
html[data-slp-theme="dark"] .modal,
html[data-slp-theme="dark"] .install-dialog {
  color: #f0f8ef;
  background: linear-gradient(130deg,rgba(31,70,59,.95),rgba(14,47,41,.94) 55%,rgba(10,34,33,.95));
  border: 1px solid rgba(204,250,222,.32);
  box-shadow: 0 30px 90px rgba(0,8,7,.61), inset 0 1px rgba(237,255,245,.26);
  -webkit-backdrop-filter: blur(40px) saturate(155%);
  backdrop-filter: blur(40px) saturate(155%);
}
html[data-slp-theme="dark"] .modal::backdrop { background: rgba(1,12,9,.62); }
html[data-slp-theme="dark"] .modal .modal-top h2,
html[data-slp-theme="dark"] .modal .field>span,
html[data-slp-theme="dark"] .modal .modal-copy,
html[data-slp-theme="dark"] .modal .modal-top p,
html[data-slp-theme="dark"] .modal .field small,
html[data-slp-theme="dark"] .modal .person-status { color: #e1f6e7; }
html[data-slp-theme="dark"] .modal-actions { border-top-color: rgba(232,255,233,.17); }
html[data-slp-theme="dark"] .wizard-steps b,
html[data-slp-theme="dark"] .person-number { color: #daecd9; border-color: rgba(187,231,202,.31); }
html[data-slp-theme="dark"] .wizard-steps .current b { color: #132e25; }
html[data-slp-theme="dark"] .install-trigger { color:#e2f7e8;background:rgba(126,193,151,.15);border-color:rgba(202,244,218,.28); }
html[data-slp-theme="dark"] .install-brand>p,
html[data-slp-theme="dark"] .install-dialog .install-steps p,
html[data-slp-theme="dark"] .install-dialog .install-steps strong,
html[data-slp-theme="dark"] .install-dialog .install-access>div,
html[data-slp-theme="dark"] .install-dialog .install-network-note,
html[data-slp-theme="dark"] .install-dialog .install-perks,
html[data-slp-theme="dark"] .install-dialog .install-platforms>button,
html[data-slp-theme="dark"] .install-callout p { color: #cde4d5; }
html[data-slp-theme="dark"] .install-platforms { background: rgba(0,21,16,.40); }
html[data-slp-theme="dark"] .install-platforms>button.selected { color:#f4f9ea;background:rgba(126,200,148,.21);border-color:rgba(222,255,226,.20); }
html[data-slp-theme="dark"] .connection-notice { color:#f8deaf;background:rgba(91,67,36,.95);border-color:rgba(246,216,156,.31); }
html[data-slp-theme="dark"] .site-footer { border-top-color: rgba(201,245,214,.19); }
html[data-slp-theme="dark"] .desktop-nav.mobile-open {
  background: linear-gradient(130deg,rgba(12,43,36,.97),rgba(20,64,47,.92));border:1px solid rgba(207,255,227,.24);box-shadow:0 23px 53px rgba(0,9,7,.55);
}
html[data-slp-theme="dark"] .desktop-nav.mobile-open button { color:#d8f0de; }
html[data-slp-theme="dark"] .desktop-nav.mobile-open button.active { color:#f6dda5; background:rgba(178,229,197,.13); }
html[data-slp-theme="dark"] .festive-backdrop__glow--pine { background:#2e8164;opacity:.35; }
html[data-slp-theme="dark"] .festive-backdrop__glow--gold { background:#926b3b;opacity:.2; }
html[data-slp-theme="dark"] .festive-backdrop__glow--mint { background:#36765b;opacity:.26; }
html[data-slp-theme="dark"] .festive-backdrop__bokeh { background:radial-gradient(circle at 30% 25%,rgba(151,216,170,.16),transparent 64%);border-color:rgba(167,224,190,.18); }
html[data-slp-theme="dark"] .festive-backdrop__trees { opacity:.095; }
html[data-slp-theme="dark"] .slp-theme-toggle {
  color:#d9f8e6;
  background:linear-gradient(135deg,rgba(113,189,145,.21),rgba(49,111,91,.14));
  border-color:rgba(200,255,224,.29);
  box-shadow:0 4px 16px rgba(0,8,6,.24),inset 0 1px rgba(238,255,241,.17);
}
html[data-slp-theme="dark"] #slp-family-root {
  background:
    radial-gradient(ellipse 750px 650px at 103% -10%,rgba(44,108,81,.45),transparent 82%),
    radial-gradient(ellipse 720px 680px at -11% 108%,rgba(137,94,59,.19),transparent 80%),
    linear-gradient(125deg,#0a1e1a,#0d2923 55%,#091c19);
  color:#eef9f1;
}
html[data-slp-theme="dark"] #slp-family-root::before { opacity:.38;background-image:repeating-linear-gradient(155deg,transparent 0 56px,rgba(148,217,179,.11) 57px,transparent 58px 118px); }
html[data-slp-theme="dark"] #slp-family-root h1,
html[data-slp-theme="dark"] #slp-family-root h2,
html[data-slp-theme="dark"] #slp-family-root h3,
html[data-slp-theme="dark"] #slp-family-root .slp-family-member-info strong,
html[data-slp-theme="dark"] #slp-family-root .slp-family-empty h3,
html[data-slp-theme="dark"] #slp-family-root .slp-family-form label:not(.slp-family-checkbox):not(.slp-family-picker-row),
html[data-slp-theme="dark"] #slp-family-root .slp-family-event strong { color: #f0fbef; }
html[data-slp-theme="dark"] #slp-family-root .slp-family-head p,
html[data-slp-theme="dark"] #slp-family-root .slp-family-help,
html[data-slp-theme="dark"] #slp-family-root .slp-family-muted,
html[data-slp-theme="dark"] #slp-family-root .slp-family-checkbox,
html[data-slp-theme="dark"] #slp-family-root .slp-family-checkbox small,
html[data-slp-theme="dark"] #slp-family-root .slp-family-member-info span,
html[data-slp-theme="dark"] #slp-family-root .slp-family-event small,
html[data-slp-theme="dark"] #slp-family-root .slp-family-event-year,
html[data-slp-theme="dark"] #slp-family-root .slp-family-select-top,
html[data-slp-theme="dark"] #slp-family-root .slp-family-empty,
html[data-slp-theme="dark"] #slp-family-root footer { color: #b8d3c3; }
html[data-slp-theme="dark"] #slp-family-root .slp-family-eyebrow { color:#a3cfb7; }
html[data-slp-theme="dark"] #slp-family-root .slp-family-member,
html[data-slp-theme="dark"] #slp-family-root .slp-family-event,
html[data-slp-theme="dark"] #slp-family-root .slp-family-picker-row { background:rgba(105,168,135,.10);border-color:rgba(194,250,214,.18);box-shadow:inset 0 1px rgba(226,255,235,.10); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-picker-row:hover { background:rgba(111,191,150,.19); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-avatar,
html[data-slp-theme="dark"] #slp-family-root .slp-family-check { background:rgba(110,185,134,.17); color:#d1f5de;border-color:rgba(197,255,218,.17); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-tag { color:#d3f1dd; background:rgba(109,181,135,.15);border-color:rgba(187,241,204,.2); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-button { background:linear-gradient(128deg,#28694f,#18503d);color:#f2fff3;border:1px solid rgba(222,255,229,.21);box-shadow:0 4px 15px rgba(0,8,6,.24),inset 0 1px rgba(238,255,245,.16); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-button.secondary { background:linear-gradient(130deg,rgba(134,201,158,.19),rgba(82,154,129,.10));color:#e3f7e8;border-color:rgba(205,250,219,.24); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-button.gold { color:#183128;background:linear-gradient(130deg,#f2d497,#c7ab72);border-color:rgba(255,244,201,.41); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-button.danger { background:#a74749;color:#fff; }
html[data-slp-theme="dark"] #slp-family-root .slp-family-text-btn { color:#b1eac6; }
html[data-slp-theme="dark"] #slp-family-root .slp-family-rule { background:rgba(196,244,219,.21); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-new-person button { background:rgba(150,90,86,.16);color:#ffd1ca;border-color:rgba(238,172,160,.28); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-notice { background:rgba(83,170,112,.13);color:#c8f4d7;border:1px solid rgba(171,236,194,.24); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-notice.error { background:rgba(154,68,70,.21);color:#ffd0c9;border-color:rgba(255,173,154,.24); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-welcome { border-color:rgba(201,244,214,.25); }
html[data-slp-theme="dark"] #slp-family-root .slp-family-welcome h2,
html[data-slp-theme="dark"] #slp-family-root .slp-family-welcome p { color: #fff8ee !important; }
html[data-slp-theme="dark"] #slp-family-root .slp-family-icon-button { background:rgba(134,200,154,.14);color:#e6f9ed;border-color:rgba(209,255,220,.24); }
/* Legacy and accessibility: readable backgrounds if transparency is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .modal { background:#edf5eb; }
  #slp-family-root .slp-family-card { background:#f4f8f2; }
  html[data-slp-theme="dark"] .glass,
  html[data-slp-theme="dark"] .modal,
  html[data-slp-theme="dark"] #slp-family-root .slp-family-card { background:#193c32; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass,.modal,#slp-family-root .slp-family-card { background:#edf5eb; }
  html[data-slp-theme="dark"] .glass,html[data-slp-theme="dark"] .modal,html[data-slp-theme="dark"] #slp-family-root .slp-family-card { background:#193c32; }
}
@media (prefers-reduced-motion: reduce) {
  .slp-theme-toggle { transition: none; }
}
/* Final readability pass on legacy hard-coded colors and the create-event wizard. */
html[data-slp-theme="dark"] .main-content :is(h1,h2,h3),
html[data-slp-theme="dark"] .privacy-banner h3,
html[data-slp-theme="dark"] .step-card h3,
html[data-slp-theme="dark"] .intro-strip strong,
html[data-slp-theme="dark"] .wish-mini h3,
html[data-slp-theme="dark"] .person-card h3,
html[data-slp-theme="dark"] .empty-wishes h3,
html[data-slp-theme="dark"] .settings-option h3,
html[data-slp-theme="dark"] .family-summary h2 { color: #f0f9ef; }
html[data-slp-theme="dark"] .main-content .welcome-hero :is(h1,h2,h3),
html[data-slp-theme="dark"] .main-content .dashboard-hero :is(h1,h2,h3) { color: #fbf6e9; }
html[data-slp-theme="dark"] .wizard-steps,
html[data-slp-theme="dark"] .person-form-row { border-color: rgba(218,255,230,.19); }
html[data-slp-theme="dark"] .wizard-steps>span,
html[data-slp-theme="dark"] .wizard-steps .current { color: #c6e4d2; }
html[data-slp-theme="dark"] .wizard-steps b { border-color: rgba(195,237,209,.43);color:#daedde; }
html[data-slp-theme="dark"] .wizard-steps .current b { color:#fafbee;background:#357957;border-color:#7fc49a; }
html[data-slp-theme="dark"] .empty-doodle,
html[data-slp-theme="dark"] .reveal-confetti,
html[data-slp-theme="dark"] .add-wish-card>span { color:#cfe8da; }
html[data-slp-theme="dark"] .add-wish-card p,
html[data-slp-theme="dark"] .empty-wishes p,
html[data-slp-theme="dark"] .intro-strip strong,
html[data-slp-theme="dark"] .person-status>span,
html[data-slp-theme="dark"] .wish-mini>span,
html[data-slp-theme="dark"] .family-avatar-list>div>span:last-child,
html[data-slp-theme="dark"] .family-progress p { color:#bad3c3; }
html[data-slp-theme="dark"] .intro-strip .strip-divider { background:rgba(210,255,221,.21); }
html[data-slp-theme="dark"] .handwritten { color: #dbc892; }
/* The global Tailwind reset also targets unqualified buttons. Keep all family
   actions opaque and readable in LIGHT mode, even after switching from dark. */
#slp-family-root .slp-family-button:not(.secondary):not(.gold):not(.danger) {
  background: linear-gradient(130deg,#28674c,#194b38);
  color: #fffdf4;
  border: 1px solid rgba(255,255,255,.29);
}
#slp-family-root .slp-family-button.gold {
  background: linear-gradient(128deg,#f4d58f,#e3b965);
  color: #213c2d;
  border: 1px solid rgba(255,240,204,.87);
  box-shadow: 0 8px 18px rgba(10,37,20,.15),inset 0 1px rgba(255,255,244,.70);
}
#slp-family-root .slp-family-button.secondary {
  background: linear-gradient(125deg,rgba(255,255,255,.66),rgba(213,235,220,.46));
  color: #24513d;
  border: 1px solid rgba(255,255,255,.9);
}
#slp-family-root .slp-family-button.danger { background: #a74749;color:#fff;border:1px solid rgba(255,227,227,.33); }
/* Reassert dark-specific rules after the light-mode action defaults. */
html[data-slp-theme="dark"] #slp-family-root .slp-family-button:not(.secondary):not(.gold):not(.danger) {
  background:linear-gradient(128deg,#28694f,#18503d);color:#f2fff3;border-color:rgba(222,255,229,.21);
}
html[data-slp-theme="dark"] #slp-family-root .slp-family-button.gold {
  background:linear-gradient(130deg,#f2d497,#c7ab72);color:#183128;border-color:rgba(255,244,201,.41);
}
html[data-slp-theme="dark"] #slp-family-root .slp-family-button.secondary {
  background:linear-gradient(130deg,rgba(134,201,158,.19),rgba(82,154,129,.10));color:#e3f7e8;border-color:rgba(205,250,219,.24);
}

/* --- liquid-glass-v1.6.css --- */
/* Sous le Sapin 1.6 — crystal glass, stronger refraction, and responsive snowfall.
 * Visual-only overlay: the v1.5 design and Cloudflare/D1 endpoints are retained.
 * Low alpha = genuine transparency; backdrop-filter maintains frosted readability. */
:root {
  --slp-glass: linear-gradient(127deg,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.13) 43%,
    rgba(192,231,212,.15) 100%);
  --slp-hairline: rgba(255,255,255,.68);
  --slp-glass-inset: inset 0 1px rgba(255,255,255,.88), inset 1px 0 rgba(255,255,255,.34), inset 0 -1px rgba(68,123,100,.08);
  --slp-glass-shadow: 0 20px 48px rgba(28,67,48,.12), 0 3px 14px rgba(29,65,46,.06);
  --slp-input: rgba(255,255,255,.28);
  --slp-inner: rgba(255,255,255,.20);
}
html[data-slp-theme="dark"] {
  --slp-glass: linear-gradient(125deg,
    rgba(77,125,108,.43) 0%, rgba(28,65,57,.30) 48%,
    rgba(16,43,42,.34) 100%);
  --slp-hairline: rgba(220,255,237,.27);
  --slp-glass-inset: inset 0 1px rgba(237,255,246,.38), inset 1px 0 rgba(201,255,228,.13), inset 0 -1px rgba(3,23,21,.22);
  --slp-glass-shadow: 0 26px 68px rgba(0,10,9,.42), 0 3px 18px rgba(0,12,10,.13);
  --slp-input: rgba(7,36,31,.27);
  --slp-inner: rgba(171,229,190,.09);
}

/* Cards and panes genuinely show their moving backdrop instead of being opaque. */
.glass,
#slp-family-root .slp-family-card {
  background: var(--slp-glass);
  border-color: var(--slp-hairline);
  box-shadow: var(--slp-glass-shadow), var(--slp-glass-inset);
  -webkit-backdrop-filter: blur(36px) saturate(192%) brightness(1.045);
  backdrop-filter: blur(36px) saturate(192%) brightness(1.045);
}
html[data-slp-theme="dark"] .glass,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card {
  background: var(--slp-glass);
  border-color: var(--slp-hairline);
  -webkit-backdrop-filter: blur(34px) saturate(176%);
  backdrop-filter: blur(34px) saturate(176%);
}
.site-header {
  background: linear-gradient(116deg,rgba(255,255,255,.34),rgba(230,251,236,.15) 60%,rgba(245,255,242,.12));
  border-bottom-color: rgba(255,255,255,.63);
  -webkit-backdrop-filter: blur(35px) saturate(193%);
  backdrop-filter: blur(35px) saturate(193%);
}
html[data-slp-theme="dark"] .site-header {
  background: linear-gradient(115deg,rgba(38,81,69,.49),rgba(17,51,46,.33) 60%,rgba(16,38,35,.34));
  border-bottom-color: rgba(204,255,231,.23);
  -webkit-backdrop-filter: blur(37px) saturate(182%);
  backdrop-filter: blur(37px) saturate(182%);
}

/* Modal is the material the user sees most clearly: 25–39% fill + strong blur. */
dialog.modal.glass, .install-dialog {
  background: linear-gradient(129deg,rgba(255,255,253,.35),rgba(237,253,243,.22) 56%,rgba(224,241,232,.26));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 35px 95px rgba(7,43,29,.25), inset 0 2px rgba(255,255,255,.82), inset 1px 0 rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(46px) saturate(195%) brightness(1.045);
  backdrop-filter: blur(46px) saturate(195%) brightness(1.045);
}
html[data-slp-theme="dark"] dialog.modal.glass,
html[data-slp-theme="dark"] .install-dialog {
  background: linear-gradient(127deg,rgba(66,117,94,.44),rgba(23,63,55,.34) 53%,rgba(11,40,38,.39));
  border: 1px solid rgba(221,255,239,.37);
  box-shadow: 0 36px 95px rgba(0,6,6,.56), inset 0 1px rgba(243,255,247,.32);
  -webkit-backdrop-filter: blur(45px) saturate(165%);
  backdrop-filter: blur(45px) saturate(165%);
}
dialog.modal::backdrop {
  background: rgba(9,31,24,.20);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-slp-theme="dark"] dialog.modal::backdrop { background: rgba(0,9,8,.38); }

/* Give dialogs / lists the same light, clear material and strong foreground text. */
.field input, .field select, .field textarea,
#slp-family-root .slp-family-form input:not([type="checkbox"]),
#slp-family-root .slp-family-form textarea,
.modal .field input, .modal .field textarea, .modal .field select {
  background: var(--slp-input);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
html[data-slp-theme="dark"] .field input,
html[data-slp-theme="dark"] .field select,
html[data-slp-theme="dark"] .field textarea,
html[data-slp-theme="dark"] .modal .field input,
html[data-slp-theme="dark"] .modal .field textarea,
html[data-slp-theme="dark"] .modal .field select,
html[data-slp-theme="dark"] #slp-family-root .slp-family-form input:not([type="checkbox"]),
html[data-slp-theme="dark"] #slp-family-root .slp-family-form textarea {
  background: rgba(9,35,31,.33);
  color: #f2fff6;
  border-color: rgba(215,255,228,.35);
}
.slp-family-member, .slp-family-event, .slp-family-picker-row,
#slp-family-root .slp-family-member,
#slp-family-root .slp-family-event,
#slp-family-root .slp-family-picker-row,
.privacy-banner, .draw-notification-status, .notice:not(.notice-error) {
  background: linear-gradient(118deg,rgba(255,255,255,.23),rgba(224,245,233,.12));
  -webkit-backdrop-filter: blur(25px) saturate(165%);
  backdrop-filter: blur(25px) saturate(165%);
}
html[data-slp-theme="dark"] :is(.slp-family-member,.slp-family-event,.slp-family-picker-row,.privacy-banner,.draw-notification-status,.notice:not(.notice-error)) {
  background: linear-gradient(118deg,rgba(110,187,146,.16),rgba(52,126,102,.08));
}
.slp-theme-toggle, .snow-toggle,
.button-soft, .button-plain, .slp-family-button.secondary {
  -webkit-backdrop-filter: blur(22px) saturate(178%);
  backdrop-filter: blur(22px) saturate(178%);
}
/* Tall green hero remains slightly denser so white text always stays readable. */
.welcome-hero, .dashboard-hero, #slp-family-root .slp-family-welcome {
  background: radial-gradient(circle at 90% 5%,rgba(147,207,165,.25),transparent 65%),
    linear-gradient(118deg,rgba(15,58,44,.81),rgba(23,77,56,.69) 62%,rgba(24,82,60,.65));
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
}
html[data-slp-theme="dark"] :is(.welcome-hero,.dashboard-hero,#slp-family-root .slp-family-welcome) {
  background: radial-gradient(circle at 93% 8%,rgba(137,191,153,.21),transparent 62%),
    linear-gradient(117deg,rgba(14,52,42,.79),rgba(18,63,52,.67) 57%,rgba(20,70,57,.65));
}

/* Additional floating background movement, refraction and tiny holiday glints. */
.festive-backdrop__contours { animation-duration: 24s; }
.festive-backdrop__bokeh { animation-duration: 19s; }
.festive-backdrop__glow--pine { animation: slp-winter-aurora 28s ease-in-out -8s infinite alternate; }
.festive-backdrop__glow--gold { animation: slp-winter-aurora 32s ease-in-out -14s infinite alternate-reverse; }
.festive-backdrop__glow--mint { animation: slp-winter-aurora 39s ease-in-out -20s infinite alternate; }
@keyframes slp-winter-aurora {
  from { transform: translate3d(-2.5vw,-1.4vh,0) scale(.96); }
  to { transform: translate3d(2.5vw,2.3vh,0) scale(1.08); }
}
.festive-backdrop__flake {
  background: rgba(252,255,251,.97);
  box-shadow: 0 0 1px rgba(26,96,62,.38), 0 0 6px rgba(255,255,255,.58);
}
html[data-slp-theme="dark"] .festive-backdrop__flake {
  background: rgba(246,255,250,.96);
  box-shadow: 0 0 8px rgba(255,255,255,.34);
}
.festive-backdrop--still .festive-backdrop__glow { animation: none; }
#slp-family-root::before { animation: slp-winter-aurora 35s ease-in-out -10s infinite alternate; }
.welcome-hero::after, .dashboard-hero::after { animation: slp-liquid-sheen 11s ease-in-out -4s infinite alternate; }
@keyframes slp-liquid-sheen {
  0%,100% { opacity: .25; transform: translate3d(-2%,0,0); }
  50% { opacity: .63; transform: translate3d(3%,0,0); }
}
/* Extra snowfall lives beneath text, interactions and dialogs on both surfaces. */
.slp-winter-snow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
  contain: layout paint style;
}
.slp-winter-flake {
  position: absolute;
  top: -30px;
  left: var(--slp-flake-x);
  width: var(--slp-flake-size);
  height: var(--slp-flake-size);
  border-radius: 50%;
  background: rgba(250,255,251,.93);
  box-shadow: 0 0 1px rgba(36,105,80,.57), 0 0 8px rgba(250,255,248,.36);
  opacity: 0;
  transform: translate3d(0,-30px,0);
  animation: slp-snow-fall var(--slp-flake-time) linear var(--slp-flake-delay) infinite;
}
.slp-winter-flake--crystal {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: rgba(250,255,253,.88);
  font-size: var(--slp-flake-size);
  line-height: 1;
  text-shadow: 0 0 2px rgba(13,88,60,.51), 0 0 12px rgba(255,255,255,.4);
}
.slp-winter-spark {
  position: absolute;
  left: var(--slp-spark-x);
  top: var(--slp-spark-y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(246,221,156,.72);
  box-shadow: 0 0 15px 3px rgba(252,220,140,.32);
  opacity: 0;
  animation: slp-winter-twinkle var(--slp-spark-time) ease-in-out var(--slp-spark-delay) infinite;
}
@keyframes slp-snow-fall {
  0% { transform: translate3d(0,-30px,0) rotate(0); opacity: 0; }
  12% { opacity: var(--slp-flake-opacity); }
  85% { opacity: var(--slp-flake-opacity); }
  100% { transform: translate3d(var(--slp-flake-drift),calc(100vh + 55px),0) rotate(var(--slp-flake-spin)); opacity: 0; }
}
@keyframes slp-winter-twinkle {
  0%,100% { opacity: 0; transform: scale(.5); }
  50% { opacity: .70; transform: scale(1.5); }
}
html[data-slp-theme="dark"] .slp-winter-flake { box-shadow: 0 0 7px rgba(246,255,250,.46); }
html[data-slp-theme="dark"] .slp-winter-flake--crystal { box-shadow:none; color: rgba(246,255,250,.96); text-shadow: 0 0 12px rgba(255,255,255,.49); }
#slp-family-root > .slp-winter-snow { z-index: 0; }
#slp-family-root > .slp-family-page { position:relative; z-index:1; }
#slp-family-root .slp-family-card { position:relative; }
.slp-winter-snow--paused .slp-winter-flake,
.slp-winter-snow--paused .slp-winter-spark,
body.slp-family-visible #slp-winter-snow-app .slp-winter-flake,
body.slp-family-visible #slp-winter-snow-app .slp-winter-spark { animation-play-state: paused; }
.slp-winter-snow--off .slp-winter-flake,
.slp-winter-snow--off .slp-winter-spark { display: none; }
.app-shell.animations-paused .festive-backdrop__glow,
.app-shell.animations-paused .welcome-hero::after,
.app-shell.animations-paused .dashboard-hero::after,
html.slp-winter-motion-off #slp-family-root::before { animation: none; }
@media (max-width: 640px) {
  /* Mobile: keep many flakes, but fewer moving nodes for smooth touch/scroll. */
  .slp-winter-flake:nth-of-type(n+37) { display: none; }
  .slp-winter-spark:nth-of-type(n+7) { display: none; }
  .festive-backdrop__contours { animation-duration: 31s; }
  .festive-backdrop__bokeh { animation-duration: 27s; }
  .slp-winter-flake { box-shadow: 0 0 1px rgba(39,112,78,.52); }
  .slp-winter-flake--crystal { text-shadow: 0 0 3px rgba(9,84,53,.48); }
  .slp-winter-snow { contain: layout paint; }
  dialog.modal.glass, html[data-slp-theme="dark"] dialog.modal.glass, .install-dialog, #slp-family-root .slp-family-card {
    -webkit-backdrop-filter: blur(33px) saturate(182%);
    backdrop-filter: blur(33px) saturate(182%);
  }
}
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1024px) { .slp-winter-flake:nth-of-type(n+45) { display:none; } }
@media (max-width: 370px) { .slp-winter-flake:nth-of-type(n+31) { display:none; } }
/* Native motion preference overrides every decorative animation. */
@media (prefers-reduced-motion: reduce) {
  .slp-winter-flake, .slp-winter-spark { display: none !important; animation: none !important; }
  .festive-backdrop__glow, #slp-family-root::before,
  .welcome-hero::after, .dashboard-hero::after { animation: none !important; }
}
/* Respect platform preferences for reduced transparency, high contrast, and older engines. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, dialog.modal.glass, .install-dialog, #slp-family-root .slp-family-card { background:rgba(243,249,241,.96); }
  html[data-slp-theme="dark"] .glass,
  html[data-slp-theme="dark"] dialog.modal.glass,
  html[data-slp-theme="dark"] .install-dialog,
  html[data-slp-theme="dark"] #slp-family-root .slp-family-card { background:rgba(18,52,45,.96); }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .glass, dialog.modal.glass, .install-dialog, #slp-family-root .slp-family-card { background:#f0f6ee; }
  html[data-slp-theme="dark"] .glass,
  html[data-slp-theme="dark"] dialog.modal.glass,
  html[data-slp-theme="dark"] .install-dialog,
  html[data-slp-theme="dark"] #slp-family-root .slp-family-card { background:#193c32; }
}

/* --- liquid-glass-v1.7.css --- */

/* Sous le Sapin v1.7 — ultra-transparent glass tune
   Goal: much clearer translucency while keeping strong blur and readability. */
:root {
  --slp-ultra-card: linear-gradient(135deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.08) 38%,
    rgba(220,247,235,.10) 100%);
  --slp-ultra-soft: linear-gradient(135deg,
    rgba(255,255,255,.12) 0%,
    rgba(240,255,248,.06) 100%);
  --slp-ultra-border: rgba(255,255,255,.62);
  --slp-ultra-shadow: 0 20px 60px rgba(15,50,37,.12), inset 0 1px rgba(255,255,255,.85), inset 1px 0 rgba(255,255,255,.22);
}
html[data-slp-theme="dark"] {
  --slp-ultra-card: linear-gradient(135deg,
    rgba(78,133,112,.18) 0%,
    rgba(22,58,51,.12) 50%,
    rgba(8,28,27,.16) 100%);
  --slp-ultra-soft: linear-gradient(135deg,
    rgba(92,151,128,.12) 0%,
    rgba(12,37,34,.08) 100%);
  --slp-ultra-border: rgba(223,255,239,.22);
  --slp-ultra-shadow: 0 24px 72px rgba(0,10,8,.32), inset 0 1px rgba(248,255,251,.20), inset 1px 0 rgba(230,255,242,.08);
}

/* Main large cards / panes */
.glass,
.panel,
.section-card,
.card,
.settings-main > section,
.settings-main > .draw-notification-card,
.dashboard-grid > section,
.dashboard-grid > .glass,
.dashboard-main > section,
.dashboard-main > .glass,
.install-callout,
#slp-family-root .slp-family-card,
#slp-family-root .slp-family-member,
#slp-family-root .slp-family-event,
#slp-family-root .slp-family-picker-row,
.notice:not(.notice-error),
.privacy-banner,
.draw-notification-status,
.connection-notice {
  background: var(--slp-ultra-card) !important;
  background-color: transparent !important;
  border-color: var(--slp-ultra-border) !important;
  box-shadow: var(--slp-ultra-shadow) !important;
  -webkit-backdrop-filter: blur(44px) saturate(190%) brightness(1.04) !important;
  backdrop-filter: blur(44px) saturate(190%) brightness(1.04) !important;
}

/* Modal windows: even more transparent */
dialog.modal.glass,
.install-dialog,
.modal.glass,
.slp-delete-dialog {
  background: linear-gradient(135deg,
    rgba(255,255,255,.18) 0%,
    rgba(244,255,249,.10) 46%,
    rgba(219,241,230,.12) 100%) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 30px 95px rgba(10,42,31,.22), inset 0 1px rgba(255,255,255,.88), inset 1px 0 rgba(255,255,255,.26) !important;
  -webkit-backdrop-filter: blur(52px) saturate(200%) brightness(1.05) !important;
  backdrop-filter: blur(52px) saturate(200%) brightness(1.05) !important;
}
html[data-slp-theme="dark"] dialog.modal.glass,
html[data-slp-theme="dark"] .install-dialog,
html[data-slp-theme="dark"] .modal.glass,
html[data-slp-theme="dark"] .slp-delete-dialog {
  background: linear-gradient(135deg,
    rgba(77,130,109,.20) 0%,
    rgba(17,48,44,.12) 45%,
    rgba(6,25,24,.18) 100%) !important;
  border-color: rgba(228,255,241,.28) !important;
  box-shadow: 0 34px 100px rgba(0,8,8,.46), inset 0 1px rgba(246,255,250,.22) !important;
  -webkit-backdrop-filter: blur(54px) saturate(175%) !important;
  backdrop-filter: blur(54px) saturate(175%) !important;
}

/* Header and floating controls */
.site-header,
.slp-theme-toggle,
.snow-toggle,
.button-soft,
.button-plain,
.slp-family-button.secondary,
.site-header .slp-family-entry,
.install-trigger {
  background: var(--slp-ultra-soft) !important;
  border-color: rgba(255,255,255,.52) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
}
html[data-slp-theme="dark"] .site-header,
html[data-slp-theme="dark"] .slp-theme-toggle,
html[data-slp-theme="dark"] .snow-toggle,
html[data-slp-theme="dark"] .button-soft,
html[data-slp-theme="dark"] .button-plain,
html[data-slp-theme="dark"] .slp-family-button.secondary,
html[data-slp-theme="dark"] .site-header .slp-family-entry,
html[data-slp-theme="dark"] .install-trigger {
  border-color: rgba(228,255,241,.20) !important;
}

/* Inputs keep readability but still reveal background */
.field input, .field select, .field textarea,
.slp-family-form input:not([type=checkbox]),
.slp-family-form textarea,
.modal .field input, .modal .field textarea, .modal .field select {
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(248,255,251,.08)) !important;
  border-color: rgba(255,255,255,.44) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
}
html[data-slp-theme="dark"] .field input,
html[data-slp-theme="dark"] .field select,
html[data-slp-theme="dark"] .field textarea,
html[data-slp-theme="dark"] .slp-family-form input:not([type=checkbox]),
html[data-slp-theme="dark"] .slp-family-form textarea,
html[data-slp-theme="dark"] .modal .field input,
html[data-slp-theme="dark"] .modal .field textarea,
html[data-slp-theme="dark"] .modal .field select {
  background: linear-gradient(135deg, rgba(83,136,115,.14), rgba(11,35,31,.10)) !important;
  border-color: rgba(224,255,238,.22) !important;
}

/* Keep the hero a little denser so white titles stay legible, but still lighter than before */
.welcome-hero,
.dashboard-hero,
#slp-family-root .slp-family-welcome {
  background: radial-gradient(circle at 92% 8%, rgba(157,220,178,.16), transparent 62%),
    linear-gradient(118deg, rgba(13,58,43,.48), rgba(20,76,55,.34) 62%, rgba(21,83,60,.30)) !important;
  border-color: rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: blur(36px) saturate(170%) !important;
  backdrop-filter: blur(36px) saturate(170%) !important;
}
html[data-slp-theme="dark"] :is(.welcome-hero,.dashboard-hero,#slp-family-root .slp-family-welcome) {
  background: radial-gradient(circle at 93% 8%, rgba(157,220,178,.12), transparent 60%),
    linear-gradient(118deg, rgba(12,47,39,.46), rgba(17,59,49,.30) 58%, rgba(16,64,52,.28)) !important;
}

/* Slight text lift for readability on the more transparent surfaces */
.glass h1, .glass h2, .glass h3, .glass p,
#slp-family-root .slp-family-card h1,
#slp-family-root .slp-family-card h2,
#slp-family-root .slp-family-card h3,
#slp-family-root .slp-family-card p,
#slp-family-root .slp-family-card strong,
.modal.glass h2, .modal.glass p, .install-dialog h2, .install-dialog p {
  text-shadow: 0 1px 10px rgba(255,255,255,.12);
}
html[data-slp-theme="dark"] .glass h1,
html[data-slp-theme="dark"] .glass h2,
html[data-slp-theme="dark"] .glass h3,
html[data-slp-theme="dark"] .glass p,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card h1,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card h2,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card h3,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card p,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card strong,
html[data-slp-theme="dark"] .modal.glass h2,
html[data-slp-theme="dark"] .modal.glass p,
html[data-slp-theme="dark"] .install-dialog h2,
html[data-slp-theme="dark"] .install-dialog p {
  text-shadow: 0 1px 12px rgba(0,0,0,.24);
}

/* --- liquid-glass-v1.8.css --- */
/* Sous le Sapin 1.8 — clear crystal glass.
   Very low tint is intentional. Stronger blur in older overlays made the
   backdrop look opaque even with a low alpha. This replaces those rules. */
:root {
  --slp-v18-alpha: .02;            /* 98% transparent by default */
  --slp-v18-blur: 7px;
  --slp-v18-outline: rgba(255,255,255,.53);
  --slp-v18-glass: linear-gradient(125deg,
     rgba(255,255,255,var(--slp-v18-alpha)) 0%,
     rgba(220,255,234,calc(var(--slp-v18-alpha) * .65)) 53%,
     rgba(255,255,255,calc(var(--slp-v18-alpha) * .95)) 100%);
  --slp-v18-subglass: linear-gradient(120deg,
     rgba(255,255,255,calc(var(--slp-v18-alpha) * 1.1)),
     rgba(219,249,233,calc(var(--slp-v18-alpha) * .4)));
}
html[data-slp-theme="dark"] {
  --slp-v18-outline: rgba(233,255,244,.34);
  --slp-v18-glass: linear-gradient(125deg,
     rgba(80,154,118,calc(var(--slp-v18-alpha) * 1.4)) 0%,
     rgba(17,70,54,calc(var(--slp-v18-alpha) * .85)) 55%,
     rgba(16,51,44,calc(var(--slp-v18-alpha) * 1.05)) 100%);
  --slp-v18-subglass: linear-gradient(120deg,
     rgba(85,165,129,calc(var(--slp-v18-alpha) * 1.25)),
     rgba(22,67,53,calc(var(--slp-v18-alpha) * .65)));
}

/* Full cards: the art and snowfall actually show through. The border and
   inset reflection, rather than an opaque fill, define the glass. */
.glass,
#slp-family-root .slp-family-card,
.install-callout,
.settings-main > .draw-notification-card {
  background: var(--slp-v18-glass) !important;
  background-color: transparent !important;
  border: 1px solid var(--slp-v18-outline) !important;
  box-shadow: 0 16px 45px rgba(4,38,28,.14),
     inset 0 1px rgba(255,255,255,.58),
     inset 1px 0 rgba(244,255,250,.22) !important;
  -webkit-backdrop-filter: blur(var(--slp-v18-blur)) saturate(112%) !important;
  backdrop-filter: blur(var(--slp-v18-blur)) saturate(112%) !important;
}
html[data-slp-theme="dark"] :is(.glass,#slp-family-root .slp-family-card,.install-callout,.settings-main > .draw-notification-card) {
  border-color: var(--slp-v18-outline) !important;
  box-shadow: 0 20px 52px rgba(0,9,9,.24),
     inset 0 1px rgba(234,255,243,.29),
     inset 1px 0 rgba(228,255,241,.12) !important;
}

/* Remove the broad dark green wash from the hero, too. */
.welcome-hero.glass,
.dashboard-hero.glass,
#slp-family-root .slp-family-welcome {
  background: linear-gradient(116deg,
     rgba(10,47,35,calc(var(--slp-v18-alpha) * 2.5)),
     rgba(25,92,61,calc(var(--slp-v18-alpha) * 2.0))) !important;
  -webkit-backdrop-filter: blur(var(--slp-v18-blur)) saturate(112%) !important;
  backdrop-filter: blur(var(--slp-v18-blur)) saturate(112%) !important;
  border-color: var(--slp-v18-outline) !important;
}
html[data-slp-theme="dark"] :is(.welcome-hero.glass,.dashboard-hero.glass,#slp-family-root .slp-family-welcome) {
  background: linear-gradient(116deg,
     rgba(5,31,28,calc(var(--slp-v18-alpha) * 2.5)),
     rgba(12,57,42,calc(var(--slp-v18-alpha) * 2.0))) !important;
}
/* Headline contrast without making the entire hero opaque. */
.welcome-hero :is(h1,h2,p), .dashboard-hero :is(h1,h2,p),
#slp-family-root .slp-family-welcome :is(h2,p) {
  text-shadow: 0 2px 12px rgba(2,24,18,.75), 0 0 3px rgba(3,25,21,.52);
}

/* Translucent sub-panels and status chips, but preserve the strong status
   colors on error/danger buttons and warnings. */
.slp-family-member,
.slp-family-event,
.slp-family-picker-row,
#slp-family-root .slp-family-member,
#slp-family-root .slp-family-event,
#slp-family-root .slp-family-picker-row,
.privacy-banner,
.draw-notification-status,
.notice:not(.notice-error):not(.notice-warm),
.family-progress,
.wish-mini,
.settings-option,
.install-platforms {
  background: var(--slp-v18-subglass) !important;
  -webkit-backdrop-filter: blur(calc(var(--slp-v18-blur) * .8)) saturate(110%) !important;
  backdrop-filter: blur(calc(var(--slp-v18-blur) * .8)) saturate(110%) !important;
  border-color: rgba(236,255,245,.27) !important;
}

/* Windows and installation modals — not a 90%-opaque sheet. */
dialog.modal,
dialog.modal.glass,
.install-dialog,
.slp-delete-dialog {
  background: var(--slp-v18-glass) !important;
  background-color: transparent !important;
  border: 1px solid var(--slp-v18-outline) !important;
  box-shadow: 0 30px 85px rgba(0,24,18,.30), inset 0 1px rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(calc(var(--slp-v18-blur) + 4px)) saturate(112%) !important;
  backdrop-filter: blur(calc(var(--slp-v18-blur) + 4px)) saturate(112%) !important;
}
html[data-slp-theme="dark"] :is(dialog.modal,dialog.modal.glass,.install-dialog,.slp-delete-dialog) {
  box-shadow: 0 35px 90px rgba(0,9,10,.54), inset 0 1px rgba(239,255,243,.38) !important;
}
dialog.modal::backdrop { background: rgba(0,20,13,.12) !important; -webkit-backdrop-filter:blur(1px) !important; backdrop-filter:blur(1px) !important; }
html[data-slp-theme="dark"] dialog.modal::backdrop { background: rgba(0,7,5,.24) !important; }

.site-header,
html[data-slp-theme="dark"] .site-header,
.button-soft,
.button-plain,
.slp-theme-toggle,
.snow-toggle,
.install-trigger,
.slp-family-button.secondary,
.site-header .slp-family-entry {
  background: var(--slp-v18-subglass) !important;
  -webkit-backdrop-filter: blur(var(--slp-v18-blur)) saturate(115%) !important;
  backdrop-filter: blur(var(--slp-v18-blur)) saturate(115%) !important;
  border-color: var(--slp-v18-outline) !important;
}
.field input,.field select,.field textarea,
#slp-family-root .slp-family-form input:not([type=checkbox]),
#slp-family-root .slp-family-form textarea {
  background: var(--slp-v18-subglass) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}
html[data-slp-theme="dark"] :is(.field input,.field select,.field textarea,#slp-family-root .slp-family-form input:not([type=checkbox]),#slp-family-root .slp-family-form textarea) {
  color: #f2fff5 !important;
  border-color: rgba(227,255,240,.30) !important;
}

/* A small control lets users select 85..100% transparency and 0..22px blur.
   This control's own scrim remains slightly denser for readability. */
.slp-v18-glass-button {
  position: relative; display: inline-flex; align-items:center; justify-content:center;
  flex: none; border: 1px solid rgba(231,255,243,.45); border-radius: 999px;
  background: rgba(255,255,255,.06); color: inherit; min-height: 34px;
  padding: 7px 12px; gap: 6px; font: 650 12px/1.2 system-ui,sans-serif;
  cursor: pointer; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.slp-v18-glass-button:hover,.slp-v18-glass-button:focus-visible { outline: 2px solid rgba(159,230,191,.67); outline-offset: 2px; }
.slp-v18-glass-button svg { width: 17px; height:17px; stroke: currentColor; fill:none;stroke-width:1.7;stroke-linejoin:round; }
.slp-v18-glass-panel[hidden] { display:none !important; }
.slp-v18-glass-panel {
  position:fixed; right: max(14px,env(safe-area-inset-right)); top: max(65px,calc(env(safe-area-inset-top) + 66px));
  z-index: 10080; width: min(330px,calc(100vw - 28px));
  padding:18px; border-radius:20px; color:#f1fff5;
  background: rgba(16,49,41,.84) !important;
  border: 1px solid rgba(229,255,238,.38);
  box-shadow: 0 22px 60px rgba(0,15,11,.42), inset 0 1px rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  backdrop-filter: blur(15px) saturate(130%);
  font: 14px/1.45 system-ui,sans-serif;
}
.slp-v18-glass-panel .slp-v18-panel-head { display:flex;justify-content:space-between;align-items:center;gap:14px; margin-bottom:12px; }
.slp-v18-glass-panel h3 { margin:0; font-size:17px; font-weight:750; color:#fff; }
.slp-v18-glass-panel label { display:flex; justify-content:space-between; gap:10px; margin:14px 0 6px; font-size:13px; color:#e7f6eb; }
.slp-v18-glass-panel output { font-variant-numeric:tabular-nums; font-weight:700; }
.slp-v18-glass-panel input[type=range] { width:100%;accent-color:#b7f1cf; cursor:pointer; }
.slp-v18-glass-panel small { display:block; margin-top:10px; color:#cae2d3; font-size:12px; line-height:1.5; }
.slp-v18-glass-panel button { background:rgba(223,255,237,.1);color:#fff;border:1px solid rgba(230,255,238,.30);border-radius:10px;padding:7px 11px; cursor:pointer; }
.slp-v18-glass-panel button:focus-visible { outline:2px solid #fff;outline-offset:2px; }
.slp-v18-glass-panel .slp-v18-reset { margin-top:14px; }
.slp-v18-glass-panel .slp-v18-force-snow { margin-top:16px; width:100%; font-weight:700; background:rgba(69,158,107,.27); }
@media(max-width:620px) {
  .slp-v18-glass-button { min-height:31px; padding:6px 9px; }
  .slp-v18-glass-button span { display:none; }
  .slp-v18-glass-panel { top:max(65px,calc(env(safe-area-inset-top) + 65px)); }
}

/* Snow is a SINGLE document-body layer, ABOVE the cards (not beneath the app).
   It never captures touches/clicks, and uses transform-only movement. */
#slp-v18-snow {
  position:fixed; inset:0; height:100dvh; width:100%; z-index:10055;
  pointer-events:none; user-select:none; overflow:hidden; contain: layout style paint;
}
#slp-v18-snow[hidden] {display:none!important;}
.slp-v18-flake {
  position:absolute; top:-25px; left:var(--v18-x); display:block;
  width:var(--v18-size); height:var(--v18-size); border-radius:50%;
  background:rgba(252,255,254,.96);
  border:1px solid rgba(250,255,249,.50);
  box-shadow: 0 0 4px rgba(255,255,255,.72), 0 0 1px rgba(4,62,46,.36);
  opacity:0;
  animation:slp-v18-fall var(--v18-duration) linear var(--v18-delay) infinite;
}
.slp-v18-flake.slp-v18-crystal {
  width:auto;height:auto;border:0;background:transparent;border-radius:0;
  font:var(--v18-size)/1 system-ui,sans-serif;color:rgba(251,255,252,.90);
  text-shadow:0 0 2px rgba(8,56,45,.75),0 0 8px rgba(255,255,255,.35);
  box-shadow:none;
}
@keyframes slp-v18-fall {
  0% { transform:translate3d(0,-25px,0) rotate(0deg);opacity:0; }
  8% { opacity:var(--v18-opacity); }
  86% { opacity:var(--v18-opacity); }
  100% { transform:translate3d(var(--v18-drift),calc(100dvh + 70px),0) rotate(var(--v18-spin));opacity:0; }
}
#slp-v18-snow.slp-v18-paused .slp-v18-flake { animation-play-state: paused !important; }
@media(max-width:700px){ .slp-v18-flake:nth-child(n+49) { display:none; } .slp-v18-flake {box-shadow: 0 0 3px rgba(255,255,255,.65);} }
@media(max-width:390px){ .slp-v18-flake:nth-child(n+41) {display:none;} }
/* Respect reduced motion, except when user deliberately enables animation. */
@media (prefers-reduced-motion:reduce) {
  html:not([data-slp-snow-explicit="on"]) #slp-v18-snow { display:none!important; }
  html:not([data-slp-snow-explicit="on"]) :is(.festive-backdrop__glow,.festive-backdrop__contours,.festive-backdrop__bokeh) { animation:none!important; }
}
@media (prefers-reduced-transparency:reduce), (forced-colors:active) {
  .glass,#slp-family-root .slp-family-card,dialog.modal,.install-dialog {
    background:rgba(240,249,239,.96)!important;
  }
  html[data-slp-theme="dark"] :is(.glass,#slp-family-root .slp-family-card,dialog.modal,.install-dialog) {
    background:rgba(12,44,36,.96)!important;
  }
}

/* When someone explicitly clicks "Activer les flocons", their choice overrides
   reduced motion for decorative background movement in this app only. */
@media (prefers-reduced-motion: reduce) {
  html[data-slp-snow-explicit="on"] .festive-backdrop__contours { animation: festive-backdrop-fluid 28s ease-in-out infinite alternate !important; }
  html[data-slp-snow-explicit="on"] .festive-backdrop__bokeh { animation: festive-backdrop-reflection 24s ease-in-out infinite alternate !important; }
  html[data-slp-snow-explicit="on"] .festive-backdrop__glow { animation: slp-winter-aurora 27s ease-in-out infinite alternate !important; }
  html[data-slp-snow-explicit="on"] #slp-family-root::before { animation:slp-winter-aurora 32s ease-in-out infinite alternate !important; }
}

/* --- layout-and-mobile-v1.9.css --- */
/* Sous le Sapin 1.9 — correctifs de largeur, en-tête mobile et carnet de famille.
   Conçu pour cohabiter avec les styles Liquid Glass de 1.8. Aucun changement serveur. */

/* Une décoration ou un menu ne doit jamais élargir la page. */
html, body { max-width:100%; }
body { overflow-x:clip; }
.app-shell { min-width:0; max-width:100%; }
.site-header { max-width:100%; box-sizing:border-box; }
.site-header > .brand,
.site-header > .desktop-nav,
.site-header > .header-right { min-width:0; }

/* 810-1560px: les commandes ne sont plus en compétition avec la navigation.
   Ce découpage prévient aussi le débordement sur écrans PC 1366px. */
@media (min-width:821px) and (max-width:1700px) {
  .site-header {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:14px;
    row-gap:8px;
    height:auto !important;
    min-height:91px;
    padding-block:12px !important;
  }
  .site-header > .brand { grid-column:1;grid-row:1;justify-self:start;max-width:100%; }
  .site-header > .header-right { grid-column:2;grid-row:1;display:flex;align-items:center;justify-self:end;flex-wrap:nowrap;gap:8px; }
  .site-header > .desktop-nav,
  .site-header > .landing-nav {grid-column:1 / -1;grid-row:2;justify-self:center;justify-content:center;max-width:100%;overflow-x:auto;}
}

/* Mobile et petites tablettes: deux vraies rangées sans défilement horizontal. */
@media (max-width:820px) {
  .site-header {
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:calc(11px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px)) !important;
    overflow:visible;
  }
  .site-header > .brand {
    grid-row:1; grid-column:1;
    max-width:calc(100% - 48px);
    justify-self:start;
    min-width:0;
  }
  .site-header > .brand > span:last-child { min-width:0; }
  .site-header > .header-right {
    grid-row:2; grid-column:1;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    justify-content:flex-end;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    gap:5px !important;
    margin:0;
  }
  .site-header .slp-family-entry {
    order:0;
    margin-right:auto;
    flex:0 1 auto;
    min-width:0;
    min-height:34px !important;
    padding:6px 10px !important;
    font-size:11px !important;
    white-space:nowrap;
  }
  .site-header .slp-v18-glass-button { order:1; width:33px; height:33px; min-width:33px; min-height:33px; padding:6px !important; }
  .site-header .slp-theme-toggle { order:2; width:33px; height:33px; min-width:33px; min-height:33px; }
  .site-header .install-trigger-compact { order:3; width:33px !important; height:33px !important; min-width:33px; min-height:33px; padding:0 !important; }
  .site-header .snow-toggle { order:4; width:33px !important; height:33px !important; min-width:33px; }
  .site-header .header-avatar { order:5; min-width:33px; flex:none; }
  .site-header .header-avatar .avatar { width:33px; height:33px; }
  /* The menu icon belongs to the first row, not after all six controls. */
  .site-header .mobile-menu-toggle {
    position:absolute !important;
    top:calc(12px + env(safe-area-inset-top,0px)) !important;
    right:max(12px,env(safe-area-inset-right,0px)) !important;
    width:34px !important;height:34px !important; min-width:34px;
    z-index:16;
    display:grid !important;
    place-items:center;
  }
  .site-header > .desktop-nav.mobile-open {
    position:absolute !important;
    grid-row:auto; grid-column:auto;
    top:calc(100% - 1px) !important;
    left:12px !important;right:12px !important;
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    z-index:30;
    max-height:calc(100dvh - 150px);
    overflow-y:auto;
  }
  .site-header > .landing-nav {display:none !important;}
  .site-header .header-cta { font-size:11px; flex:0 1 auto; display:inline-flex; min-height:33px; padding:8px 11px; }
  .main-content {min-width:0; max-width:100%;}
}
@media(max-width:350px) {
  .site-header .install-trigger-compact {display:none !important;}
  .site-header .slp-family-entry {padding-inline:7px !important; font-size:10px !important;}
  .site-header > .header-right {gap:4px!important;}
  .site-header .slp-v18-glass-button,
  .site-header .slp-theme-toggle,
  .site-header .snow-toggle {width:31px !important;min-width:31px;height:31px!important;}
}

/* Famille: garder le bouton X à portée du pouce sur tous les écrans et le défilement. */
#slp-family-root { max-width:100%; overflow-x:clip; overscroll-behavior:contain; }
#slp-family-root .slp-family-page,
#slp-family-root .slp-family-wrap,
#slp-family-root .slp-family-head,
#slp-family-root .slp-family-head > div {min-width:0;max-width:100%;}
#slp-family-root .slp-family-head h1,
#slp-family-root .slp-family-head p {overflow-wrap:anywhere;}

@media(max-width:820px) {
  #slp-family-root .slp-family-page {
    padding-top:calc(12px + env(safe-area-inset-top,0px)) !important;
    padding-left:max(13px,env(safe-area-inset-left,0px));
    padding-right:max(13px,env(safe-area-inset-right,0px));
  }
  #slp-family-root .slp-family-top {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px 42px 48px;
    grid-template-rows:48px auto;
    align-items:center;
    gap:8px !important;
    margin-bottom:19px;
    position:relative;
    min-width:0;
    width:100%;
  }
  #slp-family-root .slp-family-top::before {
    content:'MA FAMILLE';
    grid-column:1;grid-row:1;
    align-self:center;
    color:var(--slp-text-soft, #bcd0c4);
    font:700 11px/1.25 system-ui,sans-serif;
    letter-spacing:.08em;
  }
  #slp-family-root .slp-family-head {
    grid-column:1 / -1;
    grid-row:2;
    align-items:flex-start;
    min-width:0;
    width:100%;
  }
  #slp-family-root .slp-family-head > div { min-width:0; }
  #slp-family-root .slp-family-top > .slp-v18-glass-button {
    grid-column:2;grid-row:1;
    min-height:40px;width:40px;
    padding:5px;
    justify-self:center;
  }
  #slp-family-root .slp-family-top > .slp-theme-toggle {
    grid-column:3;grid-row:1;
    width:40px;height:40px;
    min-width:40px;
    justify-self:center;
  }
  #slp-family-root .slp-family-top > .slp-family-icon-button[data-action="close"] {
    position:fixed !important;
    top:calc(12px + env(safe-area-inset-top,0px)) !important;
    right:max(13px,env(safe-area-inset-right,0px)) !important;
    z-index:10090 !important;
    display:grid !important;
    place-items:center !important;
    width:46px !important;
    height:46px !important;
    min-width:46px;
    min-height:46px;
    font-size:27px !important;
    touch-action:manipulation;
    background:rgba(27,68,53,.72) !important;
    border:1px solid rgba(238,255,246,.65) !important;
    color:#fff !important;
    -webkit-backdrop-filter:blur(10px) !important;
    backdrop-filter:blur(10px) !important;
    box-shadow:0 6px 23px rgba(0,20,14,.24) !important;
  }
  #slp-family-root .slp-family-top > .slp-family-icon-button[data-action="close"]:focus-visible {
    outline:3px solid #f3d58c !important;
    outline-offset:2px;
  }
  #slp-family-root .slp-family-two-col {grid-template-columns:minmax(0,1fr)!important;}
  #slp-family-root .slp-family-form-two {grid-template-columns:minmax(0,1fr)!important;}
  #slp-family-root .slp-family-new-person {grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;min-width:0;}
  #slp-family-root .slp-family-new-person input {min-width:0;}
}
/* The canvas must disappear completely when the user disables snow. */
#slp-v19-snow[hidden] { display:none !important; }
#slp-v19-snow { pointer-events:none !important; }

/* The former single-row header could shrink the snow button at large widths. */
@media(min-width:821px) {
 .site-header .snow-toggle { flex: none !important; min-width:35px !important; width:35px !important; height:35px !important; }
 .site-header .header-avatar {flex:none!important;}
}
/* Explicit and visible off status, even if Windows requested reduced motion. */
.site-header .snow-toggle[data-snow-state="off"],
.site-header .snow-toggle[data-snow-state="os-reduced-motion"] {
  color:#e0bb7f !important;
  border-color:rgba(235,188,112,.57) !important;
}
.site-header .snow-toggle[data-snow-state="off"]::after,
.site-header .snow-toggle[data-snow-state="os-reduced-motion"]::after {
  content:'';
  position:absolute;right:1px;top:1px;width:6px;height:6px;
  background:#e3b66c;border-radius:50%;
}
/* Ultra-transparent cards need dark foreground colors in light mode. */
html[data-slp-theme="light"] :is(.welcome-hero,.dashboard-hero) {
  color:#153b2e !important;
}
html[data-slp-theme="light"] :is(.welcome-hero,.dashboard-hero)
  :is(h1,h2,h3,p,.eyebrow,.hero-event-info,.hero-event-info span,.countdown,.countdown span) {
  color:#164734 !important;
  text-shadow:0 1px 7px rgba(255,255,255,.58) !important;
}
html[data-slp-theme="light"] :is(.welcome-hero,.dashboard-hero) em {
  color:#a36d29 !important;
  text-shadow:0 1px 9px rgba(255,255,255,.6) !important;
}
html[data-slp-theme="light"] #slp-family-root .slp-family-welcome :is(h2,p,.slp-family-eyebrow) {
  color:#f6fff8 !important;
  text-shadow:0 2px 10px rgba(2,33,25,.76) !important;
}

/* --- reflection-v2.0.css --- */
/* Sous le Sapin v2.0 — animated reflective glass layer */
:root {
  --slp-reflection-opacity: .95;
  --slp-reflection-speed: 18s;
  --slp-reflection-card-speed: 9.5s;
  --slp-reflection-border: rgba(255,255,255,.34);
  --slp-reflection-shine: rgba(255,255,255,.72);
  --slp-reflection-soft: rgba(226,255,245,.28);
}
html[data-slp-theme="dark"] {
  --slp-reflection-opacity: .92;
  --slp-reflection-border: rgba(228,255,241,.18);
  --slp-reflection-shine: rgba(243,255,251,.62);
  --slp-reflection-soft: rgba(180,255,223,.18);
}

/* Keep content above reflective pseudo-elements. */
.glass,
.panel,
.section-card,
.card,
.site-header,
.install-callout,
.install-dialog,
.modal.glass,
.settings-main > section,
.settings-main > .draw-notification-card,
.dashboard-grid > section,
.dashboard-main > section,
#slp-family-root .slp-family-card,
#slp-family-root .slp-family-member,
#slp-family-root .slp-family-event,
#slp-family-root .slp-family-picker-row,
.notice:not(.notice-error),
.privacy-banner,
.draw-notification-status,
.connection-notice {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.glass > *,
.panel > *,
.section-card > *,
.card > *,
.site-header > *,
.install-callout > *,
.install-dialog > *,
.modal.glass > *,
.slp-v18-glass-panel > *,
.settings-main > section > *,
.settings-main > .draw-notification-card > *,
.dashboard-grid > section > *,
.dashboard-main > section > *,
#slp-family-root .slp-family-card > *,
#slp-family-root .slp-family-member > *,
#slp-family-root .slp-family-event > *,
#slp-family-root .slp-family-picker-row > *,
.notice:not(.notice-error) > *,
.privacy-banner > *,
.draw-notification-status > *,
.connection-notice > * {
  position: relative;
  z-index: 2;
}

/* Big animated passes across each glass surface */
.glass::before,
.panel::before,
.section-card::before,
.card::before,
.site-header::before,
.install-callout::before,
.install-dialog::before,
.modal.glass::before,
.slp-v18-glass-panel::before,
.settings-main > section::before,
.settings-main > .draw-notification-card::before,
.dashboard-grid > section::before,
.dashboard-main > section::before,
#slp-family-root .slp-family-card::before,
#slp-family-root .slp-family-member::before,
#slp-family-root .slp-family-event::before,
#slp-family-root .slp-family-picker-row::before,
.notice:not(.notice-error)::before,
.privacy-banner::before,
.draw-notification-status::before,
.connection-notice::before {
  content: "";
  position: absolute;
  inset: -15% -35%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--slp-reflection-opacity);
  transform: translate3d(-68%, 0, 0) rotate(-15deg);
  background:
    linear-gradient(110deg,
      transparent 0%,
      transparent 18%,
      rgba(255,255,255,.05) 26%,
      rgba(255,255,255,.18) 33%,
      rgba(255,255,255,.58) 39%,
      rgba(255,255,255,.20) 45%,
      rgba(255,255,255,.06) 51%,
      transparent 58%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      transparent 55%,
      rgba(255,255,255,.18) 72%,
      rgba(255,255,255,.42) 78%,
      rgba(255,255,255,.12) 84%,
      transparent 92%);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  animation: slp-card-reflection var(--slp-reflection-card-speed) cubic-bezier(.2,.58,.18,.99) infinite;
}

/* Subtle curved edge glow inside windows */
.glass::after,
.panel::after,
.section-card::after,
.card::after,
.site-header::after,
.install-callout::after,
.install-dialog::after,
.modal.glass::after,
.slp-v18-glass-panel::after,
.settings-main > section::after,
.settings-main > .draw-notification-card::after,
.dashboard-grid > section::after,
.dashboard-main > section::after,
#slp-family-root .slp-family-card::after,
#slp-family-root .slp-family-member::after,
#slp-family-root .slp-family-event::after,
#slp-family-root .slp-family-picker-row::after,
.notice:not(.notice-error)::after,
.privacy-banner::after,
.draw-notification-status::after,
.connection-notice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.55), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 15%),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 22%, transparent 74%, rgba(255,255,255,.08));
  opacity: .9;
}

/* Global moving reflection layer across the entire app */
#slp-reflection-layer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}
#slp-reflection-layer .slp-reflection-pass,
#slp-reflection-layer .slp-reflection-pass-soft,
#slp-reflection-layer .slp-reflection-arc {
  position: absolute;
  pointer-events: none;
  opacity: .98;
  mix-blend-mode: screen;
}
#slp-reflection-layer .slp-reflection-pass {
  top: -18%;
  left: -45%;
  width: 70%;
  height: 140%;
  background: linear-gradient(105deg,
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,.03) 38%,
      rgba(255,255,255,.16) 44%,
      rgba(255,255,255,.55) 49%,
      rgba(255,255,255,.22) 53%,
      rgba(255,255,255,.06) 58%,
      transparent 66%,
      transparent 100%);
  transform: rotate(-16deg);
  filter: blur(2px);
  animation: slp-global-reflection var(--slp-reflection-speed) linear infinite;
}
#slp-reflection-layer .slp-reflection-pass-soft {
  top: -30%;
  left: -30%;
  width: 95%;
  height: 160%;
  background: linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,255,.03) 34%,
      rgba(255,255,255,.13) 48%,
      rgba(255,255,255,.04) 60%,
      transparent 72%);
  transform: rotate(-12deg);
  filter: blur(8px);
  animation: slp-global-reflection-soft calc(var(--slp-reflection-speed) * 1.35) ease-in-out infinite;
}
#slp-reflection-layer .slp-reflection-arc {
  right: -14%;
  bottom: 6%;
  width: min(56vw, 760px);
  height: min(56vw, 760px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 18px rgba(255,255,255,.03),
    0 0 0 56px rgba(255,255,255,.025),
    0 0 120px rgba(255,255,255,.08),
    inset 0 0 90px rgba(255,255,255,.05);
  filter: blur(.3px);
  animation: slp-arc-pulse 12s ease-in-out infinite alternate;
}

html[data-slp-theme="dark"] #slp-reflection-layer .slp-reflection-pass,
html[data-slp-theme="dark"] .glass::before,
html[data-slp-theme="dark"] .panel::before,
html[data-slp-theme="dark"] .section-card::before,
html[data-slp-theme="dark"] .card::before,
html[data-slp-theme="dark"] .site-header::before,
html[data-slp-theme="dark"] .install-callout::before,
html[data-slp-theme="dark"] .install-dialog::before,
html[data-slp-theme="dark"] .modal.glass::before,
html[data-slp-theme="dark"] .slp-v18-glass-panel::before,
html[data-slp-theme="dark"] .settings-main > section::before,
html[data-slp-theme="dark"] .settings-main > .draw-notification-card::before,
html[data-slp-theme="dark"] .dashboard-grid > section::before,
html[data-slp-theme="dark"] .dashboard-main > section::before,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card::before,
html[data-slp-theme="dark"] #slp-family-root .slp-family-member::before,
html[data-slp-theme="dark"] #slp-family-root .slp-family-event::before,
html[data-slp-theme="dark"] #slp-family-root .slp-family-picker-row::before,
html[data-slp-theme="dark"] .notice:not(.notice-error)::before,
html[data-slp-theme="dark"] .privacy-banner::before,
html[data-slp-theme="dark"] .draw-notification-status::before,
html[data-slp-theme="dark"] .connection-notice::before {
  opacity: .96;
}

@keyframes slp-card-reflection {
  0%   { transform: translate3d(-72%, 0, 0) rotate(-15deg); }
  100% { transform: translate3d(72%, 0, 0) rotate(-15deg); }
}
@keyframes slp-global-reflection {
  0%   { transform: translate3d(-8%, 0, 0) rotate(-16deg); }
  100% { transform: translate3d(145%, 0, 0) rotate(-16deg); }
}
@keyframes slp-global-reflection-soft {
  0%,100% { transform: translate3d(-3%, -1%, 0) rotate(-12deg) scale(1); opacity: .78; }
  50% { transform: translate3d(82%, 2%, 0) rotate(-12deg) scale(1.02); opacity: 1; }
}
@keyframes slp-arc-pulse {
  0% { transform: scale(.97) translate3d(0,0,0); opacity: .72; }
  100% { transform: scale(1.035) translate3d(-1.2%, -1.5%, 0); opacity: 1; }
}

@media (max-width: 700px) {
  :root { --slp-reflection-speed: 14s; --slp-reflection-card-speed: 7.5s; }
  #slp-reflection-layer .slp-reflection-pass { width: 95%; left: -64%; }
  #slp-reflection-layer .slp-reflection-pass-soft { width: 125%; left: -58%; }
  #slp-reflection-layer .slp-reflection-arc { width: min(82vw, 520px); height: min(82vw, 520px); right: -24%; }
}

@media (prefers-reduced-motion: reduce) {
  .glass::before,
  .panel::before,
  .section-card::before,
  .card::before,
  .site-header::before,
  .install-callout::before,
  .install-dialog::before,
  .modal.glass::before,
  .slp-v18-glass-panel::before,
  .settings-main > section::before,
  .settings-main > .draw-notification-card::before,
  .dashboard-grid > section::before,
  .dashboard-main > section::before,
  #slp-family-root .slp-family-card::before,
  #slp-family-root .slp-family-member::before,
  #slp-family-root .slp-family-event::before,
  #slp-family-root .slp-family-picker-row::before,
  .notice:not(.notice-error)::before,
  #slp-reflection-layer .slp-reflection-pass,
  #slp-reflection-layer .slp-reflection-pass-soft,
  #slp-reflection-layer .slp-reflection-arc {
    animation: none !important;
  }
}

/* --- glass-panel-fix-v2.1.css --- */
/* Sous le Sapin 2.1 — fixed, anchored Glass settings popup.
   v2.0's reflection selector accidentally changed its positioning to relative.
   Keep the animated reflections but never place the controls in normal document flow. */
#slp-v18-glass-panel {
  position: fixed !important;
  inset: auto auto auto auto !important;
  left: var(--slp-glass-panel-left, auto) !important;
  top: var(--slp-glass-panel-top, max(72px, calc(env(safe-area-inset-top) + 66px))) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(330px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: var(--slp-glass-panel-height, calc(100dvh - 90px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 10095 !important;
  box-sizing: border-box;
}
#slp-v18-glass-panel[hidden] { display: none !important; }
#slp-v18-glass-panel .slp-v18-panel-head {
  position: sticky !important;
  top: -18px;
  z-index: 12;
  padding: 3px 0 8px;
  background: rgba(14,43,36,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 8px;
}
#slp-v18-glass-panel [data-glass-close] {
  min-width: 40px; min-height: 40px;
  display: inline-grid; place-items: center;
  flex: none;
  touch-action: manipulation;
}
@media (max-width: 700px) {
  #slp-v18-glass-panel {
    padding: 16px !important;
    border-radius: 17px;
    width: min(330px, calc(100vw - 24px)) !important;
  }
  #slp-v18-glass-panel .slp-v18-panel-head { top: -16px; }
}
/* The v2.0 shine originally extended far outside the panel and created an
   artificial scrollbar. Animate background-position inside its bounds instead. */
#slp-v18-glass-panel::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  background: linear-gradient(110deg,
    transparent 28%,
    rgba(255,255,255,.09) 42%,
    rgba(255,255,255,.48) 50%,
    rgba(255,255,255,.10) 58%,
    transparent 72%) !important;
  background-size: 300% 100% !important;
  animation: slp-v21-panel-glint 9s linear infinite !important;
}
@keyframes slp-v21-panel-glint {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #slp-v18-glass-panel::before { animation: none !important; }
}

/* --- polish-v2.2.css --- */
/* Sous le sapin v2.2: logo, gentler mobile reflections and real page menu. */

/* Keep the original Gougeon emblem and the full wordmark crisp, regardless of
   the translucency chosen by the visitor. Reflections stay behind the logo. */
.site-header .brand {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  isolation: isolate;
  filter: none !important;
  opacity: 1 !important;
  text-decoration: none;
}
.site-header .brand-mark.brand-mark-app {
  position: relative !important;
  display: block !important;
  flex: 0 0 43px !important;
  width: 43px !important;
  height: 43px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #153e31 !important;
  box-shadow: 0 4px 14px rgba(0,20,17,.22) !important;
  transform: none !important;
  filter: none !important;
}
.site-header .brand-mark.brand-mark-app img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.site-header .brand > span:last-child {
  display: block !important;
  min-width: 0;
  max-width: 100%;
  color: #163e30 !important;
  white-space: nowrap;
  line-height: 1.08;
  font-size: clamp(19px, 2.5vw, 28px);
  text-shadow: 0 1px 9px rgba(250,255,252,.60);
  letter-spacing: -.025em;
}
.site-header .brand .brand-sub {
  display: block !important;
  color: #345d4d !important;
  font-size: clamp(6px, .9vw, 9px) !important;
  letter-spacing: .13em !important;
  line-height: 1.25;
  white-space: nowrap;
  font-family: system-ui, sans-serif;
  font-weight: 650;
  margin-top: 4px;
  text-shadow: 0 1px 6px rgba(255,255,255,.6);
}
html[data-slp-theme="dark"] .site-header .brand > span:last-child {
  color: #f7fff9 !important;
  text-shadow: 0 1px 8px rgba(0,21,14,.85), 0 2px 2px rgba(0,24,17,.55) !important;
}
html[data-slp-theme="dark"] .site-header .brand .brand-sub {
  color: #d5eade !important;
  text-shadow: 0 1px 8px rgba(0,23,17,.88) !important;
}
/* Background light shouldn't completely wash out the main logo. */
.site-header::before { opacity: .24 !important; }
.site-header::after  { opacity: .10 !important; }

/* New hamburger uses the real app navigation without modifying its API. */
.slp-quick-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  min-width: 39px;
  min-height: 39px;
  border-radius: 13px;
  border: 1px solid rgba(245,255,248,.42);
  background: rgba(22,70,54,.26);
  color: #1c4d39;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 3px 13px rgba(0,25,18,.10);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  cursor: pointer;
  touch-action: manipulation;
  z-index: 30;
}
html[data-slp-theme="dark"] .slp-quick-toggle {
  color: #f2fff7;
  background: rgba(12,51,41,.36);
}
.slp-quick-toggle > span { display: grid; gap: 4px; width: 19px; }
.slp-quick-toggle i {
  display:block;
  width:19px;
  height:2.2px;
  border-radius:10px;
  background: currentColor;
  box-shadow:0 1px 5px rgba(0,0,0,.1);
}
.slp-quick-toggle:focus-visible,
#slp-quick-menu button:focus-visible {
  outline: 3px solid #e7c577;
  outline-offset: 3px;
}
html.slp-quick-ready .site-header .mobile-menu-toggle { display: none !important; }
#slp-quick-scrim[hidden], #slp-quick-menu[hidden], #slp-quick-note[hidden] { display:none!important; }
#slp-quick-scrim {
  position: fixed;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgba(3,19,15,.25);
  z-index: 10115;
  cursor: default;
}
#slp-quick-menu {
  position: fixed;
  z-index: 10116;
  width: min(360px, calc(100vw - 24px));
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px;
  border: 1px solid rgba(242,255,247,.43);
  color: #f5fff8;
  background: linear-gradient(140deg, rgba(25,75,60,.93), rgba(11,43,36,.94));
  box-shadow: 0 26px 80px rgba(2,18,14,.42), inset 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  font: 14px/1.45 system-ui, sans-serif;
}
#slp-quick-menu *, #slp-quick-menu *::before, #slp-quick-menu *::after { box-sizing:border-box; }
#slp-quick-menu .slp-quick-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 6px 13px;
  border-bottom:1px solid rgba(240,255,245,.18);
  margin-bottom:7px;
}
#slp-quick-menu .slp-quick-head strong { font: 750 15px system-ui, sans-serif; }
#slp-quick-menu .slp-quick-close {
  display:grid;place-items:center;
  width:37px;height:37px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.23);
  border-radius:11px;
  color:#fff;
  cursor:pointer;
  font: 26px/1 system-ui,sans-serif;
}
#slp-quick-menu .slp-quick-row {
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  padding:12px 11px;
  margin:2px 0;
  border:1px solid transparent;
  border-radius:13px;
  background: transparent;
  color:#fff;
  cursor:pointer;
  font-family:system-ui,sans-serif;
}
#slp-quick-menu .slp-quick-row[hidden] { display:none!important; }
#slp-quick-menu .slp-quick-row:hover,
#slp-quick-menu .slp-quick-row:focus-visible {
  background: rgba(238,255,246,.13);
  border-color:rgba(238,255,246,.25);
}
#slp-quick-menu .slp-quick-icon {
  display:grid;place-items:center;
  flex:0 0 36px;
  width:36px;height:36px;
  font-size:22px;
  line-height:1;
  color:#e7d4a1;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
}
#slp-quick-menu .slp-quick-copy {display:grid;gap:3px; min-width:0; flex:1;}
#slp-quick-menu .slp-quick-copy strong { font: 700 14px/1.3 system-ui,sans-serif; }
#slp-quick-menu .slp-quick-copy small { color:#c8ded1; font: 11px/1.35 system-ui,sans-serif; }
#slp-quick-note {
  position: fixed;
  z-index: 10120;
  left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  background:rgba(13,48,38,.94);
  color:#fafffc;
  border:1px solid rgba(225,255,238,.40);
  border-radius:12px;
  box-shadow:0 12px 35px rgba(0,16,13,.3);
  padding:12px 16px;
  width:max-content;
  max-width:calc(100vw - 24px);
  font:600 13px/1.45 system-ui,sans-serif;
}

/* On phones, reduce BOTH reflection layers. The previous overlay was globally
   bright and each card had another independent glint, doubling the effect. */
@media(max-width:820px) {
  #slp-reflection-layer { opacity: .14 !important; }
  #slp-reflection-layer .slp-reflection-pass-soft { opacity:.35 !important; }
  #slp-reflection-layer .slp-reflection-arc { opacity:.22 !important; }
  .glass::before,.panel::before,.section-card::before,.card::before,
  .site-header::before,.install-callout::before,.install-dialog::before,
  .modal.glass::before,.slp-v18-glass-panel::before,
  .settings-main > section::before,.settings-main > .draw-notification-card::before,
  .dashboard-grid > section::before,.dashboard-main > section::before,
  #slp-family-root .slp-family-card::before,
  #slp-family-root .slp-family-member::before,
  #slp-family-root .slp-family-event::before,
  #slp-family-root .slp-family-picker-row::before,
  .notice:not(.notice-error)::before,.privacy-banner::before,
  .draw-notification-status::before,.connection-notice::before {
    opacity:.13!important;
    animation-duration:20s!important;
  }
  .glass::after,.panel::after,.section-card::after,.card::after,
  .site-header::after,.install-callout::after,.install-dialog::after,
  .modal.glass::after,.slp-v18-glass-panel::after,
  .settings-main > section::after,.settings-main > .draw-notification-card::after,
  .dashboard-grid > section::after,.dashboard-main > section::after,
  #slp-family-root .slp-family-card::after,
  #slp-family-root .slp-family-member::after,
  #slp-family-root .slp-family-event::after,
  #slp-family-root .slp-family-picker-row::after,
  .notice:not(.notice-error)::after,.privacy-banner::after,
  .draw-notification-status::after,.connection-notice::after {
    opacity:.10!important;
  }
  .site-header { overflow: hidden; }
  .site-header .slp-quick-toggle {
    position:absolute!important;
    top:calc(13px + env(safe-area-inset-top,0px))!important;
    right:max(12px,env(safe-area-inset-right,0px))!important;
    width:41px!important;
    height:41px!important;
    min-height:41px!important;
    min-width:41px!important;
  }
  .site-header .brand > span:last-child { font-size:clamp(19px,5.7vw,26px) !important; }
  .site-header .brand .brand-sub { font-size:7.5px!important; }
  #slp-quick-menu { border-radius:17px; padding:8px; }
  #slp-quick-menu .slp-quick-row { padding:11px 9px; }
}
@media(max-width:350px) {
  .site-header .brand > span:last-child {font-size:19px!important;}
  .site-header .brand-mark.brand-mark-app {width:39px!important;height:39px!important;flex-basis:39px!important;}
}
@media(max-width:820px) {
  /* v2.0 reflection CSS gives every header child position:relative; that
     accidentally anchors an absolute menu button to row 2. Use the header. */
  .site-header > .header-right { position:static !important; }
}

/* --- color-theme-v2.3.css --- */
/* Sous le Sapin v2.3 — palette personnalisable. Sans couleur choisie,
   aucune règle ne s'applique : le vert original reste STRICTEMENT intact. */

/* La véritable roulette, avec pastilles et couleur personnalisée. */
#slp-v18-glass-panel #slp-v23-colors {
  position:relative;
  z-index:4;
  border-top:1px solid rgba(235,255,244,.22);
  margin-top:18px;
  padding-top:16px;
  min-width:0;
}
#slp-v18-glass-panel #slp-v23-colors h4 {
  color:#f8fff9;
  font:750 15px/1.3 system-ui,sans-serif;
  margin:0 0 8px;
}
#slp-v18-glass-panel #slp-v23-colors .slp-v23-help {
  margin:0 0 13px;
  font:12px/1.5 system-ui,sans-serif;
  color:#d4eadd;
}
#slp-v18-glass-panel .slp-v23-swatches {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:0 0 12px;
}
#slp-v18-glass-panel .slp-v23-swatches button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:66px;
  padding:6px 2px;
  border-radius:12px;
  background:rgba(241,255,250,.055);
  border:1px solid rgba(226,255,239,.19);
  font:650 10px/1.15 system-ui,sans-serif;
  color:#effcf5;
  touch-action:manipulation;
}
#slp-v18-glass-panel .slp-v23-swatches button.selected {
  background:rgba(251,255,252,.18);
  border:2px solid rgba(255,255,255,.90);
  box-shadow:0 0 0 2px rgba(158,222,200,.22),0 0 18px rgba(249,255,251,.15);
}
#slp-v18-glass-panel .slp-v23-dot,
#slp-v18-glass-panel .slp-v23-original-mark {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.52);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.12);
}
#slp-v18-glass-panel .slp-v23-original-mark {
  background:linear-gradient(135deg,#367451,#153e30);
  font-size:17px;
}
#slp-v18-glass-panel .slp-v23-custom {
  display:flex;
  gap:13px;
  align-items:center;
  min-width:0;
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.23);
}
#slp-v18-glass-panel .slp-v23-wheel-label {
  position:relative;
  display:block;
  flex:none;
  width:65px;
  height:65px;
  padding:0;
  margin:0;
  cursor:pointer;
}
#slp-v18-glass-panel .slp-v23-wheel-visual {
  display:grid;
  place-items:center;
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(#f66 0deg,#f5c35f 50deg,#83d66c 110deg,#53c9ba 170deg,#5a98ee 230deg,#b47dea 290deg,#f66 360deg);
  box-shadow:0 0 0 2px rgba(255,255,255,.48),0 3px 15px rgba(0,0,0,.20);
  pointer-events:none;
}
#slp-v18-glass-panel .slp-v23-color-center {
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:3px solid #e8fff2;
  background:#28634b;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}
#slp-v18-glass-panel #slp-v23-wheel {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
  z-index:2;
  touch-action:manipulation;
}
#slp-v18-glass-panel .slp-v23-wheel-label:focus-within .slp-v23-wheel-visual {
  outline:3px solid #fff;outline-offset:4px;
}
#slp-v18-glass-panel .slp-v23-custom-detail {
  flex:1;
  min-width:0;
  display:grid;
  gap:5px;
  color:#fff;
}
#slp-v18-glass-panel .slp-v23-custom-detail strong {font:700 12px system-ui,sans-serif;}
#slp-v18-glass-panel .slp-v23-custom-detail span {font:11px/1.4 system-ui,sans-serif;color:#d8ece0;}
#slp-v18-glass-panel .slp-v23-custom-detail label {margin:2px 0 0;font:650 11px system-ui,sans-serif;}
#slp-v18-glass-panel #slp-v23-hex {
  height:34px;
  min-width:0;
  width:100%;
  padding:7px 9px;
  color:white;
  background:rgba(7,27,23,.42);
  border:1px solid rgba(243,255,248,.38);
  border-radius:9px;
  font:600 13px/1 system-ui,sans-serif;
  letter-spacing:.03em;
}
#slp-v18-glass-panel #slp-v23-hex[aria-invalid="true"] {border:2px solid #ffac9e;}
#slp-v18-glass-panel .slp-v23-current {
  margin:9px 0 5px;
  color:#e2f8ea;
  font:650 11px/1.4 system-ui,sans-serif;
}
#slp-v18-glass-panel .slp-v23-reset {
  width:100%;
  margin-top:7px;
  min-height:36px;
  font:700 12px/1.3 system-ui,sans-serif;
}

/* Palette vivante : seules les couleurs, pas le fonctionnement, changent. */
html[data-slp-color="custom"] {
  --slp-accent:var(--slp-v23-deep);
  --slp-text:var(--slp-v23-ink);
  --slp-text-soft:var(--slp-v23-muted);
  --pine:var(--slp-v23-deep);
  --pine-deep:var(--slp-v23-night);
  --slp-v18-outline:rgba(var(--slp-v23-rgb),.42);
  --slp-v18-glass:linear-gradient(130deg,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 1.20)) 0%,
    rgba(255,255,255,calc(var(--slp-v18-alpha) * .9)) 45%,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 1.1)) 100%);
  --slp-v18-subglass:linear-gradient(125deg,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 1.05)),
    rgba(255,255,255,calc(var(--slp-v18-alpha) * .65)));
}
html[data-slp-color="custom"][data-slp-theme="dark"] {
  --slp-accent:var(--slp-v23-bright);
  --slp-text:#f4f7fb;
  --slp-text-soft:#ccd4dd;
  --pine:var(--slp-v23-bright);
  --slp-v18-outline:rgba(var(--slp-v23-rgb),.35);
  --slp-v18-glass:linear-gradient(125deg,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 1.25)),
    rgba(12,19,28,calc(var(--slp-v18-alpha) * .95)) 50%,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * .85)));
  --slp-v18-subglass:linear-gradient(120deg,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 1.3)),
    rgba(16,21,30,calc(var(--slp-v18-alpha) * .8)));
}
html[data-slp-color="custom"] body {
  background:
    radial-gradient(ellipse 60vw 70vh at 94% 4%, rgba(var(--slp-v23-rgb),.26),transparent 73%),
    radial-gradient(ellipse 65vw 65vh at 4% 88%,rgba(var(--slp-v23-rgb),.16),transparent 75%),
    linear-gradient(125deg,var(--slp-v23-pale),var(--slp-v23-pale2) 63%,var(--slp-v23-pale)) !important;
}
html[data-slp-color="custom"][data-slp-theme="dark"] body {
  background:
    radial-gradient(ellipse 65vw 75vh at 94% 4%,rgba(var(--slp-v23-rgb),.34),transparent 78%),
    radial-gradient(ellipse 70vw 65vh at 0% 95%,rgba(var(--slp-v23-rgb),.17),transparent 79%),
    linear-gradient(125deg,var(--slp-v23-night),var(--slp-v23-night2) 56%,var(--slp-v23-night)) !important;
}
html[data-slp-color="custom"] .festive-backdrop__glow--pine,
html[data-slp-color="custom"] .festive-backdrop__glow--mint {
  background:var(--slp-v23-hex) !important;
  opacity:.29;
}
html[data-slp-color="custom"] .festive-backdrop__glow--gold {
  background:var(--slp-v23-highlight) !important;
  opacity:.24;
}
html[data-slp-color="custom"] .festive-backdrop__contours {
  filter:hue-rotate(var(--slp-v23-rotation));
}
html[data-slp-color="custom"] .festive-backdrop__bokeh {
  background:radial-gradient(circle at 32% 27%,rgba(var(--slp-v23-rgb),.23),transparent 67%);
  border-color:rgba(var(--slp-v23-rgb),.28);
}
/* Aperçu immédiat sur toutes les surfaces, y compris le carnet permanent. */
html[data-slp-color="custom"] #slp-family-root {
  background:
    radial-gradient(ellipse 680px 620px at 102% 0%,rgba(var(--slp-v23-rgb),.27),transparent 78%),
    radial-gradient(ellipse 640px 670px at 0% 100%,rgba(var(--slp-v23-rgb),.13),transparent 82%),
    linear-gradient(128deg,var(--slp-v23-pale),var(--slp-v23-pale2) 61%,var(--slp-v23-pale)) !important;
}
html[data-slp-color="custom"][data-slp-theme="dark"] #slp-family-root {
  background:
    radial-gradient(ellipse 760px 650px at 100% 0%,rgba(var(--slp-v23-rgb),.23),transparent 80%),
    radial-gradient(ellipse 720px 620px at 0% 96%,rgba(var(--slp-v23-rgb),.13),transparent 83%),
    linear-gradient(128deg,var(--slp-v23-night),var(--slp-v23-night2) 58%,var(--slp-v23-night)) !important;
}
html[data-slp-color="custom"] #slp-family-root::before {
  background-image:repeating-linear-gradient(155deg,transparent 0 56px,rgba(var(--slp-v23-rgb),.14) 57px,transparent 58px 118px) !important;
}
html[data-slp-color="custom"] :is(.welcome-hero.glass,.dashboard-hero.glass,#slp-family-root .slp-family-welcome) {
  background:linear-gradient(115deg,
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 3.2)),
    rgba(var(--slp-v23-rgb),calc(var(--slp-v18-alpha) * 2.3))) !important;
}
html[data-slp-color="custom"] :is(.button:not(.button-gold):not(.button-danger):not(.button-soft):not(.button-plain),
 .slp-family-button:not(.secondary):not(.gold):not(.danger)) {
  background:linear-gradient(135deg,var(--slp-v23-button),var(--slp-v23-button-deep)) !important;
  border-color:rgba(255,255,255,.23) !important;
  color:#fff !important;
}
html[data-slp-color="custom"] :is(.button-soft,.button-plain,.slp-family-button.secondary,
 .desktop-nav button.active,.site-header .slp-family-entry,.snow-toggle,.slp-theme-toggle,.slp-quick-toggle) {
  background:rgba(var(--slp-v23-rgb),.13) !important;
  border-color:rgba(var(--slp-v23-rgb),.34) !important;
}
html[data-slp-color="custom"] :is(.event-chip,.soft-badge,.tiny-label,.slp-family-tag,
 .slp-family-avatar,.setting-icon,.setting-feature-icon,.privacy-icon,.step-icon) {
  background:rgba(var(--slp-v23-rgb),.13) !important;
  border-color:rgba(var(--slp-v23-rgb),.30) !important;
}
html[data-slp-color="custom"] :is(.desktop-nav button.active,.text-link,.slp-family-text-btn,
 .field > span,.setting-icon,.setting-feature-icon) {
  color:var(--slp-v23-deep) !important;
}
html[data-slp-color="custom"] #slp-quick-menu {
  background:linear-gradient(138deg,var(--slp-v23-button-deep),var(--slp-v23-night)) !important;
}
html[data-slp-color="custom"] #slp-v18-glass-panel {
  background:linear-gradient(145deg,var(--slp-v23-button-deep),var(--slp-v23-night)) !important;
}
html[data-slp-color="custom"] .slp-v18-force-snow,
html[data-slp-color="custom"] .slp-v23-reset {
  background:rgba(var(--slp-v23-rgb),.22) !important;
}
html[data-slp-color="custom"] .site-header .brand > span:last-child {
  color:var(--slp-v23-ink) !important;
}
html[data-slp-color="custom"] .site-header .brand .brand-sub {
  color:var(--slp-v23-muted) !important;
}
html[data-slp-color="custom"] #slp-family-root :is(h1,h2,.slp-family-member-info strong,.slp-family-form label:not(.slp-family-checkbox):not(.slp-family-picker-row)) {
  color:var(--slp-v23-ink) !important;
}
html[data-slp-color="custom"][data-slp-theme="dark"] :is(.desktop-nav button.active,.text-link,.slp-family-text-btn,
 .field > span,.setting-icon,.setting-feature-icon) {
  color:var(--slp-v23-bright) !important;
}
html[data-slp-color="custom"][data-slp-theme="dark"] .site-header .brand > span:last-child {
  color:#f4f8fc !important;
}
html[data-slp-color="custom"][data-slp-theme="dark"] .site-header .brand .brand-sub {
  color:#cdd4dc !important;
}
html[data-slp-color="custom"][data-slp-theme="dark"] #slp-family-root :is(h1,h2,.slp-family-member-info strong,.slp-family-form label:not(.slp-family-checkbox):not(.slp-family-picker-row)) {
  color:#f4f7fb !important;
}
/* La couleur d'origine des avertissements, erreurs et suppressions reste inchangée. */

html[data-slp-color="custom"] #slp-v18-glass-panel input[type="range"],
html[data-slp-color="custom"] #slp-family-root input[type="checkbox"],
html[data-slp-color="custom"] .field input[type="checkbox"] {
  accent-color:var(--slp-v23-highlight) !important;
}

/* --- desktop-125-v2.4.css --- */
/* Sous le sapin v2.4 — desktop composition equivalent to browser 125%.
   Browser zoom itself cannot be set by a website. Scale only the desktop
   application, and make navigation explicitly two rows to avoid collisions.
   Mobile layout (<= 820px) is untouched. */
@media (min-width: 1200px) {
  #root > .app-shell,
  #slp-family-root {
    zoom: 1.25;
  }

  /* A browser zoom of 125% turns a 1920px viewport into ~1536 CSS px.
     Our app-shell zoom does not change media-query breakpoints, so reproduce
     the corresponding header grid even at the real 1920px breakpoint. */
  #root .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-items: stretch;
    column-gap: 14px !important;
    row-gap: 8px !important;
    width: 100%;
    height: auto !important;
    min-height: 91px !important;
    padding: 12px max(24px, calc(40vw - 578px)) !important;
  }

  #root .site-header > .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0 !important;
    justify-self: start !important;
  }

  #root .site-header > .header-right {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    position: relative;
  }

  #root .site-header > .desktop-nav,
  #root .site-header > .landing-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
    width: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #root .site-header > .desktop-nav::-webkit-scrollbar,
  #root .site-header > .landing-nav::-webkit-scrollbar { display: none; }

  #root .site-header .slp-quick-toggle,
  #root .site-header .slp-v18-glass-button,
  #root .site-header .slp-theme-toggle,
  #root .site-header .snow-toggle {
    flex-shrink: 0 !important;
  }

  /* Keep large dialogs inside the visual viewport when scaled. */
  #root dialog.modal,
  #root .install-dialog { max-height: min(75dvh, 740px) !important; overflow-y: auto; }
}

/* --- window-behavior-v2.5.css --- */
/* Sous le Sapin v2.5 — blurry overlays, context-aware outside tap.
   Native modal dialogs use ::backdrop, Liquid Glass/quick menu use separate scrims.
   Never blur the whole app shell (breaks positioning/fixed layers). */

dialog.modal[open]::backdrop,
dialog.install-dialog[open]::backdrop {
  background: rgba(9,30,25,.32) !important;
  -webkit-backdrop-filter: blur(14px) saturate(122%) !important;
  backdrop-filter: blur(14px) saturate(122%) !important;
}
html[data-slp-theme="dark"] dialog.modal[open]::backdrop,
html[data-slp-theme="dark"] dialog.install-dialog[open]::backdrop {
  background: rgba(1,12,11,.45) !important;
  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
}

/* When the glass settings flyout is open, this layer also blocks underlying
   controls. On phone tapping it closes; on desktop it stays until X is used. */
#slp-v25-glass-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10090;
  width: 100%;
  height: 100dvh;
  background: rgba(8,29,23,.27);
  -webkit-backdrop-filter: blur(13px) saturate(118%);
  backdrop-filter: blur(13px) saturate(118%);
  pointer-events: auto;
  cursor: default;
}
#slp-v25-glass-backdrop[hidden] {display:none!important;}
html[data-slp-theme="dark"] #slp-v25-glass-backdrop {background:rgba(0,14,12,.38);}
#slp-v18-glass-panel:not([hidden]) {z-index:10095!important;}

/* The quick navigation menu already has a full-screen scrim. Add real frosted
   blur rather than just a dark translucent wash. */
#slp-quick-scrim:not([hidden]) {
  background: rgba(9,29,23,.29) !important;
  -webkit-backdrop-filter: blur(13px) saturate(122%) !important;
  backdrop-filter: blur(13px) saturate(122%) !important;
}
html[data-slp-theme="dark"] #slp-quick-scrim:not([hidden]) {background:rgba(1,12,11,.39)!important;}

@media(max-width:820px) {
  dialog.modal[open]::backdrop,
  dialog.install-dialog[open]::backdrop { -webkit-backdrop-filter:blur(11px) saturate(115%)!important; backdrop-filter:blur(11px) saturate(115%)!important; }
  #slp-v25-glass-backdrop, #slp-quick-scrim:not([hidden]) {
    -webkit-backdrop-filter:blur(10px) saturate(115%)!important;
    backdrop-filter:blur(10px) saturate(115%)!important;
  }
}
@media(forced-colors:active) {
  dialog.modal[open]::backdrop, dialog.install-dialog[open]::backdrop,
  #slp-v25-glass-backdrop, #slp-quick-scrim:not([hidden]) {
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:rgba(0,0,0,.70)!important;
  }
}

/* --- glass-desktop-preview-v2.6.css --- */
/* Sous le Sapin v2.6 — aperçu en direct du Liquid Glass, PC et mobile.
 * La couche est conservée pour bloquer les clics derrière le panneau,
 * et pour fermer au toucher extérieur sur mobile; elle n'ajoute ni flou,
 * ni teinte. Les autres modales et le menu rapide gardent leur fond flouté. */
#slp-v25-glass-backdrop:not([hidden]) {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* Assure que le fond de la page et les interactions sont inchangés.
   Le panneau reste au-dessus du calque transparent. */
#slp-v18-glass-panel:not([hidden]) {
  z-index: 10095 !important;
}

/* Panneau réduit et scrollable sur téléphones et tablettes tactiles. */
@media (max-width: 1024px) and (pointer: coarse) {
  #slp-v18-glass-panel {
    width: min(280px, calc(100vw - 30px)) !important;
    max-width: calc(100vw - 30px) !important;
    max-height: min(var(--slp-glass-panel-height, 72dvh), 72dvh) !important;
    padding: 12px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  #slp-v18-glass-panel .slp-v18-panel-head {
    top: -12px !important;
    margin-bottom: 5px !important;
    padding-bottom: 5px !important;
    gap: 8px;
  }
  #slp-v18-glass-panel .slp-v18-panel-head h3 {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  #slp-v18-glass-panel [data-glass-close] {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  #slp-v18-glass-panel > label {
    font-size: 12px !important;
    margin: 8px 0 4px !important;
  }
  #slp-v18-glass-panel > input[type="range"] {
    min-height: 32px;
    margin: 0 !important;
    touch-action: pan-y;
  }
  #slp-v18-glass-panel > small {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    margin-top: 5px !important;
  }
  #slp-v18-glass-panel .slp-v18-reset {
    margin-top: 8px !important;
    font-size: 11px !important;
  }
  #slp-v18-glass-panel #slp-v23-colors {
    margin-top: 10px !important;
    padding-top: 9px !important;
  }
  #slp-v18-glass-panel #slp-v23-colors h4 {
    font-size: 13px !important;
    margin-bottom: 5px !important;
  }
  #slp-v18-glass-panel #slp-v23-colors .slp-v23-help {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
  }
  #slp-v18-glass-panel .slp-v23-swatches {
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  #slp-v18-glass-panel .slp-v23-swatches button {
    min-height: 52px !important;
    gap: 2px !important;
    padding: 4px 1px !important;
    font-size: 9px !important;
    border-radius: 9px !important;
  }
  #slp-v18-glass-panel .slp-v23-dot,
  #slp-v18-glass-panel .slp-v23-original-mark {
    width: 23px !important;
    height: 23px !important;
  }
  #slp-v18-glass-panel .slp-v23-custom {
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }
  #slp-v18-glass-panel .slp-v23-wheel-label {
    width: 51px !important;
    height: 51px !important;
  }
  #slp-v18-glass-panel .slp-v23-color-center { inset: 9px !important; }
  #slp-v18-glass-panel .slp-v23-current { margin-top: 5px !important; }
  #slp-v18-glass-panel .slp-v23-reset { min-height: 40px !important; }
}
/* Les appareils mobiles très courts doivent pouvoir scroller jusqu'au bas. */
@media (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
  #slp-v18-glass-panel {
    max-height: min(var(--slp-glass-panel-height, 64dvh), 64dvh) !important;
  }
}
@media (forced-colors: active) {
  /* Sous les contrastes forcés, un léger fond reste indispensable à la lisibilité. */
  #slp-v25-glass-backdrop:not([hidden]) {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* --- bubble-depth-v2.7.css --- */
/* Sous le Sapin v2.7 — relief cristallin, volume 3D et bulles lumineuses.
   Uniquement visuel : ne modifie ni les couleurs de fond réglables, ni l'API.
   Le shader est DERRIÈRE les cartes, la neige et les fenêtres. */
:root {
  --slp-depth-tint: var(--slp-v23-rgb, 107, 203, 165);
  --slp-depth-warm: 238, 211, 155;
  --slp-depth-shade: 8, 44, 35;
  --slp-depth-rim: rgba(246, 255, 250, .75);
  --slp-depth-under: rgba(6, 43, 35, .20);
  --slp-depth-shadow: 0 24px 64px rgba(5, 39, 33, .19),
    0 8px 18px rgba(5, 36, 29, .12),
    inset 0 2px 1px rgba(255,255,255,.82),
    inset 1px 0 1px rgba(245,255,249,.43),
    inset -1px 0 2px rgba(8,60,50,.17),
    inset 0 -7px 18px rgba(10,67,52,.07);
}
html[data-slp-theme="dark"] {
  --slp-depth-rim: rgba(229, 255, 242, .51);
  --slp-depth-under: rgba(0, 12, 14, .37);
  --slp-depth-shadow: 0 29px 76px rgba(0, 11, 14, .37),
    0 9px 21px rgba(0, 15, 15, .29),
    inset 0 2px 1px rgba(247,255,251,.43),
    inset 1px 0 1px rgba(206,255,230,.22),
    inset -1px 0 2px rgba(0,19,18,.28),
    inset 0 -8px 24px rgba(0,19,20,.18);
}

/* Full-screen decorative shader: mounted inside the pre-existing backdrop.
   Because it lives below app content, it never intercepts touch/clicks. */
#slp-v27-bubble-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
  opacity: .97;
}
#slp-v27-bubble-field canvas {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
#slp-v27-bubble-field[data-renderer="fallback"] canvas,
#slp-v27-bubble-field[data-renderer="pending"] canvas { display:none; }
#slp-v27-bubble-field .slp-v27-fallback-orb {
  position: absolute;
  display: none;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(242,255,251,.60);
  background:
    radial-gradient(ellipse at 26% 20%,rgba(255,255,255,.64) 0%,rgba(255,255,255,.16) 9%,transparent 30%),
    radial-gradient(circle at 70% 77%,rgba(var(--slp-depth-tint),.12),transparent 61%),
    radial-gradient(circle at 50% 50%,transparent 55%,rgba(255,255,255,.17) 78%,rgba(247,255,250,.42) 98%);
  box-shadow: inset -9px -14px 28px rgba(29,98,78,.08),
    inset 3px 6px 19px rgba(255,255,255,.26),
    0 17px 50px rgba(6,57,43,.09),0 0 35px rgba(232,255,245,.12);
}
#slp-v27-bubble-field[data-renderer="fallback"] .slp-v27-fallback-orb { display: block; }
#slp-v27-bubble-field .slp-v27-fallback-orb:nth-of-type(1) {left:-80px; top:22%;width:clamp(155px,23vw,365px);animation:slp-v27-float-one 13s ease-in-out infinite alternate;}
#slp-v27-bubble-field .slp-v27-fallback-orb:nth-of-type(2) {right:-100px;bottom:6%;width:clamp(220px,28vw,430px);animation:slp-v27-float-two 16s ease-in-out infinite alternate;}
#slp-v27-bubble-field .slp-v27-fallback-orb:nth-of-type(3) {right:13%;top:7%;width:clamp(90px,13vw,170px);animation:slp-v27-float-one 18s ease-in-out -8s infinite alternate;}
@keyframes slp-v27-float-one {to { transform:translate3d(12px,-22px,0) scale(1.07); }}
@keyframes slp-v27-float-two {to { transform:translate3d(-17px,20px,0) scale(.96); }}
#slp-family-root:not([hidden]) > #slp-v27-bubble-field {z-index:0;}
#slp-family-root:not([hidden]) > .slp-family-page {position:relative;z-index:1;}

/* The outer edge stays translucent — glass controls (85-100%) remain in charge
   of fill opacity. Relief comes from highlights and inset shading instead. */
.main-content .glass,
#slp-family-root .slp-family-card,
#slp-family-root .slp-family-welcome,
.install-callout,
#slp-quick-menu,
.slp-v18-glass-panel,
dialog.modal,
dialog.install-dialog {
  box-shadow: var(--slp-depth-shadow) !important;
  border-top-color: var(--slp-depth-rim) !important;
  border-left-color: rgba(245,255,250,.50) !important;
  border-bottom-color: rgba(var(--slp-depth-shade), .20) !important;
}
/* Large showcase cards have more pronounced elevation. */
:is(.main-content .welcome-hero.glass,.main-content .dashboard-hero.glass,
   #slp-family-root .slp-family-welcome) {
  box-shadow: 0 34px 85px rgba(4,40,34,.26),0 11px 26px rgba(5,47,39,.17),
   inset 0 2px rgba(255,255,255,.77),inset 1px 0 rgba(245,255,251,.42),
   inset -2px 0 6px rgba(13,68,57,.15),inset 0 -12px 22px rgba(0,46,37,.14) !important;
}
html[data-slp-theme="dark"] :is(.main-content .welcome-hero.glass,.main-content .dashboard-hero.glass,#slp-family-root .slp-family-welcome) {
  box-shadow: 0 38px 100px rgba(0,9,12,.49),0 10px 26px rgba(0,20,20,.28),
   inset 0 2px rgba(229,255,246,.44),inset 1px 0 rgba(221,255,239,.24),
   inset -2px 0 6px rgba(0,22,21,.27),inset 0 -12px 30px rgba(0,12,13,.21) !important;
}

/* Pearl glint and a curved bottom-right shade; these are optically very thin.
   Existing animated sweeping reflection (::before) is preserved. */
.main-content .glass::after,
#slp-family-root .slp-family-card::after,
.install-callout::after,
#slp-quick-menu::after {
  background:
    radial-gradient(ellipse 76% 39% at 7% -8%, rgba(255,255,255,.56), transparent 72%),
    radial-gradient(ellipse 85% 73% at 105% 108%, rgba(var(--slp-depth-tint),.21), transparent 71%),
    linear-gradient(176deg,rgba(251,255,253,.19) 0%,transparent 28%,transparent 79%,rgba(4,45,36,.08) 100%) !important;
  opacity: clamp(.10, calc(.12 + var(--slp-v18-alpha, .02) * 8), .55) !important;
  pointer-events: none;
}
html[data-slp-theme="dark"] .main-content .glass::after,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card::after,
html[data-slp-theme="dark"] .install-callout::after,
html[data-slp-theme="dark"] #slp-quick-menu::after {
  opacity: clamp(.16, calc(.15 + var(--slp-v18-alpha, .02) * 8), .59) !important;
}

/* Small controls are raised lenses, without flattening any original accent
   (danger red, gold, theme color, progress, and user-saved colors stay intact). */
:is(button.button,button.slp-family-button,.slp-v18-glass-button,.slp-quick-toggle,
    .slp-theme-toggle,.snow-toggle,.install-trigger,.slp-family-icon-button,
    .slp-quick-row,.slp-v23-swatches button) {
  box-shadow: 0 7px 17px rgba(5,47,35,.17),
    inset 0 1.5px 1px rgba(255,255,255,.57),
    inset 0 -2px 4px rgba(9,54,41,.13) !important;
  border-top-color:rgba(245,255,250,.62) !important;
}
html[data-slp-theme="dark"] :is(button.button,button.slp-family-button,.slp-v18-glass-button,.slp-quick-toggle,
    .slp-theme-toggle,.snow-toggle,.install-trigger,.slp-family-icon-button,
    .slp-quick-row,.slp-v23-swatches button) {
  box-shadow:0 8px 19px rgba(0,11,12,.27),
    inset 0 1.5px 1px rgba(251,255,253,.32),
    inset 0 -2px 5px rgba(0,15,15,.24) !important;
}
:is(.field input,.field select,.field textarea,#slp-family-root input:not([type="checkbox"]),#slp-family-root textarea) {
  box-shadow: inset 0 2px 8px rgba(7,56,41,.085),
    inset 0 1px rgba(250,255,252,.42),0 2px 7px rgba(5,36,27,.045);
  transition: box-shadow .25s ease, border-color .25s ease;
}
:is(.field input,.field select,.field textarea,#slp-family-root input:not([type="checkbox"]),#slp-family-root textarea):focus-visible {
  box-shadow: inset 0 2px 7px rgba(6,50,37,.10), 0 0 0 3px rgba(var(--slp-depth-tint),.23) !important;
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .slp-v27-tilt {
    --slp-v27-tilt-x:0deg;
    --slp-v27-tilt-y:0deg;
    transform-origin:center center;
    transition:transform .38s cubic-bezier(.21,.79,.28,1),box-shadow .38s ease;
    transform: perspective(1400px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg);
  }
  .slp-v27-tilt:hover {
    z-index:2;
    transform: perspective(1400px) translate3d(0,-4px,0)
      rotateX(var(--slp-v27-tilt-x)) rotateY(var(--slp-v27-tilt-y));
    box-shadow:0 40px 85px rgba(2,42,35,.23), 0 12px 28px rgba(2,32,26,.17),
       inset 0 2px rgba(255,255,255,.79), inset 0 -5px 16px rgba(4,72,55,.08) !important;
  }
  html[data-slp-theme="dark"] .slp-v27-tilt:hover {
    box-shadow:0 43px 91px rgba(0,9,14,.48),0 12px 30px rgba(0,11,15,.29),
      inset 0 2px rgba(233,255,242,.41), inset 0 -5px 22px rgba(0,13,14,.16) !important;
  }
  :is(button.button,button.slp-family-button,.slp-v18-glass-button,.slp-quick-toggle,
      .slp-theme-toggle,.snow-toggle,.install-trigger,.slp-quick-row):hover:not(:disabled) {
    transform:translateY(-2px) scale(1.018);
    filter:brightness(1.045);
  }
}
:is(button.button,button.slp-family-button,.slp-v18-glass-button,.slp-quick-toggle,
    .slp-theme-toggle,.snow-toggle,.install-trigger,.slp-quick-row) {
  transition:transform .18s ease,filter .18s ease,box-shadow .3s ease;
}
:is(button.button,button.slp-family-button,.slp-v18-glass-button,.slp-quick-toggle,
    .slp-theme-toggle,.snow-toggle,.install-trigger,.slp-quick-row):active:not(:disabled) {
  transform:scale(.985);
}

/* Intensity adjusted to keep the interface readable and responsive on mobile. */
@media (max-width:820px) {
  #slp-v27-bubble-field {opacity:.73;}
  .main-content .glass,#slp-family-root .slp-family-card,
  #slp-family-root .slp-family-welcome,.install-callout {
    box-shadow:0 15px 36px rgba(4,41,34,.16),0 5px 14px rgba(5,36,30,.09),
      inset 0 2px rgba(255,255,255,.64),inset 0 -4px 12px rgba(11,72,54,.07) !important;
  }
  #slp-v27-bubble-field .slp-v27-fallback-orb:nth-of-type(3) {display:none!important;}
}
@media(prefers-reduced-motion:reduce) {
  #slp-v27-bubble-field .slp-v27-fallback-orb {animation:none!important;}
  .slp-v27-tilt {transform:none!important;transition:none!important;}
  :is(.slp-v18-glass-button,.slp-quick-toggle,.slp-theme-toggle,.snow-toggle) {transition:none!important;}
}
@media(forced-colors:active) {
  #slp-v27-bubble-field {display:none!important;}
  :is(.main-content .glass,#slp-family-root .slp-family-card,dialog.modal) {box-shadow:none!important;}
}

/* --- family-actions-v2.8.css --- */
/* Sous le Sapin 2.8 — accessible family management with the same glass design. */
/* Event family page: the original organizer Add action, easier to find. */
.people-grid ~ .bottom-tip { margin-top: 20px; }
.content-toolbar .toolbar-buttons .slp-family-add-easy {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 15px;
  font-weight: 750;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(8,39,27,.18), inset 0 1px rgba(255,255,255,.36);
}
/* Original Remove action is still visible only to the organizer before draw. */
.people-grid .person-card .person-admin-actions .slp-family-remove-easy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 91px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(162,45,56,.13);
  color: #b94552;
  border: 1px solid rgba(191,65,74,.28);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}
.people-grid .person-card .person-admin-actions .slp-family-remove-easy::after { content: "Retirer"; }
html[data-slp-theme="dark"] .people-grid .person-card .person-admin-actions .slp-family-remove-easy {
  color: #ffb8b9;
  background: rgba(164,45,61,.2);
  border-color: rgba(255,161,169,.35);
}
.people-grid .person-card .person-admin-actions .slp-family-remove-easy:focus-visible,
.content-toolbar .toolbar-buttons .slp-family-add-easy:focus-visible,
#slp-family-root .slp-family-remove:focus-visible {
  outline: 3px solid #e2c47d;
  outline-offset: 2px;
}
/* Annual book: direct edit and remove buttons on each saved member. */
#slp-family-root .slp-family-member-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}
#slp-family-root .slp-family-member-actions .slp-family-text-btn {
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 11px;
  padding: 8px 10px;
  min-height: 37px;
  background: rgba(255,255,255,.09);
}
#slp-family-root .slp-family-member-actions .slp-family-remove {
  color: #b9434c;
  border-color: rgba(201,78,89,.32);
  background: rgba(193,63,74,.09);
}
html[data-slp-theme="dark"] #slp-family-root .slp-family-member-actions .slp-family-remove { color: #ffb2b4; }
@media (max-width: 620px) {
  .content-toolbar .toolbar-buttons .slp-family-add-easy { min-height: 44px; width: 100%; }
  .people-grid .person-card .person-admin-actions .slp-family-remove-easy { min-height: 42px; min-width: 101px; }
  #slp-family-root .slp-family-member { flex-wrap: wrap; }
  #slp-family-root .slp-family-member-actions { width: 100%; justify-content: flex-end; }
  #slp-family-root .slp-family-member-actions .slp-family-text-btn { min-height: 42px; }
}

/* --- family-actions-v2.9.css --- */
/* v2.9 — participant page actions, always visible to organizer. */
.slp-family-v29-controls {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:15px 22px; padding:18px 20px; margin:8px 0 20px;
  border-radius:20px;
  border:1px solid rgba(228,255,244,.35);
  background:rgba(56,124,100,.11);
  isolation:isolate;
  overflow:visible;
}
.slp-family-v29-description {flex: 1 1 270px; min-width:0;}
.slp-family-v29-description h3 {font-size:18px;font-weight:740; margin:0 0 6px;color:var(--slp-text,inherit);}
.slp-family-v29-explanation {line-height:1.55;font-size:13px;opacity:.91;max-width:650px;}
.slp-family-v29-buttons {display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.slp-family-v29-buttons button {min-height:42px;border-radius:13px;padding:10px 14px;font-size:12px;font-weight:740;max-width:100%;white-space:normal;}
.slp-family-v29-person-remove {display:inline-flex;align-items:center;justify-content:center;border-radius:11px;
 border:1px solid rgba(255,164,172,.38);background:rgba(133,29,44,.12);
 color:#bd3e50;padding:8px 11px;min-height:36px;font-size:11px;font-weight:750;
 cursor:pointer;text-align:center;line-height:1.25;}
html[data-slp-theme="dark"] .slp-family-v29-person-remove {color:#ffc1c7;}
.slp-family-v29-controls button:focus-visible,.slp-family-v29-person-remove:focus-visible {
 outline:3px solid #edcd8b;outline-offset:3px;
}
@media(max-width:700px) {
  .slp-family-v29-controls {padding:15px 14px;gap:12px;margin:3px 0 17px;}
  .slp-family-v29-description {flex-basis:100%;}
  .slp-family-v29-description h3 {font-size:16px;}
  .slp-family-v29-explanation {font-size:12px;}
  .slp-family-v29-buttons {width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;}
  .slp-family-v29-buttons button {width:100%;min-height:45px; padding:10px 8px;font-size:12px;}
  .slp-family-v29-person-remove {min-height:42px;}
}

/* --- family-access-fix-v3.0.css --- */
/* Sous le Sapin v3.0 — iOS viewport restoration when the permanent
   family book is closed. Constrain the real page without scaling it. */
@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip !important; }
  #root, #root > .app-shell { width: 100%; max-width: 100%; min-width: 0; }
  #slp-family-root { width: 100%; max-width: 100%; overscroll-behavior-x: none; }
  #slp-family-root .slp-family-page,
  #slp-family-root .slp-family-wrap { width: 100%; max-width: 100%; min-width: 0; }
}

/* iOS Safari auto-zooms inputs smaller than 16px, then leaves the underlying
   application panned when the full-screen family pane closes. */
@media (pointer: coarse) {
  #slp-family-root input:not([type="checkbox"]),
  #slp-family-root textarea,
  #slp-family-root select { font-size: 16px !important; }
}

/* --- sticky-header-v3.0.1.css --- */
/* Sous le Sapin v3.0.1 — En-tête toujours accessible durant le défilement.
   CSS uniquement. Ne modifie ni le rendu du contenu, ni les modales, ni D1.
   Sélecteur limité à l'en-tête du site principal : le carnet permanent garde
   son propre défilement et son bouton de fermeture fixe. */
#root > .app-shell > .site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}

/* L'ancre de la section d'explication doit rester visible sous le bandeau
   lorsqu'on utilise « Comment ça marche » sur la page d'accueil. */
#root #comment {
  scroll-margin-top: 145px;
}
@media (max-width: 820px) {
  #root #comment { scroll-margin-top: 165px; }
}
@media (min-width: 1200px) {
  /* Le site est agrandi à 125 % sur PC depuis la v2.4. */
  #root #comment { scroll-margin-top: 190px; }
}

/* Small-memory or data-saver devices retain the glass style but skip expensive
   offscreen sweeps and the second global reflection. */
html.slp-opt-lite #slp-reflection-layer .slp-reflection-pass-soft { display:none !important; }
html.slp-opt-lite #slp-reflection-layer .slp-reflection-arc { animation:none !important; }
html.slp-opt-lite .main-content .glass::before,
html.slp-opt-lite #slp-family-root .slp-family-card::before { animation:none !important; }