:root{
  --cream:#FFF8EC; --mint:#E6F9E9; --leaf:#4ADE80; --forest:#1B6E3C;
  --sun:#FFD93D; --coral:#FF6B6B; --ink:#2B2B2B; --ink-soft:#6B6B6B; --border:#1F2A22;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--cream); color:var(--ink); font-family:'Nunito', sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Fredoka', sans-serif; margin:0; }
a{ text-decoration:none; }
.app{ max-width:460px; margin:0 auto; min-height:100vh; position:relative; }
main{ padding:20px 16px 100px; }

.card{ background:#fff; border:3px solid var(--border); border-radius:20px; box-shadow:4px 4px 0 rgba(27,42,34,0.1); padding:15px; margin-bottom:14px; }
.top-bar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; cursor:pointer; width:fit-content; }
.logo-mark{ width:28px; height:28px; border-radius:8px; background:var(--leaf); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; }
.wordmark{ font-family:'Fredoka'; font-weight:700; font-size:17px; color:var(--forest); }

.child-row{ display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; }
.child-pill{ display:flex; align-items:center; gap:6px; border:2px solid var(--border); border-radius:999px; padding:6px 12px; font-weight:800; font-size:12px; background:#fff; cursor:pointer; white-space:nowrap; }
.child-pill.active{ background:var(--mint); color:var(--forest); }

.link-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.link-row h3{ font-size:14px; }
.see-all{ font-size:12px; font-weight:800; color:var(--forest); background:none; border:none; cursor:pointer; padding:0; }
.muted{ color:var(--ink-soft); font-weight:700; font-size:12px; }
.row-tight{ font-size:13px; margin:2px 0; }

.desc-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--mint); color:var(--forest); border:2px solid var(--border); border-radius:999px; padding:4px 10px; font-weight:800; font-size:11px; }
.status-chip{ display:inline-flex; align-items:center; gap:6px; border:2px solid var(--border); border-radius:999px; padding:4px 11px; font-weight:800; font-size:11px; }
.status-chip.good{ background:#DFF7E2; color:#1B8A4A; }
.status-chip.warn{ background:#FFF3D0; color:#B8860B; }
.status-chip.bad{ background:#FFE3E3; color:#E24C4C; }
.status-chip.neutral{ background:#EFEFEA; color:#6B6B6B; }

.week-row{ display:flex; gap:8px; margin-bottom:14px; }
.week-chip{ flex:1; text-align:center; border:2px solid var(--border); border-radius:14px; padding:8px 4px; font-weight:800; font-size:12px; cursor:pointer; background:#fff; }
.week-chip.done{ background:var(--mint); color:var(--forest); }
.week-chip.pending{ background:#FFF3D0; color:#B8860B; }
.week-chip.upcoming{ background:#EFEFEA; color:#9A9A8E; }
.week-chip small{ display:block; font-weight:700; font-size:9px; margin-top:2px; }

.thumb{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; width:76px; height:76px; border-radius:14px; background:var(--mint); border:2px solid var(--border); font-size:22px; flex-shrink:0; }
.thumb span.cap{ font-size:9px; font-weight:700; color:var(--forest); text-align:center; padding:0 4px; }
.thumb-row{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; }

.brief-box{ background:linear-gradient(160deg,#EFFCEF,#fff); border:3px dashed var(--forest); border-radius:16px; padding:18px; text-align:center; margin-bottom:12px; }
.pill-btn{ font-family:'Nunito'; font-weight:800; font-size:13px; color:#fff; background:var(--forest); border:3px solid var(--border); border-radius:999px; padding:10px 18px; cursor:pointer; display:inline-block; }
.pill-btn.secondary{ background:#fff; color:var(--forest); }
.pill-btn.small{ font-size:11px; padding:7px 12px; }
.back-link{ background:none; border:none; font-weight:800; font-size:13px; color:var(--forest); cursor:pointer; padding:0; margin-bottom:12px; display:flex; align-items:center; gap:4px; }

.info-row{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px dashed #E0DCCF; }
.info-row:last-child{ border-bottom:none; }
.info-row span:first-child{ color:var(--ink-soft); font-weight:700; }
.info-row span:last-child{ font-weight:800; text-align:right; }

.trend-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #E0DCCF; }
.trend-row:last-child{ border-bottom:none; }
.trend-arrow{ font-weight:800; color:var(--ink-soft); margin:0 6px; }

.demo-btn{ background:none; border:1.5px dashed #B9AE8E; color:#8A7F5E; font-size:11px; font-weight:700; border-radius:10px; padding:6px 10px; cursor:pointer; margin-top:8px; }

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; padding:20px; z-index:20; }
.modal-card{ background:#fff; border:3px solid var(--border); border-radius:20px; padding:18px; width:100%; max-width:360px; }
.pref-options{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pref-btn{ text-align:left; border:2px solid var(--border); border-radius:14px; padding:10px 14px; font-weight:800; font-size:13px; background:#fff; cursor:pointer; width:100%; }
.pref-btn:hover{ background:var(--mint); }

.bottom-nav{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:460px; background:#fff; border-top:3px solid var(--border); display:flex; justify-content:space-around; padding:8px 2px 10px; z-index:5; }
.nav-btn{ background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:800; font-size:9px; color:#9A9A8E; padding:4px 6px; border-radius:14px; cursor:pointer; }
.nav-btn .icon{ font-size:18px; }
.nav-btn.active{ color:var(--forest); background:var(--mint); }

.screen-full{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; text-align:center; }
.splash-bg{ background:radial-gradient(circle at 50% 30%, #EFFCEF 0%, var(--cream) 70%); }
.splash-logo{ width:84px; height:84px; border-radius:24px; background:var(--leaf); border:3px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:42px; margin-bottom:16px; box-shadow:5px 5px 0 rgba(27,42,34,0.12); }
.splash-word{ font-family:'Fredoka'; font-weight:700; font-size:34px; color:var(--forest); }
.splash-tagline{ margin-top:6px; font-weight:700; color:var(--ink-soft); font-size:13px; }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:300px; background:#fff; border:2px solid var(--border); border-radius:999px; padding:12px 16px; font-weight:800; font-size:14px; color:var(--ink); cursor:pointer; }
.google-btn img{ width:18px; height:18px; }

/* Admin-specific (utilitarian, table-based) */
.admin-body{ font-family:'Nunito', sans-serif; background:#F5F4EF; margin:0; }
.admin-wrap{ max-width:1000px; margin:0 auto; padding:24px 20px 60px; }
.admin-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.admin-nav{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.admin-nav a{ font-size:13px; font-weight:800; color:var(--forest); background:#fff; border:2px solid var(--border); border-radius:10px; padding:7px 12px; }
.admin-nav a.active{ background:var(--mint); }
.admin-card{ background:#fff; border:2px solid var(--border); border-radius:14px; padding:18px; margin-bottom:18px; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th{ text-align:left; padding:8px 10px; border-bottom:2px solid var(--border); font-size:11px; text-transform:uppercase; color:var(--ink-soft); }
.admin-table td{ padding:8px 10px; border-bottom:1px solid #E6E2D6; vertical-align:middle; }
.admin-btn{ font-family:'Nunito'; font-weight:800; font-size:12px; color:#fff; background:var(--forest); border:none; border-radius:8px; padding:7px 12px; cursor:pointer; }
.admin-btn.secondary{ background:#fff; color:var(--forest); border:2px solid var(--border); }
.admin-btn.danger{ background:var(--coral); }
.admin-form label{ display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:4px; margin-top:12px; }
.admin-form input, .admin-form select, .admin-form textarea{ width:100%; border:2px solid var(--border); border-radius:8px; padding:8px 10px; font-family:'Nunito'; font-size:13px; }
.admin-form textarea{ min-height:70px; }
.flash{ padding:10px 14px; border-radius:10px; font-size:13px; font-weight:700; margin-bottom:16px; }
.flash.success{ background:#DFF7E2; color:#1B8A4A; }
.flash.error{ background:#FFE3E3; color:#E24C4C; }

/* Report entry cards */
.report-card{ background:#FAF9F4; border:2px solid var(--border); border-radius:14px; padding:18px; margin-bottom:16px; }
.report-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid #E6E2D6; }
.report-card-top h3{ margin:0; font-size:16px; }
.attendance-select{ font-family:'Nunito'; font-weight:800; font-size:13px; padding:8px 14px; border-radius:10px; border:2px solid var(--border); background:#fff; }
.indicator-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.indicator-box{ background:#fff; border:2px solid var(--border); border-radius:12px; padding:12px; text-align:center; }
.indicator-box .ind-label{ display:block; font-size:12px; font-weight:800; margin-bottom:8px; }
.indicator-box select{ width:100%; padding:8px 4px; border-radius:8px; border:2px solid var(--border); font-size:12px; font-weight:700; text-align:center; font-family:'Nunito'; }
.text-field{ margin-bottom:14px; }
.text-field:last-child{ margin-bottom:0; }
.text-field label{ display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
.text-field textarea{ width:100%; min-height:80px; border:2px solid var(--border); border-radius:10px; padding:10px; font-family:'Nunito'; font-size:13px; resize:vertical; }