* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--canvas); color:var(--ink); line-height:1.45; font-variant-numeric:tabular-nums; }
button { cursor:pointer; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { margin-bottom:4px; }
input,select,textarea,button { font:inherit; }
.phone-shell { display:grid; grid-template-rows:auto 1fr; align-items:start; min-height:100vh; margin:0 auto; }
.left-nav { position:sticky; top:0; grid-row:1/3; height:100dvh; border-right:1px solid var(--line); overflow-y:auto; }
.brand-lockup,.brand-row { display:flex; align-items:center; gap:8px; }
.nav-brand { margin-bottom:14px; border-bottom:1px solid var(--line); }
.side-menu { display:grid; }
.side-item { display:flex; align-items:center; border:0; background:transparent; color:#b1c3b5; text-align:left; }
.emblem { display:grid; place-items:center; }
.app-header { grid-column:2; display:flex; align-items:center; justify-content:space-between; top:0; z-index:20; border-bottom:1px solid var(--line); }
.content { grid-column:2; }
.view { display:none; }
.view>* { min-width:0; }
.title-row { display:flex; justify-content:space-between; gap:12px; }
.title-row span,.muted { color:var(--muted); font-size:12px; }
.badge { display:inline-block; background:#304638; color:#b1c3b5; }
.badge.green,.summary-tile.green { color:var(--green); }
.badge.green { background:var(--green-soft); }
.badge.red { color:var(--red); background:var(--red-soft); }
.badge.amber { color:var(--amber); background:var(--amber-soft); }
.summary-tile { display:flex; flex-direction:column; gap:3px; background:var(--card); }
.summary-tile span { color:var(--muted); }
.summary-tile.red { color:var(--red); }
.summary-tile.amber { color:var(--amber); }
.attendance-draftbar { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); }
.range-picker { display:flex; gap:5px; }
.attendance-feedback { color:var(--green); font-size:12px; }
.school-holiday-settings { border-top:1px solid var(--line); padding-top:14px; }
.school-holiday-settings summary { cursor:pointer; font-weight:600; }
.school-holiday-form { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-top:12px; }
.holiday-list-row { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:8px 0; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dialog-header h2 { margin:0; overflow-wrap:anywhere; }
#attendanceDialog { width:690px; }
.attendance-detail-body { padding:18px; }
.calendar-toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; }
.calendar-month-nav { display:flex; align-items:center; gap:12px; }
.calendar-month-nav h3 { margin:0; }
.attendance-calendar,.calendar-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays { text-align:center; padding:10px 0; color:var(--muted); }
.calendar-day { display:flex; flex-direction:column; justify-content:space-between; min-width:0; border:1px solid var(--line); background:#27322c; }
.calendar-day.today { border-color:#8fe0b5; box-shadow:inset 0 0 0 1px #8fe0b5; }
.calendar-day.future { color:#b1c3b5; background:#2d382e; }
.calendar-notice { color:#edca85; font-size:12px; }
.calendar-holiday-label { overflow-wrap:anywhere; }
.editor-kind { margin-bottom:18px; }
dialog { overflow:auto; }
.whatsapp { color:#8fe0b5; }
.receipt { padding-bottom:18px; }
.receipt h1 { margin-bottom:2px; }
.receipt h2 { margin:20px 0; }
#documentForm { display:grid; gap:12px; }