/* app.css — Dashboard styles */
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:Nunito,sans-serif; background:#f0f4ff; color:#1a1f3c; font-size:14px; }
:root {
  --accent:#5b4cf5; --accent-light:#ede9fe;
  --green:#22c55e; --green-light:#dcfce7;
  --red:#dc2626; --red-light:#fee2e2;
  --amber:#f59e0b; --amber-light:#fef3c7;
  --surface:#fff; --surface2:#f7f9ff;
  --border:#e2e8f0; --muted:#6b7a99; --text:#1a1f3c;
  --radius:14px; --radius-sm:8px;
  --shadow:0 2px 10px rgba(91,76,245,.08);
}
.nav { background:#fff; border-bottom:1.5px solid var(--border); padding:0 20px;
       height:54px; display:flex; align-items:center; justify-content:space-between;
       position:sticky; top:0; z-index:100; box-shadow:var(--shadow); }
.nav-brand { font-weight:900; font-size:18px; color:var(--accent); display:flex; align-items:center; gap:6px; }
.nav-tabs { display:flex; gap:4px; }
.nav-tab { padding:6px 14px; border-radius:99px; border:none; background:none; cursor:pointer;
           font-family:Nunito; font-weight:700; font-size:13px; color:var(--muted);
           text-decoration:none; display:inline-flex; align-items:center; transition:all .15s; }
.nav-tab:hover { background:var(--surface2); color:var(--text); }
.nav-tab.active { background:var(--accent-light); color:var(--accent); }
.page { display:none; }
.page.active { display:block; }
.page-inner { max-width:680px; margin:0 auto; padding:20px; }
.greeting { font-size:24px; font-weight:900; margin-bottom:4px; }
.greeting-sub { color:var(--muted); font-size:14px; margin-bottom:20px; text-transform:capitalize; }
/* Kids */
.kid-card { background:#fff; border-radius:var(--radius); border:1.5px solid var(--border);
            margin-bottom:14px; box-shadow:var(--shadow); overflow:hidden; }
.kid-header { display:flex; align-items:center; gap:12px; padding:14px 16px 10px; }
.kid-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
              justify-content:center; font-size:22px; flex-shrink:0; }
.kid-name { font-weight:900; font-size:16px; }
.kid-meta { font-size:12px; color:var(--muted); }
.kid-body { padding:0 16px 14px; }
.progress-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700;
                  color:var(--muted); margin-bottom:5px; }
.progress-bar { background:var(--surface2); border-radius:99px; height:8px; overflow:hidden; margin-bottom:10px; }
.progress-fill { height:100%; border-radius:99px; transition:width .5s; }
/* Tasks */
.task-item { display:flex; align-items:center; gap:8px; padding:6px 8px;
             border-radius:var(--radius-sm); margin-bottom:4px;
             background:var(--surface2); border:1.5px solid var(--border); transition:all .15s; }
.task-item.state-valid { opacity:.7; }
.task-item.state-open:hover { border-color:var(--accent); background:var(--accent-light); }
.task-item.negative { background:#fff5f5; border-color:#fca5a5; }
.task-status-icon { font-size:14px; flex-shrink:0; }
.task-name { flex:1; font-size:13px; font-weight:600; }
.task-pts-badge { font-size:11px; font-weight:700; background:var(--accent-light); color:var(--accent);
                  padding:2px 7px; border-radius:99px; flex-shrink:0; }
.tag-sm { font-size:10px; font-weight:700; padding:2px 6px; border-radius:99px; }
.tag-pending { background:var(--amber-light); color:#92400e; }
.tag-valid   { background:var(--green-light); color:#15803d; }
.section-label { font-size:11px; font-weight:700; text-transform:uppercase;
                 letter-spacing:.4px; margin:8px 0 4px; }
.section-label.accent { color:var(--accent); }
.section-label.red    { color:var(--red); }
/* Leaderboard */
.leaderboard-section { margin-top:24px; }
.section-title { font-weight:900; font-size:17px; margin-bottom:12px; }
.lb-row { background:#fff; border-radius:var(--radius); border:1.5px solid var(--border);
          display:flex; align-items:center; gap:12px; padding:12px 16px;
          margin-bottom:8px; box-shadow:var(--shadow); }
.lb-rank { font-size:22px; min-width:28px; }
.lb-name { display:flex; align-items:center; gap:8px; min-width:100px; font-weight:800; }
.lb-bar-wrap { flex:1; background:var(--surface2); border-radius:99px; height:8px; overflow:hidden; }
.lb-bar-fill { height:100%; border-radius:99px; transition:width .5s; }
.lb-pts { font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
                 z-index:200; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:var(--radius); padding:24px; max-width:480px;
         width:100%; box-shadow:0 16px 48px rgba(0,0,0,.2); max-height:90vh; overflow-y:auto; }
.loading { color:var(--muted); padding:20px 0; }
.error   { color:var(--red); }
@media(max-width:600px){
  .page-inner { padding:14px; }
  .greeting { font-size:20px; }
  .nav { padding:0 12px; }
  .nav-tab { padding:5px 9px; font-size:11px; }
}