:root{
  --bg-1:#161a28;
  --bg-2:#07080e;
  --surface:#1b1f2e;
  --surface-alt:#242a44;
  --ink:#eceef6;
  --ink-dim:#8b90ad;
  --accent:#d4a24e;
  --accent-bright:#f0c268;
  --shadow: rgba(0,0,0,.6);
  --border: rgba(212,162,78,.35);
  --border-soft: rgba(212,162,78,.18);
  --heading-font:'Black Ops One', sans-serif;
  --label-font:'Oswald', sans-serif;
  --mono-font:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2) 70%);
  background-attachment:fixed;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(212,162,78,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,162,78,.06) 1px, transparent 1px);
  background-size:34px 34px;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px);
  opacity:.35;
  z-index:3;
}

.radar{
  position:fixed;
  top:-260px;
  right:-260px;
  width:560px;
  height:560px;
  border-radius:50%;
  border:1px solid rgba(212,162,78,.1);
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.radar::before{
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(from 0deg, rgba(212,162,78,.35), transparent 35%);
  animation:radar-spin 6s linear infinite;
}
.radar::after{
  content:"";
  position:absolute;
  inset:60px;
  border-radius:50%;
  border:1px solid rgba(212,162,78,.12);
  box-shadow:0 0 0 60px rgba(212,162,78,.05) inset;
}
@keyframes radar-spin{ to{ transform:rotate(360deg); } }

.app{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  padding:60px 20px 80px;
}

.hq-frame{
  position:relative;
  margin:0 auto 32px;
  padding:24px 20px;
  max-width:640px;
}
.hq-frame .corner{
  position:absolute;
  width:22px;
  height:22px;
  border-color:var(--accent);
  opacity:.85;
}
.hq-frame .corner-tl{ top:0; left:0; border-top:3px solid; border-left:3px solid; }
.hq-frame .corner-tr{ top:0; right:0; border-top:3px solid; border-right:3px solid; }
.hq-frame .corner-bl{ bottom:0; left:0; border-bottom:3px solid; border-left:3px solid; }
.hq-frame .corner-br{ bottom:0; right:0; border-bottom:3px solid; border-right:3px solid; }

header{
  text-align:center;
}
header h1{
  font-family:var(--heading-font);
  font-weight:400;
  font-size:clamp(1.8rem, 5vw, 2.9rem);
  margin:0 0 12px;
  color:var(--accent-bright);
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(212,162,78,.35);
}
header p{
  margin:0 0 16px;
  color:var(--ink-dim);
  font-family:var(--label-font);
  font-size:1rem;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hq-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono-font);
  font-size:.72rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent-bright);
  padding:6px 14px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  background:rgba(212,162,78,.06);
}
.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5fd97a;
  box-shadow:0 0 8px #5fd97a;
  animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.nav-row{
  display:flex;
  justify-content:center;
  margin-bottom:48px;
}
.nav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:2px;
  background:var(--surface);
  color:var(--accent-bright);
  border:1px solid var(--border);
  font-family:var(--label-font);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 6px 16px var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.nav-btn:hover{
  transform:translateY(-2px);
  background:var(--surface-alt);
  box-shadow:0 10px 22px var(--shadow);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  margin-bottom:56px;
}

.card-draggable{ cursor:grab; }
.card-draggable.dragging{
  opacity:.4;
  cursor:grabbing;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(160deg, var(--surface-alt), var(--surface));
  border:1px solid var(--border-soft);
  border-radius:4px;
  padding:26px 22px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 24px var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:196px;
}
.card::before, .card::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  opacity:.9;
  pointer-events:none;
  border-color: color-mix(in srgb, var(--tile-color, var(--accent)) 75%, white 15%);
}
.card::before{
  top:-1px; left:-1px;
  border-top:3px solid;
  border-left:3px solid;
}
.card::after{
  bottom:-1px; right:-1px;
  border-bottom:3px solid;
  border-right:3px solid;
}
a.card:hover, a.card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--border);
  box-shadow:0 16px 32px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--tile-color, var(--accent)) 60%, transparent);
}

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  font-size:1.4rem;
  margin-bottom:10px;
  background: color-mix(in srgb, var(--tile-color, var(--accent)) 30%, var(--surface));
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.card-tag{
  font-family:var(--mono-font);
  font-size:.68rem;
  letter-spacing:.5px;
  color: color-mix(in srgb, var(--tile-color, var(--accent)) 70%, white 20%);
  margin-bottom:4px;
  opacity:.85;
}
.card h2{
  font-family:var(--label-font);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 0 6px;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card p{
  margin:0;
  font-size:.85rem;
  color:var(--ink-dim);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.dev-badge{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 9px 3px 7px;
  border-radius:999px;
  background:rgba(212,162,78,.12);
  border:1px solid var(--border);
  font-family:var(--mono-font);
  font-size:.62rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--accent-bright);
}
.dev-badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f0a83f;
  box-shadow:0 0 6px #f0a83f;
}

.card-actions{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:6px;
}
.card-action-btn{
  width:26px;
  height:26px;
  border:none;
  background:rgba(212,162,78,.12);
  color:var(--ink-dim);
  font-size:.85rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease;
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.card-edit:hover{ background:var(--accent); color:#1b1f2e; }
.card-delete:hover{ background:#e05a5a; color:#fff; }

.empty{
  color:var(--ink-dim);
  font-size:.95rem;
  text-align:center;
  padding:20px;
  grid-column:1/-1;
  font-family:var(--mono-font);
}

/* ---------- ADD TILE FORM ---------- */
.add-tile{
  position:relative;
  background:linear-gradient(160deg, var(--surface-alt), var(--surface));
  border:1px solid var(--border-soft);
  border-radius:4px;
  padding:28px;
  box-shadow:0 10px 24px var(--shadow);
}
.add-tile::before{
  content:"NOUVELLE ENTR\00C9E";
  position:absolute;
  top:-11px;
  left:24px;
  background:var(--bg-2);
  padding:0 10px;
  font-family:var(--mono-font);
  font-size:.65rem;
  letter-spacing:2px;
  color:var(--accent);
}
.add-tile h2{
  font-family:var(--label-font);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin:0 0 20px;
  color:var(--accent-bright);
}
/* ---------- LEGAL PAGES (mentions légales / confidentialité) ---------- */
.add-tile.legal-text::before{ display:none; }
.legal-text p,
.legal-text ul{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:.9rem;
  line-height:1.65;
  color:var(--ink);
  margin:0 0 14px;
}
.legal-text p:last-child,
.legal-text ul:last-child{ margin-bottom:0; }
.legal-text ul{ padding-left:20px; }
.legal-text li{ margin-bottom:8px; }
.legal-text a{ color:var(--accent-bright); }
.legal-inline-link{
  color:var(--accent-bright);
  font-family:var(--mono-font);
  font-size:.82rem;
  text-decoration:none;
}
.legal-inline-link:hover{ text-decoration:underline; }

.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-family:var(--mono-font);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:6px;
  color:var(--ink-dim);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="file"],
.field select,
.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:2px;
  border:1px solid var(--border);
  background:var(--bg-2);
  font-family:var(--mono-font);
  font-size:.9rem;
  color:var(--ink);
}
.field textarea{ resize:vertical; }
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus,
.field input[type="number"]:focus,
.field input[type="date"]:focus,
.field select:focus,
.field textarea:focus{ outline:2px solid var(--accent); }
.field-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
}
.field-checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--accent);
  cursor:pointer;
}
.field-checkbox label{
  margin:0;
  cursor:pointer;
  text-transform:none;
}
.field-hint{
  font-size:.72rem;
  font-family:var(--mono-font);
  color:var(--ink-dim);
  margin-top:4px;
}

.icon-svg{
  width:1.1em;
  height:1.1em;
  display:block;
}

.icon-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.icon-choice{
  width:38px;
  height:38px;
  border:1px solid var(--border);
  background:var(--bg-2);
  font-size:1.15rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease, background .15s ease;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.icon-choice:hover{ background:var(--surface-alt); }
.icon-choice.selected{
  border-color:var(--accent);
  background: color-mix(in srgb, var(--accent) 25%, var(--bg-2));
}

.color-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.color-row input[type="color"]{
  width:44px;
  height:38px;
  padding:0;
  border:1px solid var(--border);
  border-radius:2px;
  background:none;
  cursor:pointer;
}
.color-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.color-preset{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--bg-2);
  box-shadow:0 0 0 1px var(--border);
  cursor:pointer;
}
.color-preset.selected{ box-shadow:0 0 0 2px var(--accent); }

.form-error{
  color:#e0685a;
  font-family:var(--mono-font);
  font-size:.82rem;
  margin-bottom:12px;
  display:none;
}
.form-error.show{ display:block; }

.form-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-add{
  border:none;
  padding:12px 24px;
  background:var(--accent);
  color:#14151f;
  font-family:var(--label-font);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-add:hover{ background:var(--accent-bright); transform:translateY(-1px); }

.btn-cancel{
  border:1px solid var(--border);
  padding:12px 24px;
  background:transparent;
  color:var(--ink-dim);
  font-family:var(--label-font);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  display:none;
}
.btn-cancel:hover{ background:var(--surface-alt); }

footer{
  text-align:center;
  margin-top:56px;
  color:var(--ink-dim);
  font-size:.72rem;
  font-family:var(--mono-font);
  letter-spacing:1px;
  opacity:.7;
}
footer::before{ content:"SYSTEM// "; color:var(--accent); }

/* ============================================================
   THEME SWITCHER
   Default (:root, no data-theme yet / data-theme="qg") is the
   "Quartier Général" theme defined above. Every other theme is
   modeled on the real visual identity of one of the sub-apps it
   links to. Only qg keeps the HUD flourishes (radar, corner
   brackets, angular clip-paths, scanlines, // tag, SYSTEM//
   footer, uppercase type) — every other theme resets those to
   plain, friendly chrome and just repaints colors/fonts/radius.
   Per-tile accent colors (--tile-color, set from the DB) are
   never touched here — only page chrome is themed.
   ============================================================ */

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-row{
  align-items:center;
  gap:10px;
}

.theme-select option{
  color:#1e293b;
  background:#fff;
}
.theme-select{
  padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%238b90ad' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

/* ---- strip qg-only HUD decorations for every other theme ---- */
html:not([data-theme="qg"]) .radar,
html:not([data-theme="qg"]) .hq-frame .corner,
html:not([data-theme="qg"]) .card::before,
html:not([data-theme="qg"]) .card::after,
html:not([data-theme="qg"]) body::after,
html:not([data-theme="qg"]) .card-tag,
html:not([data-theme="qg"]) footer::before,
html:not([data-theme="qg"]) .add-tile::before{
  display:none;
}
html:not([data-theme="qg"]) .card{ border-radius:14px; }
html:not([data-theme="qg"]) .nav-btn,
html:not([data-theme="qg"]) .btn-add,
html:not([data-theme="qg"]) .btn-cancel{
  clip-path:none;
  border-radius:999px;
}
html:not([data-theme="qg"]) .card-icon{
  clip-path:none;
  border-radius:12px;
}
html:not([data-theme="qg"]) .card-action-btn{
  clip-path:none;
  border-radius:50%;
}
html:not([data-theme="qg"]) .icon-choice{
  clip-path:none;
  border-radius:10px;
}
html:not([data-theme="qg"]) .btn-add,
html:not([data-theme="qg"]) .card-edit:hover{
  color:#fff;
}
html:not([data-theme="qg"]) header h1{
  text-transform:none;
  letter-spacing:.5px;
  text-shadow:none;
}
html:not([data-theme="qg"]) header p,
html:not([data-theme="qg"]) .nav-btn,
html:not([data-theme="qg"]) .add-tile h2,
html:not([data-theme="qg"]) .card h2{
  text-transform:none;
  letter-spacing:normal;
}
html:not([data-theme="qg"]) .field label,
html:not([data-theme="qg"]) .field input[type="text"],
html:not([data-theme="qg"]) .field-hint,
html:not([data-theme="qg"]) .form-error{
  font-family:'IBM Plex Sans', sans-serif;
  text-transform:none;
  letter-spacing:normal;
}

/* ---- ambient background grid retints to the active accent, or drops for softer themes ---- */
body::before{
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent) 1px, transparent 1px);
  background-size:34px 34px;
}
html:is([data-theme="compteur"],[data-theme="encuisine"]) body::before{
  background-image:radial-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px);
  background-size:5px 5px;
}
html:is([data-theme="lafamilledepaupau"],[data-theme="monsuivisante"],[data-theme="minimath"],[data-theme="matrix"]) body::before{
  display:none;
}

.hq-status{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.dev-badge{ background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* ============ Palette overrides per theme ============ */

/* Compteur de points — felt table green, gold, cream, Fraunces */
html[data-theme="compteur"]{
  --bg-1:#1a4530; --bg-2:#0f2e1f; --surface:#184a32; --surface-alt:#245e40;
  --ink:#f3ecd9; --ink-dim:rgba(243,236,217,.62); --accent:#c9a24b; --accent-bright:#e0bd6b;
  --shadow: rgba(0,0,0,.35); --border: rgba(201,162,75,.35); --border-soft: rgba(201,162,75,.18);
  --heading-font:'Fraunces', serif; --label-font:'Fraunces', serif;
}
html[data-theme="compteur"] .card{ border-radius:16px; }

/* Mon suivi santé — light, green/blue/violet gradient, Segoe UI, pill buttons */
html[data-theme="monsuivisante"]{
  --bg-1:#eef4fb; --bg-2:#e3edf9; --surface:#ffffff; --surface-alt:#f4f7fb;
  --ink:#1e293b; --ink-dim:#64748b; --accent:#16a34a; --accent-bright:#0ea5e9;
  --shadow: rgba(15,23,42,.1); --border: rgba(22,163,74,.3); --border-soft: rgba(22,163,74,.15);
  --heading-font:'Segoe UI', sans-serif; --label-font:'Segoe UI', sans-serif;
}
html[data-theme="monsuivisante"] .card{ border-radius:18px; }
html[data-theme="monsuivisante"] .nav-btn,
html[data-theme="monsuivisante"] .btn-add{
  background:linear-gradient(135deg, #16a34a 0%, #0ea5e9 55%, #7c3aed 100%);
  color:#fff;
  border-color:transparent;
}
html[data-theme="monsuivisante"] .nav-btn:hover,
html[data-theme="monsuivisante"] .btn-add:hover{ filter:brightness(1.08); }

/* En cuisine — cream, terracotta, sage, Fraunces + Inter */
html[data-theme="encuisine"]{
  --bg-1:#faf6ee; --bg-2:#efe6d3; --surface:#ffffff; --surface-alt:#faf6ee;
  --ink:#2b241c; --ink-dim:rgba(43,36,28,.62); --accent:#c1592c; --accent-bright:#a4451f;
  --shadow: rgba(43,36,28,.12); --border: rgba(193,89,44,.3); --border-soft: rgba(193,89,44,.15);
  --heading-font:'Fraunces', serif; --label-font:'Inter', sans-serif;
}
html[data-theme="encuisine"] .card{ border-radius:16px; }

/* Bibliothèque — deep mahogany & brass, Georgia serif, crisp corners */
html[data-theme="bibliotheque"]{
  --bg-1:#251a10; --bg-2:#160f09; --surface:#251a10; --surface-alt:#1d140d;
  --ink:#ece0c8; --ink-dim:#a9957a; --accent:#b8863f; --accent-bright:#d9a75d;
  --shadow: rgba(0,0,0,.5); --border: rgba(184,134,63,.3); --border-soft: rgba(184,134,63,.15);
  --heading-font:'Georgia', serif; --label-font:'Georgia', serif;
}
html[data-theme="bibliotheque"] .card,
html[data-theme="bibliotheque"] .card-icon,
html[data-theme="bibliotheque"] .nav-btn,
html[data-theme="bibliotheque"] .btn-add,
html[data-theme="bibliotheque"] .btn-cancel,
html[data-theme="bibliotheque"] .icon-choice{ border-radius:6px; }

/* La collection LEGO — white baseplate, LEGO red/yellow/blue, Segoe UI, bold pill buttons */
html[data-theme="lacollectionlego"]{
  --bg-1:#F4F1EA; --bg-2:#EDE8DA; --surface:#FFFFFF; --surface-alt:#F4F1EA;
  --ink:#1B1B1B; --ink-dim:#6b6f76; --accent:#D01012; --accent-bright:#FFD500;
  --shadow: rgba(0,0,0,.12); --border: rgba(27,27,27,.35); --border-soft: rgba(27,27,27,.15);
  --heading-font:'Segoe UI', sans-serif; --label-font:'Segoe UI', sans-serif;
}
html[data-theme="lacollectionlego"] .card,
html[data-theme="lacollectionlego"] .card-icon,
html[data-theme="lacollectionlego"] .icon-choice{ border-radius:10px; }
html[data-theme="lacollectionlego"] .nav-btn,
html[data-theme="lacollectionlego"] .btn-add{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
  border-radius:40px;
}
html[data-theme="lacollectionlego"] .nav-btn:hover,
html[data-theme="lacollectionlego"] .btn-add:hover{ background:#A50D15; color:#fff; }
html[data-theme="lacollectionlego"] .btn-cancel{ border-radius:40px; }
html[data-theme="lacollectionlego"] .card-delete:hover{ background:#D01012; color:#fff; }
html[data-theme="lacollectionlego"] header h1{ color:#0057A6; }
html[data-theme="lacollectionlego"] .hq-status,
html[data-theme="lacollectionlego"] .dev-badge,
html[data-theme="lacollectionlego"] .add-tile h2{ color:var(--accent); }

/* La Famille de PauPau — sky blue, pink, Comic Sans, very rounded */
html[data-theme="lafamilledepaupau"]{
  --bg-1:#eaf6ff; --bg-2:#fdeaf5; --surface:#ffffff; --surface-alt:#fff7e6;
  --ink:#2b3a55; --ink-dim:#6b7a99; --accent:#4fa8e8; --accent-bright:#ef7fb0;
  --shadow: rgba(79,168,232,.22); --border: rgba(79,168,232,.3); --border-soft: rgba(79,168,232,.15);
  --heading-font:'Comic Sans MS', cursive; --label-font:'Comic Sans MS', cursive;
}
html[data-theme="lafamilledepaupau"] .card,
html[data-theme="lafamilledepaupau"] .add-tile{ border-radius:24px; }
html[data-theme="lafamilledepaupau"] .card-icon{ border-radius:50%; }

/* Minimath — dark theme, black & purple (muted, black-dominant) */
html[data-theme="minimath"]{
  --bg-1:#0c0710; --bg-2:#020202; --surface:#110b16; --surface-alt:#181020;
  --ink:#e4dfe8; --ink-dim:#756a82; --accent:#6b4c85; --accent-bright:#8a6aa0;
  --shadow: rgba(0,0,0,.75); --border: rgba(107,76,133,.3); --border-soft: rgba(107,76,133,.14);
  --heading-font:'Space Grotesk', sans-serif; --label-font:'Oswald', sans-serif;
}
html[data-theme="minimath"] .card{ border-radius:16px; }
html[data-theme="minimath"] .nav-btn,
html[data-theme="minimath"] .btn-add{
  background:linear-gradient(135deg, #120a18 0%, #2e1c3d 55%, #5c3d6e 100%);
  color:#fff;
  border-color:transparent;
}
html[data-theme="minimath"] .nav-btn:hover,
html[data-theme="minimath"] .btn-add:hover{ filter:brightness(1.1); }

/* Matrix — dark theme, black & blue-gray (muted, black-dominant) */
html[data-theme="matrix"]{
  --bg-1:#0a0d10; --bg-2:#020304; --surface:#0f1418; --surface-alt:#161d22;
  --ink:#dfe4e8; --ink-dim:#6b7680; --accent:#5b7285; --accent-bright:#6fa88f;
  --shadow: rgba(0,0,0,.75); --border: rgba(91,114,133,.3); --border-soft: rgba(91,114,133,.14);
  --heading-font:'Space Grotesk', sans-serif; --label-font:'Oswald', sans-serif;
}
html[data-theme="matrix"] .card{
  border-radius:16px;
  background-image:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-bright) 7%, transparent) 0px, color-mix(in srgb, var(--accent-bright) 7%, transparent) 1px, transparent 1px, transparent 9px),
    linear-gradient(160deg, var(--surface-alt), var(--surface));
}
html[data-theme="matrix"] .nav-btn,
html[data-theme="matrix"] .btn-add{
  background:linear-gradient(135deg, #0d1114 0%, #232c33 55%, #3f6b5c 100%);
  color:#fff;
  border-color:transparent;
}
html[data-theme="matrix"] .nav-btn:hover,
html[data-theme="matrix"] .btn-add:hover{ filter:brightness(1.1); }