/* Parent + admin portals: responsive full page. Phone: stacked. Desktop: sidebar + two-column content. */
:root{--pg-bg:#eceef1;--pg-ink:#1b2430;--pg-mute:#566273;--pg-line:#c9cfd8;--pg-card:#fff;--pg-acc:#1f4fa3}
@media (prefers-color-scheme:dark){:root{--pg-bg:#14181e;--pg-ink:#e8ecf2;--pg-mute:#9aa6b6;--pg-line:#2f3845;--pg-card:#1d232c;--pg-acc:#5b8def;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #f2a900;outline-offset:2px}
/* Parent portal: responsive full page */
#portal{display:none}
body.portal{overflow:auto;background:var(--pg-bg,#eceef1);color:var(--pg-ink,#1b2430);-webkit-user-select:text;user-select:text;font-family:"Figtree",system-ui,sans-serif;height:auto}
body.portal #portal{display:block;max-width:1280px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-height:100dvh}
#portal *{box-sizing:border-box}
#portal button{min-height:44px}
#portal input,#portal select{font:inherit;font-size:16px;min-height:44px;padding:8px 12px;border-radius:10px;border:2px solid var(--pg-line,#c9cfd8);background:var(--pg-card,#fff);color:inherit;min-width:0}
#portal input[type=number]{width:90px}
#portal input.emo{width:64px;text-align:center}
.phead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 12px}
.phead h1{margin:0;font-size:24px}.phead h1 span{font-weight:500;color:var(--pg-mute,#566273);font-size:18px}
.ptabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;border-bottom:2px solid var(--pg-line,#c9cfd8)}
.ptabs button{padding:0 16px;border-radius:10px 10px 0 0;font-weight:700;color:var(--pg-mute,#566273);white-space:nowrap}
.ptabs button[aria-selected=true]{color:var(--pg-ink,#1b2430);box-shadow:inset 0 -4px 0 var(--pg-acc,#1f4fa3)}
.pbadge{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:#c23b32;color:#fff;font-size:12px;text-align:center}
.pmain{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.psec{background:var(--pg-card,#fff);border:1px solid var(--pg-line,#c9cfd8);border-radius:16px;padding:16px}
.psec h2{margin:0 0 10px;font-size:18px}
.pmute{color:var(--pg-mute,#566273);font-size:14px;margin:6px 0 0}
.pscroll{overflow-x:auto}
#portal table{border-collapse:collapse;width:100%;font-size:15px}
#portal th,#portal td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--pg-line,#c9cfd8);vertical-align:top}
#portal th small,#portal td small{display:block;font-weight:400;color:var(--pg-mute,#566273);font-size:12px}
#portal td.num{font-weight:800;font-size:18px}
.weekt th,.weekt td{text-align:center;padding:6px 4px;font-size:12px}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plist li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--pg-line,#c9cfd8)}
.plist li:last-child{border-bottom:0}
.plist li small{flex-basis:100%;color:var(--pg-mute,#566273)}
.kidstats li{justify-content:flex-start}.kidstats li b{min-width:90px}
.reqs li{align-items:center}
.pbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pbtns.grow{flex:1;min-width:260px}.pbtns.grow input[type=text]{flex:1;min-width:140px}
.pbtns label{display:flex;flex-direction:column;font-size:12px;color:var(--pg-mute,#566273);gap:2px}
.pform{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.pform input[type=text],.pform input:not([type]){flex:1;min-width:140px}
.pbtn{padding:0 16px;border-radius:10px;border:2px solid var(--pg-line,#c9cfd8);background:var(--pg-card,#fff);font-weight:700}
.pbtn.primary{background:var(--pg-acc,#1f4fa3);border-color:var(--pg-acc,#1f4fa3);color:#fff}
.pbtn.danger{color:#c23b32;border-color:#c23b32}
.ptag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:800;background:#e1e5ea;color:#2a3342}
.t-star{background:#cdeedb;color:#0f5a32}.t-late{background:#ffe1b8;color:#7a4300}.t-overdue{background:#ffd3cf;color:#8f1d15}.t-open{background:#d6e4ff;color:#173d8c}
.wc{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;font-weight:800;background:#e1e5ea;color:#2a3342}
.wc.s1{background:#ffe1b8}.wc.s2{background:#ffd666}.wc.s3{background:#7ddc8a;color:#0b3d1d}
.plus{color:#157a46}.minus{color:#c23b32}
.perr{color:#c23b32;font-weight:700;margin:10px 0 0}.pok{color:#157a46;font-weight:700;margin:10px 0 0}
.pgate{min-height:80dvh;display:grid;place-items:center}
.pcard-g{width:360px;max-width:100%;background:var(--pg-card,#fff);border:1px solid var(--pg-line,#c9cfd8);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:12px}
.pcard-g h1{margin:0;font-size:26px}.psub{margin:0;color:var(--pg-mute,#566273);font-size:14px}
.pcard-g label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.plink{background:none;color:var(--pg-acc,#1f4fa3);font-weight:700;text-decoration:underline}

a.plink{display:inline-block;padding:10px 0}
.pmain{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.pmain>p,.psec.wide{grid-column:1/-1}
.perr,.pok{padding:0}
.t-star{color:#0f5a32}
@media (prefers-color-scheme:dark){.ptag{background:#2c3542;color:#dfe5ee}.t-star{background:#14452b;color:#bff0d2}.t-late{background:#4d3512;color:#ffd9a3}.t-overdue{background:#4f1d19;color:#ffc9c3}.t-open{background:#1b2f5c;color:#cfe0ff}.wc{background:#2c3542;color:#dfe5ee}.wc.s1{background:#5a4220}.wc.s2{background:#7a6218;color:#fff}.wc.s3{background:#1f6b3a;color:#e6fff0}}

/* Desktop: sidebar navigation */
@media (min-width:900px){
  body.portal #portal.shell,body.portal #portal:has(.ptabs){display:grid;grid-template-columns:230px 1fr;grid-template-areas:"head head" "nav msg" "nav main";column-gap:28px;align-content:start}
  .phead{grid-area:head;border-bottom:2px solid var(--pg-line);margin-bottom:12px}
  .ptabs{grid-area:nav;flex-direction:column;border-bottom:0;overflow:visible;position:sticky;top:12px;align-self:start;gap:4px}
  .ptabs button{text-align:left;border-radius:10px;padding:0 14px;min-height:46px;font-size:16px}
  .ptabs button[aria-selected=true]{background:var(--pg-card);box-shadow:none;border:1px solid var(--pg-line);border-left:4px solid var(--pg-acc)}
  .pmain{grid-area:main;padding-top:4px}
  .perr,.pok{grid-area:msg}
  .phead h1{font-size:26px}
}
@media (min-width:1280px){#portal{font-size:16px}}

/* 4-digit PIN pad */
.pinpad{display:flex;flex-direction:column;align-items:center;gap:14px}
.pinboxes{display:flex;gap:14px;justify-content:center}
.pinbox{width:62px;height:76px;border-radius:16px;border:2px solid rgba(29,36,51,.28);background:#fff;color:#1d2433;display:grid;place-items:center;font-size:40px;line-height:1}
.pinbox.on{border-color:#1d2433;box-shadow:0 0 0 4px rgba(29,36,51,.14)}
.pinbox.full{border-color:#1d2433}
.pinerr{margin:0;min-height:22px;color:#b3261e;font-size:16px;font-weight:600;text-align:center}
.pinpad.bad .pinboxes{animation:pinshake .4s}
@keyframes pinshake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.pinkeys{display:grid;grid-template-columns:repeat(3,76px);gap:12px;justify-content:center}
.pinkeys button{height:68px;border-radius:18px;border:0;background:#1d2433;color:#fff;font-size:30px;font-weight:600;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pinkeys button:active{transform:scale(.94);background:#38425a}
.pinkeys button[data-pin=back]{background:transparent;color:#1d2433;font-size:28px}
.pincard{align-items:stretch;text-align:center}
.pincard .psub,.pincard h1,.pincard h2,.pincard p{text-align:center}
.gate-card .pinerr,.pcard-g .pinerr{color:#b3261e;font-size:16px}

/* Video recorder / player overlays (shared by the kids' app and the parent portal) */
.mo{position:fixed;inset:0;z-index:9999;background:#0d1016;color:#fff;display:flex;flex-direction:column;font-family:system-ui,-apple-system,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.mo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
.mo-title{font-size:20px}.mo-timer{font-variant-numeric:tabular-nums;font-size:18px;min-width:90px;text-align:right}
.mo-stage{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;padding:0 14px}
.mo-stage video{width:100%;height:100%;object-fit:contain;border-radius:18px;background:#000}
.mo-top,.mo-bar,.mo-actions,.mo-hint,.mo-err{flex:none;position:relative;z-index:1}
#mo-v{transform:scaleX(-1)}
.mo-bar{display:flex;justify-content:center;padding:14px 0 4px}
.mo-rec{width:84px;height:84px;border-radius:50%;border:5px solid #fff;background:transparent;display:grid;place-items:center;padding:0}
.mo-rec span{width:56px;height:56px;border-radius:50%;background:#ff5a36;transition:all .15s}
.mo-rec.on span{width:34px;height:34px;border-radius:9px}
.mo-hint,.mo-err,.mo-load{text-align:center;margin:6px 18px 18px;font-size:17px;color:#c3cad8;min-height:22px}
.mo-err{color:#ff9a86}
.mo-actions{display:flex;gap:14px;justify-content:center;padding:6px 18px 22px}
.mo-btn{min-height:52px;padding:0 24px;border-radius:26px;border:0;background:#fff;color:#0d1016;font:700 18px system-ui,sans-serif}
.mo-btn.ghost{background:rgba(255,255,255,.16);color:#fff}
.mo-btn.go{background:#2f8f4e;color:#fff;min-width:140px}
.mo-btn:disabled{opacity:.6}
.mo-card{margin:auto;max-width:420px;padding:28px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.mo-card h2{margin:0}.mo-card p{margin:0;color:#c3cad8;font-size:18px}

/* ---- Parent messages ---- */
.pm-alerts{padding:10px 16px}.pm-al{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px}
.pm-al .pbtn{min-height:40px}
.pm{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;padding:0;overflow:hidden}
.pm-side{padding:12px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--pg-line,#c9cfd8);background:#fafbfc}
.pm-side h2{margin:4px 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-mute,#566273)}
.pm-kid{display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border-radius:12px;border:1px solid transparent;background:transparent;min-height:56px}
.pm-kid.on{background:#e6edf8;border-color:#c5d3ee}.pm-kid.all{border:1px dashed #b7c2d6}
.pm-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--pg-acc,#1f4fa3);color:#fff;font-weight:700;font-size:18px;display:grid;place-items:center}
.pm-nm{flex:1;min-width:0;display:flex;flex-direction:column}.pm-nm b{font-size:16px}.pm-nm small{color:var(--pg-mute,#566273);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-main{display:flex;flex-direction:column;min-width:0;height:min(70dvh,640px)}
.pm-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--pg-line,#c9cfd8)}
.pm-to{font-weight:700;color:var(--pg-mute,#566273);font-size:14px}
.pm-chip{padding:0 14px;min-height:36px;border-radius:99px;border:1px solid #c9cfd8;background:#fff;font-weight:600;font-size:14px;color:#566273}
.pm-chip.on{background:var(--pg-acc,#1f4fa3);border-color:var(--pg-acc,#1f4fa3);color:#fff}
.pm-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:#fafbfc;-webkit-overflow-scrolling:touch}
.pm-day{align-self:center;font-size:12px;font-weight:700;color:#6b7587;margin:6px 0 2px}
.pm-b{max-width:78%;padding:9px 14px;border-radius:18px;font-size:16px;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
.pm-b.me{align-self:flex-end;background:var(--pg-acc,#1f4fa3);color:#fff;border-bottom-right-radius:4px}
.pm-b.kid{align-self:flex-start;background:#eceff5;color:#1b2430;border-bottom-left-radius:4px}
.pm-b time{font-size:11px;opacity:.7;align-self:flex-end}
.pm-b.vid{padding:6px}.pm-b.vid time{padding:0 8px 2px}
.pm-vid{position:relative;width:min(260px,64vw);height:150px;border-radius:12px;border:0;background:linear-gradient(135deg,#4d6aa8,#8fa8d6);display:grid;place-items:center}
.pm-play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);color:#1b2430;display:grid;place-items:center;font-size:20px;padding-left:3px}
.pm-dur{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;border-radius:10px;padding:1px 8px}
.pm-new{position:absolute;right:8px;top:8px;background:#e8832a;color:#fff;font-size:12px;font-weight:700;border-radius:10px;padding:1px 8px}
.pm-st{font-size:12px;opacity:.85;padding:0 8px}
.pm-empty{margin:auto;text-align:center}
.pm-comp{border-top:1px solid var(--pg-line,#c9cfd8);padding:10px 16px 14px;display:flex;flex-direction:column;gap:10px}
.pm-form{display:flex;gap:8px;align-items:flex-end}
.pm-form textarea{flex:1;min-height:44px;max-height:120px;border-radius:12px;border:1px solid #c9cfd8;padding:10px 12px;font:inherit;font-size:16px;resize:none}
.pm-form .pbtn{min-height:44px}
.pm-up{display:inline-flex;align-items:center;cursor:pointer;min-height:40px}
@media (max-width:760px){
  .pm{grid-template-columns:1fr}
  .pm-side{display:none}
  .pm-main{height:min(68dvh,620px)}
}
.pbtns label.pm-up{flex-direction:row;gap:0;font-size:inherit;color:inherit;align-items:center}
.pm-chip .pbadge{margin-left:4px}