:root {
  --bg:#faf9f7; --surface:#fff; --surface2:#fcfcfb; --offset:#f5f3ef;
  --border:#d9d5cd; --divider:#e8e4dd; --text:#1a1814; --muted:#6b665c;
  --primary:#0f5132; --primary2:#146c43; --primaryLight:#e8f4ef;
  --gold:#b8860b; --goldLight:#f9f4e8; --shadow:0 4px 16px #1a181414;
  --display:'Instrument Serif',Georgia,serif; --body:'Work Sans',sans-serif;
}
[data-theme=dark] {
  --bg:#0d0c0a; --surface:#141311; --surface2:#1a1917; --offset:#1f1e1b;
  --border:#3a3733; --divider:#2a2824; --text:#e8e6e1; --muted:#9a958c;
  --primary:#14b8a6; --primary2:#2dd4bf; --primaryLight:#14b8a61a;
  --gold:#fbbf24; --goldLight:#fbbf241a; --shadow:0 4px 16px #0008;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--body); }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; border:0; }
button:disabled { opacity:.6; cursor:wait; }
h1,h2,h3 { font-family:var(--display); font-weight:400; }
.app-header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; background:var(--surface); border-bottom:1px solid var(--divider); }
.header-brand { display:flex; align-items:center; gap:1rem; }
.header-logo { display:grid; place-items:center; width:44px; height:44px; border-radius:1rem; background:var(--primary); color:#fff; }
.header-logo svg { width:28px; }
.header-title { font:clamp(1.5rem,1.2rem + 1.25vw,2.25rem) var(--display); }
.header-subtitle,.form-hint { font-size:.875rem; color:var(--muted); }
.theme-toggle { width:40px; height:40px; border-radius:50%; background:var(--offset); border:1px solid var(--border); }
.main { max-width:1200px; margin:auto; padding:2.5rem 1.5rem; }
.ayah-banner { text-align:center; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary2)); border-radius:2rem; padding:3rem 2rem; margin-bottom:2.5rem; box-shadow:var(--shadow); }
.ayah-arabic { font:clamp(1.5rem,4vw,2.5rem)/1.9 Amiri,serif; direction:rtl; }
.ayah-translation { max-width:65ch; margin:.75rem auto 0; font-style:italic; opacity:.9; }
.ayah-ref { margin-top:.5rem; font-size:.8rem; opacity:.75; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-bottom:2.5rem; }
.kpi-card,.panel { background:var(--surface); border:1px solid var(--divider); border-radius:1.5rem; box-shadow:var(--shadow); }
.kpi-card { padding:1.5rem; min-width:0; }
.kpi-card.accent { background:var(--primary); color:#fff; }
.kpi-card.gold { background:var(--goldLight); }
.kpi-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.accent .kpi-label,.accent .kpi-sub { color:#ffffffbf; }
.kpi-value { font:clamp(2rem,1.2rem + 2.5vw,3.5rem)/1.1 var(--display); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.gold .kpi-value { color:var(--gold); }
.kpi-sub,.kpi-freeze-note { font-size:.8rem; color:var(--muted); margin-top:.4rem; }
.kpi-freeze-note { font-style:italic; }
.content-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:2rem; margin-bottom:2.5rem; }
.panel { padding:2rem; min-width:0; }
.panel-title { font-size:1.5rem; margin:0 0 1.5rem; }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.875rem; font-weight:600; margin-bottom:.5rem; }
.form-input { width:100%; padding:.75rem 1rem; border:1.5px solid var(--border); border-radius:1rem; background:var(--surface2); }
.form-input:focus { outline:2px solid var(--primary); outline-offset:2px; }
.quick-amounts { display:flex; flex-wrap:wrap; gap:.5rem; }
.quick-btn { padding:.5rem 1rem; border:1px solid var(--border); border-radius:999px; background:var(--surface2); color:var(--muted); }
.quick-btn.active,.quick-btn:hover { background:var(--primary); color:#fff; }
.btn-primary { width:100%; padding:1rem; border-radius:1rem; background:var(--primary); color:#fff; font-weight:600; }
.progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:.875rem; }
.progress-bar-wrap { height:12px; background:var(--offset); border-radius:999px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--primary); transition:width .7s; }
.chart-container { height:320px; position:relative; }
.participants-table { width:100%; border-collapse:collapse; }
.participants-table th { text-align:left; text-transform:uppercase; font-size:.75rem; color:var(--muted); padding:.75rem; border-bottom:2px solid var(--border); }
.participants-table td { padding:1rem .75rem; border-bottom:1px solid var(--divider); overflow-wrap:anywhere; }
.weekly-log { display:grid; gap:.75rem; }
.week-item { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--divider); border-radius:1rem; background:var(--surface2); }
.week-item.current { border-color:var(--primary); background:var(--primaryLight); }
.week-badge { font-size:.75rem; font-weight:700; padding:.25rem .75rem; border-radius:999px; background:var(--primaryLight); color:var(--primary); }
.week-date { flex:1; color:var(--muted); font-size:.875rem; }
.week-total { font:1.5rem var(--display); font-variant-numeric:tabular-nums; }
.empty-state { text-align:center; color:var(--muted); padding:3rem 1rem; }
.status { margin:0 0 1rem; color:var(--muted); }
.celebration-overlay { position:fixed; inset:0; z-index:10; display:none; place-items:center; background:#000b; }
.celebration-overlay.show { display:grid; }
.celebration-card { max-width:420px; margin:1rem; padding:3rem 2.5rem; text-align:center; background:var(--surface); border-radius:2rem; }
.celebration-emoji { font-size:3.5rem; }
.celebration-title { font:2.5rem var(--display); color:var(--primary); }
.celebration-msg { color:var(--muted); margin:1rem 0 1.5rem; }
.btn-close { padding:.75rem 2rem; border-radius:1rem; background:var(--primary); color:#fff; }
.toast { position:fixed; right:1.5rem; bottom:1.5rem; z-index:20; padding:.75rem 1.25rem; border-radius:1rem; background:var(--text); color:var(--bg); display:none; }
.toast.show { display:block; }
@media(max-width:900px) { .content-grid { grid-template-columns:1fr; } }
@media(max-width:640px) {
  .main { padding:1.5rem 1rem; } .panel { padding:1.5rem; }
  .kpi-grid { grid-template-columns:1fr 1fr; } .week-item { flex-wrap:wrap; }
  .ayah-banner { padding:2rem 1.25rem; }
}