:root { --navy:#1f4e79; --sky:#2e75b6; --line:#d6e2ef; --bg:#f4f8fc; --ink:#1d2733; --muted:#6b7a8c;
  --g:#1e7d4f; --gbg:#e3f4ea; --a:#9a6a00; --abg:#fdf3d1; --r:#c0392b; --rbg:#fde8e6; }
* { box-sizing: border-box; }
/* Mobile-first: the base styles are for a ~375px phone; wider screens get the framed card (see bottom).
   System fonts only (no web-font download); Noto/Mangal/Nirmala cover Indian scripts on Android/Windows. */
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Oriya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Ol Chiki", "Noto Sans Meetei Mayek", "Noto Naskh Arabic", "Nirmala UI", Mangal, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.35; -webkit-text-size-adjust:100%; }
.frame { background:#fff; border-bottom:2px solid var(--line); }
.content { padding:16px 14px 20px; }
input, select, textarea, button { font-size:16px; } /* 16px stops phones zooming into fields */
input, select, textarea { max-width:100%; }
.foot { text-align:center; color:var(--muted); font-size:12px; margin-bottom:24px; }
.bar { background:var(--navy); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; }
.bar-title { min-width:0; overflow-wrap:anywhere; }
.menu summary { padding:6px 0; }
.bar-title { font-weight:700; font-size:17px; }
.menu { position:relative; font-size:13px; }
.menu summary { cursor:pointer; list-style:none; opacity:.9; }
.menu summary::-webkit-details-marker { display:none; }
.menu-list { position:absolute; inset-inline-end:0; top:26px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:8px; min-width:160px; box-shadow:0 6px 18px rgba(0,0,0,.12); overflow:hidden; z-index:5; }
.menu-item { display:block; width:100%; text-align:start; padding:9px 14px; font:inherit; border:0; background:none; color:inherit; }
.menu-item.signout { background:var(--sky); color:#fff; cursor:pointer; }
.muted { color:var(--muted); }
.login { text-align:center; padding:10px 6px; }
.logo { width:52px; height:52px; background:var(--sky); border-radius:10px; display:grid; place-items:center; margin:6px auto 10px; }
.brand { color:var(--navy); font-size:22px; margin:0; }
.sub { color:var(--muted); margin:4px 0 16px; font-size:14px; }
.stack { display:flex; flex-direction:column; gap:10px; }
input[type=email], input[type=password], input[type=date] { padding:10px 12px; border:1px solid #b9c9da; border-radius:6px; font:inherit; }
.btn { display:block; width:100%; background:var(--sky); color:#fff; border:0; border-radius:6px; padding:11px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; text-align:center; }
.btn:hover { background:var(--navy); }
.btn.inline { display:inline-block; width:auto; padding:9px 26px; }
.btn.ghost { width:auto; background:#e8f1fa; color:var(--sky); padding:7px 12px; }
.error { background:var(--rbg); color:var(--r); padding:8px 10px; border-radius:6px; font-size:14px; }
.link { color:var(--sky); display:inline-block; margin-top:14px; font-size:14px; }
.sky { color:var(--sky); display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; }
.dateline { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.datepick { display:flex; gap:6px; }
.list { list-style:none; margin:0 0 16px; padding:0; }
.row { display:flex; justify-content:space-between; align-items:center; padding:10px 2px; border-bottom:1px solid #e7eef6; }
.seg { display:inline-flex; gap:4px; }
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt span { display:inline-block; padding:4px 11px; border:1px dashed #b9c9da; border-radius:999px; font-size:13px; color:var(--muted); cursor:pointer; }
.opt input:focus-visible + span { outline:2px solid var(--sky); }
.opt.present input:checked + span { background:var(--gbg); color:var(--g); border:1px solid var(--gbg); font-weight:600; }
.opt.absent input:checked + span { background:var(--rbg); color:var(--r); border:1px solid var(--rbg); font-weight:600; }
.opt.late input:checked + span { background:var(--abg); color:var(--a); border:1px solid var(--abg); font-weight:600; }
.pill { padding:3px 11px; border-radius:999px; font-size:13px; font-weight:600; }
.pill.present { background:var(--gbg); color:var(--g); } .pill.absent { background:var(--rbg); color:var(--r); }
.pill.late { background:var(--abg); color:var(--a); } .pill.none { background:#eef2f6; color:var(--muted); font-weight:500; }
.saved { border:2px solid var(--g); background:var(--gbg); color:var(--g); border-radius:10px; padding:14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:16px; }
.saved strong { font-size:20px; } .saved span { color:var(--ink); font-size:13px; }
.past { margin-top:18px; }
.past h3, .card-h { font-size:14px; color:var(--navy); margin:6px 0 8px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { padding:4px 10px; border-radius:999px; background:#e8f1fa; color:var(--sky); font-size:13px; text-decoration:none; }
.chip.on { background:var(--sky); color:#fff; }
.class-card { display:flex; gap:12px; align-items:center; background:var(--sky); color:#fff; padding:16px; border-radius:10px; text-decoration:none; }
.class-card strong { display:block; font-size:17px; } .class-card small { opacity:.85; }
.tiles { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.tile { background:#e8f1fa; border-radius:8px; padding:12px; text-align:center; font-size:14px; }
.child { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.child strong { display:block; font-size:18px; } .child small { color:var(--muted); }
.avatar { width:46px; height:46px; border-radius:50%; border:2px solid #b8860b; background:#fdf3d1; color:#9a6a00; display:grid; place-items:center; font-weight:700; }
.today { display:flex; gap:8px; align-items:center; padding:11px 14px; border-radius:8px; font-weight:600; margin-bottom:14px; }
.today.present { background:var(--gbg); color:var(--g); } .today.late { background:var(--abg); color:var(--a); }
.today.absent { background:var(--rbg); color:var(--r); } .today.none { background:#eef2f6; color:var(--muted); }
.card { border:1px solid var(--line); border-radius:8px; padding:4px 12px 0; }
.card-h { background:#e8f1fa; margin:0 -12px 0; padding:8px 12px; border-radius:7px 7px 0 0; }
.card .list { margin:0; } .card .row:last-child { border-bottom:0; }
.refused { border:2px solid var(--r); background:var(--rbg); color:var(--r); border-radius:12px; text-align:center; padding:28px 16px; }
.refused h2 { margin:8px 0 4px; } .refused p { color:var(--ink); margin:0; }
.center-msg { text-align:center; padding:16px 0; }
.center-msg h2 { color:var(--navy); margin:8px 0 0; }
/* ---- Phase 1: admin, forms, notices, notes ---- */
a { color:var(--sky); }
.row a { text-decoration:none; } .row a:hover { text-decoration:underline; }
.row small { text-align:end; }
label { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--navy); font-weight:600; }
label.check { flex-direction:row; align-items:center; gap:6px; font-weight:500; color:var(--ink); }
input[type=text], input[type=url], input[type=search], textarea, select { padding:10px 12px; border:1px solid #b9c9da; border-radius:6px; font:inherit; font-weight:400; color:var(--ink); background:#fff; }
textarea { min-height:110px; resize:vertical; }
.pad { padding:12px 0 14px; }
.form-card { margin:14px 0; padding-bottom:0; }
.card { margin-bottom:14px; }
.row-form { display:flex; gap:8px; padding:10px 0 12px; flex-wrap:wrap; }

.inline-form { display:inline; margin:0; }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px; }
.btn.small { width:auto; padding:6px 12px; font-size:13px; }
.btn.warn { background:var(--rbg); color:var(--r); } .btn.warn:hover { background:#f8d3cf; }
.back { display:block; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; vertical-align:middle; }
.badge.grey { background:#eef2f6; color:var(--muted); } .badge.amber { background:var(--abg); color:var(--a); }
.badge.new { background:var(--sky); color:#fff; }
.notice-ok { background:var(--gbg); color:var(--g); padding:8px 10px; border-radius:6px; font-size:14px; }
.tile.big { display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--navy); padding:16px 12px; }
.tile.big strong { font-size:16px; } .tile.big small { color:var(--muted); }
a.tile { text-decoration:none; color:var(--navy); }
.switcher { margin-bottom:12px; }
.temp-pw code { display:inline-block; font-size:22px; padding:10px 16px; background:#e8f1fa; border-radius:8px; letter-spacing:1px; color:var(--navy); }
.updated { color:var(--muted); font-size:13px; margin:-6px 0 14px; }
.row { flex-wrap:wrap; gap:6px; }
.row > * { min-width:0; overflow-wrap:anywhere; }
.row-form > * { flex:1 1 100%; }
.inline-label { flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--ink); }
.consent { display:block; margin-top:2px; text-align:start; } .consent.ok { color:var(--g); } .consent.missing { color:var(--a); font-weight:600; }
.consent-form summary { color:var(--sky); cursor:pointer; font-size:13px; margin-top:4px; }
.link-row > span { flex:1 1 auto; }
/* Wider screens: framed card in the middle, two-column tiles. */
@media (min-width: 681px) {
  .frame { max-width:640px; margin:32px auto; border:2px solid var(--line); border-radius:12px; box-shadow:0 4px 18px rgba(31,78,121,.08); }
  .frame.narrow { max-width:420px; } .frame.wide { max-width:760px; }
  .bar { border-radius:10px 10px 0 0; padding:12px 18px; }
  .content { padding:20px 24px 24px; }
  .tiles { grid-template-columns:1fr 1fr; }
  .row { flex-wrap:nowrap; }
  .row-form > * { flex:0 1 auto; } .row-form select { flex:1; }
}
.row.history span { line-height:1.4; } .filters label { font-weight:500; }
.row.notice a { color:var(--ink); } .row.notice.unread strong { color:var(--navy); }
.notice-full h2 { color:var(--navy); margin:0 0 4px; font-size:20px; }
.notice-full .body, .note { line-height:1.5; }
.notes { list-style:none; padding:0; margin:0 0 12px; }
.note { border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:10px; }
.note p { margin:6px 0; } .note a { word-break:break-all; }
.note-h strong { color:var(--navy); }
.tiles-top { margin:0 0 14px; }
.class-links { margin-top:8px; }

/* ---- Languages ---- */
/* Right-to-left (Urdu, Kashmiri, Sindhi): layout uses logical properties above; arrows flip; Nastaliq needs taller lines. */
[dir=rtl] .arr { display:inline-block; transform:scaleX(-1); }
html[lang=ur] body, html[lang=ks-Arab] body { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", system-ui, sans-serif; line-height:1.9; }
html[lang=sd-Arab] body { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", system-ui, sans-serif; line-height:1.7; }
html[lang=ur] input, html[lang=ur] select, html[lang=ur] textarea, html[lang=ks-Arab] input, html[lang=ks-Arab] select { line-height:1.6; }
[dir=ltr] { unicode-bidi:isolate; }
.lang-picker { margin:14px 0 4px; text-align:start; font-size:14px; }
.lang-picker summary { cursor:pointer; color:var(--sky); display:inline-flex; align-items:center; gap:6px; padding:6px 0; }
.lang-list { list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px; }
.lang-list a { display:block; padding:8px 10px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink); background:#fff; overflow-wrap:anywhere; }
.lang-list a.on { border-color:var(--sky); background:#e8f1fa; font-weight:600; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.notice-box { background:var(--abg); color:var(--a); border-radius:8px; padding:10px 12px; font-size:14px; }
.tr-row { display:block; padding:10px 0; border-bottom:1px solid var(--line); }
.tr-key { display:block; font-size:12px; overflow-wrap:anywhere; }
.tr-en { margin:4px 0 6px; color:var(--muted); font-size:14px; }
.tr-form textarea { width:100%; font:inherit; font-size:16px; padding:8px; border:1px solid var(--line); border-radius:6px; }
.tr-actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.tr-actions .btn { width:auto; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.class-block { margin-bottom:10px; }
.tr-key .badge { background:var(--abg); color:var(--a); }