:root{
    --bg:#19171f; --panel:#12161b; --muted:#8892a0; --text:#e6edf3;
    --accent:#34d399; --accent2:#60a5fa; --danger:#ef4444; --border:#1f2937; --shadow:0 6px 24px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:#0b0d10; color:var(--text); touch-action:manipulation;}
  .app{ margin:0 auto; }
  .header{display:flex; flex-direction:column; gap:12px; margin-bottom:16px}
  .brand{display:flex; align-items:center; gap:12px}
  .logo{font-size:28px}
  .titles h1{margin:0; font-size:22px}
  .subtitle{margin:2px 0 0; color:var(--muted); font-size:13px}
  .tab{display:none} .tab.active{display:block}
  .card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow)}
  .card.big{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:220px}
  .scoreboard{display:flex; gap:12px; align-items:stretch; justify-content:center; margin:30px 10px 30px}
  .counter{font-size:64px; font-weight:800; line-height:1; padding:8px 0}
  .total{font-size:20px; line-height:1; margin-top:4px; color:var(--muted)}
  #cardChild.winner{box-shadow:0 0 12px var(--accent);}
  #cardParent.winner{box-shadow:0 0 12px var(--accent2);}
  .child-banner{width:100%; overflow:hidden; margin:8px 0;}
  .child-strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;}
  .child-strip::-webkit-scrollbar{display:none;}
  .child-card{flex:0 0 100%; height:48px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:20px; color:#fff; scroll-snap-align:center;}
  .child-card.active{outline:3px solid #fff;}
  #cardChild.winner .counter{transform:scale(1.15);}
  #cardParent.winner .counter{transform:scale(1.15);}
  .vs{display:flex; align-items:center; justify-content:center; padding:0 8px; color:var(--muted)}
  .progress{margin:4px 0 18px}
  .bar-wrap{position:relative; height:18px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:999px; overflow:hidden}
  .bar-child,.bar-parent{position:absolute; top:0; bottom:0}
  .bar-child{left:0; width:0%; background:linear-gradient(90deg, var(--accent), #10b981)}
  .bar-parent{right:0; width:0%; background:linear-gradient(90deg, #93c5fd, var(--accent2))}
  .bar-child.winner{box-shadow:0 0 8px 2px var(--accent);}
  .bar-parent.winner{box-shadow:0 0 8px 2px var(--accent2);}
  .progress-legend{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:6px}
  .quick-points{display:flex; gap:12px; margin:12px 0}
  .quick-points button{flex:1; font-size:20px}
  .mobile-parent{flex:1}
  .parent-split{display:none; flex:1; gap:12px}
  .parent-split button{flex:1; font-size:20px}
  .quick-actions{margin:12px 0}
  .qa-toolbar{display:flex; justify-content:space-between; gap:8px; margin-bottom:8px}
  .qa-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px}
  .qa-card{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; border-radius:12px; color:#fff; box-shadow:var(--shadow); border:1px solid var(--border);}
  .qa-card .emoji{font-size:24px}
  .qa-card .title{font-size:14px; margin-top:4px}
  .qa-card .points{font-size:12px; margin-top:2px}
  .qa-card .target{font-size:16px; margin-top:2px}
  .qa-grid.editing .qa-card{position:relative; cursor:default}
  .qa-edit-controls{position:absolute; top:4px; right:6px; display:flex; gap:4px; align-items:center}
  .qa-edit-controls input[type="checkbox"]{width:16px; height:16px}
  .qa-edit-controls .qa-del{background:none; border:none; cursor:pointer; font-size:14px; line-height:1;}
  .qa-card.inactive{opacity:.4}
  .actions{display:grid; grid-template-columns:1.5fr .9fr; gap:12px}
  .controls-row{display:flex; gap:10px; flex-wrap:wrap}
  button{appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:10px 14px; border-radius:10px; cursor:pointer; transition:transform .05s ease-in-out, filter .2s; box-shadow: var(--shadow)}
  button:hover{filter:brightness(1.1)} button:active{transform:translateY(1px)}
  button.danger{border-color:#3b1212; background:linear-gradient(180deg, #3b1212, #220909); color:#ffb4b4}
  .reason-row{display:flex; gap:8px; margin-top:10px}
  .reason-row input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b0f14; color:var(--text)}
  .secondary{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
  .history .history-list{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; max-height:260px; overflow:auto}
  .history .history-list li{display:flex; justify-content:space-between; gap:10px; background:#0b0f14; border:1px solid var(--border); border-radius:10px; padding:10px}
  .thermo{display:flex; gap:4px; height:80px; margin-top:8px}
  .thermo .day{flex:1; position:relative; background:#0b0f14; border:1px solid var(--border); border-radius:6px; overflow:hidden}
  .thermo .day .child{position:absolute; bottom:0; left:0; right:0; background:var(--accent)}
  .thermo .day .parent{position:absolute; top:0; left:0; right:0; background:var(--accent2)}
  .thermo .day .label{position:absolute; bottom:-1.2em; left:50%; transform:translateX(-50%); font-size:10px; color:var(--muted)}
  .chart{width:100%; max-height:200px; margin-top:16px}
  .child-hero h2{margin-top:0}
  .child-scores{display:flex; gap:12px; align-items:stretch; justify-content:center; margin:8px 0 12px}
  .eligibility.big{font-size:22px; padding:10px 14px}
  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:8px 0}
dialog{border:none; border-radius:12px; padding:20px; background:var(--panel); color:var(--text); box-shadow:var(--shadow);}
dialog::backdrop{background:rgba(0,0,0,.6);}
#reasonModal{width:calc(100% - 40px);max-width:400px;border-radius:12px;padding:20px;}
#reasonModal form{width:100%;display:flex;flex-direction:column;gap:12px;}
  .qa-form label{display:block; margin:8px 0 4px; font-size:14px;}
  .qa-form input,.qa-form select{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:#0b0f14; color:var(--text);}
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
  .grid input{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b0f14; color:var(--text)}
  .muted{color:var(--muted); font-size:12px}
  @media (max-width: 720px){ .counter{font-size:48px} .actions{grid-template-columns:1fr} .scoreboard{gap:8px} }

/* --- Auth guard visuals --- */
.tab.locked{ filter:grayscale(0.3) opacity(0.75); pointer-events:none; }

/* --- Utilities --- */
.hidden{ display:none !important; }
.center{ text-align:center; }
.full{ width:100%; }

/* --- Form & controls --- */
select, input[type="text"], input[type="password"], input[type="url"], input[type="color"], input[type="number"]{
  width:100%; max-width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b0f14; color:var(--text); font-size:16px;
}
label{ display:block; font-size:12px; color:var(--muted); margin:6px 0 4px; }

/* --- Buttons: touch friendly --- */
button{ min-height:44px; line-height:1.1; }
button.big{ font-size:18px; padding:14px 18px; }

/* --- Cards spacing on mobile --- */
.card{ margin-bottom:12px; }

/* --- Scoreboard: better stacking on small screens --- */
  @media (max-width: 720px){
  .app{ padding:12px 12px 24px; }
  .header{ gap:10px; margin-bottom:12px; }
  .scoreboard{ flex-wrap:nowrap; gap:6px; }
  .scoreboard .card.big{ flex:1; min-width:0; }
  .counter{ font-size:40px; }
  .vs{ padding:0 4px; }
  .progress{ margin:2px 0 12px; }
  .bar-wrap{ height:14px; }
  .actions{ grid-template-columns:1fr; gap:10px; }
  .controls-row{ gap:8px; }
  .history .history-list{ max-height:220px; }
}

  @media (min-width: 721px){
    .child-banner{overflow:visible;}
    .child-strip{overflow-x:visible; scroll-snap-type:none; gap:8px;}
    .child-card{flex:0 0 160px; scroll-snap-align:none;}
    .app{ padding:16px 20px 32px; max-width:1000px; }
    .mobile-parent{display:none;}
    .parent-split{display:flex;}
  }

/* --- Desktop refinements --- */
@media (min-width: 721px){
  .controls-row .half{ flex:1 1 48%; }
  .controls-row .third{ flex:1 1 30%; }
}

/* --- Dock navigation (liquid glass switcher) --- */
.bottom-nav {
  /* Tunable variables for a cleaner glass look */
  --nav-radius: 28px;
  --nav-bg: color-mix(in srgb, #101418 80%, transparent);
  --nav-border: color-mix(in srgb, #ffffff 10%, transparent);
  --nav-shadow: 0 6px 18px rgba(0,0,0,.28);
  --nav-blur: 10px;
  --fab-size: 56px;
  --fab-gap: 12px;
  /* Inner layout variables for precise centering */
  --pad: 8px;   /* horizontal padding inside dock */
  --gap: 0px;   /* disabled to ensure perfect positioning */
  --slot-width: calc((100% - (2 * var(--pad))) / 3);

  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  right: calc(10px + var(--fab-size) + var(--fab-gap));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--gap); /* keep 0 for robust alignment */
  height: 56px;
  padding: 4px var(--pad);
  margin: 0;
  border-radius: var(--nav-radius);
  background-color: var(--nav-bg);
  border: 1px solid var(--nav-border);
  backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  overflow: hidden;
  box-shadow: var(--nav-shadow);
}

.bottom-nav .switcher__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.bottom-nav .switcher__input {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* Each option flexes equally; width adapts to count automatically */
.bottom-nav .switcher__option {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 99em;
  padding: 0;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-content, #ffffff) 90%, transparent);
  opacity: 0.65;
  transition: color 160ms, opacity 160ms, text-shadow 160ms;
  position: relative;
  z-index: 1;
}

.bottom-nav .switcher__option:hover {
  cursor: pointer;
  opacity: 0.75;
}

.bottom-nav .switcher__option span {
  font-size: 0.98rem;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.bottom-nav .switcher__option:has(input:checked) {
  opacity: 1;
  cursor: default;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  font-weight: 600;
}
.bottom-nav .switcher__option:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, #fff 30%, transparent);
  outline-offset: 2px;
  border-radius: 999em;
}

/* Auto-sized pill anchored to the checked option */
.bottom-nav .switcher__option::before{
  content: '';
  position: absolute;
  inset: 4px; /* match dock vertical padding + small breathing */
  border-radius: 99em;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--active-bg, #445) 72%, transparent),
    color-mix(in srgb, var(--active-bg, #445) 58%, transparent)
  );
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.18);
  opacity: 0;
  transform: scale(.98);
  transition: opacity 220ms ease, transform 400ms cubic-bezier(1, 0.0, 0.4, 1);
}
.bottom-nav .switcher__option:has(input:checked)::before{ opacity: 1; transform: none; }

/* Color mapping per option (scoped to the selected label) */
.bottom-nav .switcher__option:has(input[c-option="1"]:checked){ --active-bg: rgba(0, 122, 255, 0.25); }
.bottom-nav .switcher__option:has(input[c-option="2"]:checked){ --active-bg: rgba(52, 199, 89, 0.25); }
.bottom-nav .switcher__option:has(input[c-option="3"]:checked){ --active-bg: rgba(255, 149, 0, 0.25); }

/* Disable previous sliding pill (to avoid cumulative pixel rounding) */
.bottom-nav::after { content: none; }

/* Slider animations no longer needed with auto-sized pill */

/* colors are now scoped on the checked option above */

/* keep keyframes (no longer used) intentionally removed for lighter CSS */

/* Floating gear button (advanced/settings) */
.fab-gear{
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: 10px;
  width: var(--fab-size, 56px);
  height: var(--fab-size, 56px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, #101418 60%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 51;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.fab-gear:hover{ filter: brightness(1.1); }
.fab-gear:active{ transform: translateY(1px) scale(0.98); }

/* Hide gear/nav in login-only layout */
body.auth-only .fab-gear{ display:none !important; }

/* Settings page return bar */
.bottom-nav.return-bar{
  right: 10px; /* no gear space on settings page */
}
.bottom-nav.return-bar::after{ display:none; }
.bottom-nav.return-bar .return-pill{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999em;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
  background: linear-gradient(180deg, color-mix(in srgb, #2a6df0 22%, transparent), color-mix(in srgb, #1a3c78 18%, transparent));
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.2);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav .switcher__option::before { transition: none; }
}

@media (min-width: 921px) {
  .bottom-nav {
    width: 360px;
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translateX(-50%);
    margin: 0;
  }
  .fab-gear{
    left: calc(50% + 360px / 2 + var(--fab-gap));
    right: auto;
    bottom: 24px;
  }
}

/* Login-only mode tweaks */
body.auth-only .bottom-nav { display: none !important; }
body.auth-only #tab-account .link { display: inline-block; }


/* Carte login compacte */
.login-card {
  max-width: 420px;
  margin: 8vh auto;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.login-card h1 { font-size: 22px; margin-bottom: 12px; }
.login-card .row { display:flex; gap:8px; margin-top: 12px; }
.login-card input { width:100%; padding:12px 14px; border:1px solid #ddd; border-radius: 12px; }
.login-card button { padding: 12px 14px; border-radius: 12px; border: none; background:#111; color:#fff; font-weight:600; }
.login-card .muted { color:#888; font-size: 12px; margin-top: 10px; }



button#quickAddParent, button#quickAddParentDesktop, button#quickParentReason {
    background: #690000;
}