:root{
  --bg:#0f1115; --fg:#ffffff; --muted:#b7bcc7; --card:#1a1f2b; --accent:#5cc8ff; --ok:#86efac; --danger:#fca5a5; --border:#2a2f3c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,system-ui,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:2}
.app-header h1{font-size:18px;margin:0}
.tabs{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{background:transparent;color:var(--muted);border:1px solid var(--border);padding:8px 10px;border-radius:10px}
.tab.active{color:var(--fg);border-color:var(--accent)}
.tabpane{display:none;padding:14px}
.tabpane.active{display:block}
.day-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:10px 0}
.day{padding:10px 0;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.day-title{font-weight:600;margin:6px 2px 12px 2px}
.cards{display:grid;grid-template-columns:1fr;gap:10px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.row{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:8px;margin-top:8px;font-size:14px;color:var(--muted)}
.row.header{color:var(--fg);font-weight:600}
.controls{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn{border:1px solid var(--border);background:transparent;color:var(--fg);padding:8px 10px;border-radius:10px;cursor:pointer}
.btn.small{padding:6px 8px;font-size:12px}
.btn.danger{border-color:#7f1d1d;color:var(--danger)}
.note{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--fg)}
.hint{color:var(--muted);font-size:13px}
.suivi-controls{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.history .entry{border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--card)}
.app-footer{border-top:1px solid var(--border);padding:10px;text-align:center;color:var(--muted)}
.switch{position:relative;display:inline-block;width:42px;height:24px;margin-right:8px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#475569;transition:.2s;border-radius:24px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:white;transition:.2s;border-radius:50%}
input:checked + .slider{background:#111827}
input:checked + .slider:before{transform:translateX(18px)}

/* Auto-thème iOS (système) */
@media (prefers-color-scheme: light){
  :root{--bg:#ffffff;--fg:#0b1220;--muted:#475569;--card:#f6f7fb;--accent:#0066cc;--ok:#16a34a;--danger:#b91c1c;--border:#e2e8f0}
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0f1115;--fg:#ffffff;--muted:#b7bcc7;--card:#1a1f2b;--accent:#5cc8ff;--ok:#86efac;--danger:#fca5a5;--border:#2a2f3c}
}

/* Classe .light pour forcer manuellement si besoin (Paramètres) */
.light{--bg:#ffffff;--fg:#0b1220;--muted:#475569;--card:#f6f7fb;--accent:#0066cc;--ok:#16a34a;--danger:#b91c1c;--border:#e2e8f0}

.stat { background: var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center }
.stat .big { font-size:20px; font-weight:700 }