:root {
  --bg: #f4f6f8; --card: #fff; --fg: #1c2733; --muted: #5b6875; --line: #d9e0e6;
  --brand: #0b5c8a; --head: #eef3f7; --error-bg: #fdecec; --error: #a32020; --warn-bg: #fff4dc; --warn: #6d4c00;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 "Segoe UI", "Nirmala UI", Roboto, sans-serif; }
a { color: var(--brand); }
.top { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: var(--brand); color: #fff; padding: 10px 16px; }
.top a { color: #fff; text-decoration: none; }
.brand { font-weight: 700; font-size: 17px; }
.who { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.link { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
main { max-width: 1200px; margin: auto; padding: 16px; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 10px; }
.head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 12px; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.narrow { max-width: 420px; margin: 40px auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.stats b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: 13px; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
input, select { display: block; width: 100%; margin-top: 3px; padding: 8px 10px; font: inherit; color: var(--fg); background: #fff; border: 1px solid #aeb9c3; border-radius: 6px; }
.primary { background: var(--brand); color: #fff; border: 0; border-radius: 6px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.filters label { margin: 0; min-width: 120px; }
.filters .grow { flex: 1 1 240px; }
.scroll { overflow-x: auto; background: var(--card); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--head); font-size: 13px; white-space: nowrap; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.total td { font-weight: 700; border-top: 2px solid var(--line); }
.empty { text-align: center; color: var(--muted); padding: 24px; }
.tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--head); border: 1px solid var(--line); color: var(--muted); }
.cancelled td { color: var(--muted); }
dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.pager { display: flex; gap: 16px; justify-content: center; padding: 14px; }
.error { background: var(--error-bg); color: var(--error); padding: 8px 12px; border-radius: 6px; }
.warn { background: var(--warn-bg); color: var(--warn); padding: 8px 12px; border-radius: 6px; margin-bottom: 0; }
.note { color: var(--muted); font-size: 14px; }
.danger { background: #a32020; color: #fff; border: 0; border-radius: 6px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; border-radius: 6px; padding: 7px 14px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; margin-top: 14px; }
.amount { min-width: 110px; margin: 0; }
.receipt { max-width: 640px; margin-left: auto; margin-right: auto; }
.receipt h2 { margin-top: 10px; }
.receipt dl { margin-bottom: 12px; }
.stamp { border: 2px solid var(--error); color: var(--error); font-weight: 700; text-align: center; padding: 4px; margin: 0 0 12px; }
.shell { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; }
.side { width: 232px; flex: none; background: var(--brand); color: #fff; padding: 14px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { display: block; color: #fff; text-decoration: none; margin-bottom: 8px; }
.side .brand small { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
.side-group { margin: 14px 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.side-on, .side-off { display: block; padding: 5px 10px; border-radius: 6px; font-size: 14px; }
.side-on { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; text-decoration: none; }
.side-off { color: rgba(255,255,255,.62); }
.side .who { margin: 16px 0 0; }
.stats.small { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.stats.small b { font-size: 17px; }
.stats small { display: block; font-size: 12px; }
.good { color: #1a7f4b; }
.bad { color: #c62838; }
.warned { color: #8a5b00; }
.flush { padding: 0; overflow: hidden; }
.listhead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 14px 16px; }
.listhead h2 { margin: 0; }
.group td { background: var(--head); font-weight: 700; font-size: 13px; border-bottom: 2px solid var(--brand); }
.group span { font-weight: 400; color: var(--muted); }
.tag.new { background: #e3f6ea; border-color: #bfe6cd; color: #1a7f4b; }
.tag.family { background: #e6f1f8; border-color: #c5deee; color: var(--brand); font-weight: 600; }
.tag.cls { background: #fdeee6; border-color: #f6d6c5; color: #b04a14; }
.actions { white-space: nowrap; }
.mini { display: inline-block; padding: 2px 9px; border-radius: 5px; background: #e6f1f8; color: var(--brand); text-decoration: none; font-size: 13px; font-weight: 600; }
.mini.pay { background: #e3f6ea; color: #1a7f4b; }
.banner { background: var(--brand); color: #fff; border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
.banner h1 { color: #fff; }
.banner p { margin: 6px 0 0; overflow-wrap: anywhere; }
.pill { display: inline-block; background: rgba(255,255,255,.22); border-radius: 10px; padding: 0 9px; font-size: 12px; font-weight: 700; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin: 16px 0 8px; color: var(--muted); }
.box { border: 1px solid var(--line); border-radius: 8px; padding: 2px 14px 12px; margin: 14px 0; background: var(--card); }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.details dt { font-size: 12px; }
.months { line-height: 2; margin-bottom: 0; }
.month { display: inline-block; background: var(--bg); border-radius: 10px; padding: 0 9px; font-size: 13px; font-weight: 600; }
.paybar { position: sticky; bottom: 0; background: var(--card); padding: 10px 0 2px; }
.btn.pay { display: block; text-align: center; background: #1f9d55; padding: 10px; }
dialog { width: min(860px, calc(100vw - 24px)); max-height: 92vh; border: 0; border-radius: 12px; padding: 0; color: var(--fg); }
dialog::backdrop { background: rgba(0,0,0,.5); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.dialog-head h2 { margin: 0; font-size: 20px; }
.close { background: var(--bg); border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 20px; cursor: pointer; }
#dialog-body { padding: 16px 18px; background: var(--card); }
.hidden { display: none; }
.tabs.plain { position: static; }
.listactions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn.add { background: #e7561f; }
.btn.edit { background: var(--card); color: var(--brand); border: 1px solid var(--line); font: inherit; font-weight: 600; cursor: pointer; text-align: center; padding: 10px; flex: 1; }
.paybar { display: flex; flex-wrap: wrap; gap: 8px; }
.paybar .btn.pay { flex: 1; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menubox { position: absolute; right: 0; z-index: 5; width: 280px; max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.menubox a { display: block; padding: 7px 10px; border-radius: 6px; text-decoration: none; color: var(--fg); }
.menubox a:hover { background: var(--bg); }
.menubox small { display: block; color: var(--muted); }
.menugroup { margin: 8px 10px 4px; font-size: 11.5px; font-weight: 700; color: #e7561f; text-transform: uppercase; }
.promise { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.promise input { flex: 1 1 140px; width: auto; margin: 0; }
.pending { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.pending span { flex: 1 1 220px; }
.pending input { flex: 1 1 150px; width: auto; margin: 0; }
.checks.col { flex-direction: column; gap: 6px; margin-bottom: 12px; }
@media print { .paybar, details.box { display: none; } main { max-width: none; padding: 0; } }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; background: #e9e6df; border-radius: 8px; padding: 5px; margin-bottom: 14px; position: sticky; top: 58px; z-index: 1; }
.tabs a { padding: 6px 14px; border-radius: 6px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.tabs a.on { background: var(--brand); color: #fff; }
.childcard { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; color: var(--fg); text-decoration: none; background: var(--card); }
.childcard > span { display: block; font-size: 13.5px; margin-top: 3px; }
.checks { display: flex; flex-wrap: wrap; gap: 14px; }
.checks label { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--fg); }
.checks input { width: auto; margin: 0; }
details summary { cursor: pointer; }
details .scroll { margin-top: 10px; }
.filters .mini.big { align-self: flex-end; padding: 9px 14px; }
.prevdue td { color: #c62838; font-weight: 600; }
.spread { justify-content: space-between; align-items: center; }
.flat { margin: 2px 0 0; }
.rows div { display: contents; }
.rows dd { text-align: right; }
.okbox { background: #e3f6ea; color: #1a7f4b; padding: 8px 12px; border-radius: 6px; }
.alloc { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px 14px 12px; margin-bottom: 12px; }
.allocrow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.allocrow b { flex: 1 1 140px; }
.allocrow span { font-size: 13px; }
.allocrow .amount { width: 130px; min-width: 0; margin: 0; }
.allocrow.prev { background: #fdecec; border-color: #f2c4c4; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.buttons.right { justify-content: flex-end; }
.mini.big { padding: 7px 14px; font-size: 14px; border: 0; cursor: pointer; font-family: inherit; }
textarea { display: block; width: 100%; margin-top: 3px; padding: 8px 10px; font: inherit; color: var(--fg); background: #fff; border: 1px solid #aeb9c3; border-radius: 6px; }
.receipt { background: #fff; color: #000; max-width: 800px; padding: 26px 32px; margin: 0 auto 14px; font-size: 12.5px; border: 1px solid var(--line); }
.receipt h1 { text-align: center; font-size: 22px; }
.receipt .addr { text-align: center; font-size: 11px; border-bottom: 2px solid #000; padding-bottom: 6px; margin: 2px 0 8px; }
.rbox { border: 2px solid #000; padding: 7px 9px; margin: 0 0 8px; }
.rbox.title { text-align: center; font-size: 13px; letter-spacing: .05em; }
.rbox h3 { color: #000; margin: 0 0 4px; font-size: 11.5px; letter-spacing: 0; }
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.cells.bare { margin: 0; }
.cells small { display: block; font-size: 10px; font-weight: 700; }
.rname { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.rpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.rpair .rbox table td { padding: 3px 2px; border-bottom: 1px solid #000; }
.rsub { margin: 2px 0; font-size: 10.5px; font-weight: 700; }
.center { text-align: center; }
.rbal { font-size: 20px; font-weight: 700; margin: 8px 0; }
.rfoot { text-align: center; font-size: 10.5px; margin: 6px 0 0; border-top: 2px solid #000; padding-top: 5px; }
@media (max-width: 820px) {
  .shell { display: block; }
  .side { width: auto; height: auto; position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .side-group, .side-off { display: none; }
  .side .brand { margin: 0; margin-right: auto; }
  .side .who { margin: 0; }
}
@media print {
  .top, .noprint, .side { display: none; }
  body { background: #fff; }
  .card { border: 0; }
}
@media print { .pagebreak { break-before: page; } }

.callrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.kid { border-top: 1px solid var(--line); padding: 6px 0; }
.kid > summary { display: grid; grid-template-columns: minmax(120px, 1.2fr) 100px minmax(160px, 2fr) minmax(120px, 1fr); gap: 10px; cursor: pointer; }
@media (max-width: 700px) { .kid > summary { grid-template-columns: 1fr 90px; } }

/* Receipt, laid out like the old one */
.rpair.wide { grid-template-columns: 1.6fr 1.4fr; }
@media (max-width: 640px) { .rpair.wide { grid-template-columns: 1fr; } }
.rbox.flush { padding: 0; }
.rbox.flush h3 { padding: 5px 7px; margin: 0; border-bottom: 2px solid #000; }
.rpair .rbox .rfee td { padding: 4px 7px; border-bottom: 1px solid #000; }
.rpair .rbox .rfee tr.concession td { color: #1e7e34; font-style: italic; border-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
.rfee tr.net td, .rfee tr.outstanding td { font-weight: 700; }
.rfee tr.subtotal td { font-weight: 700; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.rfee tr.total td { font-weight: 800; font-size: 13px; border-top: 2px solid #000; border-bottom: 0; }
.rsub.ruled { border-bottom: 2px solid #000; padding-bottom: 2px; }
.rpaid td { padding: 2px 0; border: 0 !important; }
.rpaid tr.total td { font-weight: 800; border-top: 2px solid #000 !important; padding-top: 4px; }
.rline { height: 2px; background: #28a745; margin: 8px 0; }

.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px dashed var(--line); border-radius: 10px; padding: 18px 12px; text-align: center; cursor: pointer; margin-bottom: 10px; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone.over, .dropzone:focus-within { border-color: var(--brand); background: #eef5fb; }
.dropzone.has-file { border-style: solid; border-color: #1a7f4b; }
.camera { position: relative; overflow: hidden; }
.camera input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.camera-panel { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.camera-panel .card { max-width: 900px; width: 100%; }
.camera-panel video { width: 100%; border-radius: 8px; background: #000; }

input.readonly { background: var(--head); color: var(--muted); }
.sharebar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sharebar .pdf { color: #c0392b; }
.share-msg { font-size: 12px; }
.clamp { max-width: 320px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sign { grid-template-columns: repeat(4, 1fr); margin-top: 40px; text-align: center; font-size: 11px; font-weight: 700; }
.sign div { border-top: 1px solid #000; padding-top: 4px; }
a.btnlink { display: inline-block; text-decoration: none; }

.months td, .months th { text-align: center; padding: 4px 6px; }
.months td.have { color: #1a7f4b; font-weight: 700; background: #e3f6ea; }
.months td.gap { color: #b04a14; }
.months td.future { color: var(--muted); }

.fundrow td { background: #eef8f1; }
form.inline { display: inline; }

.urgentrow td { background: #fff4e5; }
details.inline { display: inline-block; }

.donerow td { background: #f3faf5; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: #6c757d; }
.facts dd { margin: 0; }
.form label { display: block; margin-bottom: 10px; }
.register td, .register th { text-align: center; padding: 4px 5px; font-size: 12px; }
.register td:first-child, .register th:first-child { text-align: left; white-space: nowrap; }
.register th.hol, .register td.c-ho { background: #fff4d6; }
.register td.c-a { background: #fdecee; color: #a71d2a; }
.register td.c-p a { color: #1e7e34; }
.register td.c-h, .register td.c-s, .register td.c-nc { background: #fff8e6; }
.register td.c-l { background: #eef4fb; }

.portal { max-width: 640px; margin: 0 auto; }
.portal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; }
.portal .big { width: 100%; padding: 14px; font-size: 17px; }

.att-p, .att-a { display: inline-flex; gap: 3px; align-items: center; margin-right: 8px; }
.att-a { color: #a71d2a; }

.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cal-month table { width: 100%; border-collapse: collapse; text-align: center; font-size: 13px; }
.cal-month td { padding: 4px 0; }
.cal-month .k-weekly { background: #eef1f4; color: #6c757d; }
.cal-month .k-vacation { background: #fff4d6; }
.cal-month .k-festival { background: #fdecee; color: #a71d2a; }
.cal-month .k-event { background: #e8f1fb; color: #0c67af; }
.circ-page td.sign { width: 40%; height: 28px; }
@media print { .circ-page { break-after: page; border: 0; } }

.lp-bar meter { width: 90px; height: 8px; vertical-align: middle; }
.lp-plan { font-size: 13px; line-height: 1.6; }
.lp-p { display: inline-block; min-width: 26px; font-weight: 700; color: #0c67af; }
.nowrap { white-space: nowrap; }
.tag.t-blank { background: #fdecee; color: #a71d2a; }
.tag.t-full { background: #e6f4ea; color: #1e7e34; }
.tag.t-leave { background: #fff4d6; color: #8a5b00; }
.tag.t-part { background: #fdf0e8; color: #c4471a; }
.lp-form fieldset { margin-bottom: 10px; }
.lp-form label { display: block; margin-top: 6px; }
.lp-form input, .lp-form textarea, .lp-form select { width: 100%; }
@media print { .lp-teacher { break-inside: auto; } }

.panel-list h3 { margin: 14px 0 4px; font-size: 14px; color: #0c67af; }
.panel-list label.tick { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.panel-list label.tick input { width: 22px; height: 22px; flex: none; }
input.short { width: 80px; }
input.wide { width: 100%; min-width: 260px; }

.marksheet { max-width: 820px; }
.ms-head { text-align: center; font-size: 16px; margin-bottom: 8px; color: #0c67af; }
.grade { display: inline-block; min-width: 30px; text-align: center; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.g-A1 { background: #16a34a; } .g-A2 { background: #22c55e; } .g-B1 { background: #0c67ae; } .g-B2 { background: #3b82f6; } .g-C1 { background: #eab308; } .g-C2 { background: #f59e0b; } .g-D { background: #a855f7; } .g-E { background: #dc2626; }
.ms-result { padding: 8px 12px; border-radius: 6px; }
.ms-result.r-pass { background: #e6f4ea; color: #1e7e34; } .ms-result.r-fail { background: #fdecee; color: #a71d2a; } .ms-result.r-pending { background: #fff4d6; color: #8a5b00; }
.ms-sign { margin-top: 18px; }
input.bad { color: #a71d2a; font-weight: 700; }
@media print { .marksheet { break-after: page; border: 0; box-shadow: none; } }
/* Exam desk: date sheet, status grid, diary slips, design notes */
.scroll-x { overflow-x: auto; }
.print-only { display: none; }
.datesheet td, .datesheet th { vertical-align: top; min-width: 92px; }
.datesheet input.cell { width: 100%; min-width: 84px; }
.mini-check { display: block; font-weight: 400; font-size: 11px; color: #777; }
.ds-sub { margin-bottom: 6px; }
.ds-sub b { display: block; }
.ds-st { display: block; font-size: 12px; }
.ds-st.good { color: #1e7e34; } .ds-st.bad { color: #a71d2a; }
.note-box { border-left: 3px solid #0c67af; padding: 4px 8px; margin: 6px 0; background: #f6f9fc; }
.note-box p, .note-reply p { margin: 0 0 2px; }
.note-reply { border-left: 3px solid #1e7e34; margin: 6px 0 0 10px; padding: 2px 8px; background: #fff; }
.inline-form { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.slips { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.slip { border: 1px dashed #999; padding: 10px 12px; font-size: 12px; break-inside: avoid; min-height: 135mm; }
.slip table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.slip td, .slip th { border: 1px solid #ccc; padding: 3px 5px; text-align: left; vertical-align: top; }
.slip-school { text-align: center; color: #0c67af; }
.slip-title, .slip-class { text-align: center; margin-top: 4px; }
.slip-note { margin-top: 4px; color: #555; }
.slip-syl { font-size: 11px; }
.slip-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11px; }
.syl-sheet h2 { font-size: 16px; }
@media print {
  .datesheet input.cell { display: none; } .print-only { display: inline; }
  .slips { gap: 0; } .slip { height: 148mm; min-height: 0; overflow: hidden; }
  .slip:nth-child(4n) { break-after: page; }
  .syl-sheet { break-after: page; border: 0; box-shadow: none; }
}
/* Exam days: seating charts, duty letters */
.seat-room h2 { margin: 2px 0 6px; font-size: 17px; }
.seat-room .right { text-align: right; }
.seat-board { text-align: center; background: #eef3f8; border-radius: 6px; padding: 4px; font-size: 11px; letter-spacing: .1em; margin: 6px 0; }
.seat-row { display: grid; grid-template-columns: 34px repeat(6, 1fr); gap: 4px; margin-bottom: 4px; }
.seat-rl { align-self: center; font-weight: 700; color: #777; }
.seat { border: 1px solid #ccd6e0; border-radius: 6px; padding: 3px 5px; font-size: 11px; min-height: 58px; }
.seat.bench-start { margin-left: 6px; }
.seat b { display: block; font-size: 12px; }
.seat small { display: block; color: #777; }
.struck { text-decoration: line-through; color: #999; }
.t-c1 { background: #dbeafe; color: #1e40af; } .t-c2 { background: #ffedd5; color: #9a3412; } .t-c3 { background: #dcfce7; color: #166534; }
.t-c4 { background: #fef9c3; color: #854d0e; } .t-c5 { background: #e0f2fe; color: #075985; } .t-c6 { background: #e5e7eb; color: #111827; } .t-c7 { background: #f3f4f6; color: #6b7280; }
.duty-page .center { text-align: center; }
.duty-page h3 { font-size: 15px; margin: 14px 0 6px; }
.duty-page table.kv { border-collapse: collapse; margin: 8px 0; }
.duty-page table.kv th { text-align: left; padding: 2px 14px 2px 0; color: #555; font-weight: 600; }
.duty-page .sign-cell { min-width: 110px; height: 34px; }
.duty-page .ack { border-top: 1px dashed #999; margin-top: 16px; padding-top: 8px; font-size: 13px; }
@media print { .seat-room, .duty-page { break-after: page; border: 0; box-shadow: none; } .seat { min-height: 50px; } }
.report-class h2 { font-size: 16px; margin: 10px 0 4px; }
.prog-class h2 { font-size: 16px; margin: 0; }
tr.total td { border-top: 2px solid #ccd6e0; }
@media print { .report-class + .report-class { break-before: page; } .prog-class { break-inside: avoid; } }

/* Parent Portal */
.thread { border-left: 3px solid #e3e8ef; margin: 10px 0; padding-left: 12px; }
.thread .u { padding: 6px 0; border-bottom: 1px dashed #eef1f5; }
.thread .u-parent b { color: #8a5b00; }
.thread .u-int { color: #5f6b7a; background: #f8f9fa; }
.cmp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.cmp-acts details { flex-basis: 100%; }
.tag.cmp-open { background: #fde2e2; color: #a71d2a; }
.tag.cmp-in_progress { background: #fff1c2; color: #8a5b00; }
.tag.cmp-resolved { background: #dff3e6; color: #1e7e34; }
.inbox { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 12px; }
.app-row { display: inline-grid; grid-template-columns: 9em repeat(6, 6em); }
video.reel { max-width: 280px; max-height: 480px; display: block; margin: 8px 0; border-radius: 8px; }
@media (max-width: 700px) { .inbox { grid-template-columns: 1fr; } .app-row { grid-template-columns: 7em repeat(6, 3.2em); font-size: 13px; } }
.opt-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.opt-row input[type=radio] { width: auto; flex: none; }
.opt-row input:not([type=radio]) { flex: 1; }
label.short { max-width: 120px; }
.child-pick { display: flex; gap: 8px; align-items: flex-end; }
.att-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 420px; }
.att-grid span { text-align: center; padding: 8px 0; border-radius: 6px; font-weight: 600; }
.att-p { background: #dff3e6; color: #1e7e34; }
.att-a { background: #fde2e2; color: #a71d2a; }
.att-n { background: #f1f3f6; color: #8a94a3; }
img.cmp-photo { max-width: 240px; border-radius: 8px; }
.wa-msg { white-space: pre-wrap; font: inherit; background: #eefbe9; border-radius: 8px; padding: 10px; margin: 8px 0; }
.gate-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.gate-row > div { flex: 1; min-width: 200px; }
img.gate-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
input.short-num { width: 90px; }
.dir-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pending-row td { background: #fff8e1; }
.tick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 12px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.more-grid a.card { display: block; padding: 14px; font-weight: 600; text-decoration: none; margin: 0; }
.staff-bar { position: sticky; top: 0; z-index: 5; background: var(--bg, #fff); }