:root {
  --student-bg: #eef8ff;
  --student-accent: #338bea;
  --student-deep: #123b73;
  --parent-bg: #fff4ef;
  --parent-accent: #a62c56;
  --parent-deep: #65142f;
  --ink: #10233f;
  --muted: #6c7a90;
  --card: #ffffff;
  --line: #dbe5ef;
  --sunny: #fff4b9;
  --mild: #dff2ff;
  --rainy: #ffe1e6;
  --stormy: #ece3ff;
  --success: #3fb573;
  --danger: #b2274f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #edf2f7; color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
#app { min-height: 100vh; }
.shell { min-height: 100vh; padding: 22px 16px 36px; display: flex; justify-content: center; }
.shell.student { background: linear-gradient(180deg,#dff3ff 0%,var(--student-bg) 65%,#f8fbff 100%); }
.shell.parent { background: linear-gradient(180deg,#ffe7dd 0%,var(--parent-bg) 65%,#fffaf8 100%); }
.phone { width: min(100%, 430px); background: rgba(255,255,255,.92); border-radius: 30px; min-height: calc(100vh - 44px); box-shadow: 0 18px 60px rgba(23,43,77,.12); overflow: hidden; display:flex; flex-direction:column; }
.topbar { padding: 18px 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { font-weight:800; font-size:18px; }
.mini { font-size:12px; color:var(--muted); }
.content { padding: 10px 18px 24px; flex:1; }
.center { text-align:center; }
.hero { padding: 24px 8px 18px; text-align:center; }
.hero .weather-mark { font-size:64px; margin-bottom:8px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:34px; line-height:1.05; margin-bottom:10px; }
h2 { font-size:26px; line-height:1.15; margin-bottom:10px; }
h3 { font-size:18px; }
p { line-height:1.5; }
.tagline { font-size:20px; font-weight:800; margin:0 auto 10px; }
.subtle { color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; margin:12px 0; box-shadow:0 4px 16px rgba(20,46,85,.05); }
.card.highlight { border-width:2px; }
.card.student-highlight { border-color:#8cc6ff; }
.card.parent-highlight { border-color:#d9829f; }
.stack { display:grid; gap:12px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn { width:100%; border:0; border-radius:15px; padding:14px 16px; font-weight:800; font-size:16px; transition:.15s transform ease; }
.btn:active { transform:scale(.99); }
.btn.student { background:var(--student-accent); color:#fff; }
.btn.parent { background:var(--parent-accent); color:#fff; }
.btn.ghost { background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn.soft { background:#f4f7fb; color:var(--ink); }
.choice { display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; }
.choice .emoji { font-size:28px; width:38px; text-align:center; }
.choice strong { display:block; margin-bottom:2px; }
.choice small { color:var(--muted); }
.choice.selected { border-width:2px; }
.student .choice.selected { border-color:var(--student-accent); background:#f1f8ff; }
.parent .choice.selected { border-color:var(--parent-accent); background:#fff3f7; }
.weather-grid { display:grid; gap:10px; }
.weather { border:0; border-radius:18px; padding:14px 15px; display:flex; align-items:center; justify-content:space-between; text-align:left; }
.weather .left { display:flex; align-items:center; gap:12px; }
.weather .emoji { font-size:30px; }
.weather.sunny { background:var(--sunny); }
.weather.mild { background:var(--mild); }
.weather.rainy { background:var(--rainy); }
.weather.stormy { background:var(--stormy); }
.weather.selected { outline:3px solid rgba(51,139,234,.35); }
.field { width:100%; border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:#fff; }
textarea.field { min-height:110px; resize:vertical; }
.label { display:block; font-weight:700; margin:12px 0 7px; }
.notice { border-radius:16px; padding:13px 14px; background:#fff8d8; border:1px solid #f0d76b; color:#6f5700; font-size:14px; }
.urgent { border-radius:18px; padding:16px; background:linear-gradient(180deg,#fff0f4,#ffe5ec); border:2px solid #d95d83; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef4fb; font-size:12px; font-weight:700; }
.badge.student { background:#e8f4ff; color:var(--student-deep); }
.badge.parent { background:#ffedf3; color:var(--parent-deep); }
.big-status { font-size:56px; margin:6px 0 2px; }
.status-title { font-size:30px; font-weight:900; margin-bottom:6px; }
.section-title { margin:18px 0 8px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:900; }
.nav { display:flex; gap:8px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; }
.nav button { flex:1; border:0; background:transparent; padding:8px 4px; font-size:12px; font-weight:700; color:var(--muted); }
.nav button.active { color:var(--ink); }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:24px; letter-spacing:.12em; font-weight:900; padding:14px; background:#f4f7fb; border-radius:14px; text-align:center; }
.small-link { background:none; border:none; color:#2e69a8; text-decoration:underline; padding:4px; }
.divider { height:1px; background:var(--line); margin:16px 0; }
.history-item { display:grid; grid-template-columns:72px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.history-item:last-child { border-bottom:0; }
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); max-width:340px; background:#16233b; color:#fff; padding:12px 16px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:20; font-size:14px; }
.kicker { font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.feedback { display:flex; gap:8px; }
.feedback button { flex:1; padding:10px 8px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:800; }
@media (max-width:360px) { .phone { border-radius:0; min-height:100vh; } .shell { padding:0; } .two { grid-template-columns:1fr; } }

/* MVP 1.1 additions */
.btn:disabled { opacity:.55; cursor:not-allowed; }
.spinner { width:28px; height:28px; margin:0 auto 12px; border:3px solid #dbe5ef; border-top-color:var(--student-accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-card { border-radius:16px; padding:13px 14px; margin-top:14px; background:#fff0f2; border:1px solid #e59aab; color:#7a1c35; font-size:14px; line-height:1.45; }
.code-input { text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.copy-code { width:100%; margin-top:8px; }
.sync-dot { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--muted); }
.sync-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:#aab5c2; }
.sync-dot.live { color:#257f52; }
.sync-dot.live::before { background:#3fb573; box-shadow:0 0 0 4px rgba(63,181,115,.12); }
.response-card { text-align:center; }
.response-icon { font-size:42px; margin-bottom:6px; }
.boundary-card { text-align:center; background:linear-gradient(180deg,#fffaf3,#fff); }
.success-mark { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 16px; border-radius:50%; background:var(--success); color:#fff; font-size:38px; font-weight:900; }

/* MVP 1.2 notifications */
.notification-card { border-color:#f0c7d5; background:linear-gradient(180deg,#fff,#fff8fb); }
.notification-card.enabled { border-color:#a7d9bf; background:linear-gradient(180deg,#f7fffa,#fff); }

/* MVP 5 — two-state check-ins, points, history-first parent home */
.weather.ok { background:#e8f7ee; }
.weather.not_ok { background:#fff0f2; }
.weather.ok.selected { outline:3px solid rgba(63,181,115,.28); }
.weather.not_ok.selected { outline:3px solid rgba(178,39,79,.22); }
.points-card { background:linear-gradient(180deg,#fffdf3,#fff); border-color:#eadc9a; }
.points-pill { display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:8px 11px; border-radius:999px; background:#fff4c7; color:#6e5500; font-size:14px; font-weight:900; white-space:nowrap; }
.points-pill.large { margin:14px auto 0; width:max-content; font-size:16px; }
.points-balance { font-size:32px; line-height:1; font-weight:950; color:#6e5500; }
.points-balance.big { font-size:54px; margin-top:6px; }
.daily-checkin { border-color:#9bc9ef; background:linear-gradient(180deg,#f9fdff,#fff); }
.history-card { padding-top:6px; padding-bottom:6px; }
.status-chip { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:900; text-transform:capitalize; }
.status-chip.ok { background:#e8f7ee; color:#276d48; }
.status-chip.not-ok { background:#fff0f2; color:#8d2444; }
.status-chip.pending { background:#fff4c7; color:#6e5500; }
.status-chip.approved { background:#e8f7ee; color:#276d48; }
.status-chip.declined { background:#f1f3f6; color:#687386; }
.tiny { color:var(--muted); font-size:10px; }
.rewards-alert { border-color:#eadc9a; background:linear-gradient(180deg,#fffdf3,#fff); }
@media (max-width:380px) { .points-balance { font-size:28px; } }