/* =====================================================================
   PUCHURI design system (Bootstrap 5 theme)
   Colours from the brand: navy, primary blue, sky, green, amber, purple, red.
   "Not recorded" grey is neutral, never styled as a negative state.
   ===================================================================== */

@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('../vendor/nunito/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('../vendor/nunito/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../vendor/nunito/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../vendor/nunito/nunito-latin-800-normal.woff2') format('woff2'); }

:root {
    --p-navy: #0D3B7A;
    --p-navy-dark: #092B5C;
    --p-blue: #1565D8;
    --p-blue-dark: #0F52B5;
    --p-sky: #1EA0F0;
    --p-green: #22A34A;
    --p-amber: #F5A623;
    --p-purple: #7C5CFC;
    --p-red: #E5484D;
    --p-grey: #C5CDD8;

    --p-blue-soft: #E8F1FD;
    --p-green-soft: #E6F6EB;
    --p-amber-soft: #FEF4E2;
    --p-purple-soft: #F0ECFF;
    --p-red-soft: #FDECEC;
    --p-grey-soft: #F1F4F8;

    --p-bg: #F4F7FC;
    --p-card: #FFFFFF;
    --p-text: #1F2A44;
    --p-muted: #6B7590;
    --p-border: #E4EAF3;
    --p-radius: 16px;
    --p-radius-sm: 10px;
    --p-shadow: 0 6px 24px rgba(13, 59, 122, .07);
    --p-shadow-lg: 0 18px 50px rgba(13, 59, 122, .16);
    --p-sidebar-w: 252px;

    --bs-body-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-body-color: var(--p-text);
    --bs-body-bg: var(--p-bg);
    --bs-primary: var(--p-blue);
    --bs-primary-rgb: 21, 101, 216;
    --bs-link-color: var(--p-blue);
    --bs-link-color-rgb: 21, 101, 216;
    --bs-border-color: var(--p-border);
    --bs-border-radius: var(--p-radius-sm);
}

html, body { min-height: 100%; }
body { font-family: var(--bs-body-font-family); background: var(--p-bg); color: var(--p-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .fw-heavy { font-weight: 800; color: var(--p-navy); }
.text-muted, .p-muted { color: var(--p-muted) !important; }
a { text-decoration: none; }
[hidden] { display: none !important; }

/* ---- Buttons & forms ------------------------------------------------- */
.btn { border-radius: var(--p-radius-sm); font-weight: 700; padding: .6rem 1.15rem; }
.btn-sm { padding: .35rem .75rem; border-radius: 8px; }
.btn-primary { --bs-btn-bg: var(--p-blue); --bs-btn-border-color: var(--p-blue); --bs-btn-hover-bg: var(--p-blue-dark); --bs-btn-hover-border-color: var(--p-blue-dark); --bs-btn-active-bg: var(--p-navy); --bs-btn-disabled-bg: var(--p-blue); box-shadow: 0 6px 16px rgba(21, 101, 216, .25); }
.btn-outline-primary { --bs-btn-color: var(--p-blue); --bs-btn-border-color: var(--p-blue); --bs-btn-hover-bg: var(--p-blue); --bs-btn-hover-border-color: var(--p-blue); }
.btn-soft { background: var(--p-blue-soft); color: var(--p-blue); border: 0; }
.btn-soft:hover { background: #d8e7fb; color: var(--p-blue-dark); }
.btn-soft-danger { background: var(--p-red-soft); color: var(--p-red); border: 0; }
.btn-soft-danger:hover { background: #fadada; color: #c23a3f; }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.form-label { font-weight: 700; font-size: .9rem; color: var(--p-navy); margin-bottom: .35rem; }
.form-control, .form-select { border-radius: var(--p-radius-sm); border-color: var(--p-border); padding: .65rem .9rem; }
.form-select { padding-right: 2.4rem; }
.form-select-sm { padding: .3rem 2rem .3rem .65rem; }
.p-toolbar .form-select { min-width: 150px; }
.form-control:focus, .form-select:focus { border-color: var(--p-sky); box-shadow: 0 0 0 .2rem rgba(30, 160, 240, .18); }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.6rem; }
.input-icon > .p-toggle-pw { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--p-muted); padding: .25rem .4rem; }
.form-check-input:checked { background-color: var(--p-blue); border-color: var(--p-blue); }
.invalid-feedback { font-weight: 600; }

/* ---- Cards, stats, badges ------------------------------------------- */
.p-card { background: var(--p-card); border-radius: var(--p-radius); box-shadow: var(--p-shadow); border: 1px solid rgba(228, 234, 243, .6); }
.p-card-body { padding: 1.25rem; }
.p-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--p-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.p-card-title { font-size: 1.02rem; font-weight: 800; color: var(--p-navy); margin: 0; }

.p-stat { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
.p-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; flex: 0 0 auto; }
.p-stat-value { font-size: 1.65rem; font-weight: 800; color: var(--p-navy); line-height: 1.1; }
.p-stat-label { color: var(--p-muted); font-weight: 600; font-size: .9rem; }

.tone-blue { background: var(--p-blue-soft); color: var(--p-blue); }
.tone-green { background: var(--p-green-soft); color: var(--p-green); }
.tone-amber { background: var(--p-amber-soft); color: #C27C00; }
.tone-purple { background: var(--p-purple-soft); color: var(--p-purple); }
.tone-red { background: var(--p-red-soft); color: var(--p-red); }
.tone-grey { background: var(--p-grey-soft); color: #7A8499; }

.p-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.p-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.p-badge.no-dot::before { display: none; }

.p-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--p-sky), var(--p-blue)); flex: 0 0 auto; font-size: .95rem; }
.p-avatar.lg { width: 64px; height: 64px; font-size: 1.4rem; }

/* ---- App shell ------------------------------------------------------- */
.p-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--p-sidebar-w); background: linear-gradient(180deg, var(--p-navy) 0%, var(--p-navy-dark) 100%); color: #fff; padding: 1.25rem .9rem; display: flex; flex-direction: column; z-index: 1030; }
.p-sidebar .p-brand { display: block; padding: .25rem .4rem 1.25rem; }
.p-sidebar .p-brand img { width: 100%; max-width: 190px; }
.p-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; }
.p-nav-section { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 800; padding: 1rem .8rem .35rem; }
.p-nav a { display: flex; align-items: center; gap: .75rem; padding: .62rem .85rem; border-radius: 12px; color: rgba(255, 255, 255, .82); font-weight: 700; font-size: .95rem; transition: background .15s, color .15s; }
.p-nav a .bi { font-size: 1.1rem; width: 1.2rem; text-align: center; }
.p-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.p-nav a.active { background: var(--p-blue); color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.p-sidebar-foot { margin-top: auto; padding: .8rem .4rem 0; font-size: .75rem; color: rgba(255, 255, 255, .45); }

.p-main { margin-left: var(--p-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.p-topbar { height: 74px; background: #fff; border-bottom: 1px solid var(--p-border); display: flex; align-items: center; gap: 1rem; padding: 0 1.75rem; position: sticky; top: 0; z-index: 1020; }
.p-greeting { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.p-greeting img { width: 34px; }
.p-greeting .hello { font-weight: 800; color: var(--p-navy); font-size: 1.05rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-greeting .sub { color: var(--p-muted); font-size: .82rem; font-weight: 600; }
.p-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.p-context-select { min-width: 210px; max-width: 280px; font-weight: 700; color: var(--p-navy); }
.p-user-btn { display: flex; align-items: center; gap: .6rem; background: none; border: 0; padding: .25rem .4rem; border-radius: 12px; }
.p-user-btn:hover { background: var(--p-grey-soft); }
.p-user-btn .name { font-weight: 800; color: var(--p-navy); font-size: .9rem; line-height: 1.1; text-align: left; }
.p-user-btn .role { color: var(--p-muted); font-size: .75rem; font-weight: 600; }
.p-content { padding: 1.75rem; flex: 1; }
.p-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.p-page-head h1 { font-size: 1.5rem; margin: 0; }
.p-page-head p { margin: .2rem 0 0; color: var(--p-muted); font-weight: 600; }

/* Mobile chrome */
.p-mobile-header { display: none; }
.p-bottom-nav { display: none; }

@media (max-width: 991.98px) {
    .p-sidebar, .p-topbar { display: none; }
    .p-main { margin-left: 0; padding-bottom: 84px; }
    .p-mobile-header { display: block; background: linear-gradient(135deg, var(--p-blue) 0%, var(--p-navy) 100%); color: #fff; padding: 1rem 1.1rem 1.6rem; border-radius: 0 0 26px 26px; position: sticky; top: 0; z-index: 1020; box-shadow: 0 8px 24px rgba(13, 59, 122, .22); }
    .p-mobile-header .row-top { display: flex; align-items: center; gap: .75rem; }
    .p-mobile-header .title { font-weight: 800; font-size: 1.2rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .p-mobile-header .sub { font-size: .8rem; opacity: .85; font-weight: 600; }
    .p-mobile-header .btn-icon { color: #fff; background: rgba(255, 255, 255, .14); border: 0; border-radius: 12px; }
    .p-mobile-header .p-context-select { margin-top: .75rem; width: 100%; max-width: none; background-color: rgba(255, 255, 255, .95); }
    .p-content { padding: 1.1rem 1rem; margin-top: -0.6rem; }
    .p-page-head h1 { display: none; }
    .p-page-head p { margin-top: .4rem; }
    .p-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 68px; background: #fff; border-top: 1px solid var(--p-border); box-shadow: 0 -6px 20px rgba(13, 59, 122, .06); z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
    .p-bottom-nav a, .p-bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: var(--p-muted); font-size: .72rem; font-weight: 700; background: none; border: 0; }
    .p-bottom-nav .bi { font-size: 1.3rem; }
    .p-bottom-nav .active { color: var(--p-blue); }
}

/* Offcanvas "More" menu on mobile reuses the sidebar look */
.p-offcanvas { background: linear-gradient(180deg, var(--p-navy), var(--p-navy-dark)); color: #fff; }
.p-offcanvas .btn-close { filter: invert(1); }

/* ---- Lists (table on desktop, cards on mobile) ------------------------ */
.p-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.p-toolbar .p-search { flex: 1 1 220px; max-width: 360px; }
.p-table { margin: 0; }
.p-table thead th { background: #F8FAFD; color: var(--p-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; border-bottom: 1px solid var(--p-border); padding: .8rem 1rem; white-space: nowrap; }
.p-table td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--p-border); }
.p-table tbody tr:hover { background: #FAFCFF; }
.p-cell-main { font-weight: 700; color: var(--p-navy); }
.p-cell-sub { font-size: .82rem; color: var(--p-muted); }
.p-list-cards { display: none; }
.p-list-card { display: flex; gap: .85rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--p-border); }
.p-list-card:last-child { border-bottom: 0; }
.p-list-card .grow { flex: 1; min-width: 0; }
@media (max-width: 767.98px) {
    .p-table-wrap { display: none; }
    .p-list-cards { display: block; }
}
.p-pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1.1rem; border-top: 1px solid var(--p-border); color: var(--p-muted); font-weight: 600; font-size: .88rem; }

.p-empty { text-align: center; padding: 2.5rem 1rem; color: var(--p-muted); }
.p-empty .bi { font-size: 2.4rem; color: var(--p-grey); display: block; margin-bottom: .5rem; }
.p-empty h6 { color: var(--p-navy); font-weight: 800; }

.p-activity { list-style: none; margin: 0; padding: 0; }
.p-activity li { display: flex; gap: .8rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--p-border); }
.p-activity li:last-child { border-bottom: 0; }
.p-activity .ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.p-activity .what { font-weight: 700; color: var(--p-navy); font-size: .92rem; }
.p-activity .meta { font-size: .8rem; color: var(--p-muted); }

.p-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.p-quick a { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 12px; font-weight: 700; font-size: .9rem; }

.p-perm-group { border: 1px solid var(--p-border); border-radius: 12px; padding: .75rem 1rem; margin-bottom: .75rem; }
.p-perm-group h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--p-muted); margin-bottom: .5rem; }
.p-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; background: var(--p-grey-soft); padding: .1rem .4rem; border-radius: 6px; color: var(--p-navy); }
.p-json { background: #0F1F3D; color: #D6E4FF; border-radius: 10px; padding: .8rem 1rem; font-size: .78rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* ---- Auth screens ----------------------------------------------------- */
.p-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; }
.p-auth-brand { position: relative; overflow: hidden; background: radial-gradient(circle at 20% 15%, rgba(30, 160, 240, .45), transparent 45%), linear-gradient(150deg, var(--p-blue) 0%, var(--p-navy) 60%, var(--p-navy-dark) 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.p-auth-brand img.logo { width: 230px; }
.p-auth-brand h2 { color: #fff; font-size: 2.1rem; line-height: 1.2; max-width: 440px; }
.p-auth-brand p { color: rgba(255, 255, 255, .85); font-weight: 600; max-width: 430px; }
.p-auth-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.p-auth-points li { display: flex; gap: .75rem; align-items: center; font-weight: 700; }
.p-auth-points .bi { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.p-auth-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; }
.p-auth-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; position: relative; }
.p-auth-card { width: 100%; max-width: 410px; }
.p-auth-card .logo-mobile { display: none; width: 170px; margin: 0 auto 1.25rem; }
.p-auth-card h1 { font-size: 1.6rem; margin-bottom: .35rem; }
.p-auth-card .lead { color: var(--p-muted); font-weight: 600; font-size: .98rem; margin-bottom: 1.5rem; }
.p-auth-foot { margin-top: 2rem; text-align: center; font-size: .8rem; color: var(--p-muted); }
.p-auth-lang { position: absolute; top: 1.25rem; right: 1.25rem; }
.p-divider { display: flex; align-items: center; gap: .75rem; color: var(--p-muted); font-size: .8rem; font-weight: 700; margin: 1.25rem 0; }
.p-divider::before, .p-divider::after { content: ''; flex: 1; height: 1px; background: var(--p-border); }
.p-code-input { letter-spacing: .5em; text-align: center; font-size: 1.5rem; font-weight: 800; }
.p-invite-box { border: 1px solid var(--p-border); border-radius: 14px; padding: .4rem 1rem; margin-bottom: 1.25rem; }
.p-invite-box .row-i { display: flex; gap: .85rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--p-border); }
.p-invite-box .row-i:last-child { border-bottom: 0; }
.p-invite-box .bi { color: var(--p-blue); font-size: 1.2rem; }
.p-invite-box .k { font-size: .78rem; color: var(--p-muted); font-weight: 700; }
.p-invite-box .v { font-weight: 800; color: var(--p-navy); }

@media (max-width: 991.98px) {
    .p-auth { grid-template-columns: 1fr; background: linear-gradient(180deg, #fff 0%, #fff 70%, var(--p-blue-soft) 100%); }
    .p-auth-brand { display: none; }
    .p-auth-card .logo-mobile { display: block; }
    .p-auth-form { align-items: flex-start; padding-top: 3.5rem; }
}

/* ---- Lock screen & loader -------------------------------------------- */
.p-lock { position: fixed; inset: 0; z-index: 2000; background: radial-gradient(circle at 30% 20%, rgba(30, 160, 240, .35), transparent 50%), linear-gradient(150deg, var(--p-blue), var(--p-navy) 65%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.p-lock .p-card { width: 100%; max-width: 380px; padding: 2rem 1.75rem; text-align: center; }
.p-boot { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; justify-content: center; background: #fff; z-index: 3000; }
.p-boot img { width: 120px; animation: p-pulse 1.4s ease-in-out infinite; }
@keyframes p-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .75; } }

.p-offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 6000; background: var(--p-amber); color: #3b2a00; text-align: center; font-weight: 800; font-size: .85rem; padding: .4rem .75rem; padding-top: calc(.4rem + env(safe-area-inset-top)); line-height: 1.3; }
/* While offline, the bar takes real space: page, sticky headers and the sidebar start below it. */
:root { --p-offline-h: 0px; }
body.p-is-offline { padding-top: var(--p-offline-h); }
body.p-is-offline .p-topbar, body.p-is-offline .p-mobile-header { top: var(--p-offline-h); }
body.p-is-offline .p-sidebar { top: var(--p-offline-h); }
body.p-is-offline .p-lock, body.p-is-offline .p-boot { top: var(--p-offline-h); }

/* SweetAlert2 brand tune */
.swal2-popup { border-radius: 18px !important; font-family: var(--bs-body-font-family) !important; }
.swal2-title { color: var(--p-navy) !important; font-weight: 800 !important; }
.swal2-styled.swal2-confirm { background: var(--p-blue) !important; border-radius: 10px !important; font-weight: 700 !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; font-weight: 700 !important; }
.modal-content { border-radius: 18px; border: 0; box-shadow: var(--p-shadow-lg); }
.modal-header { border-bottom-color: var(--p-border); }
.modal-title { font-weight: 800; color: var(--p-navy); }
.modal-footer { border-top-color: var(--p-border); }
.swal2-html-container .form-control { font-size: 1rem; padding: .65rem .9rem; }
.swal2-html-container .p-code-input { font-size: 1.4rem; }

/* =====================================================================
   v3: overflow safety, vivid icon tiles, native-app feel
   ===================================================================== */

/* ---- Never scroll sideways --------------------------------------------- */
/* clip (not hidden) so <body> never becomes its own scroll box: touch scrolling stays on the page */
/* Not on <body>: iPhone Safari moves fixed bars (the bottom menu) when <body> clips; the page boxes clip instead. */
.p-main, .p-auth { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) { .p-main, .p-auth { overflow-x: hidden; } }
.min-w-0 { min-width: 0 !important; }
.p-main, .p-content, #p-page, .p-card, .p-card-body, .p-activity li > div { min-width: 0; }
.p-wrap { overflow-wrap: anywhere; word-break: break-word; }
.p-activity .what, .p-activity .meta, .p-cell-main, .p-cell-sub { overflow-wrap: anywhere; }
.p-stat-label { overflow-wrap: normal; word-break: normal; hyphens: none; }
.p-stat > span:last-child { min-width: 0; }
.p-activity li .btn { white-space: nowrap; flex: 0 0 auto; }
img, svg { max-width: 100%; }

/* ---- Vivid icon tiles (stats, activity, lists) ------------------------- */
.p-stat-icon, .p-activity .ico { position: relative; color: #fff !important; }
.p-stat-icon.tone-blue,   .p-activity .ico.tone-blue   { background: linear-gradient(135deg, #3FA2FF 0%, #1565D8 100%); box-shadow: 0 8px 18px rgba(21, 101, 216, .32); }
.p-stat-icon.tone-green,  .p-activity .ico.tone-green  { background: linear-gradient(135deg, #4ADE80 0%, #16A34A 100%); box-shadow: 0 8px 18px rgba(22, 163, 74, .30); }
.p-stat-icon.tone-amber,  .p-activity .ico.tone-amber  { background: linear-gradient(135deg, #FFC94D 0%, #F59E0B 100%); box-shadow: 0 8px 18px rgba(245, 158, 11, .32); }
.p-stat-icon.tone-purple, .p-activity .ico.tone-purple { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); box-shadow: 0 8px 18px rgba(124, 58, 237, .30); }
.p-stat-icon.tone-red,    .p-activity .ico.tone-red    { background: linear-gradient(135deg, #FF7A7F 0%, #E5484D 100%); box-shadow: 0 8px 18px rgba(229, 72, 77, .30); }
.p-stat-icon.tone-grey,   .p-activity .ico.tone-grey   { background: linear-gradient(135deg, #B8C2D3 0%, #8792A8 100%); box-shadow: 0 8px 18px rgba(103, 114, 138, .22); }
.p-stat-icon.tone-sky,    .p-activity .ico.tone-sky    { background: linear-gradient(135deg, #5CD0FF 0%, #1EA0F0 100%); box-shadow: 0 8px 18px rgba(30, 160, 240, .30); }
.p-stat-icon::after, .p-activity .ico::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); pointer-events: none; }
.p-activity .ico { border-radius: 12px; }

/* Stat cards: a soft colour wash that matches the icon */
.p-stat { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.p-stat::before { content: ''; position: absolute; right: -38px; bottom: -38px; width: 96px; height: 96px; border-radius: 50%; opacity: .07; background: currentColor; }
a.p-stat:hover { transform: translateY(-2px); box-shadow: var(--p-shadow-lg); }

/* Quick actions as app tiles */
.p-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-quick-item { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--p-border); color: var(--p-navy) !important; font-weight: 800; font-size: .92rem; transition: transform .15s ease, box-shadow .15s ease; }
.p-quick-item:hover { transform: translateY(-2px); box-shadow: var(--p-shadow); }
.p-quick-item .p-stat-icon { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 13px; }

/* ---- Native app feel ---------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }
#p-page { animation: p-enter .22s ease-out; }
@keyframes p-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.btn, .p-quick-item, a.p-stat, .p-list-card, .p-bottom-nav a, .p-bottom-nav button { touch-action: manipulation; }
.btn:active, .p-quick-item:active, a.p-stat:active { transform: scale(.97); }
.p-nav, .p-bottom-nav { user-select: none; }

@media (max-width: 991.98px) {
    .p-card { border-radius: 18px; }
    .p-bottom-nav a, .p-bottom-nav button { position: relative; }
    .p-bottom-nav .active::before { content: ''; position: absolute; top: 6px; width: 46px; height: 30px; border-radius: 15px; background: var(--p-blue-soft); z-index: -1; }
    .p-bottom-nav a, .p-bottom-nav button { z-index: 0; }
    .p-mobile-header { padding-top: calc(1rem + env(safe-area-inset-top)); }
    .p-list-card:active { background: #F6F9FE; }
    .p-stat { padding: 1rem; gap: .8rem; }
    .p-stat-icon { width: 46px; height: 46px; font-size: 1.25rem; }
    .p-stat-value { font-size: 1.45rem; }
    .p-card-header .btn-sm { white-space: nowrap; }
}

/* Full-screen dialogs on phones, like native sheets */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 0; max-width: none; height: 100%; }
    .modal-content { min-height: 100%; border-radius: 0; }
    .modal-dialog-scrollable .modal-content { max-height: 100%; }
    .modal-footer { position: sticky; bottom: 0; background: #fff; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
    .modal-footer .btn { flex: 1; }
    .p-toolbar .p-search { max-width: none; flex-basis: 100%; }
    .p-toolbar .form-select, .p-toolbar input[type=date] { flex: 1 1 140px; min-width: 0; }
    .p-page-head [data-role=page-actions] { width: 100%; }
    .p-page-head [data-role=page-actions] .btn { flex: 1; }
    .swal2-popup { width: calc(100% - 24px) !important; }
}
.wash-blue::before { color: #1565D8; } .wash-green::before { color: #16A34A; } .wash-amber::before { color: #F59E0B; }
.wash-purple::before { color: #7C3AED; } .wash-red::before { color: #E5484D; } .wash-grey::before { color: #8792A8; }
@media (max-width: 400px) {
    .p-stat { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ---- Auth screen backgrounds (phone look from the brand mockup) -------- */
.p-auth-bg-top, .p-auth-bg-bottom { display: none; position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0; }
.p-auth-form > .p-auth-card { position: relative; z-index: 1; }
.p-auth-form > .p-auth-lang { z-index: 2; }
.p-auth-card .logo-desktop { display: block; width: 210px; margin: 0 auto 1.75rem; }
@media (max-width: 991.98px) {
    .p-auth { background: #F7FBFF; }
    .p-auth-form { min-height: 100vh; min-height: 100dvh; overflow: hidden; align-items: center; padding: 3rem 1.5rem 7rem; }
    .p-auth-bg-top { display: block; top: 0; height: 190px; }
    .p-auth-bg-bottom { display: block; bottom: 0; height: 170px; }
    .p-auth-card .logo-desktop { display: none; }
    .p-auth-card .logo-mobile { width: 180px; margin-bottom: 2rem; }
    .p-auth-card .form-control { background-color: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .05); }
}
.p-steps { padding-left: 1.2rem; font-size: .92rem; color: var(--p-text); }
.p-steps li { margin-bottom: .4rem; }
.p-setup-key { border: 1px dashed var(--p-border); border-radius: 12px; padding: .6rem .8rem; background: #fff; }

/* ---- Loading feedback (see P.loading in ui.js) --------------------------- */
.p-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 5000; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.p-progress.on { opacity: 1; }
.p-progress span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, #1EA0F0, #1565D8, #22A34A); animation: p-indeterminate 1.1s ease-in-out infinite; }
@keyframes p-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
body.p-saving { cursor: progress; }
body.p-saving #app { pointer-events: none; }          /* no double submits while saving */
.p-btn-busy { opacity: .85; }
.p-btn-busy .spinner-border { vertical-align: -0.15em; }

/* ---- Audit log details ---------------------------------------------------------- */
.p-audit-detail { font-size: .92rem; }
.p-audit-detail .p-invite-box .v { font-weight: 700; word-break: break-word; }
.p-audit-section { margin: 1.1rem 0 .45rem; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--p-muted); }
.p-audit-table { font-size: .86rem; border: 1px solid var(--p-border); border-radius: 12px; overflow: hidden; }
.p-audit-table th { background: #F4F8FE; color: var(--p-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.p-audit-table td, .p-audit-table th { padding: .5rem .75rem; vertical-align: top; word-break: break-word; }
.p-audit-meta > div { display: flex; gap: 1rem; justify-content: space-between; padding: .45rem 0; border-bottom: 1px dashed var(--p-border); }
.p-audit-meta > div:last-child { border-bottom: 0; }
.p-audit-meta > div > span:first-child { color: var(--p-muted); font-weight: 700; flex-shrink: 0; }
.p-audit-meta > div > span:last-child { text-align: right; min-width: 0; word-break: break-word; }
.p-chip { display: inline-block; background: #EEF4FD; color: var(--p-navy); border-radius: 999px; padding: .05rem .55rem; margin: .1rem 0; font-size: .78rem; font-weight: 700; }
.p-audit-tech { border: 1px solid var(--p-border); border-radius: 12px; padding: .55rem .9rem; background: #FAFCFF; }
.p-audit-tech summary { cursor: pointer; font-weight: 700; color: var(--p-muted); font-size: .85rem; }
.p-json-light { background: #F4F7FB; color: #33415C; border: 1px solid var(--p-border); border-radius: 10px; padding: .7rem .9rem; font-size: .76rem; max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 575.98px) {
  .p-audit-meta > div { flex-direction: column; gap: .1rem; }
  .p-audit-meta > div > span:last-child { text-align: left; }
}

/* ---- Phone field: country code + number -------------------------------------------------- */
.p-phone { position: relative; flex-wrap: nowrap; }
.p-phone .p-phone-cc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .65rem; border: 1px solid var(--p-border); border-right: 0;
    border-radius: var(--p-radius-sm) 0 0 var(--p-radius-sm); background: #F4F8FE; color: var(--p-navy); font-weight: 700; white-space: nowrap; }
.p-phone .p-phone-cc b { font-weight: 700; }
.p-phone .p-phone-cc .bi { font-size: .7rem; color: var(--p-muted); }
.p-phone .p-phone-cc:disabled { opacity: .6; }
.p-flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(16, 42, 84, .08); }
.p-phone-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1080; width: min(320px, 100%); min-width: 260px; background: #fff; border-radius: 16px;
    box-shadow: 0 14px 40px rgba(16, 42, 84, .2); overflow: hidden; }
.p-phone-q { position: relative; padding: .6rem; }
.p-phone-q .bi { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); font-size: .85rem; }
.p-phone-q input { padding-left: 2rem; border-radius: 12px; background: #F4F8FE; border: 0; }
.p-phone-opts { max-height: 260px; overflow-y: auto; padding: 0 .35rem .4rem; }
.p-phone-opt { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--p-navy); }
.p-phone-opt span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-phone-opt b { color: var(--p-muted); font-weight: 700; font-size: .9rem; }
.p-phone-opt:hover { background: #F4F8FE; }
.p-phone-opt.on { background: #E8F1FE; }
.p-phone-opt.on b { color: var(--p-blue); }
.p-phone .form-control { min-width: 0; }

/* ---- Images: school logo + picker -------------------------------------------------------- */
.p-school-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; border: 1px solid var(--p-border); border-radius: 12px; overflow: hidden; padding: 3px; }
.p-school-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p-image-pick { display: flex; gap: 1rem; align-items: center; }
.p-image-preview { width: 84px; height: 84px; flex-shrink: 0; border: 2px dashed var(--p-border); border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #F8FBFF; overflow: hidden; color: var(--p-muted); font-size: 1.8rem; }
.p-image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p-greeting .p-school-logo { border-radius: 12px; }
.p-greeting .p-school-logo img { width: auto; }
.p-verify-box { border: 1px dashed var(--p-border); border-radius: 12px; padding: .9rem 1rem; background: #FAFCFF; }
.p-user-btn .name, .p-user-btn .role { white-space: nowrap; }

/* ---- Phone: workspace card in the header ------------------------------------------------- */
.p-ws-card { position: relative; display: flex; align-items: center; gap: .8rem; margin-top: .9rem; padding: .7rem .8rem; border-radius: 18px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.p-ws-logo { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 5px; box-shadow: 0 6px 16px rgba(5, 25, 60, .28); color: var(--p-blue); font-size: 1.5rem; }
.p-ws-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p-ws-name { font-weight: 800; font-size: 1.02rem; line-height: 1.2; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-ws-sub { font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .78); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ws-switch { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: #fff; }
.p-ws-card select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; border: 0; }
.p-ws-card.switchable:active { background: rgba(255, 255, 255, .2); }
.p-ws-card.compact { margin-top: .7rem; padding: .45rem .6rem; border-radius: 14px; gap: .6rem; }
.p-ws-card.compact .p-ws-logo { width: 34px; height: 34px; border-radius: 10px; padding: 3px; font-size: 1.05rem; box-shadow: none; }
.p-ws-card.compact .p-ws-name { font-size: .9rem; -webkit-line-clamp: 1; }
.p-ws-card.compact .p-ws-switch { width: 28px; height: 28px; border-radius: 8px; }

/* ---- 2-step: method choice, code sent, trusted devices ---------------------------------- */
.p-choice { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; background: #fff; border: 2px solid var(--p-border); border-radius: 16px; padding: .9rem 1rem; transition: border-color .15s, box-shadow .15s, transform .1s; }
.p-choice:hover, .p-choice:focus-visible { border-color: var(--p-blue); box-shadow: 0 8px 22px rgba(21, 101, 216, .12); }
.p-choice:active { transform: scale(.99); }
.p-choice .p-stat-icon { width: 46px; height: 46px; flex-shrink: 0; font-size: 1.25rem; }
.p-choice .badge { font-size: .65rem; vertical-align: middle; }
.p-sent-box { display: flex; gap: .7rem; align-items: center; background: #EEF9F1; color: #165F2C; border-radius: 12px; padding: .7rem .9rem; font-weight: 600; font-size: .88rem; text-align: left; }
.p-sent-box .bi { font-size: 1.4rem; }
.p-trust { background: #F4F8FE; border-radius: 12px; padding: .65rem .9rem .65rem 2.4rem; }
.p-trust .form-check-input { margin-left: -1.5rem; }
.p-trusted { display: flex; align-items: center; gap: .75rem; background: #F4F8FE; border-radius: 12px; padding: .6rem .8rem; }
.p-trusted .bi { color: var(--p-blue); font-size: 1.2rem; }
.p-trusted .btn { white-space: nowrap; flex-shrink: 0; }

/* ---- Support session bar ------------------------------------------------------------------ */
.p-support-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: linear-gradient(90deg, #FFF4DE, #FFE7B8); border: 1px solid #F5C66B;
  color: #5A3B00; border-radius: 14px; padding: .65rem .9rem; margin-bottom: 1rem; }
.p-support-bar > .bi { font-size: 1.5rem; color: #C77700; }
@media (max-width: 575.98px) { .p-support-bar .d-flex.gap-2 { width: 100%; } .p-support-bar .btn { flex: 1; } }

/* ---- School groups ---------------------------------------------------------------------------- */
.p-branch { padding: 1rem 1.1rem; transition: box-shadow .15s, transform .15s; }
.p-branch:hover { box-shadow: 0 10px 26px rgba(13, 59, 122, .10); }
.p-back { flex-shrink: 0; border-radius: 12px; }

/* ---- Billing ------------------------------------------------------------------------------- */
.p-tabs { gap: .35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.p-tabs::-webkit-scrollbar { display: none; }
.p-tabs .nav-link { border-radius: 999px; font-weight: 700; color: var(--p-muted); background: var(--p-card); border: 1px solid var(--p-border); padding: .45rem .95rem; white-space: nowrap; font-size: .9rem; }
.p-tabs .nav-link.active { background: var(--p-blue); border-color: var(--p-blue); color: #fff; box-shadow: 0 6px 16px rgba(21, 101, 216, .25); }
.p-billing-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: linear-gradient(90deg, #E8F1FD, #D7E7FC); border: 1px solid #B9D3F7;
    color: var(--p-navy); border-radius: var(--p-radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; }
.p-billing-bar > .bi { font-size: 1.4rem; color: var(--p-blue); }
.p-billing-bar.danger { background: linear-gradient(90deg, #FDECEC, #FBDADA); border-color: #F3B3B5; color: #8E1B1F; }
.p-billing-bar.danger > .bi { color: var(--p-red); }
@media (max-width: 575.98px) { .p-billing-bar .btn { width: 100%; } }
.p-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .9rem; }
.p-features li { display: flex; gap: .45rem; align-items: flex-start; font-weight: 600; font-size: .92rem; }
.p-features .bi { color: var(--p-green); margin-top: .1rem; }
.p-plan { transition: transform .15s ease, box-shadow .15s ease; }
.p-plan:hover { transform: translateY(-2px); box-shadow: var(--p-shadow-lg); }
.p-doc { padding: 1.75rem; max-width: 820px; }
.p-doc-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--p-blue-soft); padding-bottom: 1rem; margin-bottom: .5rem; }
.p-doc-logo { height: 38px; }
.p-doc-title { font-size: 1.6rem; font-weight: 800; color: var(--p-navy); letter-spacing: .02em; text-transform: uppercase; }
.p-doc-label { font-size: .75rem; font-weight: 800; color: var(--p-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.p-doc-table th, .p-doc-table td { padding: .6rem .5rem; }
.p-doc-table tfoot th { color: var(--p-navy); }
.p-doc-due th { font-size: 1.1rem; background: var(--p-blue-soft); }
.p-doc-amount { font-size: 2.1rem; font-weight: 800; color: var(--p-green); margin-top: 1rem; }
@media (max-width: 575.98px) { .p-doc { padding: 1.1rem; } .p-doc-title { font-size: 1.25rem; } }
@media print {
    .p-sidebar, .p-topbar, .p-mobile-header, .p-bottom-nav, .p-page-head, .p-support-bar, .p-billing-bar, .p-offline-bar, .p-tabs, .d-print-none { display: none !important; }
    body, .p-main, .p-content { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .p-doc { box-shadow: none !important; border: 0 !important; max-width: none; }
}
.p-subtabs { border-bottom: 1px solid var(--p-border); background: var(--p-card); border-radius: var(--p-radius) var(--p-radius) 0 0; padding: 0 1rem; gap: 1.25rem; }
.p-subtabs .nav-link { padding: .85rem 0; color: var(--p-muted); font-weight: 700; border-bottom: 2px solid transparent; border-radius: 0; }
.p-subtabs .nav-link.active { color: var(--p-blue); border-bottom-color: var(--p-blue); }
.p-subtabs + [data-role=list] > .p-card { border-top-left-radius: 0; border-top-right-radius: 0; }
.p-due { border-left: 4px solid var(--p-blue); }
/* A quote from PUCHURI (agreed price, e.g. Enterprise) */
.p-quote-card { border-left: 4px solid var(--p-purple); background: linear-gradient(90deg, var(--p-purple-soft), #fff 60%); }
.p-quote-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-purple); color: #fff; font-size: 1.35rem; flex: 0 0 auto; }
.p-quote-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p-purple); }
@media (max-width: 575.98px) { .p-quote-card .p-quote-icon { display: none; } }
/* How to pay on an invoice: online (main) and bank / MoMo (second) */
.p-pay-way { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); padding: .75rem 1rem; height: 100%; }
.p-pay-way.main { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-pay-way.main .fw-bold { color: var(--p-blue-dark); }
.p-pay-main { box-shadow: 0 6px 18px rgba(21, 101, 216, .28); }
/* Plan usage (staff accounts, students) */
.p-usage-wrap { display: grid; gap: .75rem; margin-top: 1rem; max-width: 520px; }
.p-usage-bar { height: 8px; border-radius: 99px; background: var(--p-grey-soft); overflow: hidden; margin-top: .35rem; }
.p-usage-bar span { display: block; height: 100%; border-radius: 99px; background: var(--p-green); }
.p-usage.near .p-usage-bar span { background: var(--p-amber); }
.p-usage.full .p-usage-bar span { background: var(--p-red); }
.p-lang-chip { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-blue-soft); color: var(--p-blue-dark); font-weight: 800; flex: 0 0 auto; }
/* Platform: labelled actions on a school's billing */
.p-manage { border-top: 1px solid var(--p-border); padding-top: 1rem; }
/* Lists whose rows open on click */
.p-row-link { cursor: pointer; }
.p-table tr.p-row-link:hover td { background: var(--p-grey-soft); }
.p-due .bi-receipt { color: var(--p-blue); }
.p-due.danger { border-left-color: var(--p-red); background: #FFF8F8; }
.p-due.danger .bi-receipt { color: var(--p-red); }
.p-summary { background: var(--p-grey-soft); border-radius: var(--p-radius-sm); padding: 1rem 1.25rem; display: grid; gap: .35rem; }
.p-lines { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); }
.p-card-header[hidden] { display: none !important; }
@media (max-width: 575.98px) { .p-due-actions { width: 100%; } .p-due-actions .btn { flex: 1 1 auto; } }

/* ---- Pricing table ---------------------------------------------------------------------------- */
.p-cycle { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 999px; box-shadow: var(--p-shadow); }
.p-cycle button { border: 0; background: transparent; color: var(--p-muted); font-weight: 800; padding: .5rem 1.1rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.p-cycle button.active { background: var(--p-blue); color: #fff; box-shadow: 0 6px 16px rgba(21, 101, 216, .28); }
.p-cycle button .p-save { font-size: .7rem; padding: .1rem .4rem; }
.p-cycle button.active .p-save { background: rgba(255, 255, 255, .22); color: #fff; }
.p-save { display: inline-block; background: var(--p-green-soft); color: var(--p-green); font-weight: 800; font-size: .75rem; border-radius: 999px; padding: .15rem .55rem; margin-left: .35rem; white-space: nowrap; }
.p-price-grid > .col { display: flex; }
.p-price-card { position: relative; width: 100%; display: flex; flex-direction: column; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 20px;
    padding: 1.75rem 1.5rem 1.5rem; box-shadow: var(--p-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.p-price-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); }
.p-price-card.featured { border: 2px solid var(--p-blue); box-shadow: 0 20px 50px rgba(21, 101, 216, .18); }
.p-price-card.is-current { border-color: var(--p-green); }
.p-price-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, var(--p-blue), var(--p-sky)); color: #fff;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 14px rgba(21, 101, 216, .3); }
.p-price-name { font-size: 1.3rem; font-weight: 800; color: var(--p-navy); margin: 0; }
.p-price-desc { color: var(--p-muted); font-size: .92rem; min-height: 2.6em; margin: .35rem 0 1rem; }
.p-price-amount { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; color: var(--p-navy); }
.p-price-amount .cur { font-size: .95rem; font-weight: 800; color: var(--p-muted); }
.p-price-amount .num { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.p-price-amount .num.muted { color: var(--p-grey); }
.p-price-amount .per { font-size: .95rem; font-weight: 700; color: var(--p-muted); }
.p-price-amount.sm .num { font-size: 1.8rem; }
.p-price-note { color: var(--p-muted); font-size: .85rem; font-weight: 600; min-height: 1.6em; margin-top: .45rem; }
.p-price-cta { margin: 1.25rem 0 1.1rem; }
.p-price-cta .btn { padding: .7rem 1rem; }
.p-price-divider { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--p-muted); padding-top: 1rem; border-top: 1px solid var(--p-border); margin-bottom: .75rem; }
.p-price-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; flex: 1 1 auto; }
.p-price-features li { display: flex; gap: .55rem; align-items: flex-start; font-weight: 600; font-size: .93rem; color: var(--p-text); }
.p-price-features .bi { color: var(--p-green); margin-top: .12rem; flex: 0 0 auto; }
.p-price-features.cols { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.p-price-foot { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: .9rem; border-top: 1px dashed var(--p-border); font-size: .82rem; color: var(--p-muted); font-weight: 600; }
.p-price-tile { height: 100%; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); padding: 1rem 1.1rem; background: var(--p-bg); }
.p-price-tile.off { opacity: .6; }
.p-draft { border: 1px dashed #F5C66B; }
@media (max-width: 575.98px) { .p-price-amount .num { font-size: 2.2rem; } .p-cycle button { padding: .45rem .75rem; font-size: .85rem; } }

.p-offer { display: flex; gap: .85rem; align-items: center; background: linear-gradient(90deg, #E9F8EE, #DDF3E5); border: 1px solid #B6E3C5; color: #166B34; border-radius: var(--p-radius-sm); padding: .8rem 1rem; }
.p-offer > .bi { font-size: 1.5rem; color: var(--p-green); }
.p-quote { background: var(--p-grey-soft); border-radius: var(--p-radius-sm); padding: .75rem 1rem; min-height: 90px; }
.p-quote .table { --bs-table-bg: transparent; }


/* ---- Plan cards ------------------------------------------------------------------------------- */
.p-no { color: var(--p-grey); font-weight: 800; }
.p-plans .c-year { display: none; }
.p-plans[data-cycle="year"] .c-year { display: block; }
.p-plans[data-cycle="year"] .c-month { display: none; }
.p-pc-top .c-month, .p-pc-top .c-year { margin-left: auto; }
.p-plans[data-cycle="year"] .p-pc-top .c-year { display: inline; }
.p-plans[data-cycle="month"] .p-pc-top .c-month { display: inline; }
.p-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 1.1rem; align-items: stretch;
    max-width: calc(var(--n, 3) * 320px); margin: 0 auto; }
.p-pc { position: relative; display: flex; flex-direction: column; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 22px;
    padding: 1.5rem 1.4rem 1.4rem; box-shadow: var(--p-shadow); color: var(--p-text); }
.p-pc.current { border: 2px solid var(--p-green); }
.p-pc-top { display: flex; align-items: center; gap: .4rem; min-height: 26px; margin-bottom: .6rem; flex-wrap: wrap; }
.p-pc-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.p-pc-chip { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .2rem .6rem; background: var(--p-green-soft); color: var(--p-green); white-space: nowrap; }
.p-pc-chip.pop { background: rgba(255, 255, 255, .14); color: #fff; }
.p-pc-badge { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .2rem .6rem; background: var(--p-purple-soft); color: var(--p-purple); white-space: nowrap; }
.p-pc-name { font-size: 1.3rem; font-weight: 800; color: var(--p-navy); margin: 0; }
.p-pc-desc { font-size: .9rem; color: var(--p-muted); margin: .3rem 0 1rem; min-height: 2.8em; }
.p-pc-strike { font-size: .85rem; color: var(--p-muted); font-weight: 600; min-height: 1.3em; }
.p-pc-price { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; color: var(--p-navy); }
.p-pc-price .num { font-size: 2.35rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.p-pc-price .num.muted { color: var(--p-grey); }
.p-pc-price .per { font-size: .9rem; font-weight: 700; color: var(--p-muted); }
.p-pc-note { font-size: .8rem; color: var(--p-muted); font-weight: 600; margin-top: .45rem; min-height: 2.4em; }
.p-pc-cta { margin: 1.1rem 0 .2rem; }
.p-pc-btn { border: 1.5px solid var(--p-blue); color: var(--p-blue); background: transparent; padding: .7rem 1rem; font-weight: 800; border-radius: 12px; }
.p-pc-btn:hover { background: var(--p-blue-soft); color: var(--p-blue-dark); border-color: var(--p-blue); }
.p-pc-btn.solid { background: var(--p-blue); color: #fff; box-shadow: 0 8px 18px rgba(21, 101, 216, .3); }
.p-pc-btn.solid:hover { background: var(--p-blue-dark); color: #fff; }
.p-pc-hr { margin: 1.2rem 0 1rem; border-color: var(--p-border); opacity: 1; }
.p-pc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; flex: 1 1 auto; }
.p-pc-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; font-weight: 600; }
.p-pc-list .ck { color: var(--p-green); font-size: 1.05rem; line-height: 1.2; flex: 0 0 1rem; font-weight: 800; }
.p-pc-list li.off { color: var(--p-grey); }
.p-pc-list li.off .ck { color: var(--p-grey); }
.p-pc-foot { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: .8rem; border-top: 1px dashed var(--p-border); font-size: .78rem; font-weight: 600; color: var(--p-muted); }
/* The "Most popular" card stands out: dark PUCHURI navy. */
.p-pc.featured { background: linear-gradient(160deg, #123F84 0%, #0B2D63 55%, #081F47 100%); border-color: transparent; color: #E6EEFB; box-shadow: 0 24px 50px rgba(9, 43, 92, .35); }
.p-pc.featured.current { border: 2px solid #4ADE80; }
.p-pc.featured .p-pc-name, .p-pc.featured .p-pc-price { color: #fff; }
.p-pc.featured .p-pc-desc, .p-pc.featured .p-pc-note, .p-pc.featured .p-pc-strike, .p-pc.featured .p-pc-price .per, .p-pc.featured .p-pc-foot { color: #AFC3E6; }
.p-pc.featured .p-pc-badge { background: rgba(124, 92, 252, .28); color: #E3DBFF; }
.p-pc.featured .p-pc-chip:not(.pop) { background: rgba(74, 222, 128, .18); color: #86EFAC; }
.p-pc.featured .p-pc-hr, .p-pc.featured .p-pc-foot { border-color: rgba(255, 255, 255, .14); }
.p-pc.featured .p-pc-list li { color: #E6EEFB; }
.p-pc.featured .p-pc-list .ck { color: #4ADE80; }
.p-pc.featured .p-pc-list li.off, .p-pc.featured .p-pc-list li.off .ck { color: #6F86B0; }
.p-pc.featured .p-pc-btn { border-color: var(--p-sky); color: #fff; }
.p-pc.featured .p-pc-btn.solid { background: linear-gradient(90deg, var(--p-blue), var(--p-sky)); border-color: transparent; }
@media (max-width: 575.98px) { .p-plan-grid { grid-template-columns: 1fr; } .p-pc-desc, .p-pc-note { min-height: 0; } }

/* ==== Classes and children (Phase 2) ==== */
.p-child-photo { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--p-grey-soft); }
.p-child-photo.initials { background: var(--p-purple-soft); color: var(--p-purple); font-weight: 800; }
.p-child-photo.initials.f { background: #FDEBF3; color: #C2357A; }
.p-child-photo.initials.m { background: var(--p-blue-soft); color: var(--p-blue); }
.p-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .7rem; margin: 0 .35rem .35rem 0; border-radius: 999px; background: var(--p-grey-soft); font-weight: 700; font-size: .875rem; }
.p-chip .btn-close { font-size: .55rem; }
.p-year-chip { display: inline-flex; align-items: center; padding: .4rem .9rem; border-radius: 999px; background: var(--p-blue-soft); color: var(--p-blue); font-weight: 800; }
.p-setup-sec { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 2px solid var(--p-border); border-radius: var(--p-radius-sm); cursor: pointer; margin: 0; }
.p-setup-sec:has(input:checked) { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-setup-sec .form-check-input { width: 1.4rem; height: 1.4rem; margin: 0; flex-shrink: 0; }
.p-setup-preview { padding: .9rem 1rem; border-radius: var(--p-radius-sm); background: var(--p-grey-soft); }
.p-setup-preview .p-chip { background: #fff; border: 1px solid var(--p-border); }
.p-class-row { display: flex; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--p-border); }
.p-class-row:last-child { border-bottom: 0; }
.p-class-label { width: 140px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .25rem; font-size: 1.05rem; }
.p-class-tiles { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; align-items: center; }
.p-class-tile { display: block; padding: .7rem .9rem; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); color: inherit; text-decoration: none; background: #fff; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.p-class-tile:hover { border-color: var(--p-blue); box-shadow: var(--p-shadow); color: inherit; }
.p-class-tile .name { font-weight: 800; color: var(--p-navy); }
.p-class-tile .count { font-size: .85rem; color: var(--p-muted); font-weight: 700; }
@media (max-width: 575.98px) {
    .p-class-row { flex-direction: column; gap: .5rem; }
    .p-class-label { width: auto; }
    .p-class-tiles { grid-template-columns: 1fr 1fr; }
}
.p-child-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.p-child-card { cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: .8rem; background: var(--p-card); border-radius: var(--p-radius); box-shadow: var(--p-shadow); color: inherit; text-decoration: none; min-width: 0; border: 1px solid transparent; }
.p-child-card:hover { border-color: var(--p-blue); color: inherit; }
.p-tel { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.p-tel i { font-size: .75em; }
.p-child-photo-wrap { position: relative; display: inline-block; }
.p-photo-btn { position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--p-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid #fff; margin: 0; }
.p-photo-btn:hover { background: var(--p-blue-dark); }
.p-child-notes { padding: .6rem .8rem; border-radius: var(--p-radius-sm); background: var(--p-amber-soft); color: #8a5a00; font-weight: 700; text-align: left; }
.p-found { max-height: 220px; overflow: auto; }
.p-found-item { display: block; width: 100%; text-align: left; padding: .5rem .7rem; margin-bottom: .3rem; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); background: #fff; }
.p-found-item:hover { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-step { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--p-navy); margin-bottom: .6rem; }
.p-step span { width: 32px; height: 32px; border-radius: 50%; background: var(--p-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.p-drop { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.75rem 1rem; border: 2px dashed var(--p-grey); border-radius: var(--p-radius); cursor: pointer; text-align: center; margin: 0; }
.p-drop:hover { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-drop > i { font-size: 2.2rem; color: var(--p-blue); }
.p-import td { vertical-align: top; }
.p-import tr.bad td { background: var(--p-red-soft); }
.p-import .form-select { min-width: 110px; }
.p-qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.p-qr-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: .4rem .6rem; padding: .75rem; background: #fff; border: 1px dashed var(--p-grey); border-radius: 12px; break-inside: avoid; page-break-inside: avoid; }
.p-qr-top { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--p-navy); font-size: .85rem; border-bottom: 1px solid var(--p-border); padding-bottom: .35rem; }
.p-qr-top img { height: 22px; width: auto; }
.p-qr-body { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.p-qr-name { font-weight: 800; line-height: 1.15; }
.p-qr-class { font-weight: 700; color: var(--p-blue); font-size: .9rem; }
.p-qr-no { font-size: .8rem; color: var(--p-muted); }
.p-qr-code svg { display: block; width: 96px; height: 96px; }
@media print {
    .p-sidebar, .p-topbar, .p-tabbar, .p-page-head, .p-billing-bar, .p-support-bar, .d-print-none, .p-bottom-nav { display: none !important; }
    body, .p-main, .p-content { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .p-qr-sheet { grid-template-columns: repeat(2, 1fr); gap: 6mm; }
    .p-qr-card { border-color: #999; }
    @page { margin: 10mm; }
}

/* ==== Easy inputs: pills, explained choices, pick-many, floating button ==== */
.p-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.p-pill { margin: 0; cursor: pointer; }
.p-pill input { position: absolute; opacity: 0; pointer-events: none; }
.p-pill span { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border: 2px solid var(--p-border); border-radius: 999px; font-weight: 700; background: #fff; user-select: none; }
.p-pill input:checked + span { border-color: var(--p-blue); background: var(--p-blue-soft); color: var(--p-blue); }
.p-pill input:focus-visible + span { outline: 3px solid rgba(21, 101, 216, .3); }
.p-cards { display: grid; gap: .5rem; }
.p-card-opt { margin: 0; cursor: pointer; display: block; }
.p-card-opt input { position: absolute; opacity: 0; pointer-events: none; }
.p-card-opt-body { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .9rem; border: 2px solid var(--p-border); border-radius: var(--p-radius-sm); background: #fff; }
.p-card-opt-body .p-stat-icon { width: 40px; height: 40px; font-size: 1.1rem; flex-shrink: 0; }
.p-card-opt-tick { color: var(--p-border); font-size: 1.3rem; flex-shrink: 0; }
.p-card-opt input:checked + .p-card-opt-body { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-card-opt input:checked + .p-card-opt-body .p-card-opt-tick { color: var(--p-blue); }
.p-card-opt input:focus-visible + .p-card-opt-body { outline: 3px solid rgba(21, 101, 216, .3); }
.p-card-opt-lines { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--p-text); }
.p-card-opt-lines li { margin: .1rem 0; }
.p-picker { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); padding: .6rem; background: #fff; }
.p-pick-chips { display: flex; flex-wrap: wrap; min-height: 34px; margin-bottom: .4rem; }
.p-pick-list { max-height: 320px; overflow: auto; margin: 0 -.3rem; }
.p-pick-group { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); padding: .5rem .5rem .2rem; }
.p-pick-row { display: flex; align-items: center; gap: .65rem; padding: .5rem; border-radius: var(--p-radius-sm); cursor: pointer; margin: 0; min-height: 52px; }
.p-pick-row:hover { background: var(--p-grey-soft); }
.p-pick-row .form-check-input { width: 1.4rem; height: 1.4rem; margin: 0; flex-shrink: 0; border-radius: 50%; }
.p-pick-row:has(input:checked) { background: var(--p-blue-soft); }
.p-parent { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); padding: .75rem; margin-bottom: .6rem; background: #fff; position: relative; }
.p-parent-title { font-weight: 800; color: var(--p-navy); margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.p-parent .p-pill span { min-height: 38px; padding: .3rem .8rem; font-size: .9rem; }
.p-add-row { width: 100%; border: 2px dashed var(--p-grey); border-radius: var(--p-radius-sm); background: transparent; padding: .7rem; font-weight: 700; color: var(--p-blue); }
.p-add-row:hover { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-fab { display: none; }
@media (max-width: 991.98px) {
    .p-fab { display: flex; position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 18px; border: 0; background: var(--p-blue); color: #fff; font-size: 1.6rem; align-items: center; justify-content: center; box-shadow: var(--p-shadow-lg); z-index: 1030; }
    .p-fab:active { transform: scale(.96); }
    #app:has(.p-fab) .p-fab-dup { display: none !important; }
}
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-footer { position: sticky; bottom: 0; background: #fff; }
    .modal-fullscreen-sm-down .modal-footer .btn { flex: 1; min-height: 48px; }
}

/* ==== Native-app feel on phones: tabs, sheet, app cards, find a child ==================== */
.p-tile-ico { position: relative; width: 48px; height: 48px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff !important; flex-shrink: 0; }
.p-tile-ico.tone-blue { background: linear-gradient(135deg, #3FA2FF 0%, #1565D8 100%); }
.p-tile-ico.tone-green { background: linear-gradient(135deg, #4ADE80 0%, #16A34A 100%); }
.p-tile-ico.tone-amber { background: linear-gradient(135deg, #FFC94D 0%, #F59E0B 100%); }
.p-tile-ico.tone-purple { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); }
.p-tile-ico.tone-red { background: linear-gradient(135deg, #FF7A7F 0%, #E5484D 100%); }
.p-tile-ico.tone-grey { background: linear-gradient(135deg, #B8C2D3 0%, #8792A8 100%); }
.p-app-row .p-tile-ico { width: 42px; height: 42px; border-radius: 13px; font-size: 1.1rem; }

/* Tiles (More sheet, quick actions) */
.p-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem .5rem; }
.p-tile { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; color: var(--p-text); font-weight: 700; font-size: .78rem; line-height: 1.15; text-decoration: none; padding: .25rem 0; }
.p-tile:active .p-tile-ico { transform: scale(.94); }
.p-tile.active { color: var(--p-blue); }
.p-tiles.big { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.p-tiles.big .p-tile { background: #fff; border-radius: 20px; padding: 1rem .5rem; box-shadow: var(--p-shadow); font-size: .9rem; }
.p-tiles.big .p-tile-ico { width: 54px; height: 54px; font-size: 1.5rem; border-radius: 17px; }

/* Bottom sheet "More" */
.p-sheet.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 26px 26px 0 0; border: 0; background: #fff; }
.p-sheet .offcanvas-body { padding: .5rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
.p-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--p-grey); margin: .6rem auto .3rem; }
.p-sheet-me { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; margin-bottom: 1rem; border-radius: 18px; background: var(--p-grey-soft); color: inherit; text-decoration: none; }
.p-sheet-out { width: 100%; margin-top: 1.1rem; border: 0; border-radius: 16px; padding: .85rem; background: var(--p-red-soft); color: var(--p-red); font-weight: 800; }

/* Section titles and app lists */
.p-section-title { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--p-muted); margin: .25rem .25rem .6rem; }
.p-app-list { display: grid; gap: .6rem; }
.p-app-row { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); cursor: pointer; min-width: 0; }
.p-app-row.static { cursor: default; }
.p-app-row:active:not(.static) { background: #F6F9FE; transform: scale(.995); }
.p-app-row-title { font-weight: 800; color: var(--p-navy); line-height: 1.2; }
.p-app-row-sub { font-size: .83rem; color: var(--p-muted); font-weight: 600; margin-top: .1rem; }
.p-app-list.flush { gap: 0; }
.p-app-list.flush .p-app-row { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--p-border); background: transparent; }
.p-app-list.flush .p-app-row:last-child { border-bottom: 0; }
.p-contact-btns { display: inline-flex; gap: .4rem; flex-shrink: 0; }
.p-round-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; }
.p-round-btn.call { background: var(--p-blue-soft); color: var(--p-blue); }
.p-round-btn.wa { background: #E7F8EE; color: #1FA855; font-size: 1.15rem; }
.p-round-btn:active { transform: scale(.92); }

/* Find a child */
.p-find { max-width: 720px; }
.p-find-box { position: relative; margin-bottom: .8rem; }
.p-find-box > .bi { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); font-size: 1.15rem; }
.p-find-box .form-control { height: 58px; border-radius: 18px; padding-left: 3rem; font-size: 1.05rem; font-weight: 700; background: #fff; box-shadow: var(--p-shadow); border: 2px solid transparent; }
.p-find-box .form-control:focus { border-color: var(--p-blue); }
.p-scan-btn { width: 100%; display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; margin-bottom: 1.2rem; border: 0; border-radius: 20px; color: #fff; text-align: left;
  background: linear-gradient(135deg, #22A34A 0%, #13803A 100%); box-shadow: 0 10px 24px rgba(22, 163, 74, .28); }
.p-scan-btn:active { transform: scale(.99); }
.p-scan-ico { width: 50px; height: 50px; border-radius: 15px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.p-scan-btn .small { opacity: .9; font-weight: 600; }
.p-find-tip { display: flex; gap: .7rem; padding: .9rem 1rem; border-radius: 18px; background: var(--p-amber-soft); color: #7a5300; font-weight: 600; font-size: .9rem; }
.p-find-tip .bi { font-size: 1.2rem; }
.p-findbar { display: flex; gap: .6rem; }
.p-findbar-input { flex: 1; display: flex; align-items: center; gap: .7rem; height: 54px; padding: 0 1.1rem; border-radius: 18px; background: #fff; box-shadow: var(--p-shadow); color: var(--p-muted); font-weight: 700; text-decoration: none; min-width: 0; }
.p-findbar-input span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-findbar-scan { width: 54px; height: 54px; flex-shrink: 0; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.45rem;
  background: linear-gradient(135deg, #22A34A 0%, #13803A 100%); box-shadow: 0 8px 18px rgba(22, 163, 74, .3); }

/* Camera scanner */
.p-scanner { position: fixed; inset: 0; z-index: 4000; background: #000; }
.p-scanner video { width: 100%; height: 100%; object-fit: cover; }
.p-scan-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.p-scan-frame span { width: min(70vw, 300px); aspect-ratio: 1; border-radius: 28px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); border: 4px solid #fff; }
.p-scan-top { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }
.p-scan-top .btn { color: #fff; background: rgba(255, 255, 255, .2); width: 46px; height: 46px; border-radius: 50%; }
.p-scan-hint { position: absolute; left: 1.5rem; right: 1.5rem; bottom: calc(3rem + env(safe-area-inset-bottom)); text-align: center; color: #fff; font-weight: 700; font-size: 1.05rem; }

/* Class cards on the staff home */
.p-class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.p-class-card { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border-radius: 22px; color: #fff; text-decoration: none; min-width: 0;
  background: linear-gradient(135deg, #7C5CFC 0%, #5136D6 100%); box-shadow: 0 10px 24px rgba(91, 61, 230, .28); }
.p-class-card:nth-child(3n+2) { background: linear-gradient(135deg, #3FA2FF 0%, #1565D8 100%); box-shadow: 0 10px 24px rgba(21, 101, 216, .28); }
.p-class-card:nth-child(3n+3) { background: linear-gradient(135deg, #FFB547 0%, #F08A00 100%); box-shadow: 0 10px 24px rgba(240, 138, 0, .28); }
.p-class-card-name { font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.p-class-card-count { font-weight: 800; opacity: .95; }
.p-class-card-teachers { font-size: .82rem; opacity: .85; font-weight: 600; }
.p-class-card:hover { color: #fff; }

/* Child page */
.p-child-name { font-size: 1.45rem; font-weight: 900; color: var(--p-navy); margin: .9rem 0 .35rem; }
.p-child-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.p-child-facts span { padding: .2rem .65rem; border-radius: 999px; background: var(--p-grey-soft); font-weight: 700; font-size: .82rem; color: var(--p-text); }
.p-child-facts span:first-child { background: var(--p-blue-soft); color: var(--p-blue); }
.p-quick-acts { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.p-quick-act { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 800; color: var(--p-text); background: none; border: 0; padding: 0; text-decoration: none; }
.p-quick-act .ico { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.p-quick-act .ico.call { background: var(--p-blue); color: #fff; box-shadow: 0 8px 18px rgba(21, 101, 216, .3); }
.p-quick-act .ico.wa { background: #25D366; color: #fff; box-shadow: 0 8px 18px rgba(37, 211, 102, .3); font-size: 1.4rem; }
.p-quick-act .ico.card { background: var(--p-purple-soft); color: var(--p-purple); }
.p-quick-act .ico.more { background: var(--p-grey-soft); color: var(--p-text); }
.p-quick-act .dropdown > button.ico { width: 52px; height: 52px; border-radius: 50%; background: var(--p-grey-soft); }
.p-quick-act:active .ico { transform: scale(.93); }
.p-child-notes { display: flex; align-items: flex-start; padding: .85rem 1rem; border-radius: 18px; }
.p-card-preview { width: 100%; max-width: 420px; border-radius: 16px; box-shadow: 0 10px 28px rgba(13, 59, 122, .16); }

@media (max-width: 991.98px) {
    /* Slim app bar on inner pages; the big blue header stays on Home */
    .p-mobile-header.slim { padding: calc(.7rem + env(safe-area-inset-top)) .9rem .7rem; border-radius: 0; box-shadow: 0 4px 16px rgba(13, 59, 122, .18); }
    .p-mobile-header.slim .title { font-size: 1.12rem; }
    .p-mobile-header.slim + .p-content, .p-mobile-header.slim ~ .p-content { margin-top: 0; }
    .p-mobile-header .row-top > :first-child:not(.btn):not(.p-avatar) { margin-left: 0; }

    /* Bottom tabs with the raised "Find" button */
    .p-bottom-nav { height: calc(66px + env(safe-area-inset-bottom)); border-top: 0; box-shadow: 0 -8px 24px rgba(13, 59, 122, .08); border-radius: 22px 22px 0 0; }
    .p-bottom-nav a span, .p-bottom-nav button span { line-height: 1; }
    .p-tab-center { position: relative; }
    .p-tab-fab { width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
      background: linear-gradient(135deg, #22A34A 0%, #13803A 100%); box-shadow: 0 10px 22px rgba(22, 163, 74, .4); border: 4px solid #fff; }
    .p-bottom-nav .p-tab-center.active::before { display: none; }
    .p-bottom-nav .p-tab-center .bi { font-size: 1.6rem; }
    .p-bottom-nav .p-tab-center.active { color: #13803A; }

    /* Lists become separate app cards */
    .p-list.p-card { background: transparent; box-shadow: none; border: 0; }
    .p-list > .p-card-header { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); border-bottom: 0; margin-bottom: .75rem; padding: .75rem; }
    .p-list .p-list-cards { display: grid; gap: .6rem; }
    .p-list .p-list-card { background: #fff; border-radius: 20px; border-bottom: 0; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); padding: .85rem .9rem; }
    .p-list .p-pager { border-top: 0; padding: .8rem .25rem; }
    .p-list .p-empty { background: #fff; border-radius: 20px; }
    .p-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .p-toolbar::-webkit-scrollbar { display: none; }
    .p-toolbar .p-search { flex: 0 0 100%; }
    .p-list .p-toolbar { flex-wrap: wrap; }
    .p-list .p-toolbar .form-select { flex: 1 1 0; min-width: 120px; border-radius: 999px; font-weight: 700; font-size: .88rem; }
    .p-list .p-toolbar .p-search .form-control { border-radius: 14px; }

    .p-card { box-shadow: 0 2px 14px rgba(13, 59, 122, .07); border: 0; }
    .p-card-header { padding: .9rem 1rem; }
    .p-page-head { margin-bottom: .75rem; }
    .p-page-head p { font-size: .9rem; }
    .p-child-hero .p-card-body { padding-top: 1.5rem; }
    .p-child-grid { grid-template-columns: 1fr; gap: .6rem; }
    .p-child-card { border-radius: 20px; }
    .p-tiles.big { grid-template-columns: repeat(2, 1fr); }
    .p-fab { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) { .p-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) {
    .p-page-head .p-back { display: none; }                        /* the app bar has the back button */
    .p-mobile-header:not(.slim) ~ .p-content .p-page-head { display: none; }  /* Home: the header says it all */
}
@media (max-width: 991.98px) {
    .p-page-head.no-sub:has([data-role=page-actions]:empty) { display: none; }
}

/* ==== Classes as tiles, children with filter chips, WhatsApp switch ==== */
.p-year-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.p-sec-head { display: flex; align-items: center; gap: .7rem; margin: .25rem 0 .7rem; }
.p-sec-head h2 { font-size: 1.15rem; font-weight: 900; color: var(--p-navy); margin: 0; }
.p-sec-head .p-tile-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 1.05rem; }
.p-ctiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.p-ctile { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .95rem 1rem .9rem; border-radius: 22px; color: #fff; cursor: pointer; min-width: 0;
  background: linear-gradient(135deg, #3FA2FF 0%, #1565D8 100%); box-shadow: 0 8px 20px rgba(21, 101, 216, .22); }
.p-ctile:active { transform: scale(.98); }
.p-ctile.tone-purple { background: linear-gradient(135deg, #A78BFA 0%, #6D44E8 100%); box-shadow: 0 8px 20px rgba(109, 68, 232, .24); }
.p-ctile.tone-amber { background: linear-gradient(135deg, #FFC24D 0%, #F08A00 100%); box-shadow: 0 8px 20px rgba(240, 138, 0, .24); }
.p-ctile.tone-green { background: linear-gradient(135deg, #4ADE80 0%, #14903F 100%); box-shadow: 0 8px 20px rgba(20, 144, 63, .24); }
.p-ctile.tone-pink { background: linear-gradient(135deg, #FF8BC0 0%, #D6327E 100%); box-shadow: 0 8px 20px rgba(214, 50, 126, .24); }
.p-ctile.tone-sky { background: linear-gradient(135deg, #5CD0FF 0%, #0E8FD8 100%); box-shadow: 0 8px 20px rgba(14, 143, 216, .24); }
.p-ctile.empty { background: #fff; color: var(--p-muted); border: 2px dashed var(--p-grey); box-shadow: none; cursor: default; }
.p-ctile.empty .p-ctile-name { color: var(--p-navy); }
.p-ctile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.p-ctile-name { font-size: 1.45rem; font-weight: 900; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-ctile-count { font-weight: 800; font-size: .92rem; }
.p-ctile-sub { font-size: .85rem; font-weight: 700; }
.p-ctile-teachers { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; opacity: .95; min-width: 0; }
.p-ctile-noteacher { background: rgba(255, 255, 255, .22); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.p-tile-menu > button { background: rgba(255, 255, 255, .22) !important; color: inherit !important; border: 0; width: 32px; height: 32px; border-radius: 10px; }
.p-ctile.empty .p-tile-menu > button { background: var(--p-grey-soft) !important; }
.p-avatar-stack { display: inline-flex; flex-shrink: 0; }
.p-avatar-stack .p-avatar { width: 24px; height: 24px; font-size: .6rem; border: 2px solid rgba(255, 255, 255, .9); margin-left: -7px; }
.p-avatar-stack .p-avatar:first-child { margin-left: 0; }
.p-chips { display: flex; gap: .45rem; overflow-x: auto; padding: .2rem .1rem .7rem; scrollbar-width: none; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.p-chips::-webkit-scrollbar { display: none; }
.p-chip-f { flex-shrink: 0; border: 0; border-radius: 999px; padding: .5rem .95rem; background: #fff; color: var(--p-text); font-weight: 800; font-size: .86rem; box-shadow: 0 2px 8px rgba(13, 59, 122, .07); white-space: nowrap; }
.p-chip-f.on { background: var(--p-blue); color: #fff; box-shadow: 0 6px 14px rgba(21, 101, 216, .3); }
.p-wa-switch { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .9rem; cursor: pointer; margin: .15rem 0 0; }
.p-wa-switch input { position: absolute; opacity: 0; pointer-events: none; }
.p-wa-switch .bi-whatsapp { color: #25D366; font-size: 1.1rem; }
.p-switch { width: 42px; height: 24px; border-radius: 12px; background: var(--p-grey); position: relative; transition: background .15s; flex-shrink: 0; }
.p-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.p-wa-switch input:checked + .p-switch { background: #25D366; }
.p-wa-switch input:checked + .p-switch::after { left: 21px; }
@media (max-width: 991.98px) {
    .p-ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .p-ctile { padding: .85rem .85rem .8rem; border-radius: 20px; }
    .p-ctile-name { font-size: 1.3rem; }
    .p-ctile-teachers > span.text-truncate { display: none; }
}
@media (max-width: 991.98px) {
    /* Page buttons become small pills in one scrollable row */
    .p-page-head { flex-direction: column; align-items: stretch !important; gap: .5rem; }
    .p-page-head [data-role=page-actions] { width: 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: .45rem !important; }
    .p-page-head [data-role=page-actions]::-webkit-scrollbar { display: none; }
    .p-page-head [data-role=page-actions] .btn, .p-page-head [data-role=page-actions] .form-select { flex: 0 0 auto !important; white-space: nowrap; border-radius: 999px; font-size: .85rem; padding: .45rem .9rem; font-weight: 800; }
    .p-page-head [data-role=page-actions] .btn-light { background: #fff; border: 0; box-shadow: 0 2px 8px rgba(13, 59, 122, .08); }
    .p-page-head [data-role=page-actions] .form-select { width: auto; padding-right: 2rem; }
    .p-page-head p { font-size: .85rem; margin: 0; }
}
.p-scan-actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
.p-scan-actions .btn { background: rgba(255, 255, 255, .2); color: #fff; border-radius: 999px; font-weight: 800; padding: .6rem 1.1rem; border: 0; }

/* ==== Teacher home: class cards ==== */
.p-today { font-weight: 800; color: var(--p-muted); font-size: .9rem; margin: 0 .2rem .6rem; }
.p-mc-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; }
.p-mc { --mc1: #A78BFA; --mc2: #6D44E8; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; text-decoration: none; color: var(--p-text);
  box-shadow: 0 12px 30px rgba(13, 59, 122, .12); transition: transform .15s; }
.p-mc:active { transform: scale(.985); }
.p-mc:hover { color: var(--p-text); }
.p-mc.tone-blue { --mc1: #3FA2FF; --mc2: #1565D8; }
.p-mc.tone-amber { --mc1: #FFC24D; --mc2: #F08A00; }
.p-mc.tone-green { --mc1: #4ADE80; --mc2: #14903F; }
.p-mc.tone-pink { --mc1: #FF8BC0; --mc2: #D6327E; }
.p-mc.tone-sky { --mc1: #5CD0FF; --mc2: #0E8FD8; }
.p-mc-top { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 1.1rem 1.2rem 1.25rem; min-height: 112px; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .28), transparent 45%), linear-gradient(135deg, var(--mc1) 0%, var(--mc2) 100%); }
.p-mc-section { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.p-mc-name { font-size: 2.3rem; font-weight: 900; line-height: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-mc-emblem { position: absolute; right: -6px; bottom: -14px; font-size: 5.5rem; opacity: .22; transform: rotate(-12deg); }
.p-mc-body { padding: 1rem 1.2rem .4rem; display: flex; flex-direction: column; gap: .7rem; margin-top: -14px; background: #fff; border-radius: 22px 22px 0 0; position: relative; }
.p-mc-faces { display: flex; align-items: center; min-height: 38px; }
.p-mc-faces .p-child-photo { border: 2px solid #fff; margin-left: -6px; letter-spacing: -.02em; box-shadow: 0 2px 6px rgba(13, 59, 122, .15); }
.p-mc-faces .p-child-photo:first-child { margin-left: 0; }
.p-mc-more { margin-left: -10px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--p-grey-soft); color: var(--p-text); font-size: .72rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.p-mc-none { font-size: .85rem; color: var(--p-muted); font-weight: 700; }
.p-mc-skel { width: 34px; height: 34px; border-radius: 50%; background: var(--p-grey-soft); margin-left: -10px; border: 3px solid #fff; animation: p-pulse 1.2s ease-in-out infinite; }
.p-mc-skel:first-child { margin-left: 0; }
.p-mc-count { font-size: 1.7rem; font-weight: 900; color: var(--mc2); line-height: 1; }
.p-mc-count-l { font-size: .72rem; font-weight: 800; color: var(--p-muted); text-transform: uppercase; letter-spacing: .05em; }
.p-mc-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 0; }
.p-mc-chips:empty { display: none; }
.p-mc-chips span { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--p-grey-soft); font-size: .78rem; font-weight: 800; }
.p-mc-chips .bi-gender-female { color: #C2357A; }
.p-mc-chips .bi-gender-male { color: var(--p-blue); }
.p-mc-chips span.warn { background: var(--p-amber-soft); color: #8a5a00; }
.p-mc-with { font-size: .82rem; font-weight: 700; color: var(--p-muted); }
.p-mc-foot { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.2rem 1rem; font-weight: 800; color: var(--mc2); }
.p-mc-foot .bi { font-size: 1.5rem; }
.p-mc-dots { display: inline-flex; gap: .3rem; }
.p-mc-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--p-grey); transition: width .2s; }
.p-mc-dots i.on { width: 18px; background: var(--p-blue); }
@media (max-width: 991.98px) {
    .p-mc-row.many { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; margin: 0 -1rem; padding: .2rem 1rem 1rem; scrollbar-width: none; }
    .p-mc-row.many::-webkit-scrollbar { display: none; }
    .p-mc-row.many .p-mc { flex: 0 0 86%; scroll-snap-align: center; }
}

/* ==== Child profile page ==== */
.p-profile { --pc1: #A78BFA; --pc2: #5B3BD6; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 10px 30px rgba(13, 59, 122, .1); }
.p-profile.girl { --pc1: #FF9CC8; --pc2: #C2357A; }
.p-profile.boy { --pc1: #5CB3FF; --pc2: #1552B8; }
.p-profile-cover { position: relative; height: 110px; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .35), transparent 40%), radial-gradient(circle at 90% 90%, rgba(255, 255, 255, .2), transparent 35%), linear-gradient(135deg, var(--pc1), var(--pc2)); }
.p-profile-cover .bi { position: absolute; right: 18px; top: 14px; color: rgba(255, 255, 255, .45); font-size: 2rem; }
.p-profile-body { text-align: center; padding: 0 1.25rem 1.4rem; margin-top: -66px; position: relative; }
.p-profile-photo { position: relative; display: inline-block; border-radius: 50%; padding: 5px; background: #fff; box-shadow: 0 10px 24px rgba(13, 59, 122, .18); }
.p-profile-photo .p-photo-btn { right: 4px; bottom: 4px; }
.p-profile .p-child-name { font-size: 1.55rem; margin: .75rem 0 .3rem; letter-spacing: -.01em; }
.p-profile-sub { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; color: var(--p-muted); font-weight: 700; }
.p-profile-sub .dot { opacity: .5; }
.p-profile-class { padding: .2rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--pc2) 12%, #fff); color: var(--pc2); font-weight: 900; }
.p-profile-calls { margin-top: .8rem; font-size: .82rem; font-weight: 700; color: var(--p-muted); }
.p-profile .p-quick-acts { margin-top: 1.15rem; gap: 1.4rem; }

.p-health { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; border-radius: 22px; background: linear-gradient(135deg, #FFF4F4 0%, #FFE9E2 100%); border: 1px solid #FFD5CC; box-shadow: 0 6px 18px rgba(229, 72, 77, .08); }
.p-health-ico { width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff;
  background: linear-gradient(135deg, #FF7A7F 0%, #E5484D 100%); box-shadow: 0 8px 16px rgba(229, 72, 77, .3); }
.p-health-l { font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #C0353A; }
.p-health-v { font-size: 1.08rem; font-weight: 800; color: #5A1A1C; line-height: 1.35; margin-top: .1rem; white-space: pre-line; }

.p-details { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.p-detail { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.p-detail-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--p-blue-soft); color: var(--p-blue); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-detail-l { font-size: .72rem; font-weight: 800; color: var(--p-muted); text-transform: uppercase; letter-spacing: .04em; }
.p-detail-v { font-weight: 800; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.p-parents { padding: .3rem .4rem; }
.p-parent-row { display: flex; align-items: center; gap: .85rem; padding: .85rem .7rem; border-radius: 18px; }
.p-parent-row + .p-parent-row { border-top: 1px solid var(--p-border); border-radius: 0; }
.p-parent-av { position: relative; width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.05rem; }
.p-parent-av .bi-star-fill { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; background: #FFB800; color: #fff; font-size: .6rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.p-parent-av.tone-pink, .p-rel.tone-pink { background: #FDEBF3; color: #C2357A; }
.p-parent-av.tone-blue, .p-rel.tone-blue { background: var(--p-blue-soft); color: var(--p-blue); }
.p-parent-av.tone-amber, .p-rel.tone-amber { background: var(--p-amber-soft); color: #B36B00; }
.p-parent-av.tone-purple, .p-rel.tone-purple { background: var(--p-purple-soft); color: var(--p-purple); }
.p-parent-av.tone-green, .p-rel.tone-green { background: var(--p-green-soft); color: var(--p-green); }
.p-parent-av.tone-grey, .p-rel.tone-grey { background: var(--p-grey-soft); color: #66708A; }
.p-parent-name { font-weight: 900; color: var(--p-navy); font-size: 1.02rem; line-height: 1.2; }
.p-parent-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .25rem; }
.p-rel, .p-main-tag { font-size: .72rem; font-weight: 800; padding: .12rem .55rem; border-radius: 999px; }
.p-main-tag { background: #FFF6DB; color: #9A6B00; }
.p-parent-line { font-size: .84rem; color: var(--p-muted); font-weight: 600; display: flex; align-items: center; gap: .4rem; min-width: 0; }

.p-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.p-timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--p-border); }
.p-timeline li { position: relative; padding: 0 0 .9rem; }
.p-timeline li:last-child { padding-bottom: 0; }
.p-timeline li::before { content: ''; position: absolute; left: -1.1rem; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--p-grey); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--p-grey); }
.p-timeline li.now::before { background: var(--p-green); box-shadow: 0 0 0 2px var(--p-green); }

/* Photo framing */
.p-crop { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 20px; background: #111; touch-action: none; cursor: grab; user-select: none; }
.p-crop img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.p-crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); pointer-events: none; outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px; }
.p-crop-hint { text-align: center; color: var(--p-muted); font-weight: 600; font-size: .85rem; margin: .8rem 0; }
.p-crop-tools { display: flex; align-items: center; gap: .6rem; max-width: 340px; margin: 0 auto; color: var(--p-muted); }
.p-crop-tools .form-range { flex: 1; }

.p-tiles.big.n3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) {
    .p-tiles.big.n3 .p-tile { font-size: .8rem; padding: .85rem .3rem; }
    .p-tiles.big.n3 .p-tile-ico { width: 48px; height: 48px; font-size: 1.3rem; }
    .p-profile { border-radius: 24px; }
}

/* ==== Teacher home: smaller class cards on phones, calmer quick actions on computers ==== */
.p-mc-top, .p-mc-body { text-decoration: none; color: inherit; display: flex; }
.p-mc-top { color: #fff; }
.p-mc-top:hover { color: #fff; }
.p-mc-body:hover { color: inherit; }
.p-mc-foot { gap: .5rem; }
.p-mc-btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem .95rem; border-radius: 999px; font-weight: 800; font-size: .88rem; text-decoration: none; color: var(--mc2); background: color-mix(in srgb, var(--mc2) 10%, #fff); }
.p-mc-btn.main { color: #fff; background: linear-gradient(135deg, var(--mc1), var(--mc2)); box-shadow: 0 6px 14px color-mix(in srgb, var(--mc2) 35%, transparent); }
.p-mc-btn:hover { filter: brightness(1.05); color: inherit; }
.p-mc-btn.main:hover { color: #fff; }
.p-mc-foot .p-mc-btn:last-child { margin-left: auto; }
@media (min-width: 992px) {
    .p-tiles.big, .p-tiles.big.n3 { grid-template-columns: repeat(auto-fill, 150px); }
    .p-tiles.big .p-tile { padding: .85rem .5rem; font-size: .86rem; }
    .p-tiles.big .p-tile-ico { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 14px; }
    .p-mc-row { grid-template-columns: repeat(auto-fill, minmax(280px, 320px)); }
}
@media (max-width: 991.98px) {
    .p-mc-top { min-height: 84px; padding: .85rem 1rem 1.05rem; }
    .p-mc-name { font-size: 1.75rem; }
    .p-mc-section { font-size: .7rem; }
    .p-mc-emblem { font-size: 4.2rem; bottom: -10px; }
    .p-mc-body { padding: .8rem 1rem .25rem; gap: .5rem; }
    .p-mc-count { font-size: 1.4rem; }
    .p-mc-faces .p-child-photo, .p-mc-more, .p-mc-skel { width: 30px !important; height: 30px !important; }
    .p-mc-foot { padding: .55rem 1rem .85rem; }
    .p-mc-btn { padding: .42rem .85rem; font-size: .82rem; }
    .p-mc { border-radius: 22px; }
    .p-mc-row.many .p-mc { flex-basis: 84%; }
    .p-today { margin-bottom: .4rem; }
}

/* ==== Today: record for many children at once ==== */
.p-day-head { margin-bottom: .4rem; }
.p-day-nav { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 20px; padding: .5rem; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-day-title { font-weight: 900; color: var(--p-navy); font-size: 1.05rem; text-transform: capitalize; }
.p-type-chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .7rem 1rem .6rem; margin: 0 -1rem; }
.p-type-chips::-webkit-scrollbar { display: none; }
.p-type-chip { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 78px; padding: .55rem .2rem; border: 2px solid transparent; border-radius: 18px; background: #fff;
  box-shadow: 0 2px 10px rgba(13, 59, 122, .06); font-weight: 800; font-size: .72rem; color: var(--p-text); line-height: 1.1; }
.p-type-chip .ico { width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; }
.p-type-chip.tone-blue .ico { background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-type-chip.tone-green .ico { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.p-type-chip.tone-amber .ico { background: linear-gradient(135deg, #FFC94D, #F59E0B); }
.p-type-chip.tone-purple .ico { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.p-type-chip.tone-red .ico { background: linear-gradient(135deg, #FF7A7F, #E5484D); }
.p-type-chip.tone-grey .ico { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-type-chip.tone-sky .ico { background: linear-gradient(135deg, #5CD0FF, #1EA0F0); }
.p-type-chip.tone-pink .ico { background: linear-gradient(135deg, #FF8BC0, #D6327E); }
.p-type-chip.on { border-color: var(--p-blue); background: var(--p-blue-soft); color: var(--p-blue); }
.p-counts { display: flex; gap: .35rem; flex-wrap: wrap; }
.p-count { padding: .25rem .65rem; border-radius: 999px; background: #fff; font-weight: 800; font-size: .8rem; box-shadow: 0 1px 6px rgba(13, 59, 122, .06); }
.p-kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; padding-bottom: 1rem; }
.p-kid { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .75rem .35rem .6rem; border: 3px solid transparent; border-radius: 20px; background: #fff;
  box-shadow: 0 2px 12px rgba(13, 59, 122, .06); min-width: 0; transition: transform .1s; }
.p-kid:active { transform: scale(.96); }
.p-kid.sel { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-kid.is-alert { box-shadow: 0 0 0 2px #FFB4B6, 0 2px 12px rgba(229, 72, 77, .15); }
.p-kid-tick { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--p-grey); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: .8rem; }
.p-kid.sel .p-kid-tick { background: var(--p-blue); border-color: var(--p-blue); color: #fff; }
.p-kid-flag { position: absolute; top: 6px; right: 7px; color: #E5484D; font-size: .85rem; }
.p-kid-name { font-weight: 800; color: var(--p-navy); font-size: .88rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-kid-val { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; overflow: hidden; }
.p-kid-val span { overflow: hidden; text-overflow: ellipsis; }
.p-kid-val.empty { color: var(--p-grey); }
.p-kid-val.tone-green, .p-val.tone-green { background: var(--p-green-soft); color: var(--p-green); }
.p-kid-val.tone-red, .p-val.tone-red { background: var(--p-red-soft); color: var(--p-red); }
.p-kid-val.tone-amber, .p-val.tone-amber { background: var(--p-amber-soft); color: #B36B00; }
.p-kid-val.tone-blue, .p-val.tone-blue { background: var(--p-blue-soft); color: var(--p-blue); }
.p-kid-val.tone-purple, .p-val.tone-purple { background: var(--p-purple-soft); color: var(--p-purple); }
.p-kid-val.tone-grey, .p-val.tone-grey { background: var(--p-grey-soft); color: #66708A; }
.p-val { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; font-weight: 800; }
.p-day-hint { text-align: center; color: var(--p-muted); font-size: .82rem; font-weight: 600; margin: .5rem 0 8rem; }
.p-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: none; justify-content: center; padding: .6rem .8rem calc(.8rem + env(safe-area-inset-bottom)); pointer-events: none; }
.p-actionbar.show { display: flex; }
.p-actionbar > * { pointer-events: auto; }
.p-actionbar-in { width: 100%; max-width: 640px; background: #fff; border-radius: 24px; padding: .8rem .9rem; box-shadow: 0 -6px 30px rgba(13, 59, 122, .22); }
.p-actionbar-top { display: flex; align-items: center; margin-bottom: .55rem; color: var(--p-navy); }
.p-actionbar-btns { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.p-ab-btn { flex-shrink: 0; border-radius: 999px; background: var(--p-grey-soft); font-weight: 800; padding: .6rem 1rem; border: 0; }
.p-ab-btn:active { background: var(--p-blue-soft); }
.p-ab-main { flex: 1; border-radius: 999px; font-weight: 800; padding: .7rem 1rem; }
.p-warn-line { padding: .6rem .8rem; border-radius: 14px; background: var(--p-red-soft); color: #A1262A; font-weight: 700; font-size: .88rem; }
.p-today-list { display: grid; gap: .4rem; }
.p-today-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border: 0; border-radius: 16px; background: var(--p-grey-soft); width: 100%; }
.p-today-item.alert { background: var(--p-red-soft); }
.p-today-item .p-tile-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; }
.p-wtr.off { opacity: .55; }
.p-wtr .p-wa-switch .p-switch { margin: 0; }
.p-cards.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.p-cards.grid .p-card-opt-body { flex-direction: column; align-items: center; text-align: center; padding: .7rem .4rem; gap: .4rem; }
.p-cards.grid .p-card-opt-tick { display: none; }
.p-cards.grid input:checked + .p-card-opt-body { background: var(--p-blue-soft); }
@media (min-width: 992px) {
    .p-actionbar { left: var(--p-sidebar-w); }
    .p-type-chips { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
}
@media (max-width: 991.98px) {
    .p-actionbar { bottom: calc(66px + env(safe-area-inset-bottom)); padding-bottom: .6rem; }
    .p-kid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-cards.grid { grid-template-columns: repeat(2, 1fr); }
}
.p-tile-ico.tone-sky { background: linear-gradient(135deg, #5CD0FF 0%, #1EA0F0 100%); }
.p-tile-ico.tone-pink { background: linear-gradient(135deg, #FF8BC0 0%, #D6327E 100%); }
.p-kid-empty { grid-column: 1 / -1; background: #fff; border-radius: 20px; }
@media (min-width: 992px) { .p-day-head .p-chips { flex-wrap: wrap; margin: 0; padding: 0 0 .6rem; } }

/* ==== Today v2: one tap per child ==== */
.p-day-bar { display: flex; align-items: center; gap: .35rem; background: #fff; border-radius: 18px; padding: .35rem; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-day-bar .btn-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--p-grey-soft); flex-shrink: 0; }
.p-day-class { flex: 1; min-width: 0; border: 0; background: transparent; font-weight: 900; color: var(--p-navy); font-size: 1.05rem; padding: .3rem .4rem; text-overflow: ellipsis; }
select.p-day-class { appearance: none; background: var(--p-blue-soft) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231565D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .6rem center/12px; border-radius: 12px; padding-right: 1.8rem; color: var(--p-blue); max-width: 45%; flex: 0 1 auto; }
.p-day-date { flex: 1; text-align: center; font-weight: 800; color: var(--p-muted); text-transform: capitalize; font-size: .92rem; white-space: nowrap; }
.p-day-date.today { color: var(--p-green); }
.p-day-tools { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .7rem; }
.p-prog-wrap { flex: 1; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.p-prog { flex: 1; height: 8px; border-radius: 4px; background: #E3EAF5; overflow: hidden; }
.p-prog span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4ADE80, #16A34A); transition: width .3s; }
.p-prog-l { font-size: .78rem; font-weight: 800; color: var(--p-muted); white-space: nowrap; }
.p-sel-chip { border: 0; border-radius: 999px; padding: .4rem .75rem; background: #fff; font-weight: 800; font-size: .8rem; box-shadow: 0 1px 6px rgba(13, 59, 122, .08); white-space: nowrap; }
.p-sel-chip.main { color: var(--p-blue); }
.p-meal-chips { margin-top: -.2rem; }
.p-kid { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.p-kid-av { position: relative; display: inline-block; border-radius: 50%; padding: 3px; }
.p-kid.st-present .p-kid-av { box-shadow: 0 0 0 3px #22A34A; }
.p-kid.st-late .p-kid-av { box-shadow: 0 0 0 3px #F59E0B; }
.p-kid.st-absent .p-kid-av { box-shadow: 0 0 0 3px #E5484D; }
.p-kid.st-excused .p-kid-av { box-shadow: 0 0 0 3px #7C3AED; }
.p-kid-badge { position: absolute; right: -4px; bottom: -2px; min-width: 26px; height: 26px; padding: 0 3px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(13, 59, 122, .2); }
.p-kid-badge.tone-green { color: var(--p-green); } .p-kid-badge.tone-red { color: var(--p-red); } .p-kid-badge.tone-amber { color: #D88A00; }
.p-kid-badge.tone-blue { color: var(--p-blue); } .p-kid-badge.tone-purple { color: var(--p-purple); } .p-kid-badge.tone-grey { color: #66708A; }
.p-kid:not(.done) .p-kid-av { opacity: .9; }
.p-kid-val.empty { color: var(--p-muted); background: transparent; font-weight: 700; }
.p-kid.done { background: #FBFDFF; }
.p-ab-btn .em { margin-right: .3rem; }

/* Quick sheet */
.p-qs { position: fixed; inset: 0; z-index: 1048; background: rgba(10, 25, 50, .45); display: flex; align-items: flex-end; justify-content: center; animation: p-fade .15s ease-out; }
.p-qs.out { opacity: 0; transition: opacity .15s; }
.p-qs-panel { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 26px 26px 0 0; padding: .4rem 1rem calc(1rem + env(safe-area-inset-bottom)); animation: p-up .2s ease-out; }
@keyframes p-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes p-fade { from { opacity: 0; } to { opacity: 1; } }
.p-qs-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--p-grey); margin: .3rem auto .6rem; }
.p-qs-head { display: flex; align-items: center; gap: .5rem; }
.p-qs-head .btn-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--p-grey-soft); flex-shrink: 0; }
.p-qs-who { flex: 1; display: flex; align-items: center; gap: .7rem; min-width: 0; }
.p-qs-name { font-weight: 900; font-size: 1.15rem; color: var(--p-navy); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-qs-meta { font-size: .8rem; font-weight: 700; color: var(--p-muted); }
.p-qs-health { margin-top: .6rem; padding: .45rem .7rem; border-radius: 12px; background: var(--p-red-soft); color: #A1262A; font-weight: 800; font-size: .85rem; }
.p-qs-now { margin-top: .6rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .85rem; font-weight: 700; color: var(--p-muted); }
.p-qs-body { margin-top: .8rem; }
.p-qs-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.p-qs-answers.n2, .p-qs-answers.n4 { grid-template-columns: repeat(2, 1fr); }
.p-qs-ans { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 92px; padding: .6rem .3rem; border: 2px solid var(--p-border); border-radius: 20px; background: #fff; font-weight: 800; font-size: .85rem; color: var(--p-text); line-height: 1.15; }
.p-qs-ans .em { font-size: 2rem; line-height: 1; }
.p-qs-ans:active { transform: scale(.95); background: var(--p-blue-soft); }
.p-qs-ans.on { border-color: var(--p-blue); background: var(--p-blue-soft); color: var(--p-blue); }
.p-qs-sub { margin: .8rem 0 .4rem; font-weight: 800; font-size: .85rem; color: var(--p-muted); }
.p-qs-reasons { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.p-qs-reasons .p-chip-f { box-shadow: none; border: 1px solid var(--p-border); }
.p-qs-reasons .p-chip-f.warn { color: var(--p-red); }
.p-qs-number { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.p-qs-number input { width: 130px; text-align: center; font-size: 2.2rem; font-weight: 900; border: 0; border-bottom: 3px solid var(--p-blue); color: var(--p-navy); background: transparent; }
.p-qs-number .unit { font-weight: 800; color: var(--p-muted); margin-left: -.4rem; }
.p-qs-step { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--p-blue-soft); color: var(--p-blue); font-size: 1.6rem; font-weight: 900; }
.p-qs-save { margin-top: .9rem; border-radius: 999px; padding: .75rem; font-weight: 800; }
.p-qs-people { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.p-qs-person { display: flex; align-items: center; gap: .55rem; padding: .7rem; border: 2px solid var(--p-border); border-radius: 18px; background: #fff; min-width: 0; }
.p-qs-person:active { background: var(--p-blue-soft); border-color: var(--p-blue); }
.p-qs-person small { color: var(--p-muted); font-weight: 700; }
.p-qs-close { border-radius: 999px; font-weight: 800; }
@media (min-width: 576px) { .p-qs { align-items: center; } .p-qs-panel { border-radius: 26px; } }
/* Child page tabs */
.p-seg { position: sticky; top: 0; z-index: 5; display: flex; gap: .25rem; padding: .3rem; margin-bottom: .8rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .07); overflow-x: auto; scrollbar-width: none; }
.p-seg::-webkit-scrollbar { display: none; }
.p-seg-btn { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .6rem; border: 0; border-radius: 14px; background: transparent; color: var(--p-muted); font-weight: 800; font-size: .74rem; }
.p-seg-btn .bi { font-size: 1.1rem; }
.p-seg-btn.on { background: var(--p-blue-soft); color: var(--p-blue); }
.p-seg + .p-card, [data-pane] { margin-top: 0; }
@media (max-width: 991.98px) {
    .p-seg { top: calc(56px + env(safe-area-inset-top)); }
    .p-profile-cover { height: 84px; }
    .p-profile-body { margin-top: -56px; padding-bottom: 1.1rem; }
    .p-profile .p-child-name { font-size: 1.35rem; margin-top: .55rem; }
    .p-profile .p-quick-acts { margin-top: .8rem; }
}
@media (min-width: 992px) { .p-seg { flex-direction: row; } .p-seg-btn { flex-direction: row; gap: .4rem; font-size: .85rem; padding: .55rem .9rem; } }
@media (max-width: 991.98px) { .p-profile-photo .p-child-photo { width: 96px !important; height: 96px !important; font-size: 2.2rem !important; } }
[data-pane][hidden] { display: none !important; }

/* ==== Today v3: every choice visible, one recorder, the list ==== */
.p-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .4rem; margin: .65rem 0 .55rem; }
.p-type-grid .p-type-chip { width: auto; min-width: 0; padding: .45rem .15rem .4rem; border-radius: 16px; gap: .25rem; }
.p-type-grid .p-type-chip .ico, .p-qs-type .ico { position: relative; }
.p-type-chip .nm, .p-qs-type .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; max-width: 100%; word-break: normal; overflow-wrap: normal; hyphens: auto; }
.p-type-chip .ok, .p-qs-type .ok { position: absolute; right: -5px; top: -5px; width: 17px; height: 17px; border-radius: 50%; background: #16A34A; color: #fff; border: 2px solid #fff; display: none; align-items: center; justify-content: center; font-size: .7rem; line-height: 1; }
.p-type-chip.full .ok, .p-qs-type .ok { display: inline-flex; }
@media (max-width: 991.98px) {
    .p-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
    .p-type-grid .p-type-chip { font-size: .74rem; padding: .55rem .15rem .5rem; border-radius: 18px; gap: .35rem; }
    .p-type-grid .p-type-chip .ico { width: 44px; height: 44px; border-radius: 14px; font-size: 1.3rem; }
}
@media (max-width: 360px) { .p-type-grid .p-type-chip { font-size: .68rem; } .p-type-grid .p-type-chip .ico { width: 38px; height: 38px; } }
.p-day-past { margin-top: .5rem; padding: .45rem .75rem; border-radius: 12px; background: var(--p-amber-soft); color: #8A5300; font-weight: 700; font-size: .82rem; }
.p-day-filter { position: relative; margin-bottom: .6rem; }
.p-day-filter > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); }
.p-day-filter input { padding-left: 2.4rem; border-radius: 999px; border: 0; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); }
.p-qs-x { margin-left: auto; }
.p-qs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .3rem; margin-top: .7rem; padding: .4rem; border-radius: 18px; background: var(--p-grey-soft); }
.p-qs-type { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem .1rem; border: 2px solid transparent; border-radius: 14px; background: transparent; font-size: .64rem; font-weight: 800; color: var(--p-text); line-height: 1.1; min-width: 0; }
.p-qs-type .ico { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; }
.p-qs-type.tone-blue .ico { background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-qs-type.tone-green .ico { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.p-qs-type.tone-amber .ico { background: linear-gradient(135deg, #FFC94D, #F59E0B); }
.p-qs-type.tone-purple .ico { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.p-qs-type.tone-red .ico { background: linear-gradient(135deg, #FF7A7F, #E5484D); }
.p-qs-type.tone-grey .ico { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-qs-type.tone-sky .ico { background: linear-gradient(135deg, #5CD0FF, #1EA0F0); }
.p-qs-type.tone-pink .ico { background: linear-gradient(135deg, #FF8BC0, #D6327E); }
.p-qs-type.on { background: #fff; border-color: var(--p-blue); color: var(--p-blue); box-shadow: 0 2px 8px rgba(13, 59, 122, .1); }
.p-qs-meals { margin-top: .6rem; }
.p-qs-ans { position: relative; }
.p-qs-ans .cnt { position: absolute; top: 6px; right: 8px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--p-blue); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.p-qs-closed { padding: .9rem; border-radius: 16px; background: var(--p-grey-soft); color: var(--p-muted); font-weight: 700; text-align: center; }
.p-faces { display: inline-flex; align-items: center; flex-shrink: 0; }
.p-faces > * { margin-left: -9px; border: 2px solid #fff; border-radius: 50%; }
.p-faces > *:first-child { margin-left: 0; }
.p-faces-more { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--p-blue-soft); color: var(--p-blue); font-weight: 800; font-size: .72rem; }
.p-pick-btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--p-blue); background: #fff; color: var(--p-blue); font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; }
.p-pick-btn.on { background: var(--p-blue); color: #fff; }
.p-find-pick { margin: .6rem 0 0; padding: .55rem .85rem; background: var(--p-blue-soft); color: var(--p-blue); font-size: .84rem; }
.p-actionbar-btns + .p-ab-main { margin-top: .55rem !important; }

/* ==== Teacher home: compact class cards ==== */
.p-mc2-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .6rem; }
.p-mc2 { --mc1: #A78BFA; --mc2: #6D44E8; background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(13, 59, 122, .07); overflow: hidden; }
.p-mc2.tone-blue { --mc1: #3FA2FF; --mc2: #1565D8; }
.p-mc2.tone-amber { --mc1: #FFC24D; --mc2: #F08A00; }
.p-mc2.tone-green { --mc1: #4ADE80; --mc2: #14903F; }
.p-mc2.tone-pink { --mc1: #FF8BC0; --mc2: #D6327E; }
.p-mc2.tone-sky { --mc1: #5CD0FF; --mc2: #0E8FD8; }
.p-mc2-main { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem .5rem; text-decoration: none; color: var(--p-text); }
.p-mc2-main:hover { color: var(--p-text); }
.p-mc2-badge { flex-shrink: 0; width: 46px; height: 46px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--mc1), var(--mc2)); box-shadow: 0 4px 10px color-mix(in srgb, var(--mc2) 30%, transparent); }
.p-mc2-name { display: flex; align-items: baseline; gap: .45rem; font-size: 1.2rem; font-weight: 900; color: var(--p-navy); line-height: 1.15; white-space: nowrap; overflow: hidden; }
.p-mc2-name small { font-size: .7rem; font-weight: 800; color: var(--mc2); text-transform: uppercase; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; }
.p-mc2-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; margin-top: .15rem; font-size: .78rem; font-weight: 700; color: var(--p-muted); }
.p-mc2-sub b { color: var(--p-text); }
.p-mc2-sub .bi-gender-female { color: #C2357A; margin-right: .15rem; }
.p-mc2-sub .bi-gender-male { color: var(--p-blue); margin-right: .15rem; }
.p-mc2-sub .warn { color: #B36B00; } .p-mc2-sub .warn .bi { margin-right: .15rem; }
.p-mc2 .p-mc-faces { flex-shrink: 0; min-height: 0; }
.p-mc2 .p-mc-faces .p-child-photo, .p-mc2 .p-mc-more, .p-mc2 .p-mc-skel { width: 28px !important; height: 28px !important; font-size: .62rem; }
.p-mc2-foot { display: flex; align-items: center; gap: .5rem; padding: .15rem .8rem .7rem; color: var(--mc2); }
.p-mc2-foot .p-mc-btn { padding: .38rem .85rem; font-size: .82rem; }
.p-mc2-foot .p-mc-btn:last-child { margin-left: auto; }
.p-mc2-with { font-size: .75rem; font-weight: 700; color: var(--p-muted); min-width: 0; }

.p-type-grid .p-type-chip .ok { width: 20px; height: 20px; font-size: .8rem; }
.p-pending { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 999px; background: var(--p-blue-soft); color: var(--p-blue); font-size: .75rem; font-weight: 800; }

/* Teacher home: one slim line per class */
.p-mc2-row { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem; }
.p-mc2.slim { display: flex; align-items: center; gap: .4rem; border-radius: 18px; padding-right: .6rem; }
.p-mc2.slim .p-mc2-main { flex: 1; min-width: 0; padding: .55rem .4rem .55rem .6rem; gap: .6rem; }
.p-mc2.slim .p-mc2-badge { width: 38px; height: 38px; border-radius: 12px; font-size: 1.1rem; box-shadow: none; }
.p-mc2.slim .p-mc2-name { font-size: 1.02rem; }
.p-mc2.slim .p-mc2-sub { margin-top: 0; font-size: .74rem; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.p-mc2.slim .p-mc-btn.main { flex-shrink: 0; padding: .4rem .75rem; font-size: .8rem; box-shadow: none; }
@media (max-width: 991.98px) { .p-mc2.slim .p-mc-faces { display: none; } }

/* ==== Records day by day (child page, parent app) ==== */
.p-tl-day + .p-tl-day { margin-top: 1.1rem; }
.p-tl-date { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; font-weight: 900; color: var(--p-navy); text-transform: capitalize; }
.p-tl-date.today span { color: var(--p-green); }
.p-tl-date small { font-weight: 700; color: var(--p-muted); text-transform: none; font-size: .78rem; }
.p-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.p-tl::before { content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: #E3EAF5; border-radius: 1px; }
.p-tl-item { position: relative; display: flex; gap: .7rem; padding-bottom: .55rem; }
.p-tl-item:last-child { padding-bottom: 0; }
.p-tl-item[role=button] { cursor: pointer; }
.p-tl-ico { position: relative; z-index: 1; flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; box-shadow: 0 0 0 3px #fff; }
.p-tl-ico.tone-blue { background: linear-gradient(135deg, #3FA2FF, #1565D8); } .p-tl-ico.tone-green { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.p-tl-ico.tone-amber { background: linear-gradient(135deg, #FFC94D, #F59E0B); } .p-tl-ico.tone-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.p-tl-ico.tone-red { background: linear-gradient(135deg, #FF7A7F, #E5484D); } .p-tl-ico.tone-grey { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-tl-ico.tone-sky { background: linear-gradient(135deg, #5CD0FF, #1EA0F0); } .p-tl-ico.tone-pink { background: linear-gradient(135deg, #FF8BC0, #D6327E); }
.p-tl-card { flex: 1; min-width: 0; padding: .5rem .75rem; border-radius: 16px; background: var(--p-grey-soft); }
.p-tl-item.is-alert .p-tl-card { background: var(--p-red-soft); }
.p-tl-item[role=button]:active .p-tl-card { background: var(--p-blue-soft); }
.p-tl-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--p-navy); }
.p-tl-time { font-weight: 800; color: var(--p-muted); font-size: .78rem; white-space: nowrap; }
.p-tl-val { font-weight: 800; font-size: .95rem; color: var(--p-text); margin-top: .1rem; }
.p-tl-val .em { margin-right: .35rem; font-size: 1.15rem; }
.p-tl-val.warn { color: #B4232A; }
.p-tl-note { font-size: .85rem; color: var(--p-text); margin-top: .2rem; }
.p-tl-by { font-size: .72rem; font-weight: 700; color: var(--p-muted); margin-top: .15rem; }
.p-tl-empty { padding: .5rem 0; }

/* ==== Parents tab: the parent app ==== */
.p-parent-app { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.p-app-on, .p-app-wait { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.p-app-on { background: var(--p-green-soft); color: var(--p-green); }
.p-app-wait { background: var(--p-amber-soft); color: #9A5B00; }
.p-invite-btn { border-radius: 999px; background: var(--p-blue-soft); color: var(--p-blue); font-weight: 800; font-size: .78rem; padding: .25rem .7rem; }
.p-invite-link { padding: .6rem .8rem; border-radius: 12px; background: var(--p-grey-soft); font-size: .8rem; word-break: break-all; text-align: left; color: var(--p-muted); }
.swal2-styled.p-swal-wa { background: #25D366 !important; }

/* ==== Parent app ==== */
.p-mc-hero { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #3FA2FF, #1565D8 60%, #0D3B7A); box-shadow: 0 10px 26px rgba(21, 101, 216, .25); }
.p-mc-hero .p-child-photo { border: 4px solid rgba(255, 255, 255, .85); flex-shrink: 0; }
.p-mc-hero-name { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.p-mc-hero-sub { font-weight: 800; opacity: .9; margin-top: .15rem; }
.p-mc-hero-school { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .25rem .65rem .25rem .3rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .8rem; font-weight: 800; max-width: 100%; }
.p-mc-hero-school img { width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: contain; }
.p-mc-hero-school span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-about-line { display: flex; align-items: center; gap: .75rem; padding: .45rem 0; color: var(--p-text); text-decoration: none; }
.p-about-line > .bi { width: 40px; height: 40px; border-radius: 12px; background: var(--p-blue-soft); color: var(--p-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.p-about-line small { display: block; color: var(--p-muted); font-weight: 700; font-size: .75rem; }
.p-about-line b { display: block; color: var(--p-navy); }
@media (max-width: 991.98px) { .p-pc-list { grid-template-columns: 1fr; } }

/* ==== Large screens: bigger class cards (home) and record choices (Today) ==== */
@media (min-width: 992px) {
    .p-mc2-row { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
    .p-mc2.slim { flex-direction: column; align-items: stretch; padding: 0; border-radius: 24px; }
    .p-mc2.slim .p-mc2-main { padding: 1.2rem 1.2rem .9rem; gap: 1rem; }
    .p-mc2.slim .p-mc2-badge { width: 60px; height: 60px; border-radius: 18px; font-size: 1.7rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--mc2) 30%, transparent); }
    .p-mc2.slim .p-mc2-name { font-size: 1.5rem; }
    .p-mc2.slim .p-mc2-sub { font-size: .85rem; margin-top: .3rem; flex-wrap: wrap; }
    .p-mc2.slim .p-mc-faces .p-child-photo, .p-mc2.slim .p-mc-more { width: 34px !important; height: 34px !important; }
    .p-mc2.slim > .p-mc-btn.main { margin: 0 1.2rem 1.2rem; padding: .65rem 1rem; font-size: .95rem; }
    .p-type-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .65rem; }
    .p-type-grid .p-type-chip { padding: .9rem .4rem .8rem; border-radius: 20px; font-size: .88rem; gap: .5rem; }
    .p-type-grid .p-type-chip .ico { width: 54px; height: 54px; border-radius: 17px; font-size: 1.55rem; }
    .p-type-grid .p-type-chip .ok { width: 22px; height: 22px; }
}

/* Add a parent: the number is already known */
.p-known { padding: .55rem .7rem; border-radius: 14px; background: var(--p-blue-soft); color: var(--p-navy); font-weight: 700; }
.p-known-btn { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-top: .4rem; padding: .45rem .7rem; border: 2px solid var(--p-blue); border-radius: 12px; background: #fff; color: var(--p-blue); text-align: left; }
.p-known-btn small { color: var(--p-muted); font-weight: 700; }
.p-parent .p-phone .p-phone-cc { padding: 0 .5rem; }

/* ==== Meals: which meal, clearly ==== */
.p-meal-pick { margin: .2rem 0 .7rem; padding: .6rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-meal-pick-l { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); margin: 0 0 .45rem .2rem; }
.p-meal-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: .35rem; }
.p-qs .p-meal-tabs { margin-top: .7rem; }
.p-meal-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .2rem; border: 2px solid var(--p-border); border-radius: 16px; background: #fff; font-weight: 800; font-size: .78rem; color: var(--p-text); }
.p-meal-tab .em { font-size: 1.55rem; line-height: 1.1; }
.p-meal-tab.on { border-color: #16A34A; background: #16A34A; color: #fff; box-shadow: 0 6px 14px rgba(22, 163, 74, .3); }
.p-meal-tab .ok { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #16A34A; color: #fff; border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.p-meal-tab.on .ok { background: #fff; color: #16A34A; }
.p-qs-q { margin: .1rem 0 .55rem; font-weight: 800; color: var(--p-navy); font-size: .95rem; }
.p-qs-q b { color: #16A34A; }
.p-qs-ans .when { font-size: .7rem; font-weight: 800; color: var(--p-blue); }

/* Today: how many are left on a started item */
.p-type-chip .left { position: absolute; right: -7px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #F59E0B; color: #fff; border: 2px solid #fff; font-size: .68rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.p-tl-end { text-align: center; color: var(--p-muted); font-size: .8rem; font-weight: 700; padding: .6rem 0 .2rem; }

/* ==== Parent home: one compact card per child ==== */
.p-kc-list { display: grid; grid-template-columns: 1fr; gap: .65rem; }
@media (min-width: 992px) { .p-kc-list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
a.p-kc { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 20px; min-width: 0; }
.p-kc > .p-child-photo { flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(13, 59, 122, .16); }
.p-kc-body { flex: 1; min-width: 0; }
.p-kc .p-kc-name { display: flex; align-items: baseline; gap: .45rem; font-size: 1.15rem; font-weight: 900; color: var(--p-navy); line-height: 1.15; }
.p-kc .p-kc-name small { font-size: .74rem; font-weight: 800; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kc-line { font-size: .85rem; font-weight: 800; color: var(--p-text); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kc-go { flex-shrink: 0; }
.p-kc { background: #fff; box-shadow: 0 4px 18px rgba(13, 59, 122, .08); text-decoration: none; color: var(--p-text); transition: transform .1s; }
.p-kc:active { transform: scale(.985); }
.p-kc:hover { color: var(--p-text); }
.p-kc-go { color: var(--p-muted); font-size: 1.2rem; }
.p-hls { display: flex; flex-wrap: wrap; gap: .35rem; }
.p-hls.sm { margin-top: .4rem; gap: .25rem; }
.p-hl { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; background: var(--p-grey-soft); font-size: .82rem; font-weight: 800; color: var(--p-text); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-hls.sm .p-hl { padding: .15rem .5rem; font-size: .74rem; background: var(--p-grey-soft); }
.p-hl .em { font-size: 1rem; }
.p-hl.tone-green { background: var(--p-green-soft); color: var(--p-green); }
.p-hl.tone-amber { background: var(--p-amber-soft); color: #9A5B00; }
.p-hl.tone-red { background: var(--p-red-soft); color: #B4232A; }
.p-hl.tone-blue { background: var(--p-blue-soft); color: var(--p-blue); }
.p-hl.tone-purple { background: var(--p-purple-soft); color: var(--p-purple); }
.p-hl.tone-grey { background: var(--p-grey-soft); color: #66708A; }

/* ==== Parent child: summary of a day / a week ==== */
.p-mc-hero { padding: .9rem; gap: .85rem; border-radius: 22px; }
.p-mc-hero-name { font-size: 1.25rem; }
.p-mc-hero-sub { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-week { background: #fff; border-radius: 22px; padding: .5rem .5rem .6rem; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); margin-bottom: .7rem; }
.p-week-nav { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; }
.p-week-nav span { font-weight: 900; color: var(--p-navy); text-transform: capitalize; }
.p-week-nav .btn-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--p-grey-soft); }
.p-wstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
.p-wday { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .4rem .1rem .45rem; border: 2px solid transparent; border-radius: 16px; background: var(--p-grey-soft); min-width: 0; }
.p-wday small { font-size: .66rem; font-weight: 800; color: var(--p-muted); text-transform: capitalize; }
.p-wday b { font-size: .95rem; color: var(--p-navy); line-height: 1.1; }
.p-wday .em { font-size: 1.35rem; line-height: 1.2; }
.p-wday.on { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-wday.unwell { background: var(--p-red-soft); }
.p-wday.future { opacity: .35; }
.p-day1 { display: block; width: 100%; border: 0; text-align: left; color: inherit; background: #fff; border-radius: 22px; padding: .9rem 1rem .7rem; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); transition: transform .1s; }
.p-day1:active { transform: scale(.99); }
.p-day1.empty { cursor: default; }
.p-day1-more { display: flex; align-items: center; justify-content: center; margin-top: .45rem; padding-top: .55rem; border-top: 1px solid #EEF2F8; color: var(--p-blue); font-weight: 800; font-size: .88rem; }
.p-day1-title { display: flex; align-items: center; width: 100%; border: 0; background: transparent; padding: 0; font-weight: 900; color: var(--p-navy); font-size: 1.05rem; margin-bottom: .35rem; text-transform: capitalize; text-align: left; }
.p-day1-title span { margin-left: auto; font-size: .78rem; font-weight: 800; color: var(--p-blue); text-transform: none; }
.p-day1-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem 0; border: 0; border-top: 1px solid #EEF2F8; background: transparent; text-align: left; color: inherit; border-radius: 0; }
.p-day1-row:active { background: var(--p-grey-soft); }
.p-day1-row .go { color: var(--p-muted); flex-shrink: 0; }
.p-day1-title + .p-day1-row { border-top: 0; }
.p-day1-row .em { flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; background: var(--p-grey-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.p-day1-row b { display: block; font-size: .98rem; color: var(--p-text); line-height: 1.25; }
.p-day1-row small { display: block; font-size: .8rem; font-weight: 700; color: var(--p-muted); margin-top: .1rem; }
.p-day1-row.warn .em { background: var(--p-red-soft); }
.p-day1-row.warn small { color: #B4232A; }
.p-day1-none { display: flex; align-items: center; gap: .6rem; color: var(--p-muted); font-weight: 700; padding: .4rem 0; }
.p-day1-none .em { font-size: 1.6rem; }

/* ==== Updates (bell) ==== */
.p-bell { position: relative; }
.p-bell-n, .p-nav-badge, .p-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: .66rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.p-bell-n[hidden], .p-nav-badge[hidden], .p-tab-badge[hidden] { display: none; }
.p-bell-n { position: absolute; top: 2px; right: 0; border: 2px solid #fff; }
.p-nav-badge { margin-left: auto; }
.p-bottom-nav a { position: relative; }
.p-tab-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; border: 2px solid #fff; }
.p-up-day + .p-up-day { margin-top: 1rem; }
.p-up-list { display: grid; gap: .45rem; }
.p-up { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); text-decoration: none; color: var(--p-text); }
.p-up:hover { color: var(--p-text); }
.p-up.new { box-shadow: inset 4px 0 0 var(--p-blue), 0 2px 10px rgba(13, 59, 122, .06); }
.p-up.warn { background: var(--p-red-soft); }
.p-up-top { display: flex; align-items: baseline; gap: .3rem; font-size: .82rem; color: var(--p-muted); font-weight: 700; }
.p-up-top b { color: var(--p-navy); }
.p-up-top span { margin-left: auto; font-weight: 800; }
.p-up-val { font-weight: 800; font-size: .92rem; }
.p-up-val .em { margin-right: .3rem; }

/* Tabs: swiping slides the new pane in */
.p-swipe-l { animation: p-swipe-l .22s ease-out; }
.p-swipe-r { animation: p-swipe-r .22s ease-out; }
@keyframes p-swipe-l { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes p-swipe-r { from { transform: translateX(-28px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Tabs: a line under the open tab; panes follow the finger without moving the page */
#p-page { overflow-x: clip; }
[data-pane] { touch-action: pan-y; }
.p-seg { position: sticky; }
.p-seg-ink { position: absolute; left: 0; bottom: 3px; height: 3px; border-radius: 2px; background: var(--p-blue); pointer-events: none;
  transition: transform .16s ease-out, width .16s ease-out; will-change: transform; }
.p-swipe-hint { margin: -.45rem auto .7rem; width: fit-content; padding: .3rem .8rem; border-radius: 14px; max-width: calc(100% - 1rem); text-align: center; line-height: 1.35; background: var(--p-navy); color: #fff; font-size: .78rem; font-weight: 800;
  animation: p-hint-nudge 1.2s ease-in-out 2; transition: opacity .4s; }
.p-swipe-hint.out { opacity: 0; }
@keyframes p-hint-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-10px); } 60% { transform: translateX(10px); } }
@media (min-width: 992px) { .p-swipe-hint { display: none; } }

/* Parent: choose a day — a strip of days that scrolls sideways, today at the end; the calendar for older days */
.p-dpick { background: #fff; border-radius: 22px; padding: .6rem .5rem .55rem; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); margin-bottom: .7rem; }
.p-dpick-head { display: flex; align-items: center; gap: .4rem; padding: 0 .3rem .45rem; }
.p-dpick-head b { flex: 1; font-weight: 900; color: var(--p-navy); text-transform: capitalize; }
.p-dpick-today { border: 0; border-radius: 999px; padding: .3rem .8rem; background: var(--p-blue-soft); color: var(--p-blue); font-weight: 800; font-size: .82rem; }
.p-dpick-today[hidden] { display: none; }
.p-dpick-cal { position: relative; width: 36px; height: 36px; margin: 0; border-radius: 12px; background: var(--p-grey-soft); color: var(--p-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.p-dpick-cal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.p-dstrip { display: flex; align-items: stretch; gap: .35rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: .1rem .2rem .15rem; -webkit-overflow-scrolling: touch; }
.p-dstrip::-webkit-scrollbar { display: none; }
.p-dstrip .p-wday { flex: 0 0 54px; scroll-snap-align: center; }
.p-wday.none .em { opacity: .35; }
.p-dmonth { flex: 0 0 auto; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .66rem; font-weight: 900; color: var(--p-blue); text-transform: uppercase; letter-spacing: .06em; }
.p-tl-latest { display: block; margin: 0 auto .8rem; border: 0; border-radius: 999px; padding: .35rem .9rem; background: var(--p-blue-soft); color: var(--p-blue); font-weight: 800; font-size: .84rem; }

/* Parent: the chosen day as one tappable card (sentence + details) */
.p-day2 { display: flex; align-items: flex-start; gap: .85rem; width: 100%; border: 0; text-align: left; color: inherit; background: #fff; border-radius: 22px; padding: 1rem;
  box-shadow: 0 4px 16px rgba(13, 59, 122, .08); transition: transform .1s, box-shadow .1s; cursor: pointer; }
.p-day2:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(13, 59, 122, .08); }
.p-day2.empty { cursor: default; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-day2-em { flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px; background: var(--p-blue-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.p-day2-title { font-weight: 900; color: var(--p-navy); font-size: .9rem; text-transform: capitalize; }
.p-day2-text { margin: .2rem 0 0; font-size: 1.02rem; font-weight: 700; color: var(--p-text); line-height: 1.4; }
.p-day2-text.muted { color: var(--p-muted); }
.p-day2-warn { margin: .45rem 0 0; padding: .35rem .6rem; border-radius: 10px; background: var(--p-red-soft); color: #B4232A; font-weight: 800; font-size: .86rem; }
.p-day2-note { margin: .4rem 0 0; color: var(--p-blue); font-weight: 800; font-size: .86rem; }
.p-day2-more { display: inline-flex; align-items: center; gap: .25rem; margin-top: .6rem; padding: .35rem .8rem; border-radius: 999px; background: var(--p-blue); color: #fff; font-weight: 800; font-size: .82rem; }
.p-day2-warn.better { background: var(--p-amber-soft); color: #8A5300; }

/* ==== Parent: the day card ==== */
.p-dc { display: block; width: 100%; border: 0; padding: 0; text-align: left; color: inherit; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(13, 59, 122, .09); transition: transform .12s; }
button.p-dc:active { transform: scale(.985); }
.p-dc-top { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; color: #fff; }
.p-dc-top.tone-green { background: linear-gradient(135deg, #34D399, #059669); }
.p-dc-top.tone-blue { background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-dc-top.tone-amber { background: linear-gradient(135deg, #FBBF24, #D97706); }
.p-dc-top.tone-red { background: linear-gradient(135deg, #FB7185, #DC2626); }
.p-dc-top.tone-grey { background: linear-gradient(135deg, #A3AEC2, #6B7891); }
.p-dc-em { flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.p-dc-top small { display: block; font-size: .78rem; font-weight: 800; opacity: .9; text-transform: capitalize; }
.p-dc-top b { display: block; font-size: 1.3rem; font-weight: 900; line-height: 1.15; }
.p-dc-text { margin: 0; padding: .85rem 1rem .2rem; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--p-text); }
.p-dc-text.muted { color: var(--p-muted); padding-bottom: 1rem; }
.p-dc-alert { display: flex; align-items: center; gap: .5rem; margin: .5rem 1rem 0; padding: .5rem .7rem; border-radius: 12px; background: var(--p-red-soft); color: #B4232A; font-weight: 800; font-size: .86rem; }
.p-dc-alert.better { background: var(--p-amber-soft); color: #8A5300; }
.p-dc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .7rem 1rem 0; }
@media (min-width: 576px) { .p-dc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-dc-tile { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 14px; background: var(--p-grey-soft); min-width: 0; }
.p-dc-tile .em { font-size: 1.35rem; flex-shrink: 0; }
.p-dc-tile small { display: block; font-size: .68rem; font-weight: 800; color: var(--p-muted); text-transform: uppercase; letter-spacing: .03em; }
.p-dc-tile b { display: block; font-size: .92rem; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-dc-note { display: flex; gap: .55rem; margin: .7rem 1rem 0; padding: .6rem .75rem; border-radius: 14px; background: var(--p-blue-soft); color: var(--p-navy); }
.p-dc-note .bi { color: var(--p-blue); font-size: 1.1rem; }
.p-dc-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: .9rem; }
.p-dc-note small { display: block; color: var(--p-muted); font-weight: 700; font-size: .74rem; margin-top: .15rem; }
.p-dc-more { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; padding: .75rem 1rem; border-top: 1px solid #EEF2F8; color: var(--p-blue); font-weight: 800; font-size: .92rem; }

/* ==== Parent summary v6: one slim date bar, one light card ==== */
.p-dbar { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; padding: .3rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-dbar-btn { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 14px; background: var(--p-grey-soft); color: var(--p-navy); font-size: 1.05rem; }
.p-dbar-btn:disabled { opacity: .35; }
.p-dbar-date { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; height: 42px; margin: 0; border-radius: 14px; font-weight: 900; color: var(--p-navy); font-size: 1.02rem; cursor: pointer; text-transform: capitalize; }
.p-dbar-date .bi { color: var(--p-blue); }
.p-dbar-date input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.p-dbar-today { display: block; margin: 0 auto .55rem; border: 0; background: transparent; color: var(--p-blue); font-weight: 800; font-size: .85rem; }
.p-dbar-today[hidden] { display: none; }
.p-dc2 { --tone: #1565D8; --soft: var(--p-blue-soft); display: block; width: 100%; border: 0; text-align: left; color: inherit; background: #fff; border-radius: 22px;
  padding: .95rem 1rem; box-shadow: 0 3px 14px rgba(13, 59, 122, .07); border-left: 5px solid var(--tone); transition: transform .12s; }
button.p-dc2:active { transform: scale(.985); }
.p-dc2.tone-green { --tone: #059669; --soft: #E7F8EF; }
.p-dc2.tone-amber { --tone: #D97706; --soft: #FFF4DE; }
.p-dc2.tone-red { --tone: #DC2626; --soft: #FDECEC; }
.p-dc2.tone-grey { --tone: #8792A8; --soft: var(--p-grey-soft); }
.p-dc2-head { display: flex; align-items: center; gap: .65rem; }
.p-dc2-em { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.p-dc2-head b { flex: 1; font-size: 1.15rem; font-weight: 900; color: var(--tone); }
.p-dc2-head .bi { color: var(--p-muted); }
.p-dc2-text { margin: .6rem 0 0; font-size: .98rem; font-weight: 600; line-height: 1.45; color: var(--p-text); }
.p-dc2-text.muted { color: var(--p-muted); }
.p-dc2-line { display: flex; align-items: flex-start; gap: .45rem; margin: .55rem 0 0; font-size: .86rem; font-weight: 700; line-height: 1.35; }
.p-dc2-line .bi { margin-top: .1rem; }
.p-dc2-line.warn { color: #B4232A; }
.p-dc2-line.warn.better { color: #8A5300; }
.p-dc2-line.note { color: var(--p-navy); }
.p-dc2-line.note .bi { color: var(--p-blue); }
.p-dc2-line.note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }

/* ==== Parent summary v7: the day as a picture (ring + bars) ==== */
.p-dc3 { --tone: #1565D8; display: block; width: 100%; border: 0; text-align: left; color: inherit; background: #fff; border-radius: 24px; padding: 1rem 1rem .9rem;
  box-shadow: 0 4px 18px rgba(13, 59, 122, .08); transition: transform .12s; }
button.p-dc3:active { transform: scale(.985); }
.p-dc3.tone-green { --tone: #059669; } .p-dc3.tone-amber { --tone: #D97706; } .p-dc3.tone-red { --tone: #DC2626; } .p-dc3.tone-grey { --tone: #8792A8; }
.p-dc3-head { display: flex; align-items: center; gap: .5rem; }
.p-dc3-head b { flex: 1; font-size: 1.12rem; font-weight: 900; color: var(--tone); }
.p-dc3-head .em { font-size: 1.5rem; }
.p-dc3-head .go { display: inline-flex; align-items: center; gap: .15rem; font-size: .8rem; font-weight: 800; color: var(--p-blue); }
.p-dc3-body { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; }
.p-ring-wrap { position: relative; flex-shrink: 0; width: 112px; height: 112px; }
.p-ring { width: 100%; height: 100%; }
.p-ring-arc { transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.p-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.p-ring-in .em { font-size: 1.9rem; }
.p-ring-in b { margin-top: .2rem; font-size: 1rem; font-weight: 900; color: var(--p-navy); }
.p-bars { flex: 1; min-width: 0; display: grid; gap: .55rem; }
.p-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; font-size: .78rem; font-weight: 800; color: var(--p-muted); }
.p-bar-top b { color: var(--p-navy); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-bar { height: 8px; margin-top: .25rem; border-radius: 4px; background: #EEF2F8; overflow: hidden; }
.p-bar span { display: block; height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.p-dc3-solo { text-align: center; font-size: 2.6rem; margin: .5rem 0 .2rem; }
.p-dc3-line { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 0; padding: .5rem .7rem; border-radius: 12px; font-size: .86rem; font-weight: 700; line-height: 1.35; }
.p-dc3-line .bi { margin-top: .1rem; }
.p-dc3-line.warn { background: var(--p-red-soft); color: #B4232A; }
.p-dc3-line.warn.better { background: var(--p-amber-soft); color: #8A5300; }
.p-dc3-line.note { background: var(--p-blue-soft); color: var(--p-navy); }
.p-dc3-line.note .bi { color: var(--p-blue); }
.p-dc3-line.note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }
.p-dc3-text { margin: .65rem 0 0; font-size: .88rem; font-weight: 600; line-height: 1.45; color: var(--p-muted); }

/* ==== Parent summary v9: a calm native card; green / blue / amber / red at a glance ==== */
.p-dc3 { --lv: #1565D8; --lv-soft: #EAF2FE; border: 0; border-radius: 22px; padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 1px 2px rgba(13, 59, 122, .06), 0 10px 28px rgba(13, 59, 122, .07); }
.p-dc3.lv-good { --lv: #16A34A; --lv-soft: #E8F7EE; }
.p-dc3.lv-ok { --lv: #1565D8; --lv-soft: #EAF2FE; }
.p-dc3.lv-warn { --lv: #D97706; --lv-soft: #FEF3E2; }
.p-dc3.lv-bad { --lv: #DC2626; --lv-soft: #FDECEC; }
.p-dc3.lv-none { --lv: #8792A8; --lv-soft: var(--p-grey-soft); }
.p-dc3 .p-dc3-body { margin-top: 0; align-items: center; gap: 1.1rem; }
.p-dc3 .p-ring-wrap { width: 104px; height: 104px; }
.p-dc3-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .55rem; border-radius: 999px;
  background: var(--lv-soft); color: var(--lv); font-size: .95rem; font-weight: 900; line-height: 1.2; }
.p-dc3-sub { margin-top: .5rem; font-size: .92rem; font-weight: 700; color: var(--p-navy); line-height: 1.35; }
.p-dc3 .go { display: inline-flex; align-items: center; gap: .15rem; margin-top: .4rem; font-size: .8rem; font-weight: 800; color: var(--p-muted); }
.p-dc3 > .p-bars { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #F0F3F8; gap: .8rem; }
.p-bar-row { --c: #1565D8; --c-soft: #EAF2FE; display: flex; align-items: center; gap: .7rem; }
.p-bar-row.lv-good { --c: #16A34A; --c-soft: #E8F7EE; } .p-bar-row.lv-ok { --c: #1565D8; --c-soft: #EAF2FE; }
.p-bar-row.lv-warn { --c: #D97706; --c-soft: #FEF3E2; } .p-bar-row.lv-bad { --c: #DC2626; --c-soft: #FDECEC; }
.p-bar-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; background: var(--c-soft); display: grid; place-items: center; font-size: 1.1rem; }
.p-bar-main { flex: 1; min-width: 0; }
.p-bar-top { align-items: center; font-size: .82rem; color: var(--p-navy); }
.p-bar-top span { font-weight: 800; }
.p-bar-top b { display: inline-flex; align-items: center; gap: .3rem; color: var(--c); font-size: .8rem; }
.p-bar-row .p-bar { height: 6px; margin-top: .35rem; background: #F0F3F8; }
.p-bar-row .p-bar span { background: var(--c); }
.p-dc3-line.ok { background: #E8F1FD; color: #1554B0; }
.p-qs-answers.n1 { grid-template-columns: 1fr; }
.p-qs-answers.n1 .p-qs-ans { min-height: 64px; flex-direction: row; }
.p-qs-person.on { border-color: var(--p-blue); background: var(--p-blue-soft); }
.p-qs-ans:not(:has(.em)) { min-height: 58px; }

/* ---- iPhone: the bottom menu stays glued to the bottom ---------------------------------------
   Safari's own bar grows and shrinks while scrolling; the menu is its own layer, includes the home-bar
   area in its height. (Pull down to reload stays: no overscroll blocking.) */
@media (max-width: 991.98px) {
    .p-bottom-nav { height: calc(68px + env(safe-area-inset-bottom)); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); will-change: transform; overflow: visible; }
    .p-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* Each area shows its own %; the ring is their average (written under the bars). */
.p-bar-line { display: flex; align-items: center; gap: .55rem; margin-top: .35rem; }
.p-bar-line .p-bar { flex: 1; margin-top: 0; }
.p-bar-pct { flex-shrink: 0; min-width: 2.6em; text-align: right; font-style: normal; font-size: .75rem; font-weight: 900; color: var(--c); font-variant-numeric: tabular-nums; }
.p-bars-total { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .1rem; padding-top: .65rem; border-top: 1px dashed #E3E8F0; font-size: .78rem; font-weight: 700; color: var(--p-muted); }
.p-bars-total b { font-size: .85rem; font-weight: 900; color: var(--lv); }
/* ==== Parent summary v10: clean — colour only where it means something (ring, %, bar) ==== */
.p-dc4 .p-dc3-body { position: relative; }
.p-dc4 .p-ring-in b { margin: 0; font-size: 1.45rem; letter-spacing: -.02em; }
.p-dc4 .p-ring-in small { margin-top: .15rem; font-size: .66rem; font-weight: 700; color: var(--p-muted); text-transform: lowercase; }
.p-dc4 .p-dc3-status { padding: 0; background: none; font-size: 1.15rem; }
.p-dc4 .p-dc3-sub { margin-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--p-muted); }
.p-dc4-go { position: absolute; top: .15rem; right: -.2rem; color: #B8C2D3; font-size: 1rem; }
.p-dc4 > .p-bars { gap: .95rem; border-top-color: #F2F4F8; }
.p-dc4 .p-bar-ic { width: 32px; height: 32px; border-radius: 10px; background: #F5F7FB; font-size: 1rem; }
.p-dc4 .p-bar-top { align-items: baseline; }
.p-dc4 .p-bar-top .nm { min-width: 0; flex: 1; font-weight: 800; color: var(--p-navy); line-height: 1.3; overflow-wrap: anywhere; }
.p-dc4 .p-bar-top .nm small { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--p-muted); }
/* Long words (other languages) go to the next line instead of overflowing. */
.p-dc4 .p-dc3-status { flex-wrap: wrap; overflow-wrap: anywhere; }
.p-dc4 .p-dc3-sub, .p-dc3-sub { overflow-wrap: anywhere; }
.p-dc4 .p-dc3-body > .min-w-0 { padding-right: 1rem; }
.p-dc4 .p-bar-top b { flex-shrink: 0; font-size: .85rem; font-weight: 900; color: var(--c); font-variant-numeric: tabular-nums; }
.p-dc4 .p-bar-row .p-bar { height: 5px; margin-top: .4rem; }

/* ==== Phone notifications: the question, the iPhone guide, the home reminder, settings ==== */
.p-push-sheet .p-qs-panel { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); text-align: center; }
.p-push-hero { display: grid; place-items: center; width: 84px; height: 84px; margin: .6rem auto .8rem; border-radius: 28px; background: linear-gradient(135deg, #E8F1FD, #FFF4DE); font-size: 2.6rem; }
.p-push-hero span { animation: p-ring-bell 1.6s ease-in-out .3s 2; display: inline-block; transform-origin: 50% 10%; }
@keyframes p-ring-bell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
.p-push-title { font-size: 1.3rem; font-weight: 900; color: var(--p-navy); margin: 0 0 .35rem; line-height: 1.2; }
.p-push-text { color: var(--p-muted); font-weight: 600; font-size: .92rem; margin: 0 auto .9rem; max-width: 420px; }
.p-push-points { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .55rem; text-align: left; }
.p-push-points li { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 16px; background: #F5F7FB; }
.p-push-points .em { font-size: 1.5rem; flex-shrink: 0; }
.p-push-points b { display: block; color: var(--p-navy); font-size: .92rem; }
.p-push-points small { display: block; color: var(--p-muted); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.p-push-steps { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .55rem; text-align: left; }
.p-push-steps li { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; border-radius: 16px; background: #F5F7FB; font-weight: 700; color: var(--p-navy); font-size: .92rem; line-height: 1.35; }
.p-push-steps .n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--p-blue); color: #fff; font-weight: 900; font-size: .85rem; }
.p-push-steps .bi { color: var(--p-blue); font-size: 1.05rem; }
.p-push-banner { display: flex; align-items: center; gap: .75rem; width: 100%; margin-bottom: .9rem; padding: .75rem .9rem; border: 0; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, #FFF4DE, #FFFBF2); box-shadow: 0 2px 10px rgba(13, 59, 122, .06); color: var(--p-navy); }
.p-push-banner .em { font-size: 1.5rem; }
.p-push-banner .tx { flex: 1; min-width: 0; }
.p-push-banner b { display: block; font-weight: 900; font-size: .92rem; }
.p-push-banner small { display: block; color: var(--p-muted); font-weight: 600; font-size: .8rem; }
.p-push-banner .bi { color: #C27C00; }
.p-switch-row { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; cursor: pointer; margin: 0; }
.p-switch-row > span:not(.form-check):not(.em) { flex: 1; min-width: 0; }
.p-switch-row b { display: block; font-size: .92rem; color: var(--p-navy); }
.p-switch-row small { display: block; color: var(--p-muted); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.p-switch-row .em { font-size: 1.3rem; width: 1.6rem; text-align: center; }
.p-switch-row .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.p-pn-list { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid #F0F3F8; }

/* ==== Announcements (staff) and News (parents) ==== */
.p-ann-list, .p-news-list { display: grid; gap: .75rem; }
.p-ann-card { display: block; padding: .95rem 1rem; border-radius: 20px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); transition: transform .1s; }
.p-ann-card:active { transform: scale(.99); }
.p-ann-card.important { box-shadow: 0 2px 12px rgba(220, 38, 38, .10), inset 4px 0 0 #DC2626; }
.p-ann-card.gone { opacity: .55; }
.p-ann-top, .p-news-top { display: flex; align-items: flex-start; gap: .7rem; }
.p-ann-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; background: #F2F6FD; display: grid; place-items: center; font-size: 1.2rem; }
.important .p-ann-ic { background: #FDECEC; }
.p-ann-title { font-weight: 900; color: var(--p-navy); line-height: 1.25; overflow-wrap: anywhere; }
.p-ann-meta { font-size: .78rem; font-weight: 600; color: var(--p-muted); margin-top: .15rem; overflow-wrap: anywhere; }
.p-ann-stat { margin-top: .7rem; }
.p-ann-stat small { display: block; margin-top: .3rem; font-size: .76rem; font-weight: 700; color: var(--p-muted); }
.p-ann-bar { height: 6px; border-radius: 4px; background: #EEF2F8; overflow: hidden; }
.p-ann-bar.lg { height: 10px; border-radius: 6px; margin-top: .6rem; }
.p-ann-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16A34A, #22C55E); transition: width .5s; }
.p-ann-answers { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.p-ann-ans { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 999px; background: #F2F6FD; font-size: .76rem; font-weight: 700; color: var(--p-navy); }
.p-ann-ans b { color: var(--p-blue); }
.p-ann-view.important { box-shadow: var(--p-shadow), inset 0 4px 0 #DC2626; }
.p-ann-flag { display: inline-block; margin-bottom: .4rem; padding: .15rem .55rem; border-radius: 999px; background: #FDECEC; color: #B4232A; font-size: .75rem; font-weight: 900; }
.p-ann-h { font-size: 1.3rem; font-weight: 900; color: var(--p-navy); margin: 0 0 .25rem; overflow-wrap: anywhere; }
.p-ann-body { font-size: .95rem; line-height: 1.55; color: var(--p-text); overflow-wrap: anywhere; }
.p-ann-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.p-ann-asked { margin-top: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: var(--p-muted); }
.p-ann-photos { display: grid; gap: .35rem; margin-top: .8rem; border-radius: 16px; overflow: hidden; }
.p-ann-photos.n2, .p-ann-photos.n4 { grid-template-columns: 1fr 1fr; }
.p-ann-photos.n3 { grid-template-columns: 1fr 1fr; }
.p-ann-photos.n3 .p-ann-photo:first-child { grid-column: span 2; }
.p-ann-photo { border: 0; padding: 0; background: #EEF2F8; aspect-ratio: 4 / 3; overflow: hidden; }
.p-ann-photos.n1 .p-ann-photo { aspect-ratio: auto; max-height: 420px; }
.p-ann-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-ann-photos.n1 .p-ann-photo img { object-fit: contain; max-height: 420px; }
.p-ann-pdf { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; padding: .7rem .8rem; border-radius: 16px; background: #FFF5F5; color: var(--p-navy); text-decoration: none; }
.p-ann-pdf .ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #DC2626; font-size: 1.35rem; }
.p-ann-pdf small { color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.p-ann-pdf.sm { margin-top: 0; }
.p-ann-read { display: flex; align-items: center; gap: .9rem; }
.p-ann-big { font-size: 2rem; font-weight: 900; color: #16A34A; line-height: 1; }
.p-ann-read b { display: block; color: var(--p-navy); }
.p-ann-read small { display: block; color: var(--p-muted); font-weight: 600; font-size: .8rem; }
.p-ann-tabs { position: static; box-shadow: none; background: #F5F7FB; }
.p-ann-tabs .p-seg-btn { flex-direction: row; font-size: .8rem; }
.p-ann-fam { list-style: none; padding: 0; margin: .6rem 0 0; }
.p-ann-fam li { padding: .6rem .1rem; border-bottom: 1px solid #F0F3F8; }
.p-ann-fam .nm { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--p-navy); }
.p-ann-fam .pa { display: flex; flex-direction: column; gap: .1rem; margin-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--p-text); }
.p-ann-fam .no-app { color: var(--p-muted); }
/* writing */
.p-ann-form { display: grid; gap: .8rem; max-width: 760px; padding-bottom: 5.5rem; }
.p-ann-step { font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); margin-bottom: .55rem; }
.p-ann-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.p-ann-to { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .4rem; border: 2px solid var(--p-border); border-radius: 18px; background: #fff; font-weight: 800; font-size: .85rem; color: var(--p-text); }
.p-ann-to .em { font-size: 1.5rem; }
.p-ann-to.on { border-color: var(--p-blue); background: var(--p-blue-soft); color: var(--p-blue); }
.p-ann-pick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.p-ann-pick .p-chip-f small { opacity: .7; margin-left: .2rem; }
.p-chip-f .btn-x, .p-ann-thumb .btn-x, .p-ann-pdf .btn-x { border: 0; background: none; font-weight: 900; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; color: inherit; }
.p-ann-find { position: relative; margin-top: .3rem; }
.p-ann-find > .bi { position: absolute; left: .8rem; top: .7rem; color: var(--p-muted); }
.p-ann-find input { padding-left: 2.2rem; }
.p-ann-found { display: grid; margin-top: .3rem; border-radius: 14px; overflow: hidden; }
.p-ann-found button { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 0; background: #F5F7FB; text-align: left; font-weight: 700; border-bottom: 1px solid #fff; }
.p-ann-found small { color: var(--p-muted); font-weight: 600; }
.p-ann-reach { margin-top: .8rem; font-size: .85rem; font-weight: 800; color: var(--p-blue); min-height: 1.2em; }
.p-ann-att { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.p-ann-att .p-ann-pdf { flex: 1 1 100%; }
.p-ann-thumb { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: #EEF2F8; }
.p-ann-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-ann-thumb .btn-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: .95rem; }
.p-ann-consent { margin-top: .6rem; padding: .45rem .7rem; border-radius: 12px; background: var(--p-amber-soft); color: #8A5300; font-size: .8rem; font-weight: 700; }
.p-ann-sendbar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; padding: 1.2rem 0 .5rem; background: linear-gradient(to bottom, rgba(244, 247, 252, 0), var(--p-bg, #F4F7FC) 45%); }
@media (min-width: 992px) { .p-ann-sendbar { bottom: 1rem; } }
/* parents */
.p-news { padding: 1rem; border-radius: 22px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); scroll-margin-top: 80px; }
.p-news.important { box-shadow: 0 2px 12px rgba(220, 38, 38, .10), inset 0 4px 0 #DC2626; }
.p-news.focus { outline: 3px solid var(--p-blue-soft); }
.p-news-from { font-weight: 800; color: var(--p-navy); font-size: .88rem; overflow-wrap: anywhere; }
.p-news-when { font-size: .76rem; font-weight: 600; color: var(--p-muted); }
.p-news-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--p-blue); margin-top: .4rem; }
.p-news-title { font-size: 1.12rem; font-weight: 900; color: var(--p-navy); margin: .7rem 0 .3rem; overflow-wrap: anywhere; }
.p-news-ask { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #F0F3F8; }
.p-news-ask .q { font-size: .8rem; font-weight: 800; color: var(--p-muted); margin-bottom: .45rem; }
.p-news-btns { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.p-news-btns.n1 { grid-template-columns: 1fr; }
.p-news-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 50px; padding: .5rem; border: 2px solid var(--p-border); border-radius: 16px; background: #fff; font-weight: 800; color: var(--p-text); line-height: 1.2; }
.p-news-btn .em { font-size: 1.2rem; }
.p-news-btn.on { border-color: var(--p-blue); background: var(--p-blue-soft); color: var(--p-blue); }
.p-news-minis { display: grid; gap: .5rem; margin-bottom: .8rem; }
.p-news-minis:empty { display: none; }
.p-news-mini { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 18px; background: #fff; color: var(--p-navy); text-decoration: none; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); }
.p-news-mini.important { box-shadow: 0 2px 10px rgba(220, 38, 38, .12), inset 4px 0 0 #DC2626; }
.p-news-mini small { color: var(--p-muted); font-weight: 600; }
.p-news-mini .bi { color: var(--p-muted); }
.p-lightbox { position: fixed; inset: 0; z-index: 7000; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 1rem; }
.p-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.p-lightbox-x { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: 1rem; color: #fff; background: rgba(255, 255, 255, .15); border-radius: 50%; }
.p-lightbox.out { opacity: 0; transition: opacity .15s; }

/* ==== News for parents v2: a list, one announcement per page, reaction-style answers ==== */
.p-nl-h { display: flex; align-items: center; gap: .4rem; margin: .4rem .2rem .5rem; font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); }
.p-nl-h b { padding: 0 .45rem; border-radius: 999px; background: var(--p-blue); color: #fff; font-size: .72rem; }
.p-nl-list { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); overflow: hidden; margin-bottom: 1rem; }
.p-nl { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid #F0F3F8; transition: background .15s; }
.p-nl:last-child { border-bottom: 0; }
.p-nl:active { background: #F5F8FD; }
.p-nl.unread { background: #F7FAFF; }
.p-nl-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #EEF4FE; font-size: 1.25rem; }
.p-nl.important .p-nl-ic { background: #FDECEC; }
.p-nl-main { flex: 1; min-width: 0; display: block; }
.p-nl-top { display: flex; align-items: baseline; gap: .5rem; }
.p-nl-title { flex: 1; min-width: 0; font-weight: 700; color: var(--p-navy); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.p-nl.unread .p-nl-title { font-weight: 900; }
.p-nl-top time { flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--p-muted); }
.p-nl.unread .p-nl-top time { color: var(--p-blue); }
.p-nl-prev { display: block; margin-top: .15rem; font-size: .86rem; color: var(--p-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-nl-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.p-nl-tags:empty { display: none; }
.p-nl-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; background: #F2F5FA; font-size: .72rem; font-weight: 800; color: var(--p-muted); }
.p-nl-tag.imp { background: #FDECEC; color: #B4232A; }
.p-nl-tag.ask { background: var(--p-amber-soft); color: #8A5300; }
.p-nl-tag.done.pos { background: #E7F0FE; color: #1877F2; }
.p-nl-tag.done.neg { background: #FDECEC; color: #C0392B; }
.p-nl-tag.edit { background: #F2F5FA; color: var(--p-muted); font-weight: 700; }
.p-nl-dot { position: absolute; right: 1rem; bottom: 1rem; width: 10px; height: 10px; border-radius: 50%; background: var(--p-blue); box-shadow: 0 0 0 3px #DCE8FD; }
/* one announcement */
.p-nd { background: #fff; border-radius: 22px; padding: 1.1rem 1.1rem 1rem; box-shadow: 0 2px 14px rgba(13, 59, 122, .07); }
.p-nd.important { box-shadow: 0 2px 14px rgba(220, 38, 38, .10), inset 0 4px 0 #DC2626; }
.p-nd-from { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.p-nd-av { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #EEF4FE; font-size: 1.25rem; }
.p-nd.important .p-nd-av { background: #FDECEC; }
.p-nd-from b { display: block; color: var(--p-navy); line-height: 1.2; }
.p-nd-from small { display: block; color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.p-nd-title { font-size: 1.35rem; font-weight: 900; color: var(--p-navy); line-height: 1.25; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.p-nd-for { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .7rem; padding: .2rem .6rem; border-radius: 999px; background: #FDF0F6; color: #B83280; font-size: .78rem; font-weight: 800; }
.p-nd-body { font-size: 1rem; line-height: 1.6; }
.p-nd-edited { margin-top: .7rem; font-size: .76rem; font-weight: 700; color: var(--p-muted); }
/* reactions (like a "like" button) */
.p-react { margin: 1rem -1.1rem -1rem; padding: .8rem 1.1rem 1rem; border-top: 1px solid #EEF1F6; }
.p-react-q { font-size: .85rem; font-weight: 800; color: var(--p-navy); margin-bottom: .55rem; }
.p-react-bar { display: flex; gap: .4rem; }
.p-react-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: .4rem .6rem; border: 0; border-radius: 12px;
  background: #F0F2F5; color: #65676B; font-weight: 800; font-size: .92rem; line-height: 1.15; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform .12s ease, background .2s, color .2s; }
.p-react-btn:active { transform: scale(.93); }
.p-react-btn .ic { position: relative; display: inline-grid; place-items: center; font-size: 1.3rem; }
.p-react-btn .tx { overflow: hidden; text-overflow: ellipsis; }
.p-react-btn.pos.on { color: #1877F2; background: #E7F0FE; }
.p-react-btn.neg.on { color: #E0245E; background: #FDE8EE; }
.p-react-btn.pop .ic i { animation: p-like-pop .45s cubic-bezier(.17, .89, .32, 1.49); }
.p-react-btn.unpop .ic i { animation: p-like-unpop .25s ease-out; }
@keyframes p-like-pop { 0% { transform: scale(.4) rotate(-15deg); } 45% { transform: scale(1.45) rotate(-12deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes p-like-unpop { 0% { transform: scale(1); } 40% { transform: scale(.7); } 100% { transform: scale(1); } }
.p-burst { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0; pointer-events: none; }
.p-burst::before { content: ''; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid currentColor; opacity: .7; animation: p-burst-ring .5s ease-out forwards; }
.p-burst i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: rotate(var(--a)) translateY(0); animation: p-burst-dot .55s ease-out forwards; }
.p-burst i:nth-child(odd) { background: #F7B928; }
@keyframes p-burst-ring { from { transform: scale(.3); opacity: .8; } to { transform: scale(1.6); opacity: 0; border-width: 0; } }
@keyframes p-burst-dot { 0% { transform: rotate(var(--a)) translateY(-6px) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-26px) scale(.3); opacity: 0; } }
.p-react-note { min-height: 1.1em; margin-top: .5rem; font-size: .76rem; font-weight: 600; color: var(--p-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .p-react-btn.pop .ic i, .p-react-btn.unpop .ic i, .p-burst { animation: none !important; display: none; } }
.p-ann-fixed { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-radius: 14px; background: #F2F6FD; color: var(--p-navy); }
.p-ann-fixed .bi { color: var(--p-blue); }
.p-ann-edited { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .6rem; padding: .15rem .55rem; border-radius: 999px; background: #F2F5FA; color: var(--p-muted); font-size: .74rem; font-weight: 700; }
.p-nd-from small.p-nd-ed { margin-top: .15rem; color: #8A94A6; font-style: italic; }

/* ==== News v3: read / unread at a glance, reaction bubbles ==== */
.p-nl { padding: 0; align-items: stretch; }
.p-nl-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem .2rem .85rem 1rem; color: inherit; text-decoration: none; }
.p-nl.unread { background: #F5F9FF; box-shadow: inset 4px 0 0 var(--p-blue); }
.p-nl:not(.unread) .p-nl-ic { filter: saturate(.6); opacity: .85; }
.p-nl:not(.unread) .p-nl-title { color: #3B4A63; }
.p-nl-mark { flex-shrink: 0; align-self: center; width: 48px; height: 48px; margin-right: .35rem; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center;
  font-size: 1.25rem; color: #A3AEC2; transition: transform .15s, background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.p-nl.unread .p-nl-mark { color: var(--p-blue); }
.p-nl-mark:active { transform: scale(.85); background: #EEF3FB; }
.p-nl.flip .p-nl-mark i { animation: p-env-flip .3s ease-in-out; }
@keyframes p-env-flip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(90deg) scale(1.2); } 100% { transform: rotateY(0) scale(1); } }
.p-nl.flash { animation: p-row-flash .7s ease-out; }
@keyframes p-row-flash { from { background: #E1ECFE; } }
.p-nl-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
.p-nl-filter { display: inline-flex; padding: .25rem; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); }
.p-nl-filter button { border: 0; background: none; padding: .4rem .9rem; border-radius: 999px; font-weight: 800; font-size: .85rem; color: var(--p-muted); transition: background .2s, color .2s; }
.p-nl-filter button b { margin-left: .2rem; padding: 0 .4rem; border-radius: 999px; background: #EEF2F8; font-size: .72rem; }
.p-nl-filter button.on { background: var(--p-blue); color: #fff; }
.p-nl-filter button.on b { background: rgba(255, 255, 255, .25); color: #fff; }
.p-nl-all { border: 0; background: none; display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: .82rem; color: var(--p-blue); padding: .4rem .2rem; }
.p-nl-none { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 1rem; border-radius: 20px; background: #fff; font-weight: 800; color: var(--p-muted); }
.p-nl-none span { font-size: 2rem; }
.p-nl-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin: .2rem 0 1rem; font-size: .74rem; font-weight: 700; color: var(--p-muted); }
.p-nl-legend .bi { margin-right: .15rem; }
.p-nd-unread { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-top: .8rem; padding: .7rem; border: 0; border-radius: 16px; background: transparent; color: var(--p-muted); font-weight: 800; font-size: .86rem; }
.p-nd-unread:active { background: #EEF2F8; }

/* reaction bubbles */
.p-react { text-align: center; }
.p-react-q { font-size: .95rem; font-weight: 900; margin-bottom: .9rem; }
.p-react-bar { display: flex; justify-content: center; gap: 1.4rem; }
.p-react-bar.n1 { gap: 0; }
.p-react-btn { flex: 0 1 auto; flex-direction: column; gap: .45rem; min-height: 0; width: 104px; padding: 0; border-radius: 0; background: none !important; color: var(--p-muted);
  animation: p-react-in .45s cubic-bezier(.17, .89, .32, 1.35) both; animation-delay: calc(var(--i) * 90ms); transition: opacity .25s, transform .25s; }
@keyframes p-react-in { from { opacity: 0; transform: translateY(14px) scale(.6); } }
.p-react-btn .bub { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #F2F4F8;
  box-shadow: 0 6px 16px rgba(13, 59, 122, .08), inset 0 -3px 0 rgba(13, 59, 122, .05); transition: transform .25s cubic-bezier(.17, .89, .32, 1.4), box-shadow .25s, background .25s; }
.p-react-btn .emo { font-size: 2.3rem; line-height: 1; transition: transform .25s; }
.p-react-btn .tx { font-size: .82rem; font-weight: 800; line-height: 1.2; white-space: normal; text-align: center; transition: color .2s; }
.p-react-btn .chk { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .95rem;
  border: 3px solid #fff; transform: scale(0); transition: transform .3s cubic-bezier(.17, .89, .32, 1.6); }
.p-react-btn:active .bub { transform: scale(.86); }
@media (hover: hover) { .p-react-btn:hover .bub { transform: translateY(-3px) scale(1.06); } }
.p-react-btn.pos { --rc: #1877F2; --rc2: #5AA2FF; --rs: rgba(24, 119, 242, .28); }
.p-react-btn.neg { --rc: #E0245E; --rc2: #FF6F91; --rs: rgba(224, 36, 94, .26); }
.p-react-btn.on .bub { background: radial-gradient(circle at 30% 25%, #fff 0, color-mix(in srgb, var(--rc2) 25%, #fff) 45%, color-mix(in srgb, var(--rc) 30%, #fff) 100%);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--rc), 0 10px 24px var(--rs); transform: scale(1.08); }
.p-react-btn.on .chk { background: var(--rc); transform: scale(1); }
.p-react-btn.on .tx { color: var(--rc); }
.p-react.has .p-react-btn:not(.on) { opacity: .45; transform: scale(.9); }
.p-react.has .p-react-btn:not(.on) .emo { filter: grayscale(.7); }
.p-react-btn.pop .emo { animation: p-emo-pop .6s cubic-bezier(.17, .89, .32, 1.49); }
.p-react-btn.unpop .emo { animation: p-like-unpop .3s ease-out; }
@keyframes p-emo-pop { 0% { transform: scale(.3) rotate(-20deg); } 40% { transform: scale(1.45) rotate(12deg); } 60% { transform: scale(.9) rotate(-6deg); } 80% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.p-react-btn .p-burst { color: var(--rc); }
.p-react-btn .p-burst::before { left: -40px; top: -40px; width: 80px; height: 80px; }
.p-react-btn .p-burst i { animation-name: p-burst-dot2; }
@keyframes p-burst-dot2 { 0% { transform: rotate(var(--a)) translateY(-30px) scale(1.2); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-58px) scale(.2); opacity: 0; } }
.p-react-note { margin-top: .9rem; }
@supports not (background: color-mix(in srgb, red 50%, white)) { .p-react-btn.on .bub { background: #fff; } }
.p-react-btn { gap: .85rem; }
.p-react-btn .bub { margin-top: 8px; }

/* ==== News: press and hold to select several ==== */
.p-nl-link { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.p-nl.pressing { transition: background .45s, transform .45s; background: #E8F0FE; transform: scale(.985); }
.p-nl.sel-mode .p-nl-ic { background: transparent !important; filter: none !important; opacity: 1 !important; }
.p-nl-check { font-size: 1.55rem; color: #B5C0D3; }
.p-nl.picked { background: #E3EEFF !important; box-shadow: inset 4px 0 0 var(--p-blue); }
.p-nl.picked .p-nl-check { color: var(--p-blue); animation: p-check-in .25s cubic-bezier(.17, .89, .32, 1.6); }
@keyframes p-check-in { from { transform: scale(.4); } }
.p-nl.sel-mode .p-nl-mark { opacity: .35; }
.p-nl-selbar { position: sticky; top: calc(var(--p-offline-h, 0px) + .3rem); z-index: 20; display: flex; align-items: center; gap: .3rem; margin-bottom: .7rem; padding: .35rem .4rem;
  border-radius: 18px; background: var(--p-navy, #0D2A5C); color: #fff; box-shadow: 0 8px 24px rgba(13, 42, 92, .28); animation: p-selbar-in .22s ease-out; }
@keyframes p-selbar-in { from { opacity: 0; transform: translateY(-8px); } }
.p-nl-selbar button { border: 0; background: transparent; color: #fff; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .3rem .55rem; border-radius: 12px;
  font-size: .68rem; font-weight: 800; line-height: 1.1; }
.p-nl-selbar button .bi { font-size: 1.15rem; }
.p-nl-selbar button:active { background: rgba(255, 255, 255, .15); }
.p-nl-selbar button:disabled { opacity: .4; }
.p-nl-selbar .p-sel-x { flex-direction: row; font-size: 1.1rem; }
.p-sel-n { flex: 1; min-width: 0; font-weight: 900; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==== Messages (WhatsApp-like) ==== */
.p-avatar.has-photo { padding: 0; overflow: hidden; background: #E9EEF6; }
.p-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-face { --s: 48px; position: relative; flex-shrink: 0; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #5AA2FF, #1565D8); color: #fff; font-weight: 900; font-size: calc(var(--s) * .36); }
.p-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.p-face .on { position: absolute; right: 0; bottom: 0; width: calc(var(--s) * .28); height: calc(var(--s) * .28); min-width: 11px; min-height: 11px; border-radius: 50%; background: #22C55E; border: 2.5px solid #fff; }
.p-me-photo { display: flex; flex-direction: column; align-items: center; }
.p-me-pic { position: relative; cursor: pointer; display: inline-block; }
.p-me-pic .p-avatar.lg { width: 96px; height: 96px; font-size: 2rem; }
.p-me-pic .cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--p-blue); color: #fff; border: 3px solid #fff; }
.p-chat-btn { color: var(--p-blue); background: var(--p-blue-soft); border-radius: 50%; }
/* inbox */
.p-ci-search { position: relative; margin-bottom: .7rem; }
.p-ci-search > .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); }
.p-ci-search input { padding-left: 2.4rem; border-radius: 999px; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); height: 44px; }
.p-ci-list { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); overflow: hidden; }
.p-ci { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid #F0F3F8; }
.p-ci:last-child { border-bottom: 0; }
.p-ci:active { background: #F5F8FD; }
.p-ci-main { flex: 1; min-width: 0; display: block; }
.p-ci-top { display: flex; align-items: baseline; gap: .5rem; }
.p-ci-name { flex: 1; min-width: 0; font-weight: 800; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ci-top time { flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--p-muted); }
.p-ci.unread .p-ci-top time { color: #16A34A; }
.p-ci-role { display: block; font-size: .74rem; font-weight: 700; color: #8A94A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ci-bot { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; }
.p-ci-last { flex: 1; min-width: 0; font-size: .88rem; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ci.unread .p-ci-last { color: var(--p-navy); font-weight: 700; }
.p-ci-last .bi { margin-right: .15rem; }
.p-ci-n { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px; background: #22C55E; color: #fff; font-size: .74rem; display: grid; place-items: center; }
.p-tick { font-size: 1rem; color: #8A94A6; margin-right: .1rem; vertical-align: -2px; }
.p-tick.read { color: #2E9BFF; }
.p-ci-empty { text-align: center; padding: 2.5rem 1.2rem; background: #fff; border-radius: 24px; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-ci-empty .em { font-size: 3rem; }
.p-ci-empty h3 { font-size: 1.15rem; font-weight: 900; color: var(--p-navy); margin: .4rem 0; }
.p-ci-empty p { color: var(--p-muted); font-weight: 600; max-width: 360px; margin: 0 auto 1rem; }
/* new chat */
.p-chat-new .p-qs-panel { max-height: 88vh; display: flex; flex-direction: column; }
.p-cn-list { overflow-y: auto; margin-top: .6rem; padding-bottom: env(safe-area-inset-bottom); }
.p-cn-g { margin-bottom: .8rem; }
.p-cn-h { font-weight: 900; color: var(--p-navy); font-size: .88rem; padding: .3rem .2rem; }
.p-cn-h small { color: var(--p-muted); font-weight: 700; margin-left: .3rem; }
.p-cn-p { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .5rem; border: 0; border-radius: 14px; background: none; color: inherit; }
.p-cn-p:active { background: #F2F6FD; }
.p-cn-p > .bi { color: var(--p-blue); font-size: 1.2rem; }
.p-cn-p small { color: var(--p-muted); font-weight: 600; }
.p-cn-p.off { opacity: .55; }
/* the chat */
body.p-chat-open .p-fab { display: none !important; }
.p-chat { display: flex; flex-direction: column; background: #EFEAE2; background-image: radial-gradient(rgba(13, 59, 122, .045) 1px, transparent 1px); background-size: 18px 18px; }
@media (max-width: 991.98px) {
    .p-chat { position: fixed; inset: 0; z-index: 1040; padding-top: var(--p-offline-h, 0px); }
    body.p-chat-open .p-bottom-nav { display: none; }
}
@media (min-width: 992px) { .p-chat { height: calc(100vh - 150px); border-radius: 20px; overflow: hidden; box-shadow: var(--p-shadow); } }
.p-chat-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; padding-top: calc(.55rem + env(safe-area-inset-top)); background: linear-gradient(135deg, #0D3B7A, #1565D8); color: #fff; }
.p-chat-back { color: #fff; font-size: 1.35rem; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.p-chat-back:active { background: rgba(255, 255, 255, .15); }
.p-chat-head .p-face .on { border-color: #1565D8; }
.p-chat-name { font-size: 1.02rem; }
.p-chat-status { display: block; font-size: .76rem; font-weight: 600; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-chat-status .on { color: #A7F3C0; font-weight: 800; }
.p-chat-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .6rem .7rem 1rem; -webkit-overflow-scrolling: touch; }
.p-chat-list { display: flex; flex-direction: column; gap: 2px; max-width: 820px; margin: 0 auto; }
.p-chat-day { text-align: center; margin: .7rem 0 .4rem; }
.p-chat-day span { display: inline-block; padding: .2rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .92); font-size: .74rem; font-weight: 800; color: #54606F; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.p-chat-more { align-self: center; border: 0; background: rgba(255, 255, 255, .9); border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; font-weight: 800; color: var(--p-blue); margin-bottom: .4rem; }
.p-chat-hello { align-self: center; text-align: center; margin: 2rem auto; padding: 1rem 1.3rem; border-radius: 18px; background: rgba(255, 255, 255, .92); font-weight: 800; color: var(--p-navy); max-width: 300px; }
.p-chat-hello .em { font-size: 2.2rem; }
.p-chat-hello small { display: block; color: var(--p-muted); font-weight: 600; margin-top: .3rem; }
.p-bub { position: relative; max-width: min(82%, 520px); padding: .4rem .55rem .25rem .6rem; border-radius: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); margin-top: 6px;
  font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; animation: p-bub-in .18s ease-out; }
@keyframes p-bub-in { from { opacity: 0; transform: translateY(6px); } }
.p-bub.cont { margin-top: 1px; }
.p-bub.me { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; }
.p-bub.them { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.p-bub.me.cont { border-top-right-radius: 14px; }
.p-bub.them.cont { border-top-left-radius: 14px; }
.p-bub.gone { color: #8A94A6; font-style: italic; }
.p-bub-text { display: inline; white-space: normal; }
.p-bub-meta { float: right; margin: .35rem 0 -.1rem .6rem; font-size: .68rem; color: #667781; white-space: nowrap; line-height: 1.6; }
.p-bub-meta .p-tick { font-size: .95rem; margin-left: .15rem; }
.p-bub-about { display: block; font-size: .72rem; font-weight: 800; color: #B83280; margin-bottom: .15rem; }
.p-bub-photos { display: grid; gap: 3px; margin: -.15rem -.3rem .3rem -.35rem; border-radius: 10px; overflow: hidden; }
.p-bub-photos.n2, .p-bub-photos.n3, .p-bub-photos.n4 { grid-template-columns: 1fr 1fr; width: min(300px, 70vw); }
.p-bub-photos.n3 .p-bub-photo:first-child { grid-column: span 2; }
.p-bub-photo { position: relative; border: 0; padding: 0; background: #ddd; aspect-ratio: 1; overflow: hidden; }
.p-bub-photos.n1 .p-bub-photo { aspect-ratio: auto; width: min(280px, 68vw); max-height: 360px; }
.p-bub-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-bub-photo .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.5rem; font-weight: 900; }
.p-bub-pdf { display: flex; align-items: center; gap: .6rem; margin: 0 -.2rem .3rem; padding: .55rem .7rem; border-radius: 10px; background: rgba(0, 0, 0, .05); color: var(--p-navy); text-decoration: none; min-width: 200px; }
.p-bub-pdf .bi { font-size: 1.8rem; color: #DC2626; }
.p-bub-pdf small { color: var(--p-muted); }
.p-chat-bottom { background: #F0F2F5; padding: .4rem .5rem; padding-bottom: calc(.4rem + env(safe-area-inset-bottom)); }
.p-chat-quick { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .1rem .1rem .45rem; }
.p-chat-quick:empty { display: none; }
.p-chip-q { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .75rem; border: 0; border-radius: 999px; background: #fff; color: var(--p-navy);
  font-weight: 700; font-size: .82rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); white-space: nowrap; }
.p-chip-q:active { transform: scale(.95); background: #E7F0FE; }
.p-chat-picked { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; }
.p-chat-picked:empty { display: none; }
.p-pk { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.p-pk img { width: 100%; height: 100%; object-fit: cover; }
.p-pk.pdf { width: 140px; padding: .3rem .5rem; display: flex; align-items: center; gap: .3rem; }
.p-pk.pdf .bi { color: #DC2626; font-size: 1.5rem; }
.p-pk button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 900; line-height: 1; }
.p-chat-compose { display: flex; align-items: flex-end; gap: .4rem; max-width: 820px; margin: 0 auto; }
.p-chat-compose textarea { flex: 1; min-width: 0; resize: none; border: 0; border-radius: 22px; padding: .6rem .95rem; font-size: 1rem; line-height: 1.35; max-height: 130px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); outline: none; }
.p-chat-att, .p-chat-send { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; }
.p-chat-att { background: transparent; color: #54606F; }
.p-chat-send { background: var(--p-blue); color: #fff; transition: transform .15s, opacity .15s; }
.p-chat-send:disabled { opacity: .45; }
.p-chat-send:not(:disabled):active { transform: scale(.9); }
.p-chat-closed { text-align: center; padding: .7rem; font-size: .85rem; font-weight: 700; color: var(--p-muted); }

/* Sidebar: a thin, quiet scrollbar that only shows while scrolling / hovering (no grey bar on desktop) */
.p-nav { scrollbar-width: thin; scrollbar-color: transparent transparent; margin-right: -.5rem; padding-right: .5rem; }
.p-nav:hover { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.p-nav::-webkit-scrollbar { width: 6px; }
.p-nav::-webkit-scrollbar-track { background: transparent; }
.p-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.p-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
.p-nav::-webkit-scrollbar-button { display: none; height: 0; }

/* chat: who / where / about whom */
.p-chat-ctx { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; background: rgba(255, 255, 255, .96); border-bottom: 1px solid rgba(13, 59, 122, .08); box-shadow: 0 2px 6px rgba(13, 59, 122, .05); }
.p-chat-school { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.p-chat-school img, .p-chat-school > .bi { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; object-fit: contain; background: #F2F6FD; display: grid; place-items: center; color: var(--p-blue); }
.p-chat-school b { font-size: .82rem; color: var(--p-navy); }
.p-chat-school small { font-size: .72rem; font-weight: 700; color: var(--p-muted); }
.p-chat-kids { flex-shrink: 0; display: flex; gap: .3rem; max-width: 55%; overflow-x: auto; scrollbar-width: none; }
.p-kid-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6rem; border: 1.5px solid #F3D3E4; border-radius: 999px; background: #fff; color: #B83280; font-weight: 800; font-size: .78rem; }
.p-kid-chip small { color: #C77DA6; font-weight: 700; }
.p-kid-chip.on { background: #FDF0F6; border-color: #B83280; }
.p-kid-chip:disabled { opacity: 1; background: #FDF0F6; border-color: #F3D3E4; }
/* chat: attach panel */
.p-chat-bottom { position: relative; }
.p-attach { position: absolute; left: .6rem; bottom: calc(100% + .4rem); z-index: 5; display: flex; gap: 1.1rem; padding: 1rem 1.2rem .8rem; border-radius: 22px; background: #fff;
  box-shadow: 0 12px 34px rgba(13, 42, 92, .22); transform-origin: 1.6rem 100%; transform: scale(.4) translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.17, .89, .32, 1.25), opacity .15s; }
.p-attach.open { transform: none; opacity: 1; pointer-events: auto; }
.p-attach button { display: flex; flex-direction: column; align-items: center; gap: .4rem; border: 0; background: none; font-size: .76rem; font-weight: 800; color: #54606F; }
.p-attach button span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .15s; }
.p-attach.open button span { animation: p-att-in .3s cubic-bezier(.17, .89, .32, 1.4) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes p-att-in { from { transform: scale(.3); opacity: 0; } }
.p-attach button:active span { transform: scale(.88); }
@supports not (color: color-mix(in srgb, red 50%, white)) { .p-attach button span { background: var(--c); } }
.p-chat-att .bi { transition: transform .2s; }

/* ==== Chat v3: select like WhatsApp, the ⌄ menu, delete sheet ==== */
.p-row { display: flex; margin: 0 -.7rem; padding: 0 .7rem; transition: background .15s; }
.p-row.me { justify-content: flex-end; }
.p-row.sel { background: rgba(21, 101, 216, .16); }
.p-row .p-bub { align-self: auto; }
.p-bub { transition: transform .2s; }
.p-bub.pressing { transform: scale(.97); }
.p-bub-arrow { position: absolute; top: 2px; right: 2px; width: 26px; height: 22px; border: 0; border-radius: 0 10px 0 12px; display: grid; place-items: center;
  color: #667781; font-size: .85rem; opacity: 0; transition: opacity .15s; background: linear-gradient(225deg, inherit 60%, transparent); }
.p-bub.me .p-bub-arrow { background: radial-gradient(circle at 70% 30%, #D9FDD3 55%, rgba(217, 253, 211, 0) 75%); }
.p-bub.them .p-bub-arrow { background: radial-gradient(circle at 70% 30%, #fff 55%, rgba(255, 255, 255, 0) 75%); }
.p-bub:hover .p-bub-arrow, .p-bub-arrow:focus { opacity: 1; }
@media (hover: none) { .p-bub-arrow { opacity: .55; } }
.p-chat.selecting .p-bub-arrow { display: none; }
.p-bub-expired { display: flex; align-items: center; gap: .4rem; padding: .5rem .3rem; color: #8A94A6; font-style: italic; font-size: .85rem; }
.p-chat-selbar { display: flex; align-items: center; gap: .3rem; padding: .55rem .6rem; padding-top: calc(.55rem + env(safe-area-inset-top)); background: #0D3B7A; color: #fff; animation: p-selbar-in .18s ease-out; }
.p-chat-selbar[hidden] { display: none; }
.p-chat-selbar b { font-size: 1.15rem; padding-left: .3rem; }
.p-chat-selbar button:not(.p-chat-back) { border: 0; background: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.25rem; }
.p-chat-selbar button:active { background: rgba(255, 255, 255, .15); }
.p-chat.selecting .p-chat-head { display: none; }
.p-chat-selbar .p-chat-back { border: 0; background: none; }
.p-msg-menu { position: fixed; z-index: 7000; width: 190px; padding: .35rem 0; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(13, 42, 92, .25); animation: p-menu-in .16s ease-out; }
@keyframes p-menu-in { from { opacity: 0; transform: scale(.85); } }
.p-msg-menu button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem 1rem; border: 0; background: none; font-weight: 700; color: var(--p-navy); text-align: left; }
.p-msg-menu button:active { background: #F2F6FD; }
.p-msg-menu button .bi { font-size: 1.1rem; color: #54606F; }
.p-msg-menu button.danger, .p-msg-menu button.danger .bi { color: #DC2626; }
.p-del-sheet .p-qs-panel { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.p-del-q { text-align: center; font-weight: 800; color: var(--p-muted); font-size: .88rem; padding: .3rem 0 .8rem; }
.p-del-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 54px; margin-bottom: .5rem; border: 0; border-radius: 16px; background: #F2F4F8; font-weight: 800; font-size: 1rem; color: var(--p-navy); }
.p-del-btn:active { transform: scale(.98); }
.p-del-btn.danger { background: #FDECEC; color: #DC2626; }
.p-del-btn.muted { background: none; color: var(--p-muted); }
.p-del-note { text-align: center; font-size: .78rem; font-weight: 600; color: var(--p-muted); }
.p-attach-bg { position: fixed; inset: 0; z-index: 4; display: none; background: rgba(10, 25, 50, .08); }
.p-attach-bg.open { display: block; }

/* Chat: pressing and holding never selects page text (quick messages, names…); only the message box can be typed / selected */
.p-chat, .p-chat * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.p-chat textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.p-chat img { -webkit-user-drag: none; pointer-events: auto; }

/* Save on this phone */
.p-lightbox-save { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: 4.2rem; color: #fff; background: rgba(255, 255, 255, .15); border-radius: 50%; }
.p-bub-pdf { padding: .4rem .4rem .4rem .7rem; }
.p-bub-pdf-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.p-bub-pdf-open .bi { font-size: 1.8rem; color: #DC2626; }
.p-bub-dl { flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); color: #54606F; font-size: 1.1rem; display: grid; place-items: center; }
.p-bub-dl:active { transform: scale(.9); }
.p-ann-pdf { padding: .5rem .5rem .5rem .8rem; }
.p-ann-pdf-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.p-ann-dl { flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #DC2626; font-size: 1.15rem; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.p-ann-dl:active { transform: scale(.9); }

/* ==== More sheet (phones, every account): native look ==== */
.offcanvas-backdrop.show { opacity: 1; background: rgba(10, 25, 50, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.p-more.offcanvas-bottom { max-height: 88vh; border-radius: 28px 28px 0 0; background: #F4F6FA; box-shadow: 0 -10px 40px rgba(13, 42, 92, .18); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.p-more .p-sheet-grip { width: 44px; height: 5px; margin: .65rem auto .2rem; background: #C9D1DE; }
.p-more .offcanvas-body { padding: .4rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.p-more-me { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #0D3B7A 0%, #1565D8 100%); box-shadow: 0 10px 24px rgba(21, 101, 216, .25); }
.p-more-me .p-avatar.lg { width: 58px; height: 58px; font-size: 1.3rem; background: rgba(255, 255, 255, .2); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.p-more-me b { font-size: 1.08rem; }
.p-more-me small { color: rgba(255, 255, 255, .82); font-weight: 600; font-size: .8rem; }
.p-more-me small.place { margin-top: .15rem; color: rgba(255, 255, 255, .95); }
.p-more-me .go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.p-more-ctx { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding: .35rem .35rem .35rem .9rem; border-radius: 16px; background: #fff; color: var(--p-blue); }
.p-more-ctx select { border: 0; box-shadow: none; font-weight: 800; color: var(--p-navy); background-color: transparent; }
.p-more-h { margin: 1.1rem .3rem .6rem; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #8A94A6; }
.p-more-tiles { padding: 1rem .6rem .8rem; border-radius: 22px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .05); gap: 1.1rem .3rem; }
.p-more-tiles .p-tile { font-size: .76rem; color: #3B4A63; }
.p-more-tiles .p-tile-ico { width: 54px; height: 54px; border-radius: 18px; font-size: 1.4rem; box-shadow: 0 6px 14px rgba(13, 59, 122, .14); transition: transform .15s; }
.p-more-tiles .p-tile.active .p-tile-ico { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--p-blue); }
.p-tile-n { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 .3rem; border-radius: 999px; background: #EF4444; color: #fff; font-size: .68rem; font-weight: 900; display: grid; place-items: center; border: 2px solid #fff; }
.p-tile-n[hidden] { display: none; }
.p-more-list { margin-top: .9rem; border-radius: 22px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .05); overflow: visible; }
.p-more-list > a, .p-more-list > .dropup > button, .p-more-list > button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem 1rem; border: 0; background: none; color: var(--p-navy); font-weight: 800; text-decoration: none; text-align: left; }
.p-more-list > * + * { border-top: 1px solid #F0F3F8; }
.p-more-list .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
.p-more-list .ic.tone-grey { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-more-list .ic.tone-blue { background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-more-list .ic.tone-red { background: linear-gradient(135deg, #FF7A7F, #E5484D); }
.p-more-list .tx { flex: 1; }
.p-more-list .val { color: var(--p-muted); font-weight: 700; font-size: .85rem; }
.p-more-list .chev { color: #B8C2D3; }
.p-more-list .out { color: #DC2626; }
.p-more-list a:active, .p-more-list button:active { background: #F5F8FD; }
.p-more-foot { text-align: center; margin-top: 1rem; font-size: .72rem; font-weight: 600; color: #A3AEC2; }

/* ==== Announcements: clearly separate items; Important without a red border ==== */
.p-nl-list { background: none; box-shadow: none; overflow: visible; display: grid; gap: .65rem; }
.p-nl { border-bottom: 0 !important; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .07); overflow: hidden; }
.p-nl.unread { background: #fff; box-shadow: 0 2px 14px rgba(21, 101, 216, .13); }
.p-nl.unread::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--p-blue); }
.p-nl { position: relative; }
.p-nl.unread { box-shadow: 0 2px 14px rgba(21, 101, 216, .13); }
.p-nl.picked { box-shadow: 0 0 0 2px var(--p-blue), 0 2px 14px rgba(21, 101, 216, .15) !important; }
.p-ann-list { gap: .8rem; }
.p-ann-card { padding: 1rem 1.05rem; }
/* one announcement: a soft header instead of a red line */
.p-nd, .p-nd.important, .p-ann-view.important, .p-news.important { box-shadow: 0 2px 14px rgba(13, 59, 122, .07); }
.p-nd { padding: 0; overflow: hidden; border-radius: 24px; }
.p-nd-from { margin: 0; padding: 1rem 1.1rem .9rem; background: linear-gradient(180deg, #EEF4FE 0%, #fff 100%); }
.p-nd.important .p-nd-from { background: linear-gradient(180deg, #FFF1F1 0%, #fff 100%); }
.p-nd > :not(.p-nd-from):not(.p-react) { margin-left: 1.1rem; margin-right: 1.1rem; }
.p-nd > .p-ann-flag { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; border-radius: 999px; background: #FDECEC; color: #C0262D; font-size: .78rem; font-weight: 900; margin-bottom: .2rem; }
.p-nd > .p-ann-photos, .p-nd > .p-ann-pdf { margin-bottom: .3rem; }
.p-nd > .p-nd-body { margin-bottom: 1rem; }
.p-nd .p-react { margin: 1rem 0 0; padding: 1rem 1.1rem 1.1rem; background: #FAFBFD; }
.p-ann-view.important .p-card-body { background: linear-gradient(180deg, #FFF5F5 0%, #fff 120px); }
/* v81: no red bars on important items; the ❗ icon and pill carry it */
.p-news-mini.important, .p-ann-card.important { box-shadow: 0 2px 12px rgba(13, 59, 122, .07); }
/* v83: PDF name choice (clear name by the app / keep my file's name) */
.p-fname { margin-top: .6rem; background: #F5F8FD; border-radius: 16px; padding: .5rem; display: grid; gap: .35rem; }
.p-fname-h { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); padding: .1rem .35rem 0; }
.p-fname-o { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: start; background: #fff; border: 1.5px solid transparent; border-radius: 13px; padding: .5rem .65rem; box-shadow: 0 1px 4px rgba(13, 59, 122, .06); transition: border-color .15s, background .15s; }
.p-fname-o .ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #EEF3FB; color: var(--p-muted); flex-shrink: 0; }
.p-fname-o b { display: block; font-size: .88rem; color: var(--p-navy); }
.p-fname-o small { font-size: .76rem; color: var(--p-muted); }
.p-fname-o .ck { color: var(--p-blue); font-size: 1.15rem; opacity: 0; transform: scale(.6); transition: .15s; }
.p-fname-o.on { border-color: var(--p-blue); background: #F2F7FF; }
.p-fname-o.on .ic { background: var(--p-blue); color: #fff; }
.p-fname-o.on .ck { opacity: 1; transform: none; }
.p-chat-compose .p-fname, [data-role=fname] .p-fname { margin: .4rem 0 .2rem; }
.p-fname { grid-template-columns: minmax(0, 1fr); } .p-fname-o { min-width: 0; overflow: hidden; }

/* ===== v84: My account — native settings look ===== */
.p-acc { max-width: 680px; margin: 0 auto; padding-bottom: 1rem; }
.p-acc-hero { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border-radius: 24px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, #3FA2FF 0%, #1565D8 45%, #0D3B7A 100%); box-shadow: 0 10px 28px rgba(21, 101, 216, .28); }
.p-acc-hero .p-me-pic { position: relative; cursor: pointer; flex-shrink: 0; }
.p-acc-hero .p-avatar.lg { width: 84px; height: 84px; font-size: 1.8rem; background: rgba(255, 255, 255, .2); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.p-acc-hero .cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--p-blue); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); font-size: .9rem; }
.p-acc-hero h2 { font-size: 1.25rem; font-weight: 800; margin: 0; color: #fff; }
.p-acc-hero .role { font-weight: 700; opacity: .85; font-size: .88rem; }
.p-acc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.p-acc-chips span { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; font-weight: 700; }
.p-acc-chips .ok { color: #A7F3C0; }
.p-acc-link { background: none; border: 0; padding: 0; margin-top: .45rem; color: #FFD5D5; font-weight: 700; font-size: .8rem; }
.p-acc-hint { margin-top: .45rem; font-size: .78rem; font-weight: 600; opacity: .85; display: flex; gap: .35rem; align-items: center; }
.p-acc-h { margin: 1.3rem .4rem .45rem; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--p-muted); }
.p-acc-group { background: #fff; border-radius: 20px; box-shadow: 0 2px 10px rgba(13, 59, 122, .05); overflow: hidden; }
.p-acc-group > * + * { border-top: 1px solid #F0F3F8; }
.p-acc-row { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem 1rem; border: 0; background: none; color: var(--p-navy); font-weight: 800; text-align: left; margin: 0; cursor: pointer; }
.p-acc-row:active { background: #F5F8FD; }
.p-acc-row .ic, .p-acc-dev .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff !important; font-size: 1rem; flex-shrink: 0; }
.p-acc .ic.tone-grey { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-acc .ic.tone-blue { background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-acc .ic.tone-red { background: linear-gradient(135deg, #FF7A7F, #E5484D); }
.p-acc .ic.tone-green { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.p-acc .ic.tone-amber { background: linear-gradient(135deg, #FFC24B, #F59E0B); }
.p-acc .ic.tone-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.p-acc .ic.tone-sky { background: linear-gradient(135deg, #5CD0FF, #1EA0F0); }
.p-acc-row .tx { flex: 1; min-width: 0; }
.p-acc-row .val { color: var(--p-muted); font-weight: 700; font-size: .85rem; }
.p-acc-row .chev { color: #B8C2D3; transition: transform .2s; }
.p-acc-row[aria-expanded=true] .chev { transform: rotate(90deg); }
.p-acc-row[aria-expanded=true] { background: #F7FAFF; }
.p-acc-row.danger { color: #E5484D; }
.p-acc-select { border: 0; background: transparent; color: var(--p-muted); font-weight: 700; font-size: .9rem; text-align: right; appearance: none; -webkit-appearance: none; padding: 0; cursor: pointer; }
.p-acc-select:focus { outline: none; }
.p-acc-panel { padding: .9rem 1rem 1.1rem; background: #FBFCFE; animation: p-acc-in .18s ease; }
.p-acc-panel[hidden] { display: none !important; }
@keyframes p-acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.p-acc-form { display: grid; gap: .75rem; }
.p-acc-dev { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; }
.p-acc-dev[hidden] { display: none !important; }
.p-acc-dev .tx { flex: 1; }
.p-acc-dev b { color: var(--p-navy); font-size: .92rem; }
.p-acc-dev small { color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.p-acc-dev .now { color: #16A34A; font-weight: 800; }
.p-acc-more { width: 100%; border: 0; background: none; padding: .7rem; color: var(--p-blue); font-weight: 800; font-size: .88rem; display: flex; justify-content: center; align-items: center; gap: .35rem; }
.p-acc-foot { text-align: center; color: var(--p-muted); font-size: .75rem; font-weight: 600; margin-top: 1.2rem; }
.p-acc .p-switch-row { background: #fff; }

/* ===== v84: large screens — comfortable reading width, phone-first stays as is ===== */
@media (min-width: 992px) {
    .p-content.p-w-narrow > .p-page-head, .p-content.p-w-narrow > #p-page { max-width: 880px; margin-left: auto; margin-right: auto; }
    .p-content.p-w-mid > .p-page-head, .p-content.p-w-mid > #p-page { max-width: 1180px; margin-left: auto; margin-right: auto; }
    .p-content.p-r-account > .p-page-head { max-width: 680px; }
    /* child page: profile and tabs at a calm size */
    .p-content.p-r-my-child .p-tabs { max-width: 560px; }
    /* messages: two panes, like WhatsApp on a computer */
    .p-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 200px); min-height: 480px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--p-shadow); }
    .p-content.p-has-split > .p-page-head { display: none; }
    .p-content.p-has-split .p-split { height: calc(100vh - 120px); }
    .p-split-side { display: flex; flex-direction: column; border-right: 1px solid #EEF2F7; min-height: 0; background: #fff; }
    .p-split-side .p-split-top { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem .5rem; }
    .p-split-side .p-split-top h2 { flex: 1; margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--p-navy); }
    .p-split-side .p-ci-search { margin: 0 .8rem .5rem; }
    .p-split-side .p-ci-list { box-shadow: none; border-radius: 0; flex: 1; overflow-y: auto; }
    .p-split-side .p-ci.active { background: #EEF4FF; }
    .p-split-side .p-push-banner { margin: 0 .8rem .5rem; }
    .p-split .p-chat { height: 100%; border-radius: 0; box-shadow: none; }
    .p-split .p-chat-head .p-chat-back { display: none; }
    .p-split-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .4rem; padding: 2rem; background: #F7F9FC; color: var(--p-muted); }
    .p-split-empty .em { font-size: 3.2rem; }
    .p-split-empty h3 { color: var(--p-navy); font-weight: 800; font-size: 1.2rem; margin: 0; }
    .p-split .p-bub { max-width: min(70%, 560px); }
    body.p-chat-open .p-fab, .p-content.p-has-split ~ .p-fab { display: none !important; }
}

/* ===== v85: stable on computers ===== */
/* full-screen photo: always fits the window, never bigger than the screen */
.p-lightbox { padding: 4.5rem 1rem 1.5rem; }
.p-lightbox img { width: auto; height: auto; max-width: min(100%, 1200px); max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: zoom-out; }
.p-lightbox-x, .p-lightbox-save { width: 44px; height: 44px; }
.p-lightbox-x:hover, .p-lightbox-save:hover { background: rgba(255, 255, 255, .28); color: #fff; }
/* with a mouse there is no swiping: chips wrap onto lines instead of hiding past the edge */
@media (hover: hover) and (pointer: fine) {
    .p-chat-quick { flex-wrap: wrap; overflow: visible; max-height: 5.4rem; overflow-y: auto; }
    .p-chat-kids { flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
    .p-chip-q:hover { background: #E7F0FE; }
    .p-ci:hover { background: #F5F8FD; }
    .p-bub-photo { cursor: zoom-in; }
}

/* ===== v86: School settings — same native look as My account ===== */
.p-school-hero .logo { flex-shrink: 0; background: #fff; border-radius: 20px; padding: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: inline-flex; }
.p-school-hero h2 { font-size: 1.3rem; }
.p-set-field { display: block; padding: .8rem 1rem .9rem; margin: 0; }
.p-set-field .lbl { display: block; font-size: .78rem; font-weight: 800; color: var(--p-muted); margin-bottom: .35rem; }
.p-set-field .hint { display: block; margin-top: .35rem; color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.p-set-field .form-control, .p-set-field .form-select { font-weight: 700; }
.p-set-pad { padding: 1rem; }
@media (min-width: 768px) {
    .p-set-two { display: grid; grid-template-columns: 1fr 1fr; }
    .p-set-two > * + * { border-top: 0; border-left: 1px solid #F0F3F8; }
}
.p-save-bar { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 1.1rem; display: flex; justify-content: flex-end; }
.p-save-bar .btn { border-radius: 16px; box-shadow: 0 8px 22px rgba(21, 101, 216, .3); }
.p-save-bar .btn:disabled { box-shadow: none; }
@media (max-width: 991.98px) { .p-save-bar .btn { width: 100%; } }
@media (min-width: 992px) { .p-save-bar { bottom: 1rem; } }
/* What we record: on a computer the switch and pencil sit close to the item */
@media (min-width: 992px) { .p-content.p-r-what-we-record .p-page-head { max-width: 880px; } }
/* Save appears only once something changed */
.p-save-bar { display: none; }
form.dirty .p-save-bar { display: flex; animation: p-save-in .22s ease; }
@keyframes p-save-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 992px) { .p-content.p-r-school-settings > .p-page-head { max-width: 680px; } }
/* v87: compose centred on computers; the send bar stays solid (not see-through) while waiting for a title */
@media (min-width: 992px) {
    .p-ann-form { margin-left: auto; margin-right: auto; }
    .p-content.p-r-announcement-new > .p-page-head { max-width: 760px; margin-left: auto; margin-right: auto; }
}
.p-ann-sendbar .btn:disabled { opacity: 1; background: #B9CDEB; border-color: #B9CDEB; color: #fff; box-shadow: none; }
/* v88: "ready to save" (phones, when one more tap is needed to open the share sheet) */
.p-save-ready .p-qs-panel { padding-top: .4rem; }
.p-save-ready .ic { width: 64px; height: 64px; margin: .4rem auto .6rem; border-radius: 20px; display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, #3FA2FF, #1565D8); box-shadow: 0 8px 20px rgba(21, 101, 216, .3); }
.p-save-ready h3 { font-size: 1.15rem; font-weight: 800; color: var(--p-navy); margin: 0 0 .25rem; }
.p-save-ready p { color: var(--p-muted); font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }

/* ===== v89: my status (like Skype) ===== */
.p-st { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #fff; }
.p-st-available { background: #22C55E; }
.p-st-busy { background: #E5484D; position: relative; }
.p-st-busy::after { content: ''; position: absolute; left: 25%; right: 25%; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 1px; }
.p-st-away { background: #F59E0B; }
.p-st-offline { background: #fff; box-shadow: inset 0 0 0 2.5px #9AA6B8, 0 0 0 2px #fff; }
.p-avatar.p-has-st { position: relative; overflow: visible; }
.p-avatar.p-has-st img { border-radius: 50%; }
.p-avatar.p-has-st > .p-st { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; }
.p-me-btn { border: 0; background: none; padding: 0; border-radius: 50%; }
.p-st-chip { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: #F2F6FC; color: var(--p-navy); font-weight: 800; font-size: .82rem; padding: .35rem .7rem; border-radius: 999px; max-width: 100%; white-space: nowrap; }
.p-st-chip span { overflow: hidden; text-overflow: ellipsis; }
.p-st-chip .bi { font-size: .7rem; color: var(--p-muted); }
.p-ci-me { margin-bottom: .6rem; }
.p-split-top .p-st-chip { margin-right: .3rem; }
.p-st-item { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.p-st-item .bi-chevron-down { margin-left: auto; font-size: .7rem; color: var(--p-muted); }
.p-more-status { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; margin-top: .7rem; padding: .7rem 1rem; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .05); }
.p-more-status .lbl { font-weight: 800; color: var(--p-navy); }
.p-more-status .p-st-chip { pointer-events: none; }
/* the status menu: a sheet on phones, a small menu under your photo on computers */
.p-stmenu .p-qs-panel { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.p-stmenu.pop { background: transparent; align-items: flex-start; justify-content: flex-end; }
.p-stmenu.pop .p-qs-panel { position: fixed; width: 340px; max-width: calc(100vw - 24px); border-radius: 20px; box-shadow: 0 18px 50px rgba(13, 40, 90, .22); padding: .9rem; animation: p-fade .12s ease-out; }
.p-st-me { display: flex; align-items: center; gap: .75rem; padding: .2rem .3rem .8rem; border-bottom: 1px solid #F0F3F8; margin-bottom: .4rem; }
.p-st-me b { color: var(--p-navy); }
.p-st-me small { color: var(--p-muted); font-weight: 700; }
.p-avatar-wrap { position: relative; display: inline-flex; }
.p-avatar-wrap > .p-st { position: absolute; right: -1px; bottom: -1px; }
.p-st-list button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .6rem .5rem; border: 0; background: none; border-radius: 14px; text-align: left; }
.p-st-list button:hover, .p-st-list button:active { background: #F5F8FD; }
.p-st-list button.on { background: #EEF4FF; }
.p-st-list .p-st { width: 14px; height: 14px; }
.p-st-list .tx { flex: 1; min-width: 0; }
.p-st-list b { display: block; color: var(--p-navy); font-size: .95rem; }
.p-st-list small { display: block; color: var(--p-muted); font-weight: 600; font-size: .78rem; line-height: 1.3; }
.p-st-list .ck { color: var(--p-blue); font-size: 1.1rem; }
.p-st-dur { margin-top: .5rem; padding-top: .7rem; border-top: 1px solid #F0F3F8; }
.p-st-dur .h { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); margin-bottom: .45rem; }
.p-st-dur .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.p-st-dur button { border: 1.5px solid #E3EAF5; background: #fff; color: var(--p-navy); font-weight: 700; font-size: .82rem; padding: .35rem .7rem; border-radius: 999px; }
.p-st-dur button.on { border-color: var(--p-blue); background: #EEF4FF; color: var(--p-blue); }
/* others: busy / away dots on faces and in the chat header */
.p-face .on.busy { background: #E5484D; }
.p-face .on.away { background: #F59E0B; }
.p-chat-status .busy { color: #FFC9CB; font-weight: 800; }
.p-chat-status .away { color: #FFE2A8; font-weight: 800; }
.p-chat-busy { display: flex; align-items: center; gap: .5rem; margin: 0 auto .45rem; max-width: 820px; padding: .45rem .75rem; border-radius: 14px; background: #FFF1F1; color: #8F2A2E; font-weight: 700; font-size: .82rem; }
.p-chat-busy[hidden] { display: none; }

/* ===== v89: allergies and health (parents update it) + child card ===== */
.p-health-text { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border-radius: 14px; background: #FFF4E5; color: #7A4A00; font-weight: 800; }
.p-health-text .bi { color: #F59E0B; margin-top: .1rem; }
.p-health-sheet h3 { font-size: 1.1rem; font-weight: 800; color: var(--p-navy); margin: .2rem 0 .3rem; }
.p-health-by { margin-top: .3rem; font-size: .78rem; color: var(--p-muted); font-weight: 600; }
.p-health-by .btn-link { font-size: .78rem; font-weight: 800; }
.p-hh { display: grid; gap: .1rem; max-height: 55vh; overflow-y: auto; }
.p-hh-row { display: flex; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid #F0F3F8; }
.p-hh-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--p-blue); margin-top: .35rem; flex-shrink: 0; }
.p-hh-row .dot.parent { background: #F59E0B; }
.p-hh-row .txt { font-weight: 700; color: var(--p-navy); }
.p-hh-row small { color: var(--p-muted); font-weight: 600; }
.p-new-tag { display: inline-block; margin-left: .45rem; padding: .05rem .5rem; border-radius: 999px; background: #A1262A; color: #fff; font-size: .7rem; font-weight: 800; vertical-align: middle; }
.p-kid-flag.new { animation: p-pulse 1.6s ease-in-out infinite; }
@keyframes p-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.p-kid-card { width: 100%; max-width: 380px; border-radius: 16px; box-shadow: 0 10px 28px rgba(13, 59, 122, .18); }

/* ===== v90: Today = a register: one activity, every child a row, one tap ===== */
.p-rec-head { position: sticky; top: var(--p-sticky-top, 0px); z-index: 20; margin: 0 -1rem .6rem; padding: .5rem 1rem .6rem; background: var(--p-bg, #F4F7FC); box-shadow: 0 6px 12px -10px rgba(13, 59, 122, .25); }
@media (min-width: 992px) { .p-rec-head { margin: 0 0 .8rem; border-radius: 0 0 18px 18px; } }
.p-act-strip { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: .15rem .1rem .45rem; scroll-snap-type: x proximity; }
.p-act-strip::-webkit-scrollbar { display: none; }
.p-act { flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 74px; padding: .45rem .2rem .4rem; border: 2px solid transparent; border-radius: 18px; background: #fff; box-shadow: 0 1px 6px rgba(13, 59, 122, .06); color: var(--p-navy); }
.p-act .ico { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.p-act .nm { font-size: .7rem; font-weight: 800; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-act.on { border-color: var(--p-blue); background: #EEF4FF; }
.p-act .ok, .p-act .cnt { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; font-size: .65rem; font-weight: 900; border: 2px solid #fff; padding: 0 3px; }
.p-act .ok { background: #22A34A; color: #fff; }
.p-act .cnt { background: #F5A623; color: #fff; }
.p-act.tone-blue .ico { background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-act.tone-green .ico { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.p-act.tone-red .ico { background: linear-gradient(135deg, #FF7A7F, #E5484D); }
.p-act.tone-pink .ico { background: linear-gradient(135deg, #F472B6, #DB2777); }
.p-act.tone-amber .ico { background: linear-gradient(135deg, #FFC24B, #F59E0B); }
.p-act.tone-purple .ico { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.p-act.tone-sky .ico { background: linear-gradient(135deg, #67D3FF, #1EA0F0); }
.p-act.tone-grey .ico { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-rec-head .p-meal-tabs { margin: .1rem 0 .4rem; }
.p-rr-q { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .15rem .1rem .35rem; }
.p-rr-q .q { font-size: 1.05rem; font-weight: 900; color: var(--p-navy); }
.p-rr-q .n { font-size: .8rem; font-weight: 800; color: var(--p-muted); white-space: nowrap; }
.p-rec-head .p-prog { height: 6px; }
.p-rr-waiting { margin: 0 0 .6rem; padding: .45rem .75rem; border-radius: 12px; background: #FFF6E5; color: #8A5A00; font-weight: 700; font-size: .8rem; }
.p-rr-waiting[hidden] { display: none; }
.p-rr-list { display: grid; gap: .6rem; }
@media (min-width: 992px) { .p-rr-list { grid-template-columns: 1fr 1fr; } }
.p-rr { background: #fff; border-radius: 20px; padding: .6rem .7rem .7rem; box-shadow: 0 2px 10px rgba(13, 59, 122, .05); border: 2px solid transparent; transition: border-color .2s, background .2s; }
.p-rr.done { background: #FBFDFF; }
.p-rr.is-alert { border-color: #FBC9CB; }
.p-rr-who { display: flex; align-items: center; gap: .65rem; width: 100%; border: 0; background: none; padding: 0 0 .55rem; text-align: left; color: inherit; }
.p-rr-who b { color: var(--p-navy); font-size: .98rem; }
.p-rr-who small { color: var(--p-muted); font-weight: 700; font-size: .8rem; }
.p-rr-who small.tone-green { color: #15803D; } .p-rr-who small.tone-red { color: #C2262B; } .p-rr-who small.tone-amber { color: #B26A00; } .p-rr-who small.tone-blue { color: #1565D8; }
.p-rr-h { color: #E5484D; font-size: .8rem; }
.p-rr-h.new { animation: p-pulse 1.6s ease-in-out infinite; display: inline-block; }
.p-rr-allergy { display: flex; gap: .4rem; align-items: flex-start; margin: -.2rem 0 .55rem; padding: .35rem .6rem; border-radius: 10px; background: #FFF4E5; color: #7A4A00; font-weight: 800; font-size: .78rem; }
.p-rr-allergy .bi { color: #F59E0B; }
.p-rr-ans { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: .35rem; }
.p-rr-a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 58px; padding: .3rem .15rem; border: 2px solid #EDF1F7; border-radius: 14px; background: #F7F9FC; color: var(--p-navy); transition: transform .12s, background .15s, border-color .15s; }
.p-rr-a .em { font-size: 1.35rem; line-height: 1.1; }
.p-rr-a .l { font-size: .68rem; font-weight: 800; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-rr-a:active { transform: scale(.94); }
.p-rr-a.on { border-color: var(--p-blue); background: #E8F1FE; box-shadow: 0 0 0 3px rgba(21, 101, 216, .12); }
.p-rr-a.pulse { animation: p-tap .35s ease; }
@keyframes p-tap { 50% { transform: scale(1.08); } }
.p-rr-a:disabled { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .p-rr-a:hover:not(:disabled) { background: #EEF4FF; } }
.p-rr-all { margin-bottom: .6rem; background: linear-gradient(135deg, #EEF4FF, #F7FAFF); border-color: #D7E5FB; }
.p-rr-allic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--p-blue); color: #fff; font-size: 1.2rem; flex-shrink: 0; }
.p-rr-all .p-rr-a { background: #fff; }
/* "Saved · Undo" */
.p-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 1060; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 24px); padding: .55rem .5rem .55rem .9rem; border-radius: 16px; background: #102A4C; color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: p-up .2s ease-out; }
.p-undo .bi { color: #4ADE80; }
.p-undo .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-undo .btn-link { color: #8CC3FF; font-weight: 900; text-decoration: none; padding: .2rem .6rem; }
.p-undo.out { opacity: 0; transition: opacity .2s; }
@media (min-width: 992px) { .p-undo { bottom: 1.5rem; } }
/* answers: two short lines rather than cut words; meal tabs as a slim row in the bar */
.p-rr-a .l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .66rem; }
.p-rec-head .p-meal-tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.p-rec-head .p-meal-tab { flex: 0 0 auto; flex-direction: row; gap: .3rem; min-height: 0; padding: .35rem .7rem; border-radius: 999px; }
.p-rec-head .p-meal-tab .em { font-size: 1rem; }
.p-rec-head .p-meal-tab .nm { font-size: .78rem; white-space: nowrap; }
/* v91: on Today the activity is already chosen: the sheet shows it as a title, then only the answers */
.p-qs-act { display: flex; align-items: center; gap: .55rem; margin: .2rem 0 .7rem; padding: .5rem .7rem; border-radius: 14px; background: #F3F6FB; }
.p-qs-act .ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3FA2FF, #1565D8); }
.p-qs-act.tone-green .ico { background: linear-gradient(135deg, #4ADE80, #16A34A); } .p-qs-act.tone-red .ico { background: linear-gradient(135deg, #FF7A7F, #E5484D); }
.p-qs-act.tone-pink .ico { background: linear-gradient(135deg, #F472B6, #DB2777); } .p-qs-act.tone-amber .ico { background: linear-gradient(135deg, #FFC24B, #F59E0B); }
.p-qs-act.tone-purple .ico { background: linear-gradient(135deg, #A78BFA, #7C3AED); } .p-qs-act.tone-sky .ico { background: linear-gradient(135deg, #67D3FF, #1EA0F0); }
.p-qs-act.tone-grey .ico { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-qs-act b { color: var(--p-navy); font-size: 1.02rem; }
.p-qs-act .meal { margin-left: auto; font-weight: 800; font-size: .85rem; color: var(--p-muted); }
/* v92: Today changes in place; children selected elsewhere */
.p-kid-grid.loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
.p-others { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .7rem; padding: .5rem .6rem; border-radius: 16px; background: #EEF4FF; }
.p-others .l { font-size: .75rem; font-weight: 800; color: var(--p-blue); margin-right: .2rem; }
.p-other { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .25rem .15rem .2rem; border-radius: 999px; background: #fff; font-weight: 800; font-size: .8rem; color: var(--p-navy); box-shadow: 0 1px 4px rgba(13, 59, 122, .08); }
.p-other button { border: 0; background: #EEF2F8; width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-weight: 900; color: var(--p-muted); }
.p-actionbar-q { font-size: .78rem; font-weight: 800; color: var(--p-muted); margin: .1rem 0 .35rem; }
/* v93: "Deselect all"; swipe between children in the sheet */
.p-ab-clear { background: #F1F4F9; color: var(--p-navy); font-weight: 800; border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; }
.p-qs-head { touch-action: pan-y; }
.p-qs-who { transition: transform .2s ease, opacity .2s ease; }
.p-qs-who.from-r { animation: p-from-r .22s ease-out; }
.p-qs-who.from-l { animation: p-from-l .22s ease-out; }
@keyframes p-from-r { from { transform: translateX(40px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes p-from-l { from { transform: translateX(-40px); opacity: .3; } to { transform: none; opacity: 1; } }
/* v94: the selection bar shows the same answer tiles as the one-child sheet (compact) */
.p-rec-inline { padding: 0; background: none; box-shadow: none; animation: none; max-height: 46vh; overflow-y: auto; border-radius: 0; }
.p-rec-inline .p-qs-act { margin: .45rem 0 .5rem; padding: .35rem .55rem; }
.p-rec-inline .p-qs-act .ico { width: 28px; height: 28px; border-radius: 9px; font-size: .9rem; }
.p-rec-inline .p-qs-q { font-size: .8rem; margin-bottom: .35rem; }
.p-rec-inline .p-qs-answers { gap: .4rem; }
.p-rec-inline .p-qs-ans { min-height: 0; padding: .45rem .3rem; }
.p-rec-inline .p-qs-ans .em { font-size: 1.5rem; }
.p-rec-inline .p-qs-ans > span:not(.em) { font-size: .78rem; }
.p-rec-inline .p-qs-answers, .p-rec-inline .p-qs-answers.n2, .p-rec-inline .p-qs-answers.n4 { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }

/* ===== v95: continuous scanner — every card joins the list ===== */
.p-scanner-many .p-scan-top { left: 1rem; display: flex; justify-content: space-between; }
.p-scanner-many .p-scan-frame span { width: min(62vw, 260px); margin-bottom: 30vh; }
.p-scan-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
.p-scan-last { display: flex; align-items: center; gap: .7rem; min-height: 62px; padding: .5rem .65rem; border-radius: 18px; background: #F3F6FB; transition: background .2s; }
.p-scan-last .hint { color: var(--p-muted); font-weight: 800; width: 100%; text-align: center; }
.p-scan-last b { color: var(--p-navy); }
.p-scan-last small { color: var(--p-muted); font-weight: 700; }
.p-scan-last .tag { flex-shrink: 0; font-weight: 800; font-size: .75rem; }
.p-scan-last.ok { background: #E7F8EE; animation: p-tap .35s ease; }
.p-scan-last.ok .tag { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #22A34A; color: #fff; font-size: 1.1rem; }
.p-scan-last.same { background: #FFF6E5; }
.p-scan-last.same .tag { color: #8A5A00; }
.p-scan-last.warn { background: #FDECEC; }
.p-scan-last.warn .hint { color: #A1262A; }
.p-scan-open { background: #fff; color: var(--p-blue); font-weight: 800; border-radius: 999px; padding: .25rem .7rem; box-shadow: 0 1px 4px rgba(13, 59, 122, .12); flex-shrink: 0; }
.p-scan-list { display: flex; align-items: center; gap: .25rem; min-height: 0; margin: .65rem .1rem 0; }
.p-scan-list:empty { display: none; }
.p-scan-list .p-child-photo, .p-scan-list .p-avatar { margin-right: -8px; box-shadow: 0 0 0 2px #fff; }
.p-scan-list .more { margin-left: 10px; font-weight: 800; color: var(--p-muted); font-size: .8rem; }
.p-scan-list b { margin-left: 16px; color: var(--p-navy); }
.p-scan-btns { display: flex; gap: .5rem; margin-top: .75rem; }
.p-scan-b2 { flex: 0 0 auto; background: #F1F4F9; color: var(--p-navy); font-weight: 800; border-radius: 16px; padding: .75rem 1rem; }
.p-scan-b1 { flex: 1; font-weight: 800; border-radius: 16px; padding: .75rem 1rem; }
.p-actionbar-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.p-actionbar-top .p-ab-clear { white-space: nowrap; flex-shrink: 0; }
/* v96: arriving with children chosen: the activities ask to be tapped */
.p-ab-ask { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; padding: .7rem .8rem; border-radius: 14px; background: #EEF4FF; color: var(--p-blue); font-weight: 800; }
.p-ab-ask .bi { font-size: 1.2rem; animation: p-nudge 1.2s ease-in-out infinite; }
@keyframes p-nudge { 50% { transform: translateY(-4px); } }
.p-type-grid.ask .p-type-chip { animation: p-glow 1.6s ease-in-out infinite; }
@keyframes p-glow { 50% { box-shadow: 0 0 0 3px rgba(21, 101, 216, .18); } }
/* v97: meals chosen right above the answers; arrival / going home as tiles; "someone else" in one tap */
.p-qs-meals .p-meal-tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; margin: 0 0 .7rem; padding: .1rem; }
.p-qs-meals .p-meal-tab { flex: 0 0 auto; flex-direction: row; gap: .3rem; min-height: 0; padding: .4rem .75rem; border-radius: 999px; font-size: .8rem; }
.p-qs-meals .p-meal-tab .em { font-size: 1rem; }
.p-qs-meals .p-meal-tab .nm { white-space: nowrap; }
.p-qs-meals .p-meal-tab.on { background: var(--p-blue); border-color: var(--p-blue); color: #fff; }
.p-qs-meals .p-meal-tab .ok { position: static; margin-left: .15rem; }
.p-rec-inline .p-qs-meals .p-meal-tabs { margin-bottom: .5rem; }
.p-who small { display: block; font-size: .72rem; font-weight: 700; color: var(--p-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-who.on small { color: var(--p-blue); }
.p-who-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.p-who-role { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .2rem; border: 2px solid var(--p-border); border-radius: 16px; background: #fff; font-weight: 800; font-size: .72rem; color: var(--p-navy); line-height: 1.1; text-align: center; }
.p-who-role .em { font-size: 1.4rem; }
.p-who-role.on { border-color: var(--p-blue); background: #E8F1FE; }
.p-qs-meals .p-meal-tabs { flex-wrap: wrap; overflow: visible; }
/* v99: meals must be chosen first; parent card "At school" before anything is scored */
.p-qs-meals.ask .p-meal-tab { border-color: var(--p-blue); animation: p-glow 1.6s ease-in-out infinite; }
.p-meal-first { color: var(--p-blue) !important; font-weight: 800; }
.p-qs-answers.locked { opacity: .4; pointer-events: none; }
.p-state-ic { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: linear-gradient(135deg, #EEF4FF, #DCE9FF); box-shadow: inset 0 0 0 6px #fff, 0 4px 14px rgba(21, 101, 216, .15); }
.p-dc-state .p-dc3-status { color: var(--p-navy); }
.p-dc-state .p-dc3-sub { line-height: 1.45; }
.p-dc3-wait { margin-top: .35rem; font-size: .78rem; font-weight: 600; color: var(--p-muted); }

/* ===== v100: nap in one sheet; bus riders ===== */
.p-nap-card { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 20px; background: linear-gradient(135deg, #F1ECFF, #E7E0FF); color: #3B2A80; }
.p-nap-card .moon { font-size: 2.2rem; line-height: 1; }
.p-nap-card b { display: block; font-size: 1.05rem; }
.p-nap-card small { font-weight: 800; color: #6B5BB8; }
.p-nap-card.live { background: linear-gradient(135deg, #2E2368, #4C3BA8); color: #fff; box-shadow: 0 8px 22px rgba(76, 59, 168, .35); }
.p-nap-card.live small { color: #D8D0FF; font-size: 1.15rem; }
.p-nap-card.live .moon { animation: p-nudge 2.4s ease-in-out infinite; }
.p-nap-step { width: 44px; height: 40px; border: 0; border-radius: 12px; background: #F1F4F9; color: var(--p-navy); font-weight: 900; }
.p-nap-step:active { transform: scale(.94); }
.p-nap-in { width: 96px; height: 40px; border: 2px solid #E3EAF5; border-radius: 12px; text-align: center; font-weight: 900; color: var(--p-navy); background: #fff; padding: 0 .3rem; }
.p-nap-wake { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 60px; border-radius: 18px; background: linear-gradient(135deg, #FFC24B, #F59E0B); color: #4A2E00; font-weight: 900; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(245, 158, 11, .35); }
.p-nap-wake .em { font-size: 1.5rem; }
.p-wake-all { background: linear-gradient(135deg, #7C5CFC, #4C3BA8); border: 0; }
.p-kid-bus { font-size: .8rem; }
.p-bus-note { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .7rem; padding: .5rem .8rem; border-radius: 14px; background: #FFF6E5; color: #8A5A00; font-weight: 800; font-size: .85rem; }
.p-nap-in { width: 118px; }

/* v101 nap: tap a time to change it; big clock picker (saved only on Save) */
.p-nap-t { display: flex; align-items: center; gap: .6rem; width: 100%; margin-top: .6rem; padding: .7rem .9rem; border: 2px solid #E9E3FF; border-radius: 16px; background: #fff; text-align: left; }
.p-nap-t:active { transform: scale(.98); }
.p-nap-t .e { font-size: 1.3rem; }
.p-nap-t .l { flex: 1; font-weight: 800; color: var(--p-navy); font-size: .9rem; }
.p-nap-t .v { font-size: 1.25rem; font-weight: 900; color: #3B2A80; }
.p-nap-t .pen { font-size: .75rem; font-weight: 800; color: #6B5BB8; background: #F1ECFF; border-radius: 999px; padding: .25rem .6rem; }
.p-nap-earlier { display: block; width: 100%; margin-top: .7rem; border: 0; background: none; color: #6B5BB8; font-weight: 800; font-size: .88rem; padding: .4rem; }
.p-nap-ago { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem 0 .5rem; scrollbar-width: none; }
.p-nap-ago::-webkit-scrollbar { display: none; }
.p-nap-ago .p-chip-f { flex: 0 0 auto; }
.p-nap-clock { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .4rem; padding: .6rem; border-radius: 22px; background: linear-gradient(135deg, #F1ECFF, #E7E0FF); }
.p-nap-clock .col { display: flex; flex-direction: column; align-items: center; }
.p-nap-clock .col button { width: 64px; height: 42px; border: 0; border-radius: 14px; background: rgba(255,255,255,.75); color: #3B2A80; font-size: 1.3rem; }
.p-nap-clock .col button:active, .p-nap-clock .one button:active { transform: scale(.92); background: #fff; }
.p-nap-clock .col b { font-size: 2.6rem; line-height: 1.15; font-weight: 900; color: #2E2368; font-variant-numeric: tabular-nums; }
.p-nap-clock .sep { font-size: 2.4rem; font-weight: 900; color: #2E2368; margin-top: -.2rem; }
.p-nap-clock .one { display: flex; flex-direction: column; gap: .4rem; margin-left: .3rem; }
.p-nap-clock .one button { width: 44px; height: 36px; border: 0; border-radius: 12px; background: rgba(255,255,255,.6); color: #6B5BB8; font-weight: 900; font-size: .85rem; }
.p-nap-clock.bad b, .p-nap-clock.bad .sep { color: #C2410C; }
.p-nap-len { min-height: 1.4rem; margin-top: .5rem; text-align: center; font-weight: 800; color: #6B5BB8; }
.p-nap-len.bad { color: #C2410C; }

/* v102 parent summary: real units (no abstract %), Day / Week */
.p-sum-mode { display: flex; gap: .25rem; width: max-content; margin: 0 auto .6rem; padding: .25rem; border-radius: 999px; background: #EEF2F8; }
.p-sum-mode button { min-width: 92px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--p-muted); font-weight: 900; font-size: .9rem; }
.p-sum-mode button.on { background: #fff; color: var(--p-navy); box-shadow: 0 2px 8px rgba(13, 59, 122, .12); }
.p-ring-in .em { font-size: 2.3rem; }
.p-bar-goal { display: block; margin-top: .2rem; font-size: .7rem; font-weight: 700; color: var(--p-muted); }
.p-bar-top b { max-width: 60%; }
.p-wk .p-dc3-status { margin-bottom: .2rem; }
.p-wk-days { display: flex; gap: .35rem; margin: .9rem 0 .2rem; }
.p-wk-day { --c: #CBD5E1; --c-soft: #F1F5F9; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem 0; border: 0; border-radius: 16px; background: transparent; }
.p-wk-day small { font-size: .72rem; font-weight: 900; color: var(--p-muted); text-transform: capitalize; }
.p-wk-day .dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: var(--c-soft); box-shadow: inset 0 0 0 3px var(--c); }
.p-wk-day.lv-good { --c: #16A34A; --c-soft: #E8F7EE; } .p-wk-day.lv-ok { --c: #1565D8; --c-soft: #EAF2FE; }
.p-wk-day.lv-warn { --c: #D97706; --c-soft: #FEF3E2; } .p-wk-day.lv-bad { --c: #DC2626; --c-soft: #FDECEC; }
.p-wk-day.lv-away { --c: #94A3B8; --c-soft: #F1F5F9; } .p-wk-day.lv-none .dot { box-shadow: inset 0 0 0 2px #E2E8F0; background: #fff; }
.p-wk-day.lv-future { opacity: .35; } .p-wk-day.lv-future .dot { box-shadow: inset 0 0 0 2px #E2E8F0; background: #fff; }
.p-wk-day.today small { color: var(--p-blue); }
.p-wk-day:not(:disabled):active { transform: scale(.94); }
.p-wk > .p-bars { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #F0F3F8; gap: .8rem; }
.p-wk-hint { margin-top: .8rem; text-align: center; font-size: .75rem; font-weight: 700; color: var(--p-muted); }
.p-bar-det { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.p-bar-det span { padding: .15rem .55rem; border-radius: 999px; background: var(--c-soft); color: var(--p-navy); font-size: .72rem; font-weight: 800; white-space: nowrap; }

/* v104 dates stay shown while scrolling, like WhatsApp */
.p-chat-float { position: relative; height: 0; flex: 0 0 0; z-index: 6; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.p-chat-float.on { opacity: 1; transform: none; }
.p-chat-float span { position: absolute; top: .5rem; white-space: nowrap; padding: .25rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .96); font-size: .76rem; font-weight: 800; color: #54606F; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); text-transform: capitalize; }
.p-tl-date { position: sticky; top: calc(var(--p-stick-top, 0px) + 6px); z-index: 4; justify-content: center; align-items: center; margin: 0 auto .6rem; width: max-content; max-width: 100%; padding: .3rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .97); box-shadow: 0 2px 10px rgba(13, 59, 122, .14); font-size: .85rem; }
.p-tl-date.today { background: #E8F7EE; }
.p-tl-date small { font-size: .72rem; }
.p-tl-date small::before { content: '·'; margin-right: .4rem; }

/* v105 old cards: the issue date, and a clear message when an old card is scanned */
.p-scan-old { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; }
.p-scan-old .em { font-size: 1.8rem; }
.p-scan-old b { font-size: .95rem; }
.p-scan-old small { display: block; font-weight: 600; line-height: 1.3; opacity: .9; }
.p-card-new { display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; padding: .6rem .8rem; border-radius: 14px; background: #EAF2FE; color: var(--p-navy); font-size: .85rem; font-weight: 700; text-align: left; }
.p-card-new .bi { color: var(--p-blue); margin-top: .1rem; }

/* v106 parents on the child page: room for long names and emails on a phone */
.p-parent-row { display: block; padding: 1rem .8rem; }
.p-parent-top { display: flex; align-items: flex-start; gap: .8rem; }
.p-parent-top .dropdown { margin: -.2rem -.3rem 0 0; flex-shrink: 0; }
.p-parent-name { overflow-wrap: anywhere; font-size: 1.05rem; }
.p-parent-meta { align-items: center; margin-bottom: 0; }
.p-parent-meta .p-app-on, .p-parent-meta .p-app-wait { font-size: .72rem; }
.p-parent-info { display: grid; gap: .35rem; margin: .75rem 0 0; padding: .6rem .75rem; border-radius: 14px; background: #F6F8FC; }
.p-parent-info .p-parent-line { align-items: flex-start; font-size: .88rem; color: var(--p-navy); }
.p-parent-info .p-parent-line .bi { color: var(--p-muted); margin-top: .15rem; flex-shrink: 0; }
.p-parent-info .p-parent-line span, .p-parent-mail { min-width: 0; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
.p-parent-acts { display: flex; gap: .5rem; margin-top: .75rem; }
/* like a phone's contact card: a soft tile, a round coloured icon, a short word under it */
.p-pact { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .3rem .5rem; border: 0; border-radius: 16px; background: #fff; border: 1px solid #E6ECF5; color: var(--p-navy); font-weight: 800; font-size: .74rem; line-height: 1.1; text-decoration: none; transition: transform .1s, background .15s; }
.p-pact:hover { background: #F6F8FC; color: var(--p-navy); }
.p-pact:active { transform: scale(.94); }
.p-pact > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pact .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; box-shadow: 0 3px 8px rgba(13, 59, 122, .18); }
.p-pact.chat .ic { background: linear-gradient(135deg, #3B8BFF, #1565D8); }
.p-pact.call .ic { background: linear-gradient(135deg, #34C46A, #16A34A); }
.p-pact.wa .ic { background: linear-gradient(135deg, #2FE07A, #13A85A); font-size: 1.1rem; }
.p-pact.invite .ic { background: linear-gradient(135deg, #FFB547, #F08C00); }
@media (min-width: 768px) { .p-pact { flex: 0 0 96px; } }
/* v108/109 each parent is its own card: no lines or coloured edges, just space and a soft shadow (native look) */
.p-parents { display: grid; gap: .8rem; padding: .8rem; background: #F2F5FA; border-radius: 0 0 var(--p-radius) var(--p-radius); }
.p-parent-row { position: relative; background: #fff; border: 0; border-radius: 20px; box-shadow: 0 1px 2px rgba(13, 59, 122, .05), 0 6px 18px rgba(13, 59, 122, .07); padding: 1rem .9rem .9rem; }
.p-parent-row + .p-parent-row { border: 0; border-radius: 20px; }
.p-parent-row .p-parent-info { background: #F5F7FB; }
.p-parent-row .dropdown-menu { z-index: 30; }
.p-parent-row .p-pact { border: 0; background: #F5F7FB; }
.p-parent-row .p-pact:hover { background: #ECF0F7; }
/* v110 the buttons keep one size, whether there are 2, 3 or 4 (four equal places, filled from the left) */
.p-parent-row .p-parent-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.p-parent-row .p-pact { flex: none; width: 100%; max-width: none; }
@media (min-width: 768px) { .p-parent-row .p-parent-acts { grid-template-columns: repeat(4, 96px); } }
.p-parent-row .p-pact { padding: .55rem .15rem .5rem; font-size: .7rem; letter-spacing: -.01em; }
/* v111 a role limited to some activities */
.p-role-acts { display: flex; gap: .4rem; align-items: flex-start; margin-top: .5rem; padding: .4rem .6rem; border-radius: 10px; background: #F5F7FB; font-size: .78rem; font-weight: 700; color: var(--p-navy); }
.p-role-acts .bi { color: var(--p-blue); margin-top: .1rem; }

/* v111 chat: WhatsApp-like message box (😊 · text · 📎 in one white pill), emoji panel, replies, big emojis */
.p-chat-field { flex: 1; min-width: 0; background: #fff; border-radius: 24px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); overflow: hidden; }
.p-chat-row { display: flex; align-items: flex-end; }
.p-chat-field textarea { flex: 1; min-width: 0; resize: none; border: 0; padding: .62rem .2rem; font-size: 1rem; line-height: 1.35; max-height: 130px; background: transparent; box-shadow: none; outline: none; border-radius: 0; }
.p-chat-emo { flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; color: #54606F; font-size: 1.35rem; display: grid; place-items: center; }
.p-chat-field .p-chat-att { width: 42px; }
.p-chat-emo:active, .p-chat-field .p-chat-att:active { transform: scale(.9); }
/* emoji panel: takes the keyboard's place */
.p-emo { height: 290px; max-width: 820px; margin: .4rem auto 0; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); overflow: hidden; }
.p-emo[hidden] { display: none; }
.p-emo-tabs { display: flex; align-items: center; gap: .1rem; padding: .3rem .4rem; border-bottom: 1px solid #EEF1F6; }
.p-emo-tabs button { flex: 1; min-width: 0; height: 36px; border: 0; border-radius: 10px; background: transparent; font-size: 1.15rem; color: #8792A8; filter: grayscale(.85); opacity: .75; }
.p-emo-tabs button.on { background: #E8F1FF; color: var(--p-blue); filter: none; opacity: 1; }
.p-emo-tabs button.back { flex: 0 0 44px; filter: none; opacity: 1; color: #54606F; }
.p-emo-grid { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); padding: .4rem; align-content: start; -webkit-overflow-scrolling: touch; }
.p-emo-grid button { height: 44px; border: 0; background: transparent; border-radius: 10px; font-size: 1.65rem; line-height: 1; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.p-emo-grid button:active { background: #EEF2F8; transform: scale(1.15); }
.p-emo-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; color: var(--p-muted); font-weight: 700; font-size: .88rem; }
@media (min-width: 992px) { .p-emo { height: 260px; } }
/* replies: the quote in a bubble and above the box */
.p-rq { display: flex; align-items: stretch; gap: .5rem; width: 100%; margin: .1rem 0 .3rem; padding: .35rem .5rem .35rem .6rem; border: 0; border-left: 4px solid var(--q, #1565D8); border-radius: 8px; background: rgba(0, 0, 0, .05); text-align: left; color: inherit; font-size: .84rem; line-height: 1.25; overflow: hidden; }
.p-rq.mine { --q: #16A34A; }
.p-rq.theirs { --q: #7C3AED; }
.p-rq b { display: block; color: var(--q); font-size: .8rem; }
.p-rq .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #54606F; }
.p-rq img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; margin: -.15rem -.3rem -.15rem 0; }
button.p-rq { cursor: pointer; min-width: 160px; }
.p-reply-bar { position: relative; padding: .45rem .45rem 0; }
.p-reply-bar[hidden] { display: none; }
.p-reply-bar .p-rq { margin: 0; padding-right: 2.2rem; background: #F2F4F8; }
.p-reply-x { position: absolute; top: .55rem; right: .7rem; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #54606F; display: grid; place-items: center; font-size: .8rem; }
/* swipe to reply: a reply arrow appears behind the bubble */
.p-row[data-row] { position: relative; }
.p-row[data-row]::before { content: '\f51f'; font-family: bootstrap-icons; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%) scale(calc(.5 + var(--sw, 0) * .5)); opacity: var(--sw, 0); width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; color: #54606F; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); pointer-events: none; }
.p-row.swipe-ok::before { color: var(--p-blue); }
.p-row.flash { animation: p-flash 1.4s ease; }
@keyframes p-flash { 0%, 40% { background: rgba(21, 101, 216, .18); } 100% { background: transparent; } }
/* only emojis: big, no bubble */
.p-bub.jumbo { background: transparent !important; box-shadow: none; padding: 0 .2rem; }
.p-bub.jumbo .p-bub-text { font-size: 2.6rem; line-height: 1.15; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.p-bub.jumbo.n1 .p-bub-text { font-size: 3.4rem; }
.p-bub.jumbo .p-bub-meta { display: inline-flex; padding: .05rem .4rem; border-radius: 8px; background: rgba(255, 255, 255, .85); }
.p-bub.jumbo .p-bub-arrow { display: none; }
/* v112 one long emoji list: each kind under its name; the tabs follow the scrolling */
.p-emo-grid { display: block; padding: 0 .4rem .4rem; scroll-behavior: auto; }
.p-emo-h { position: sticky; top: 0; z-index: 1; padding: .45rem .3rem .25rem; background: rgba(255, 255, 255, .96); font-size: .74rem; font-weight: 800; color: var(--p-muted); text-transform: none; }
.p-emo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.p-emo-list button { height: 44px; border: 0; background: transparent; border-radius: 10px; font-size: 1.65rem; line-height: 1; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.p-emo-list button:active { background: #EEF2F8; transform: scale(1.15); }
.p-emo-sec .p-emo-empty { padding: .8rem 1rem 1rem; }
.p-emo-tabs button { transition: background .15s, filter .15s, opacity .15s; }

/* v113 reactions (like WhatsApp): the bar above a held message, the little badge under a bubble */
.p-rx-bar { position: fixed; z-index: 7000; display: flex; align-items: center; gap: .1rem; padding: .3rem .4rem; border-radius: 999px; background: #fff; box-shadow: 0 8px 26px rgba(13, 42, 92, .25); animation: p-rx-in .18s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes p-rx-in { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.p-rx-bar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.55rem; line-height: 1; padding: 0; display: grid; place-items: center; transition: transform .12s; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.p-rx-bar button:hover, .p-rx-bar button:active { transform: scale(1.25); }
.p-rx-bar button.on { background: #E8F1FF; }
.p-rx-bar button.more { width: 34px; height: 34px; margin-left: .15rem; background: #F0F2F5; color: #54606F; font-size: 1rem; }
.p-row.has-rx { padding-bottom: 14px; }
.p-rx-badge { position: absolute; bottom: -15px; display: inline-flex; align-items: center; gap: .1rem; padding: .05rem .4rem; border: 2px solid #EFEAE2; border-radius: 999px; background: #fff; font-size: .9rem; line-height: 1.35; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); z-index: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.p-bub.me .p-rx-badge { right: 10px; }
.p-bub.them .p-rx-badge { left: 10px; }
.p-rx-badge small { margin-left: .15rem; font-size: .72rem; font-weight: 800; color: #54606F; font-family: inherit; }
.p-rx-badge.mine { background: #F2FBEF; }
.p-mm-rx { display: flex; justify-content: space-between; padding: .2rem .4rem .35rem; border-bottom: 1px solid #F0F2F5; margin-bottom: .2rem; }
.p-mm-rx button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; font-size: 1.25rem; padding: 0; display: grid; place-items: center; }
.p-mm-rx button:hover { background: #F0F2F5; transform: scale(1.15); }
.p-msg-menu { width: 230px; }
.p-rx-sheet .p-qs-panel { max-height: 60vh; display: flex; flex-direction: column; }
.p-rx-sheet .p-emo-grid { flex: 1; overflow-y: auto; }
.p-rx-who h3 { font-size: 1.05rem; font-weight: 900; color: var(--p-navy); margin: .2rem 0 .6rem; }
.p-rx-line { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .2rem; border: 0; background: transparent; text-align: left; }
.p-rx-line b { display: block; color: var(--p-navy); }
.p-rx-line small { color: var(--p-muted); font-weight: 700; }
.p-rx-line .em { font-size: 1.6rem; }
/* v115 the bus staff in the parent's About */
.p-bus-ic { width: 40px; height: 40px; border-radius: 12px; background: #FFF4E0; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.p-about-chat { width: 40px; height: 40px; border-radius: 50%; background: var(--p-blue-soft); color: var(--p-blue); display: grid; place-items: center; flex-shrink: 0; }
.p-off-bus { opacity: .85; }
.p-off-ic { width: 44px; height: 44px; border-radius: 14px; background: #FDECEC; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }

/* v115 calendar: a month at a glance, the month's list under it, an entry in a sheet */
.p-cal { --c-green: #16A34A; --c-purple: #7C3AED; --c-blue: #1565D8; --c-amber: #D97706; --c-red: #DC2626; --c-orange: #EA580C; --c-grey: #64748B; }
.p-cal-bar { display: flex; align-items: center; gap: .4rem; padding: .3rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-cal-bar b { flex: 1; text-align: center; font-size: 1.08rem; font-weight: 900; color: var(--p-navy); }
.p-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: .6rem 0 1rem; padding: .5rem; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.p-cal-grid .wd { text-align: center; font-size: .72rem; font-weight: 900; color: var(--p-muted); padding: .2rem 0 .35rem; text-transform: uppercase; }
.p-cal-grid .day { position: relative; aspect-ratio: 1 / 1.05; min-height: 42px; border: 0; border-radius: 14px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; color: var(--p-navy); }
.p-cal-grid .day .n { font-weight: 800; font-size: .95rem; line-height: 1; }
.p-cal-grid .day.we .n { color: #8792A8; }
.p-cal-grid .day.out { opacity: .32; }
.p-cal-grid .day.closed { background: #E8F7EE; }
.p-cal-grid .day.closed .n { color: #15803D; }
.p-cal-grid .day.now .n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--p-blue); color: #fff; }
.p-cal-grid .day.sel { box-shadow: inset 0 0 0 2px var(--p-blue); background: #EAF2FE; }
.p-cal-grid .day:active { transform: scale(.92); }
.p-cal-grid .dots { display: flex; gap: 3px; height: 6px; }
.p-cal-grid .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-grey); }
.p-cal .tone-green { --tc: var(--c-green); --ts: #E8F7EE; } .p-cal .tone-purple { --tc: var(--c-purple); --ts: #F1ECFF; } .p-cal .tone-blue { --tc: var(--c-blue); --ts: #EAF2FE; }
.p-cal .tone-amber { --tc: var(--c-amber); --ts: #FEF3E2; } .p-cal .tone-red { --tc: var(--c-red); --ts: #FDECEC; } .p-cal .tone-orange { --tc: var(--c-orange); --ts: #FFEDD5; } .p-cal .tone-grey { --tc: var(--c-grey); --ts: #F1F5F9; }
.p-cal-grid .dots i[class*=tone-] { background: var(--tc); }
.p-cal-day + .p-cal-day { margin-top: 1rem; }
.p-cal-ev { display: flex; align-items: flex-start; gap: .75rem; width: 100%; margin-bottom: .55rem; padding: .8rem .85rem; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(13, 59, 122, .05), 0 4px 14px rgba(13, 59, 122, .06); text-align: left; color: inherit; }
.p-cal-ev:active { transform: scale(.985); }
.p-cal-ev .em { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: var(--ts); display: grid; place-items: center; font-size: 1.45rem; }
.p-cal-ev .ttl { display: block; font-weight: 900; color: var(--p-navy); font-size: 1rem; line-height: 1.25; }
.p-cal-ev .ln { display: flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .82rem; font-weight: 700; color: var(--p-muted); }
.p-cal-ev .tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.p-cal-ev .tag, .p-cal-sheet .tag { padding: .12rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: #F1F5F9; color: #475569; }
.p-cal-ev .tag.draft { background: #FFF4E0; color: #9A5B00; }
.p-cal-ev .tag.off { background: #FDECEC; color: #B91C1C; }
.p-cal-ev .tag.moved { background: #EAF2FE; color: var(--p-blue); }
.p-cal-ev .tag.closed { background: #E8F7EE; color: #15803D; }
.p-cal-ev .tag.kid { background: #FDEBF3; color: #C2357A; }
.p-cal-ev .go { color: #C3CBD9; align-self: center; }
.p-cal-ev.off .ttl { text-decoration: line-through; color: #94A3B8; }
.p-cal-ev.off .em { filter: grayscale(1); opacity: .6; }
.p-cal-ev.draft { box-shadow: inset 0 0 0 2px #FFE2B0; }
.p-cal-chosen { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; color: var(--p-navy); }
.p-cal-empty { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; border-radius: 20px; background: #fff; text-align: center; color: var(--p-navy); }
.p-cal-empty .em { font-size: 2.4rem; margin-bottom: .3rem; }
/* the entry sheet */
.p-cal-sheet { --c-green: #16A34A; --c-purple: #7C3AED; --c-blue: #1565D8; --c-amber: #D97706; --c-red: #DC2626; --c-orange: #EA580C; --c-grey: #64748B; }
.p-cal-hero { display: flex; align-items: center; gap: .85rem; margin: .2rem 0 .8rem; }
.p-cal-hero .em { width: 60px; height: 60px; flex-shrink: 0; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: #F1F5F9; }
.p-cal-hero.tone-green .em { background: #E8F7EE; } .p-cal-hero.tone-purple .em { background: #F1ECFF; } .p-cal-hero.tone-blue .em { background: #EAF2FE; }
.p-cal-hero.tone-amber .em { background: #FEF3E2; } .p-cal-hero.tone-red .em { background: #FDECEC; } .p-cal-hero.tone-orange .em { background: #FFEDD5; }
.p-cal-hero small { font-weight: 800; color: var(--p-muted); font-size: .78rem; }
.p-cal-hero h3 { margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--p-navy); line-height: 1.2; }
.p-cal-hero h3.off { text-decoration: line-through; color: #94A3B8; }
.p-cal-note { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .7rem; padding: .6rem .8rem; border-radius: 14px; font-weight: 700; font-size: .88rem; }
.p-cal-note.off { background: #FDECEC; color: #B91C1C; } .p-cal-note.draft { background: #FFF4E0; color: #9A5B00; } .p-cal-note.moved { background: #EAF2FE; color: var(--p-blue); }
.p-cal-rows { display: grid; gap: .55rem; padding: .8rem .9rem; border-radius: 16px; background: #F5F7FB; }
.p-cal-rows > div { display: flex; align-items: flex-start; gap: .65rem; font-weight: 700; color: var(--p-navy); }
.p-cal-rows .bi { color: var(--p-muted); margin-top: .1rem; }
.p-cal-details { margin-top: .8rem; padding: 0 .2rem; color: #334155; line-height: 1.55; }
.p-cal-acts { display: grid; gap: .5rem; margin-top: 1rem; }
.p-cal-acts .btn { min-height: 48px; border-radius: 14px; font-weight: 800; }
/* parent home: coming up */
.p-cal-next { display: block; margin-bottom: 1rem; padding: .8rem .9rem; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); color: inherit; text-decoration: none; }
.p-cal-next .hd { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; font-weight: 900; color: var(--p-navy); }
.p-cal-next .hd .bi:first-child { color: var(--p-blue); }
.p-cal-next .it { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.p-cal-next .it + .it { border-top: 1px solid #F0F3F8; }
.p-cal-next .em { font-size: 1.3rem; width: 30px; text-align: center; }
.p-cal-next b { display: block; color: var(--p-navy); font-size: .92rem; }
.p-cal-next small { color: var(--p-muted); font-weight: 700; }
/* Today: no school */
.p-day-closed { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; padding: .7rem .9rem; border-radius: 16px; background: #E8F7EE; color: #14532D; text-decoration: none; }
.p-day-closed .em { font-size: 1.6rem; }
.p-day-closed b { display: block; }
.p-day-closed small { font-weight: 700; }
.p-cal-ev[class*=tone-] { background: #fff; color: inherit; }
.p-cal-hero[class*=tone-] { background: transparent; color: inherit; }

/* v116 meal menus */
.p-badge-soft { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.p-chips-wrap { display: flex; flex-wrap: wrap; gap: .4rem; }
.p-menu-week { display: grid; gap: .7rem; }
@media (min-width: 992px) { .p-menu-week { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.p-menu-day { padding: .8rem .9rem; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(13, 59, 122, .05), 0 4px 14px rgba(13, 59, 122, .06); }
.p-menu-day.now { box-shadow: inset 0 0 0 2px var(--p-blue), 0 4px 14px rgba(13, 59, 122, .08); }
.p-menu-day .hd { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; color: var(--p-navy); }
.p-menu-day .hd .btn-link { padding: 0; font-weight: 800; font-size: .8rem; text-decoration: none; }
.p-menu-meal { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem 0; }
.p-menu-meal + .p-menu-meal { border-top: 1px solid #F0F3F8; }
.p-menu-meal .em { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: #FFF4E0; display: grid; place-items: center; font-size: 1.3rem; }
.p-menu-meal small { display: block; font-weight: 800; color: var(--p-muted); font-size: .74rem; }
.p-menu-meal small .chg { color: var(--p-blue); }
.p-menu-meal .dish { display: block; color: var(--p-navy); font-weight: 800; line-height: 1.3; }
.p-menu-meal.none .dish { color: #94A3B8; }
.p-menu-meal .note { display: block; font-size: .8rem; color: #9A5B00; font-weight: 700; margin-top: .15rem; }
.p-menu-none { padding: .7rem .2rem; color: var(--p-muted); font-weight: 700; }
.p-algs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.p-alg { padding: .1rem .5rem; border: 0; border-radius: 999px; background: #F1F5F9; color: #475569; font-size: .72rem; font-weight: 800; }
.p-alg.warn { background: #FDECEC; color: #B91C1C; }
.p-algs.pick .p-alg { padding: .25rem .6rem; font-size: .76rem; background: #fff; box-shadow: inset 0 0 0 1px #E2E8F0; }
.p-algs.pick .p-alg.on { background: #FFF4E0; color: #9A5B00; box-shadow: inset 0 0 0 1px #FBD38D; }
.p-menu-warn { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; padding: .35rem .6rem; border-radius: 10px; background: #FDECEC; color: #B91C1C; font-size: .8rem; font-weight: 800; }
.p-menu-row { display: flex; align-items: flex-start; gap: .65rem; }
.p-menu-row + .p-menu-row { margin-top: .8rem; }
.p-menu-row .em { width: 40px; height: 40px; flex-shrink: 0; margin-top: 1.4rem; border-radius: 12px; background: #FFF4E0; display: grid; place-items: center; font-size: 1.3rem; }
.p-menu-bar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: .5rem; padding: .6rem; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 24px rgba(13, 59, 122, .15); }
@media (min-width: 992px) { .p-menu-bar { bottom: 1rem; } }
.p-menu-bar .btn { min-height: 46px; border-radius: 14px; font-weight: 800; }
.p-menu-strip { display: flex; gap: .35rem; margin-bottom: .7rem; overflow-x: auto; scrollbar-width: none; }
.p-menu-strip button { flex: 1 0 46px; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem 0; border: 0; border-radius: 14px; background: #fff; color: var(--p-navy); box-shadow: 0 1px 3px rgba(13, 59, 122, .06); }
.p-menu-strip small { font-size: .7rem; font-weight: 800; color: var(--p-muted); text-transform: capitalize; }
.p-menu-strip b { font-size: 1.05rem; }
.p-menu-strip button.now small { color: var(--p-blue); }
.p-menu-strip button.on { background: var(--p-blue); color: #fff; }
.p-menu-strip button.on small { color: #DCE8FF; }
.p-menu-strip button.empty { opacity: .5; }
.p-menu-allergy { display: flex; gap: .5rem; align-items: center; margin-bottom: .7rem; padding: .55rem .8rem; border-radius: 14px; background: #FDECEC; color: #B91C1C; font-weight: 800; font-size: .84rem; }
.p-menu-day.solo { padding: 1rem; }
.p-qs-menu { margin: 0 0 .6rem; padding: .55rem .8rem; border-radius: 14px; background: #FFF4E0; color: #6B4200; font-size: .9rem; }
.p-qs-menu span { font-weight: 700; }
.p-qs-menu-warn { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; padding: .35rem .55rem; border-radius: 10px; background: #FDECEC; color: #B91C1C; font-weight: 800; font-size: .82rem; }
/* v119 a picture of several emojis (snack: milk, fruit, biscuit) fits its tile */
.p-menu-meal .em.multi, .p-menu-row .em.multi { font-size: .78rem; letter-spacing: -.12em; white-space: nowrap; }
.p-cal-next .em.multi { font-size: .8rem; letter-spacing: -.12em; width: 46px; white-space: nowrap; }
/* v120 "contains…" is one small line under a dish; the choices open on a tap */
.p-alg-toggle { margin-top: .35rem; padding: .15rem .1rem; border: 0; background: none; color: var(--p-muted); font-size: .78rem; font-weight: 700; }
.p-alg-toggle .lbl { color: #9A5B00; font-weight: 800; }
.p-alg-toggle .bi { color: var(--p-blue); }
/* v121: allergies to watch today (staff) */
.p-day-alg { margin-bottom: .7rem; padding: .55rem .85rem; border-radius: 14px; background: #FDECEC; color: #7F1D1D; }
.p-day-alg .hd { display: flex; align-items: center; gap: .45rem; width: 100%; border: 0; background: none; padding: 0; color: #B91C1C; font-weight: 700; font-size: .9rem; text-align: left; }
.p-day-alg.open .hd { margin-bottom: .35rem; }
.p-kid-flag.risk { font-size: 1rem; top: 4px; right: 5px; }
.p-day-alg .row1 { display: flex; gap: .6rem; align-items: baseline; padding: .2rem 0; font-size: .88rem; }
.p-day-alg .ml { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.p-day-alg .ks { display: flex; flex-wrap: wrap; gap: .25rem .7rem; }
.p-day-alg .k { white-space: nowrap; }
.p-qs-menu-warn span b { font-weight: 900; }
.p-day-alg a.k { color: inherit; text-decoration: none; padding: .15rem .55rem; border-radius: 999px; background: rgba(255,255,255,.7); }
.p-day-alg a.k:active { background: #fff; }
.p-day-alg a.k .bi { font-size: .7rem; margin-left: .25rem; opacity: .6; }

/* v123: Today at a glance + reports */
.p-ov { margin-bottom: 1rem; }
.p-ov-head { display: flex; align-items: baseline; gap: .5rem; margin: 0 .2rem .5rem; }
.p-ov-head b { font-size: 1.05rem; }
.p-ov-head small { color: var(--p-muted); font-weight: 700; }
.p-ov-link { font-weight: 800; font-size: .85rem; text-decoration: none; }
.p-ov-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-bottom: .8rem; }
.p-ov-tile { position: relative; overflow: hidden; display: flex; align-items: center; gap: .75rem; padding: .85rem .9rem; border-radius: 20px; background: #fff;
  box-shadow: 0 8px 22px -14px rgba(13, 59, 122, .35), inset 0 0 0 1px #EDF2F8; color: var(--p-text); text-decoration: none; min-width: 0; transition: transform .15s; }
.p-ov-tile:active { transform: scale(.98); }
.p-ov-tile::after { content: ''; position: absolute; right: -26px; top: -26px; width: 80px; height: 80px; border-radius: 50%; opacity: .5; }
.p-ov-tile .ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; }
.p-ov-tile .tx { display: flex; flex-direction: column; min-width: 0; }
.p-ov-tile b { font-size: 1.55rem; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--p-navy); }
.p-ov-tile b span { font-size: .9rem; color: var(--p-muted); font-weight: 700; }
.p-ov-tile small { font-size: .78rem; font-weight: 700; color: var(--p-muted); line-height: 1.25; margin-top: .15rem; }
.p-ov-tile.tone-green .ic { background: linear-gradient(135deg, #3FD07A, #16A34A); box-shadow: 0 8px 16px -8px rgba(22, 163, 74, .7); } .p-ov-tile.tone-green::after { background: radial-gradient(#DCFCE7, transparent 70%); }
.p-ov-tile.tone-red .ic { background: linear-gradient(135deg, #FF7A7F, #E03131); box-shadow: 0 8px 16px -8px rgba(224, 49, 49, .7); } .p-ov-tile.tone-red::after { background: radial-gradient(#FEE2E2, transparent 70%); }
.p-ov-tile.tone-amber .ic { background: linear-gradient(135deg, #FFC94D, #F08C00); box-shadow: 0 8px 16px -8px rgba(240, 140, 0, .7); } .p-ov-tile.tone-amber::after { background: radial-gradient(#FEF3C7, transparent 70%); }
.p-ov-tile.tone-blue .ic { background: linear-gradient(135deg, #3B8BFF, #1565D8); } .p-ov-tile.tone-blue::after { background: radial-gradient(#DBEAFE, transparent 70%); }
.p-ov-tile.tone-grey .ic { background: linear-gradient(135deg, #C3CCD9, #94A3B8); }
.p-ov-tile.tone-grey b { color: #94A3B8; }
@media (max-width: 767.98px) {
    .p-ov-tiles { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .p-ov-tile { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem; }
    .p-ov-tile .ic { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 14px; }
}
.p-ov-classes, .p-ov-alerts, .p-ov-par { border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); margin-bottom: .7rem; overflow: hidden; }
.p-ov-class { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; color: var(--p-text); text-decoration: none; }
.p-ov-class + .p-ov-class { border-top: 1px solid #EEF2F7; }
.p-ov-class .nm { flex: 0 0 4.2rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-ov-class .mid { flex: 1; min-width: 0; }
.p-ov-class .mid small { display: block; font-size: .74rem; color: var(--p-muted); font-weight: 700; margin-top: 2px; }
.p-ov-meter { display: block; height: 7px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.p-ov-meter i { display: block; height: 100%; border-radius: 99px; background: #22C55E; }
.p-ov-class .st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.p-ov-class .st .warn { color: #B45309; } .p-ov-class .st .ok { color: #15803D; } .p-ov-class .st .al { color: #B91C1C; } .p-ov-class .st .al i { margin-right: 2px; }
.p-ov-alert, .p-ov-par a, .p-ov-more { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; color: var(--p-text); text-decoration: none; }
.p-ov-alert + .p-ov-alert, .p-ov-par a + a, .p-ov-more { border-top: 1px solid #EEF2F7; }
.p-ov-alert > .bi:first-child { color: #DC2626; }
.p-ov-alert b { display: block; } .p-ov-alert small { display: block; color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.p-ov-alert .bi-chevron-right, .p-ov-par .bi-chevron-right { color: #CBD5E1; }
.p-ov-par a { font-weight: 700; font-size: .88rem; } .p-ov-par a > .bi:first-child { color: #B45309; }
.p-ov-more { justify-content: center; font-weight: 800; font-size: .85rem; color: var(--p-blue); }

.p-rp-filters { margin-bottom: .6rem; }
.p-rp-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.p-rp-chips::-webkit-scrollbar { display: none; }
.p-rp-row { display: flex; gap: .5rem; align-items: center; margin-top: .3rem; }
.p-rp-row .form-select { flex: 1; min-width: 0; border-radius: 12px; font-weight: 700; }
.p-rp-dates { display: flex; gap: .4rem; align-items: center; margin-top: .5rem; }
.p-rp-dates .form-control { border-radius: 12px; }
.p-rp-when { font-size: .8rem; font-weight: 800; color: var(--p-muted); margin: 0 .2rem .5rem; }
.p-rp-card { padding: .3rem 0; margin-bottom: .8rem; overflow: hidden; }
.p-rp-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .9rem; font-weight: 800; }
.p-rp-h small { color: var(--p-muted); font-weight: 700; font-size: .75rem; margin-left: auto; }
.p-rp-leg { margin-left: auto; display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: var(--p-muted); }
.p-rp-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: .35rem; }
.p-rp-leg i.here { background: #22C55E; } .p-rp-leg i.away { background: #F87171; }
.p-rp-leg i.well { background: #22C55E; } .p-rp-leg i.some { background: #FBBF24; } .p-rp-leg i.none { background: #F87171; }
.p-rp-kid { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; color: var(--p-text); text-decoration: none; }
.p-rp-kid + .p-rp-kid { border-top: 1px solid #EEF2F7; }
.p-rp-kid b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-rp-kid small { display: block; color: var(--p-muted); font-weight: 600; font-size: .76rem; }
.p-rp-kid small.tm { flex: 0 0 auto; font-weight: 800; }
.p-rp-pill { flex: 0 0 auto; padding: .2rem .6rem; border-radius: 99px; font-weight: 800; font-size: .78rem; }
.p-rp-pill.green { background: #DCFCE7; color: #15803D; } .p-rp-pill.amber { background: #FEF3C7; color: #B45309; } .p-rp-pill.red { background: #FEE2E2; color: #B91C1C; } .p-rp-pill.grey { background: #F1F5F9; color: #64748B; }
.p-rp-stack { flex: 0 0 auto; display: flex; gap: 2px; width: 90px; height: 10px; border-radius: 99px; overflow: hidden; background: #EEF2F7; }
.p-rp-stack i { display: block; height: 100%; } .p-rp-stack i.well { background: #22C55E; } .p-rp-stack i.some { background: #FBBF24; } .p-rp-stack i.none { background: #F87171; }
.p-rp-meal { display: flex; align-items: center; gap: .7rem; padding: .45rem .9rem; flex-wrap: wrap; }
.p-rp-meal .nm { flex: 0 0 9rem; font-weight: 700; font-size: .88rem; }
.p-rp-meal .p-rp-stack { flex: 1; width: auto; min-width: 80px; }
.p-rp-meal small { flex: 0 0 100%; color: var(--p-muted); font-weight: 600; font-size: .74rem; margin-top: -.2rem; }
@media (min-width: 576px) { .p-rp-meal small { flex: 0 0 auto; margin-top: 0; } }
.p-rp-date { padding: .5rem .9rem .2rem; font-size: .76rem; font-weight: 800; color: var(--p-muted); text-transform: capitalize; }
.p-rp-al { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 50%; background: #FEE2E2; color: #DC2626; }
.p-rp-kid .p-avatar, .p-rp-kid .avatar { flex: 0 0 auto; }
.p-mc2-today { display: block; font-size: .74rem; font-weight: 700; color: var(--p-muted); margin-top: 2px; }
.p-mc2-today .warn { color: #B45309; } .p-mc2-today .al { color: #B91C1C; }

/* v124: clearer charts, reports on large screens */
.p-ov-chart { display: block; color: inherit; text-decoration: none; margin-bottom: .7rem; }
.p-rc { padding: .7rem .85rem .55rem; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); }
.p-rp-card .p-rc { padding: .2rem .9rem .55rem; box-shadow: none; }
.p-rc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin-bottom: .45rem; }
.p-rc-h b { font-size: .95rem; }
.p-rc-sub { font-size: .74rem; font-weight: 700; color: var(--p-muted); }
.p-rc-plot { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; height: 128px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.p-rc-col { flex: 1 0 30px; max-width: 90px; display: flex; flex-direction: column; align-items: center; min-width: 30px; }
.p-rc-col .v { font-size: .7rem; font-weight: 800; color: var(--p-text); line-height: 1.3; font-variant-numeric: tabular-nums; }
.p-rc-col .bar { flex: 1; width: 70%; max-width: 30px; display: flex; align-items: flex-end; background: #F1F5F9; border-radius: 6px; overflow: hidden; }
.p-rc-col .bar i { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.p-rc-col.tone-good .bar i { background: #22C55E; } .p-rc-col.tone-warn .bar i { background: #F59E0B; } .p-rc-col.tone-bad .bar i { background: #EF4444; } .p-rc-col.tone-none .bar i { background: #CBD5E1; }
.p-rc-col .d { display: flex; flex-direction: column; align-items: center; font-size: .62rem; font-weight: 700; color: var(--p-muted); line-height: 1.15; margin-top: 3px; text-transform: capitalize; }
.p-rc-col .d b { font-size: .74rem; color: var(--p-text); }
.p-rc-col.today .d b { color: #fff; background: var(--p-blue); border-radius: 99px; padding: 0 .35rem; }
.p-rc-leg { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .45rem; font-size: .7rem; font-weight: 700; color: var(--p-muted); }
.p-rp-card > .p-rc-leg { padding: 0 .9rem .7rem; }
.p-rc-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.p-rc-leg i.good { background: #22C55E; } .p-rc-leg i.warn { background: #F59E0B; } .p-rc-leg i.bad { background: #EF4444; }

.p-rp { max-width: 1180px; }
.p-rp-tiles .p-ov-tile { position: relative; }
.p-ov-tile .cmp { font-size: .68rem; font-weight: 800; margin-top: .15rem; }
.p-ov-tile .cmp.up { color: #15803D; } .p-ov-tile .cmp.down { color: #B91C1C; } .p-ov-tile .cmp.same { color: var(--p-muted); }
.p-rp-points { list-style: none; margin: 0; padding: 0 .9rem .6rem; }
.p-rp-points li { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; font-size: .9rem; line-height: 1.35; }
.p-rp-points li + li { border-top: 1px solid #F1F5F9; }
.p-rp-points li .bi { flex: 0 0 auto; margin-top: .1rem; }
.p-rp-points .tone-good .bi { color: #16A34A; } .p-rp-points .tone-warn .bi { color: #D97706; } .p-rp-points .tone-bad .bi { color: #DC2626; } .p-rp-points .tone-info .bi { color: var(--p-blue); }
.p-hb { padding: .1rem .9rem .7rem; }
.p-hb-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr 3.2rem; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .86rem; }
.p-hb-row .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.p-hb-row .b { height: 10px; border-radius: 99px; background: #F1F5F9; overflow: hidden; }
.p-hb-row .b i { display: block; height: 100%; border-radius: 99px; }
.p-hb-row .b i.tone-good { background: #22C55E; } .p-hb-row .b i.tone-warn { background: #F59E0B; } .p-hb-row .b i.tone-bad { background: #EF4444; } .p-hb-row .b i.tone-info, .p-hb-row .b i.tone-none { background: #60A5FA; }
.p-hb-row > b { text-align: right; font-variant-numeric: tabular-nums; }
.p-rp-meals { padding: 0 .9rem .3rem; }
.p-rp-meal b { flex: 0 0 auto; width: 2.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.p-rp-meal { flex-wrap: nowrap; padding: .4rem 0; }
.p-rp-meal .nm { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-rp-kid.flag b { color: #B91C1C; }
.p-rp-dl { display: flex; gap: .4rem; }
.p-rp-dl .btn { border-radius: 12px; font-weight: 800; white-space: nowrap; }
.p-rp-row { flex-wrap: wrap; }
.p-rp-tw { display: none; }
.p-rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.p-rp-table th { position: sticky; top: 0; background: #F4F7FB; color: var(--p-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: .55rem .7rem; text-align: left; white-space: nowrap; }
.p-rp-table td { padding: .5rem .7rem; border-top: 1px solid #EEF2F7; vertical-align: middle; }
.p-rp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.p-rp-table tr[data-href] { cursor: pointer; }
.p-rp-table tbody tr:hover td { background: #F8FAFC; }
.p-rp-table tr.flag td:first-child { color: #B91C1C; font-weight: 800; }
@media (min-width: 992px) {
    .p-rp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
    .p-rp-filters .p-rp-chips { padding-bottom: 2px; }
    .p-rp-filters .p-rp-row { flex: 1; margin-top: 0; }
    .p-rp-row .form-select { max-width: 220px; }
    .p-rp-tiles { gap: .8rem; }
    .p-rp-tiles .p-ov-tile { padding: .9rem 1rem; }
    .p-rp-tiles .p-ov-tile b { font-size: 1.7rem; }
    .p-rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start; }
    .p-rp-grid .p-rp-col:empty { display: none; }
    .p-rp-grid:has(.p-rp-col:last-child:empty) { grid-template-columns: 1fr; }
    .p-rp-list { display: none; }
    .p-rp-tw { display: block; max-height: 640px; overflow: auto; }
    .p-rc-plot { height: 170px; }
}

/* v125: incidents */
.p-quick-act .ico.inc { background: #FDECEC; color: #DC2626; }
.p-inc-sheet .p-qs-panel { max-width: 640px; display: flex; flex-direction: column; padding-bottom: 0; }
@media (max-width: 767.98px) { .p-inc-sheet .p-qs-panel { max-height: 96vh; height: 96vh; } }
.p-inc-top { display: flex; align-items: center; gap: .5rem; }
.p-inc-top h3 { flex: 1; margin: 0; font-size: 1.2rem; font-weight: 900; color: var(--p-navy); }
.p-inc-top .btn-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--p-grey-soft); }
.p-inc-body { flex: 1; overflow-y: auto; padding: .2rem .1rem 1rem; }
.p-inc-foot { position: sticky; bottom: 0; background: #fff; padding: .6rem 0 calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid #EEF2F7; }
.p-inc-q { font-weight: 900; color: var(--p-navy); margin: 1rem 0 .45rem; font-size: .95rem; }
.p-inc-kids { display: flex; flex-wrap: wrap; gap: .4rem; }
.p-inc-kid { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .35rem .25rem .25rem; border-radius: 99px; background: #EAF1FC; }
.p-inc-kid b { font-size: .9rem; }
.p-inc-kid button { border: 0; background: rgba(0,0,0,.06); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.p-inc-add { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px dashed #B6C8E6; background: #fff; border-radius: 99px; padding: .4rem .85rem; font-weight: 800; color: var(--p-blue); }
.p-inc-find { margin-top: .5rem; }
.p-inc-found { display: flex; flex-direction: column; margin-top: .3rem; }
.p-inc-hit { display: flex; align-items: center; gap: .6rem; border: 0; background: none; padding: .45rem .3rem; text-align: left; border-radius: 12px; }
.p-inc-hit:active, .p-inc-hit:hover { background: #F4F7FB; }
.p-inc-hit b { display: block; } .p-inc-hit small { color: var(--p-muted); font-weight: 700; }
.p-inc-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
@media (min-width: 576px) { .p-inc-kinds { grid-template-columns: repeat(3, 1fr); } }
.p-inc-kind { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; border: 2px solid transparent; background: #F4F7FB; border-radius: 16px; padding: .6rem .7rem; }
.p-inc-kind .em { font-size: 1.5rem; line-height: 1.1; }
.p-inc-kind b { font-size: .88rem; line-height: 1.2; color: var(--p-text); }
.p-inc-kind small { font-size: .72rem; color: var(--p-muted); font-weight: 600; line-height: 1.2; }
.p-inc-kind.on { border-color: var(--p-blue); background: #EAF1FC; }
.p-inc-kind[data-kind=concern].on { border-color: #7C3AED; background: #F3EEFE; }
.p-inc-sev { display: flex; gap: .4rem; }
.p-inc-sev button { flex: 1; border: 2px solid #E2E8F0; background: #fff; border-radius: 14px; padding: .6rem .3rem; font-weight: 800; font-size: .88rem; }
.p-inc-sev button.on.tone-green { border-color: #22C55E; background: #DCFCE7; color: #15803D; }
.p-inc-sev button.on.tone-amber { border-color: #F59E0B; background: #FEF3C7; color: #B45309; }
.p-inc-sev button.on.tone-red { border-color: #EF4444; background: #FEE2E2; color: #B91C1C; }
.p-inc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.p-inc-chips .p-chip-f { box-shadow: none; border: 1px solid #E2E8F0; }
.p-inc-chips .p-chip-f.on { border-color: var(--p-blue); }
.p-inc-hint { display: flex; gap: .4rem; align-items: flex-start; margin-top: .4rem; font-size: .76rem; font-weight: 700; color: #B45309; }
.p-inc-share { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .8rem .9rem; border-radius: 16px; background: #EAF1FC; cursor: pointer; }
.p-inc-share span { flex: 1; } .p-inc-share b { display: block; } .p-inc-share small { color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.p-inc-share .form-check-input { width: 3em; height: 1.6em; margin: 0; }
.p-inc-note { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; padding: .7rem .85rem; border-radius: 14px; font-weight: 700; font-size: .86rem; }
.p-inc-note.tone-purple { background: #F3EEFE; color: #5B21B6; } .p-inc-note.tone-blue { background: #EAF1FC; color: #1E40AF; } .p-inc-note.tone-amber { background: #FEF3C7; color: #92400E; }
.p-inc-pill { flex: 0 0 auto; font-size: .7rem; font-weight: 800; padding: .15rem .55rem; border-radius: 99px; white-space: nowrap; }
.p-inc-pill.tone-green { background: #DCFCE7; color: #15803D; } .p-inc-pill.tone-amber { background: #FEF3C7; color: #B45309; } .p-inc-pill.tone-red { background: #FEE2E2; color: #B91C1C; }
.p-inc-page { max-width: 820px; }
.p-inc-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #DC2626; color: #fff; font-size: .7rem; margin-left: .2rem; }
.p-inc-month { margin: .8rem .3rem .4rem; font-size: .78rem; font-weight: 800; color: var(--p-muted); text-transform: capitalize; }
.p-inc-list { border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); overflow: hidden; }
.p-inc-card { display: flex; gap: .75rem; padding: .75rem .9rem; color: var(--p-text); text-decoration: none; }
.p-inc-card + .p-inc-card { border-top: 1px solid #EEF2F7; }
.p-inc-card.review { background: #FFFBEB; }
.p-inc-card > .em { font-size: 1.6rem; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: #F4F7FB; border-radius: 14px; }
.p-inc-card .top { display: flex; align-items: center; gap: .5rem; } .p-inc-card .top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-inc-card .what { display: block; font-size: .86rem; font-weight: 700; color: var(--p-muted); }
.p-inc-card .meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .2rem; font-size: .74rem; font-weight: 700; color: var(--p-muted); }
.p-inc-card .meta .bi, .p-inc-child .bi { margin-right: .2rem; }
.p-inc-card .ok, .p-inc-child .ok { color: #15803D; } .p-inc-card .warn, .p-inc-child .warn { color: #B45309; } .p-inc-card .muted, .p-inc-child .muted { color: var(--p-muted); } .p-inc-card .rv { color: #B45309; }
.p-inc-detail { max-width: 720px; }
.p-inc-hero { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: 20px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); margin-bottom: .8rem; }
.p-inc-hero .em { font-size: 2.2rem; } .p-inc-hero b { display: block; font-size: 1.15rem; color: var(--p-navy); } .p-inc-hero small { color: var(--p-muted); font-weight: 700; }
.p-inc-hero > div { flex: 1; }
.p-inc-hero.tone-red { box-shadow: inset 4px 0 0 #EF4444, 0 2px 10px rgba(13, 59, 122, .06); } .p-inc-hero.tone-amber { box-shadow: inset 4px 0 0 #F59E0B, 0 2px 10px rgba(13, 59, 122, .06); }
.p-inc-block { padding: .9rem 1rem; margin-bottom: .8rem; }
.p-inc-block .lbl, .p-inc-sec .lbl { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--p-muted); margin-bottom: .35rem; }
.p-inc-sec + .p-inc-sec { margin-top: .9rem; }
.p-inc-sec p { margin: 0; } .p-inc-sec p.big { font-size: 1.02rem; line-height: 1.45; white-space: pre-wrap; }
.p-inc-acts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .3rem; }
.p-inc-acts span { padding: .25rem .65rem; border-radius: 99px; background: #F1F5F9; font-weight: 700; font-size: .84rem; }
.p-inc-by { margin-top: .8rem; font-size: .76rem; font-weight: 700; color: var(--p-muted); }
.p-inc-child { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; color: var(--p-text); text-decoration: none; }
.p-inc-child + .p-inc-child { border-top: 1px solid #EEF2F7; }
.p-inc-child b, .p-inc-child small, .p-inc-child span > span { display: block; } .p-inc-child small { color: var(--p-muted); font-weight: 700; }
.p-inc-child span > span { font-size: .78rem; font-weight: 700; margin-top: .1rem; }
.p-inc-child > .bi-chevron-right { color: #CBD5E1; }
.p-inc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.p-inc-told { font-size: .8rem; font-weight: 700; color: #15803D; } .p-inc-told .bi { margin-right: .3rem; }
.p-inc-review { background: #FFFBEB; }
.p-inc-pchild { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; } .p-inc-pchild b { display: block; font-size: 1.15rem; } .p-inc-pchild small { color: var(--p-muted); font-weight: 700; }
.p-inc-readbtn { padding: .85rem; border-radius: 16px; font-weight: 800; font-size: 1.02rem; }
.p-inc-readok { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem; border-radius: 16px; background: #DCFCE7; color: #15803D; font-weight: 800; }

/* v125: useful Home, the register */
.p-ov-inc { background: #FDECEC; color: #B91C1C; font-weight: 800; border-radius: 99px; padding: .3rem .8rem; }
.p-ov-group { border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); margin-bottom: .6rem; overflow: hidden; }
.p-ov-gh { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; padding: .6rem .85rem .2rem; font-size: .8rem; font-weight: 800; color: var(--p-muted); }
.p-ov-gh .bi { margin-right: .2rem; } .p-ov-gh small { margin-left: auto; font-weight: 700; color: #B45309; }
.p-ov-line { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; color: var(--p-text); text-decoration: none; }
.p-ov-line + .p-ov-line { border-top: 1px solid #F1F5F9; }
.p-ov-line b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-ov-line > span:not(.em) { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--p-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.p-ov-line > span.warn { color: #B45309; }
.p-ov-line .em { font-size: 1.2rem; }
.p-ov-line > .bi-chevron-right { color: #CBD5E1; flex: 0 0 auto; }
.p-ov-line.strong { background: #FFFBEB; } .p-ov-line.strong b { flex: 1; }
.p-ov-ok { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-radius: 16px; background: #DCFCE7; color: #15803D; font-weight: 800; margin-bottom: .6rem; }
.p-rp-month { position: relative; overflow: hidden; }
.p-rp-month input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.p-reg-wrap { overflow-x: auto; padding: 0 .4rem .4rem; }
.p-reg { border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.p-reg .nm { width: 240px; }
.p-reg th, .p-reg td { text-align: center; padding: .35rem .25rem; border-bottom: 1px solid #EEF2F7; white-space: nowrap; }
.p-reg th { font-size: .72rem; color: var(--p-muted); font-weight: 800; }
.p-reg th span { display: block; font-size: .62rem; text-transform: uppercase; }
.p-reg .nm { position: sticky; left: 0; background: #fff; text-align: left; padding-left: .6rem; min-width: 130px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.p-reg .nm a { color: var(--p-text); font-weight: 700; text-decoration: none; }
.p-reg tr.flag .nm a { color: #B91C1C; }
.p-reg td.mk { font-weight: 800; width: 26px; }
.p-reg .mk.p { color: #15803D; } .p-reg .mk.l { color: #B45309; background: #FEF3C7; } .p-reg .mk.a { color: #B91C1C; background: #FEE2E2; } .p-reg .mk.e { color: #6D28D9; background: #F3EEFE; }
.p-reg .tt { font-weight: 800; background: #F8FAFC; min-width: 30px; }
.p-reg tr.sum td { font-weight: 800; color: var(--p-muted); border-bottom: 0; }
.p-reg-leg { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .3rem .9rem .8rem; font-size: .74rem; font-weight: 700; color: var(--p-muted); }
.p-reg-leg .mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-weight: 900; margin-left: .4rem; }
.p-reg-leg .mk.p { color: #15803D; background: #DCFCE7; } .p-reg-leg .mk.l { color: #B45309; background: #FEF3C7; } .p-reg-leg .mk.a { color: #B91C1C; background: #FEE2E2; } .p-reg-leg .mk.e { color: #6D28D9; background: #F3EEFE; }
.p-rp-al { font-size: 1.2rem; }
.p-inc-share.form-switch { padding-left: .9rem; }
.p-inc-share.form-switch .form-check-input { margin-left: 0; float: none; }
.p-inc-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* v126: the list of reports */
.p-rp-home { max-width: 980px; }
.p-rp-ghead { margin: 1rem .3rem .5rem; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--p-muted); }
.p-rp-ghead:first-child { margin-top: .2rem; }
.p-rp-cat { display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 768px) { .p-rp-cat { grid-template-columns: 1fr 1fr; } }
.p-rp-item { display: flex; align-items: center; gap: .8rem; padding: .85rem .95rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(13, 59, 122, .06); color: var(--p-text); text-decoration: none; }
.p-rp-item:hover { box-shadow: 0 4px 16px rgba(13, 59, 122, .12); }
.p-rp-item .p-tile-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; }
.p-rp-item b { display: block; font-size: .98rem; color: var(--p-navy); }
.p-rp-item small { display: block; color: var(--p-muted); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.p-rp-item > .bi-chevron-right { color: #CBD5E1; }
.p-rp-foot { display: flex; align-items: center; gap: .4rem; margin: 1.2rem .3rem; font-size: .8rem; font-weight: 700; color: var(--p-muted); }
.p-rp-foot .bi-file-earmark-pdf { color: #DC2626; } .p-rp-foot .bi-file-earmark-excel { color: #15803D; margin-right: .2rem; }
.p-rp-ct { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; font-size: .84rem; }
.p-rp-ct + .p-rp-ct { margin-top: .15rem; }
.p-rp-ct .bi-star-fill { color: #F59E0B; font-size: .7rem; }
.p-rp-ct span { color: var(--p-muted); font-size: .76rem; font-weight: 700; }
.p-rp-ct a { font-weight: 700; text-decoration: none; }
.p-rp-kid small.tm { flex: 0 0 auto; font-weight: 800; color: var(--p-muted); }
.p-inc-note.tone-green { background: #DCFCE7; color: #166534; }
.p-inc-follow { background: #EAF1FC; }

/* v127: attendance first */
.p-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: 1rem .6rem; border-radius: 18px; background: #F4F7FB; }
.p-gate .em { font-size: 2.2rem; } .p-gate b { font-size: 1.02rem; color: var(--p-navy); } .p-gate small { color: var(--p-muted); font-weight: 700; }
.p-gate .p-qs-answers { width: 100%; }
.p-gate-note { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; padding: .45rem .7rem; border-radius: 12px; background: #FEF3C7; color: #92400E; font-weight: 700; font-size: .82rem; }
.p-kid.not-here { opacity: .55; }
.p-kid.not-here .p-kid-val { color: #B45309; font-weight: 800; }

/* v127: reports — one report per page, cards and charts, phone to large screen */
.rp2 { max-width: 1240px; }
.rp2-hero { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.rp2-hero .ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; color: #fff; }
.rp2-hero .ic.tone-green { background: linear-gradient(135deg, #22C55E, #15803D); } .rp2-hero .ic.tone-blue { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.rp2-hero .ic.tone-amber { background: linear-gradient(135deg, #FBBF24, #D97706); } .rp2-hero .ic.tone-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.rp2-hero .ic.tone-red { background: linear-gradient(135deg, #F87171, #DC2626); } .rp2-hero .ic.tone-pink { background: linear-gradient(135deg, #F472B6, #DB2777); }
.rp2-hero h2 { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--p-navy); }
.rp2-hero p { margin: .1rem 0 0; color: var(--p-muted); font-weight: 600; font-size: .9rem; }
.rp2-hero > .min-w-0 { flex: 1; }
.rp2-dl { display: flex; gap: .4rem; flex: 0 0 auto; }
.rp2-dl .btn { display: inline-flex; align-items: center; gap: .35rem; border-radius: 12px; font-weight: 800; background: #fff; box-shadow: 0 2px 8px rgba(13, 59, 122, .08); padding: .5rem .85rem; }
.rp2-dl .bi-file-earmark-pdf { color: #DC2626; } .rp2-dl .bi-file-earmark-excel { color: #15803D; }
@media (max-width: 575.98px) { .rp2-hero { flex-wrap: wrap; } .rp2-hero h2 { font-size: 1.15rem; } .rp2-dl { width: 100%; } .rp2-dl .btn { flex: 1; justify-content: center; } }
.rp2-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.rp2-filters .p-rp-chips { padding-bottom: 2px; max-width: 100%; }
.rp2-fr { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1; }
.rp2-fr .form-select { width: auto; min-width: 170px; border-radius: 12px; font-weight: 700; }
@media (max-width: 575.98px) { .rp2-fr .form-select { flex: 1; } }
.rp2-when { display: flex; align-items: center; gap: .4rem; margin: .2rem .2rem .8rem; font-size: .82rem; font-weight: 800; color: var(--p-muted); }
.rp2-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .8rem; }
@media (min-width: 992px) { .rp2-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; } }
.rp2-kpi { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .85rem .95rem; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); overflow: hidden; min-width: 0; }
.rp2-kpi::after { content: ''; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; opacity: .08; background: currentColor; }
.rp2-kpi .top { display: flex; align-items: center; gap: .45rem; }
.rp2-kpi .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; }
.rp2-kpi .lb { font-size: .78rem; font-weight: 800; color: var(--p-muted); line-height: 1.2; }
.rp2-kpi .mid { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.rp2-kpi .mid b { font-size: 1.75rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--p-navy); }
@media (min-width: 992px) { .rp2-kpi { padding: 1rem 1.15rem; } .rp2-kpi .mid b { font-size: 2.1rem; } }
.rp2-kpi .sub { font-size: .76rem; font-weight: 700; color: var(--p-muted); }
.rp2-kpi.tone-good { color: #16A34A; } .rp2-kpi.tone-warn { color: #D97706; } .rp2-kpi.tone-bad { color: #DC2626; } .rp2-kpi.tone-info, .rp2-kpi.tone-blue { color: #1565D8; } .rp2-kpi.tone-none { color: #94A3B8; }
.rp2-kpi .ic { background: color-mix(in srgb, currentColor 12%, #fff); }
.rp2-kpi.tone-good .mid b { color: #15803D; } .rp2-kpi.tone-warn .mid b { color: #B45309; } .rp2-kpi.tone-bad .mid b { color: #B91C1C; }
.rp2-cmp { font-size: .74rem; font-weight: 800; } .rp2-cmp small { font-weight: 700; color: var(--p-muted); }
.rp2-cmp.up { color: #15803D; } .rp2-cmp.down { color: #B91C1C; } .rp2-cmp.same { color: var(--p-muted); }
.rp2-ring { display: block; }
.rp2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-bottom: .8rem; }
@media (min-width: 992px) {
    .rp2-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
    .rp2-card.s12 { grid-column: span 12; } .rp2-card.s8 { grid-column: span 8; } .rp2-card.s7 { grid-column: span 7; } .rp2-card.s6 { grid-column: span 6; }
    .rp2-card.s5 { grid-column: span 5; } .rp2-card.s4 { grid-column: span 4; }
}
.rp2-card { background: #fff; border-radius: 22px; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); padding: 1rem 1.1rem; min-width: 0; }
.rp2-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.rp2-card h3 { margin: 0; font-size: 1rem; font-weight: 900; color: var(--p-navy); }
.rp2-card header p { margin: .1rem 0 0; font-size: .78rem; font-weight: 600; color: var(--p-muted); }
.rp2-head { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 16px; }
.rp2-head i { font-size: 1.3rem; margin-top: .05rem; } .rp2-head p { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.35; }
.rp2-head.tone-good { background: #DCFCE7; color: #14532D; } .rp2-head.tone-warn { background: #FEF3C7; color: #78350F; } .rp2-head.tone-bad { background: #FEE2E2; color: #7F1D1D; } .rp2-head.tone-info { background: #EAF1FC; color: #1E3A8A; }
.rp2-points { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .1rem; }
@media (min-width: 992px) { .rp2-points { grid-template-columns: 1fr 1fr; gap: .1rem 1.2rem; } }
.rp2-points li { display: flex; gap: .55rem; align-items: flex-start; padding: .4rem 0; font-size: .92rem; line-height: 1.4; font-weight: 600; }
.rp2-points .tone-good .bi { color: #16A34A; } .rp2-points .tone-warn .bi { color: #D97706; } .rp2-points .tone-bad .bi { color: #DC2626; } .rp2-points .tone-info .bi { color: var(--p-blue); }
.rp2-kp { grid-column: 1 / -1; }
/* columns */
.rp2-cols { display: flex; align-items: stretch; gap: 6px; height: 210px; overflow-x: auto; padding-bottom: 2px; }
@media (min-width: 992px) { .rp2-cols { height: 250px; gap: 10px; } }
.rp2-cols .col { flex: 1 0 30px; max-width: 72px; display: flex; flex-direction: column; align-items: center; }
.rp2-cols.many .col { flex-basis: 22px; }
.rp2-cols .v { font-size: .72rem; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rp2-cols .bar { flex: 1; width: 72%; max-width: 38px; display: flex; align-items: flex-end; background: #F1F5F9; border-radius: 8px; overflow: hidden; position: relative; }
.rp2-cols.goal .bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: var(--goal); border-top: 2px dashed rgba(15, 39, 71, .35); z-index: 1; }
.rp2-cols .bar i { display: block; width: 100%; border-radius: 8px 8px 0 0; transition: height .4s ease; }
.rp2-cols .col.tone-good .bar i { background: linear-gradient(#34D399, #16A34A); } .rp2-cols .col.tone-warn .bar i { background: linear-gradient(#FCD34D, #F59E0B); }
.rp2-cols .col.tone-bad .bar i { background: linear-gradient(#FCA5A5, #EF4444); } .rp2-cols .col.tone-info .bar i, .rp2-cols .col.tone-none .bar i { background: linear-gradient(#93C5FD, #1565D8); }
.rp2-cols .d { display: flex; flex-direction: column; align-items: center; font-size: .62rem; font-weight: 700; color: var(--p-muted); line-height: 1.15; margin-top: 4px; text-transform: capitalize; }
.rp2-cols .d b { font-size: .76rem; color: var(--p-text); }
.p-rc-leg i.goal { background: none; border-top: 2px dashed rgba(15, 39, 71, .45); border-radius: 0; height: 0; width: 14px; vertical-align: 3px; }
/* horizontal bars */
.rp2-hb .row1 { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 3.4rem; align-items: center; gap: .7rem; padding: .38rem 0; font-size: .88rem; color: var(--p-text); text-decoration: none; }
.rp2-hb .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rp2-hb .b { height: 12px; border-radius: 99px; background: #F1F5F9; overflow: hidden; }
.rp2-hb .b i, .rp2-bar i { display: block; height: 100%; border-radius: 99px; }
.rp2-hb > .row1 > b { text-align: right; font-variant-numeric: tabular-nums; }
.tone-good.rp2-x, .rp2-hb i.tone-good, .rp2-bar i.tone-good { background: linear-gradient(90deg, #34D399, #16A34A); }
.rp2-hb i.tone-warn, .rp2-bar i.tone-warn { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
.rp2-hb i.tone-bad, .rp2-bar i.tone-bad { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.rp2-hb i.tone-info, .rp2-hb i.tone-none, .rp2-bar i.tone-info, .rp2-bar i.tone-none { background: linear-gradient(90deg, #93C5FD, #1565D8); }
.rp2-bar { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: #F1F5F9; overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.rp2-bar.w { width: 64px; flex: 0 0 auto; }
/* donut */
.rp2-donut { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.rp2-donut .dn { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.rp2-donut svg { width: 100%; height: 100%; }
.rp2-donut .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rp2-donut .c b { font-size: 1.6rem; font-weight: 900; color: var(--p-navy); line-height: 1; } .rp2-donut .c small { font-size: .72rem; font-weight: 700; color: var(--p-muted); }
.rp2-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.rp2-donut li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .86rem; }
.rp2-donut li i { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.rp2-donut li span { flex: 1; font-weight: 700; } .rp2-donut li b { font-variant-numeric: tabular-nums; } .rp2-donut li small { width: 2.6rem; text-align: right; color: var(--p-muted); font-weight: 700; }
/* people: watch cards, lines, table */
.rp2-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.rp2-watch .w { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: 16px; background: #FFF7F7; color: var(--p-text); text-decoration: none; border: 1px solid #FEE2E2; }
.rp2-watch .rg { position: relative; flex: 0 0 auto; } .rp2-watch .rg b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; font-weight: 900; color: #B91C1C; }
.rp2-watch .big { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; background: #FEE2E2; color: #B91C1C; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; line-height: 1; }
.rp2-watch .big small { font-size: .62rem; font-weight: 800; }
.rp2-watch b { display: block; } .rp2-watch small { display: block; color: var(--p-muted); font-weight: 700; font-size: .76rem; }
.rp2-line { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; color: var(--p-text); text-decoration: none; }
.rp2-line + .rp2-line { border-top: 1px solid #F1F5F9; }
.rp2-line b { display: block; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-line small { display: block; color: var(--p-muted); font-weight: 600; font-size: .78rem; }
.rp2-line small.tm { flex: 0 0 auto; font-weight: 800; }
.rp2-line.flag b { color: #B91C1C; }
.rp2-line .cts { display: block; margin-top: .2rem; }
.rp2-em { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #F4F7FB; display: grid; place-items: center; font-size: 1.3rem; }
.rp2-num { flex: 0 0 auto; min-width: 2rem; text-align: right; }
.rp2-pill { flex: 0 0 auto; padding: .2rem .6rem; border-radius: 99px; font-weight: 800; font-size: .78rem; white-space: nowrap; }
.rp2-pill.green { background: #DCFCE7; color: #15803D; } .rp2-pill.amber { background: #FEF3C7; color: #B45309; } .rp2-pill.red { background: #FEE2E2; color: #B91C1C; } .rp2-pill.grey { background: #F1F5F9; color: #64748B; }
.rp2-tw { display: none; }
.rp2-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.rp2-table th { position: sticky; top: 0; background: #F8FAFC; color: var(--p-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .6rem .75rem; text-align: left; white-space: nowrap; z-index: 1; }
.rp2-table th:first-child { border-radius: 12px 0 0 12px; } .rp2-table th:last-child { border-radius: 0 12px 12px 0; }
.rp2-table td { padding: .6rem .75rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.rp2-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp2-table tr[data-href] { cursor: pointer; } .rp2-table tbody tr:hover td { background: #F8FAFC; }
.rp2-table tr.flag .rp2-nm b { color: #B91C1C; }
.rp2-nm { display: inline-flex; align-items: center; gap: .55rem; } .rp2-nm .p-avatar, .rp2-nm .avatar { width: 30px; height: 30px; font-size: .72rem; }
@media (min-width: 992px) { .rp2-list { display: none; } .rp2-tw { display: block; max-height: 680px; overflow: auto; } }
.rp2-empty { padding: 1rem; text-align: center; color: var(--p-muted); font-weight: 700; }
.rp2-empty.big { padding: 2.2rem 1rem; font-size: 1.05rem; }
.rp2-algs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.rp2-algs .a { display: flex; flex-direction: column; align-items: center; padding: .8rem .4rem; border-radius: 16px; background: #FFF7ED; }
.rp2-algs .em { font-size: 1.8rem; } .rp2-algs b { font-size: 1.4rem; font-weight: 900; color: #B91C1C; line-height: 1.1; } .rp2-algs small { font-weight: 800; color: var(--p-muted); }
.rp2-hl { display: flex; gap: .7rem; padding: .6rem .2rem; color: var(--p-text); text-decoration: none; }
.rp2-hl + .rp2-hl { border-top: 1px solid #F1F5F9; }
.rp2-hl b { display: block; } .rp2-hl small { display: block; color: var(--p-muted); font-weight: 600; font-size: .82rem; margin-top: .15rem; }
.rp2-hl .algs { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.rp2-skel { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 992px) { .rp2-skel { grid-template-columns: repeat(4, 1fr); } }
.rp2-skel i { height: 110px; border-radius: 20px; background: linear-gradient(90deg, #EEF2F7, #F8FAFC, #EEF2F7); background-size: 200% 100%; animation: rp2-sh 1.2s infinite linear; }
@keyframes rp2-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* v128: long lists, filters */
.rp2-search { position: relative; margin-bottom: .6rem; max-width: 380px; }
.rp2-search .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); }
.rp2-search input { width: 100%; border: 1px solid #E2E8F0; border-radius: 12px; padding: .55rem .8rem .55rem 2.3rem; font-weight: 600; background: #F8FAFC; }
.rp2-search input:focus { outline: none; border-color: var(--p-blue); background: #fff; }
.rp2-more { display: block; width: 100%; margin-top: .6rem; padding: .7rem; border: 0; border-radius: 14px; background: #EAF1FC; color: var(--p-blue); font-weight: 800; }
.rp2-more small { font-weight: 700; color: var(--p-muted); margin-left: .3rem; }
.rp2-count { margin-top: .5rem; text-align: center; font-size: .78rem; font-weight: 700; color: var(--p-muted); }
.rp2-fr .form-select[data-role=section] { min-width: 150px; }

/* v130: the filter bar and families */
.rp2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .55rem; margin-bottom: .5rem; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); }
.rp2-periods { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: #F1F5F9; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.rp2-periods::-webkit-scrollbar { display: none; }
.rp2-periods[hidden] { display: none; }
.rp2-pb { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; border-radius: 11px; padding: .45rem .8rem; font-weight: 800; font-size: .84rem; color: var(--p-muted); white-space: nowrap; cursor: pointer; }
.rp2-pb.on { background: #fff; color: var(--p-navy); box-shadow: 0 1px 4px rgba(13, 59, 122, .14); }
.rp2-pb.p-rp-month { position: relative; }
.rp2-sel { position: relative; display: flex; align-items: center; flex: 0 1 220px; min-width: 0; height: 40px; border-radius: 13px; background: #F1F5F9; }
.rp2-sel[hidden] { display: none; }
.rp2-sel > .bi:first-child { position: absolute; left: .75rem; color: var(--p-blue); pointer-events: none; }
.rp2-sel .cv { position: absolute; right: .7rem; font-size: .75rem; color: var(--p-muted); pointer-events: none; }
.rp2-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 2rem 0 2.2rem; font-weight: 800; font-size: .88rem; color: var(--p-navy); border-radius: 13px; cursor: pointer; text-overflow: ellipsis; }
.rp2-sel select:focus { outline: 2px solid rgba(21, 101, 216, .35); }
.rp2-dates { display: flex; align-items: center; gap: .35rem; }
.rp2-dates[hidden] { display: none; }
.rp2-dates .form-control { height: 40px; border-radius: 12px; border: 0; background: #F1F5F9; font-weight: 700; }
@media (max-width: 767.98px) {
    .rp2-toolbar { padding: .45rem; gap: .45rem; }
    .rp2-periods { width: 100%; }
    .rp2-pb { flex: 1 0 auto; justify-content: center; }
    .rp2-sel { flex: 1 1 45%; }
    .rp2-dates { width: 100%; } .rp2-dates .form-control { flex: 1; }
}
.rp2-seg { display: flex; gap: 2px; padding: 3px; margin-bottom: .8rem; border-radius: 14px; background: #F1F5F9; overflow-x: auto; scrollbar-width: none; }
.rp2-seg::-webkit-scrollbar { display: none; }
.rp2-seg-b { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; background: transparent; border-radius: 11px; padding: .5rem .8rem; font-weight: 800; font-size: .84rem; color: var(--p-muted); white-space: nowrap; }
.rp2-seg-b.on { background: #fff; color: var(--p-navy); box-shadow: 0 1px 4px rgba(13, 59, 122, .14); }
.rp2-seg-b b { min-width: 22px; padding: 0 .35rem; border-radius: 99px; background: #E2E8F0; color: var(--p-navy); font-size: .74rem; line-height: 20px; }
.rp2-seg-b b.red { background: #FEE2E2; color: #B91C1C; } .rp2-seg-b b.amber { background: #FEF3C7; color: #B45309; } .rp2-seg-b b.green { background: #DCFCE7; color: #15803D; }
.rp2-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
@media (min-width: 768px) { .rp2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rp2-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp2-fam { border-radius: 18px; background: #F8FAFC; padding: .7rem; min-width: 0; }
.rp2-fam.none { background: #FFF5F5; }
.rp2-fam .hd { display: flex; align-items: center; gap: .6rem; color: var(--p-text); text-decoration: none; }
.rp2-fam .hd b { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-fam .hd small { display: block; color: var(--p-muted); font-weight: 700; font-size: .76rem; }
.rp2-fam .ps { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.rp2-fam .pr { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 14px; background: #fff; box-shadow: 0 1px 4px rgba(13, 59, 122, .05); }
.rp2-fam .rl { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #F1F5F9; display: grid; place-items: center; font-size: 1.05rem; }
.rp2-fam .pr b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-fam .pr b .bi-star-fill { color: #F59E0B; font-size: .7rem; }
.rp2-fam .pr small { display: block; color: var(--p-muted); font-weight: 600; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-fam .pr .app { color: #15803D; font-weight: 800; }
.rp2-fam .ac { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-size: .95rem; }
.rp2-fam .ac.call { background: #EAF1FC; color: var(--p-blue); } .rp2-fam .ac.wa { background: #DCFCE7; color: #15803D; }
.rp2-fam .ps.add { flex-direction: row; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: 14px; background: #fff; border: 1.5px dashed #FCA5A5; color: #B91C1C; font-weight: 800; font-size: .86rem; text-decoration: none; }

/* v131: sidebar groups */
.p-nav-gh { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .62rem .85rem; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .82); font-weight: 700; font-size: .95rem; text-align: left; }
.p-nav-gh:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.p-nav-gh .bi:first-child { font-size: 1.1rem; width: 1.2rem; text-align: center; }
.p-nav-gh span { flex: 1; }
.p-nav-gh .cv { font-size: .75rem; opacity: .7; transition: transform .2s; }
.p-nav-group.open .p-nav-gh .cv { transform: rotate(180deg); }
.p-nav-group.has-active:not(.open) .p-nav-gh { color: #fff; background: rgba(255, 255, 255, .1); }
.p-nav-group > ul { list-style: none; margin: 0; padding: 0 0 0 .9rem; display: none; flex-direction: column; gap: .15rem; border-left: 1px solid rgba(255, 255, 255, .12); margin-left: 1.45rem; }
.p-nav-group.open > ul { display: flex; padding-top: .15rem; }
.p-nav-group > ul a { padding: .5rem .75rem; font-size: .9rem; }

/* Family chats (v132) */
.p-face.fam { background: linear-gradient(135deg, #FDE68A, #FBCFE8); }
.p-face.fam .ini { color: #9D174D; }
.p-face i.fam { position: absolute; right: -3px; bottom: -3px; font-style: normal; font-size: calc(var(--s) * .32); line-height: 1; background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.p-cn-p.fam { background: #FFF7ED; border-radius: 14px; margin-bottom: .25rem; }
.p-cn-p.fam .bi { color: #EA580C; }
.p-ci-by { font-weight: 700; color: var(--p-navy); }
.p-bub-who { display: block; font-size: .78rem; font-weight: 800; color: hsl(var(--h) 60% 40%); margin-bottom: .1rem; }
.p-bub-who small { font-weight: 600; color: var(--p-muted); margin-left: .35rem; }
.p-readby { align-self: flex-end; font-size: .72rem; font-weight: 600; color: var(--p-muted); margin: .15rem .4rem .4rem; }
.p-readby .bi { margin-right: .25rem; color: #53BDEB; }
.p-fam-row { width: calc(100% - 2rem); border: 0; text-align: left; color: inherit; display: flex; align-items: center; gap: .75rem; margin: .25rem 1rem 1rem; padding: .75rem .9rem; border-radius: 16px; background: #FFF7ED; }

/* Parents tell the school; pickup list (v135) */
.p-kc-wrap { display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 4px 18px rgba(13, 59, 122, .08); overflow: hidden; }
.p-kc-wrap > .p-kc { box-shadow: none; border-radius: 0; }
.p-kc-told { display: inline-block; max-width: 100%; margin-top: .35rem; margin-right: .3rem; padding: .2rem .6rem; border-radius: 999px; background: var(--p-purple-soft); color: #5B3FD6; font-size: .76rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kc-tell { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: #F7F5FF; color: #5B3FD6; font-weight: 900; font-size: .9rem; padding: .7rem 1rem; text-align: left; }
.p-kc-tell span { font-size: 1.15rem; }
.p-kc-tell small { margin-left: auto; color: #8C7BE0; font-weight: 700; font-size: .74rem; }
.p-kc-tell:active { background: var(--p-purple-soft); }

.p-nt-sheet .p-qs-panel { max-height: 92vh; overflow-y: auto; }
.p-nt-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.p-nt-head b { display: block; font-size: 1.15rem; color: var(--p-navy); }
.p-nt-head small { color: var(--p-muted); font-weight: 700; }
.p-nt-kinds { display: grid; gap: .6rem; }
.p-nt-kind { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .75rem; border: 0; border-radius: 18px; padding: .85rem 1rem; text-align: left; }
.p-nt-kind .em { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem; background: rgba(255, 255, 255, .75); }
.p-nt-kind b { font-size: 1.05rem; color: var(--p-navy); }
.p-nt-kind small { color: var(--p-muted); font-weight: 700; }
.p-nt-kind.k-absent { background: #FDECEC; }
.p-nt-kind.k-late { background: #FEF4E2; }
.p-nt-kind.k-pickup { background: #E8F1FD; }
.p-nt-kind:active { transform: scale(.98); }
.p-nt-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.p-nt-top b { font-size: 1.1rem; color: var(--p-navy); }
.p-nt-q { font-weight: 900; color: var(--p-navy); font-size: .9rem; margin: 1rem 0 .45rem; }
.p-nt-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.p-nt-chip { border: 0; border-radius: 999px; padding: .55rem .95rem; background: var(--p-grey-soft); color: var(--p-text); font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; }
.p-nt-chips.sm .p-nt-chip { padding: .4rem .75rem; font-size: .82rem; }
.p-nt-chip.on { background: var(--p-blue); color: #fff; }
.p-nt-time input { border: 0; background: transparent; font: inherit; color: inherit; width: 6.2rem; outline: none; }
.p-nt-dates { display: flex; gap: .6rem; margin-top: .6rem; }
.p-nt-dates label { flex: 1; }
.p-nt-dates small { display: block; font-weight: 800; color: var(--p-muted); margin-bottom: .2rem; }
.p-nt-dates .form-control, .p-nt-sheet .form-control { border: 0; background: var(--p-grey-soft); border-radius: 14px; padding: .7rem .9rem; font-weight: 700; }
.p-nt-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.p-nt-person { display: flex; align-items: center; gap: .6rem; border: 0; border-radius: 16px; padding: .6rem .7rem; background: var(--p-grey-soft); text-align: left; min-width: 0; }
.p-nt-person b { color: var(--p-navy); font-size: .9rem; }
.p-nt-person small { color: var(--p-muted); font-weight: 700; font-size: .76rem; }
.p-nt-person.on { background: var(--p-blue-soft); box-shadow: inset 0 0 0 2px var(--p-blue); }
.p-nt-new { display: grid; gap: .5rem; margin-top: .6rem; }
.p-nt-check { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--p-text); margin-top: .35rem; }
.p-nt-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--p-blue); }
.p-nt-photo { display: flex; align-items: center; gap: .8rem; cursor: pointer; margin: .4rem 0; }
.p-nt-photo .ph { width: 72px; height: 72px; border-radius: 50%; background: var(--p-blue-soft); color: var(--p-blue); display: grid; place-items: center; font-size: 1.6rem; overflow: hidden; flex-shrink: 0; }
.p-nt-photo .ph img { width: 100%; height: 100%; object-fit: cover; }
.p-nt-photo small { color: var(--p-muted); font-weight: 700; }
.p-nt-row { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; }
.p-nt-row + .p-nt-row { border-top: 1px solid var(--p-grey-soft); }
.p-nt-row.told { background: #F7F5FF; border-radius: 14px; padding: .6rem .7rem; margin-bottom: .5rem; border: 0 !important; }
.p-nt-em { font-size: 1.4rem; }
.p-nt-call { color: var(--p-green); background: var(--p-green-soft); border-radius: 50%; }
.p-nt-rm { color: var(--p-muted); }
.p-nt-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.p-nt-qb { border: 0; border-radius: 16px; padding: .7rem .4rem; background: var(--p-grey-soft); font-weight: 800; font-size: .85rem; color: var(--p-navy); display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.p-nt-qb span { font-size: 1.5rem; }
.p-nt-staff { margin: 0 1rem 1rem; padding: .8rem .9rem; border-radius: 16px; background: var(--p-grey-soft); }
.p-nt-staff .p-nt-row + .p-nt-row { border-top-color: #E3E8EF; }

.p-told { display: flex; gap: .6rem; align-items: flex-start; background: #F7F5FF; color: #3E2C99; border-radius: 14px; padding: .6rem .8rem; margin: .5rem 0; font-size: .88rem; }
.p-told .em { font-size: 1.2rem; line-height: 1.2; }
.p-told b { color: #5B3FD6; }
.p-told small { color: #6E62B0; font-weight: 700; }
.p-kid-val.told { background: var(--p-purple-soft); color: #5B3FD6; }
.p-kid.is-told.told-absent { opacity: .82; }
.p-qs-ans .em img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; }
.p-qs-ans.expected { box-shadow: inset 0 0 0 2px var(--p-purple); background: #F7F5FF; }
.p-ov-line span.told { color: #5B3FD6; }
.p-nt-acts { display: flex; gap: .4rem; margin-top: .45rem; }
.p-nt-act { border: 0; border-radius: 999px; padding: .3rem .75rem; background: #fff; color: var(--p-blue); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; flex-shrink: 0; }
.p-nt-act.danger { color: var(--p-red); }
.p-nt-row .p-nt-act { background: var(--p-red-soft); }
.p-nt-row.told .p-nt-act { background: #fff; }

/* Profile photos seen big (v138) */
.p-pv { position: fixed; inset: 0; z-index: 7000; background: rgba(8, 18, 38, .94); display: grid; place-items: center; padding: 1.25rem; animation: p-pv-in .16s ease-out; }
.p-pv figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 100%; }
.p-pv img { width: min(86vw, 460px); height: min(86vw, 460px); object-fit: cover; border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); background: #fff; }
.p-pv figcaption { text-align: center; color: #fff; }
.p-pv figcaption b { display: block; font-size: 1.25rem; font-weight: 900; }
.p-pv figcaption small { color: rgba(255, 255, 255, .7); font-weight: 700; }
.p-pv.out { opacity: 0; transition: opacity .15s; }
@keyframes p-pv-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
[data-preview] { cursor: zoom-in; }
.p-qs-ans .em { position: relative; }
.p-zoom { position: absolute; right: -8px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--p-blue); font-size: .72rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); font-style: normal; }
.p-told .p-told-ph { width: 46px; height: 46px; flex-shrink: 0; }

/* New school year (v139) */
.p-ny-link { background: #FFF4E5; color: #B45309; font-weight: 800; border-radius: 999px; padding: .3rem .8rem; }
.p-ny-link + .btn-icon { margin-left: .4rem !important; }
.p-ny-banner { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 18px; background: linear-gradient(135deg, #FFF7ED, #FEF3C7); color: var(--p-navy); text-decoration: none; margin-bottom: .75rem; }
.p-ny-banner .em { font-size: 1.8rem; }
.p-ny-banner b { display: block; }
.p-ny-banner small { color: #92400E; font-weight: 700; }
.p-ny-banner .bi { margin-left: auto; color: #B45309; }
.p-ny-hero { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 22px; background: linear-gradient(135deg, var(--p-navy), var(--p-blue)); color: #fff; margin-bottom: 1rem; }
.p-ny-hero .em { font-size: 2.4rem; }
.p-ny-hero b { display: block; font-size: 1.25rem; }
.p-ny-hero span { opacity: .9; font-weight: 800; }
.p-ny-grid { display: grid; gap: 1rem; }
@media (min-width: 992px) { .p-ny-grid { grid-template-columns: minmax(340px, 5fr) 7fr; align-items: start; } }
.p-ny-step { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.p-ny-h { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.p-ny-h .n { width: 34px; height: 34px; border-radius: 50%; background: var(--p-blue-soft); color: var(--p-blue); display: grid; place-items: center; font-weight: 900; flex-shrink: 0; }
.p-ny-h .n.done { background: var(--p-green-soft); color: var(--p-green); }
.p-ny-h b { display: block; color: var(--p-navy); font-size: 1.05rem; }
.p-ny-h small { color: var(--p-muted); font-weight: 700; }
.p-ny-form { display: grid; gap: .6rem; }
.p-ny-form small { display: block; font-weight: 800; color: var(--p-muted); margin-bottom: .2rem; }
.p-ny-form .form-control, .p-ny-bar .form-control, .p-ny-bar .form-select, .p-ny-leave .form-control { border: 0; background: var(--p-grey-soft); border-radius: 12px; font-weight: 700; }
.p-ny-classes { display: grid; gap: .6rem; }
.p-ny-class b { color: var(--p-navy); font-size: .9rem; }
.p-ny-groups { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.p-ny-group { position: relative; display: inline-flex; flex-direction: column; padding: .4rem .7rem; border-radius: 12px; background: var(--p-grey-soft); min-width: 74px; }
.p-ny-group .nm { font-weight: 900; color: var(--p-navy); }
.p-ny-group small { color: var(--p-muted); font-weight: 700; font-size: .72rem; white-space: nowrap; }
.p-ny-group .x { position: absolute; top: -6px; right: -6px; border: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--p-red); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); display: grid; place-items: center; padding: 0; }
.p-ny-add { border: 2px dashed var(--p-grey); background: transparent; border-radius: 12px; color: var(--p-blue); font-weight: 800; padding: .35rem .7rem; font-size: .85rem; }
.p-ny-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .45rem; margin-bottom: .8rem; }
.p-ny-count { border-radius: 14px; padding: .5rem .6rem; }
.p-ny-count b { display: block; font-size: 1.1rem; }
.p-ny-count small { font-weight: 800; font-size: .74rem; }
.p-ny-count.tone-green { background: var(--p-green-soft); color: var(--p-green); }
.p-ny-count.tone-amber { background: var(--p-amber-soft); color: #B36B00; }
.p-ny-count.tone-purple { background: var(--p-purple-soft); color: var(--p-purple); }
.p-ny-count.tone-red { background: var(--p-red-soft); color: var(--p-red); }
.p-ny-bar { display: grid; grid-template-columns: 1fr 1fr auto; gap: .45rem; margin-bottom: .6rem; }
.p-ny-selbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 12px; background: var(--p-blue-soft); margin-bottom: .5rem; }
.p-ny-list { display: grid; gap: .1rem; }
.p-ny-kid { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; background: transparent; padding: .5rem .3rem; border-radius: 12px; text-align: left; }
.p-ny-kid:hover { background: var(--p-grey-soft); }
.p-ny-kid.sel { background: var(--p-blue-soft); }
.p-ny-kid .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--p-grey); display: grid; place-items: center; color: transparent; flex-shrink: 0; }
.p-ny-kid.sel .tick { background: var(--p-blue); border-color: var(--p-blue); color: #fff; }
.p-ny-kid .nm { flex: 1; min-width: 0; font-weight: 800; color: var(--p-text); overflow: hidden; text-overflow: ellipsis; }
.p-ny-kid .nm small { display: block; color: var(--p-muted); font-weight: 700; font-size: .75rem; }
.p-ny-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 999px; font-weight: 800; font-size: .78rem; white-space: nowrap; flex-shrink: 0; }
.p-ny-pill.tone-green { background: var(--p-green-soft); color: var(--p-green); }
.p-ny-pill.tone-amber { background: var(--p-amber-soft); color: #B36B00; }
.p-ny-pill.tone-purple { background: var(--p-purple-soft); color: var(--p-purple); }
.p-ny-pill.tone-red { background: var(--p-red-soft); color: var(--p-red); }
.p-ny-pill.tone-blue { background: var(--p-blue-soft); color: var(--p-blue); }
.p-ny-kid.custom .p-ny-pill { box-shadow: inset 0 0 0 2px currentColor; }
.p-ny-sum { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; font-weight: 800; color: var(--p-navy); }
.p-ny-warn { background: var(--p-red-soft); color: var(--p-red); font-weight: 800; border-radius: 12px; padding: .55rem .8rem; margin-bottom: .5rem; }
.p-ny-hint { background: var(--p-blue-soft); color: var(--p-blue); font-weight: 700; border-radius: 12px; padding: .55rem .8rem; margin-bottom: .5rem; font-size: .88rem; }
.p-ny-note { background: var(--p-blue-soft); color: var(--p-navy); font-weight: 700; border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; }
.p-ny-sh { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.p-ny-sh b { display: block; color: var(--p-navy); }
.p-ny-sh small { color: var(--p-muted); font-weight: 700; }
.p-ny-q { font-weight: 900; color: var(--p-navy); margin: .9rem 0 .4rem; font-size: .9rem; }
.p-ny-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .45rem; }
.p-ny-opt { border: 0; border-radius: 14px; padding: .65rem .8rem; background: var(--p-grey-soft); text-align: left; }
.p-ny-opt b { display: block; color: var(--p-navy); }
.p-ny-opt small { color: var(--p-muted); font-weight: 700; font-size: .74rem; }
.p-ny-opt.on { background: var(--p-blue-soft); box-shadow: inset 0 0 0 2px var(--p-blue); }
.p-ny-leave { margin-top: .6rem; }
.p-ny-more { margin-top: .8rem; }
.p-ny-more summary { font-weight: 800; color: var(--p-blue); cursor: pointer; }
.p-ny-done { padding: 2.5rem 1rem; }
.p-ny-done .em { font-size: 3rem; }
.p-ny-fold > summary { font-weight: 800; color: var(--p-blue); cursor: pointer; margin-bottom: .5rem; list-style: none; }
.p-ny-fold > summary::before { content: '▸ '; }
.p-ny-fold[open] > summary::before { content: '▾ '; }
.p-ny-cur { background: rgba(255, 255, 255, .16); color: #fff; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.p-ny-cur:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* Classes: the school year card (v141) */
.p-yc { display: grid; grid-template-columns: 1fr; gap: .75rem; background: #fff; border-radius: 22px; padding: 1rem 1.1rem; box-shadow: 0 4px 18px rgba(13, 59, 122, .06); margin-bottom: 1.25rem; }
@media (min-width: 992px) { .p-yc { grid-template-columns: minmax(280px, 1.3fr) auto minmax(260px, 1fr); align-items: center; gap: 1.5rem; } }
.p-yc-year { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.p-yc-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--p-blue-soft); color: var(--p-blue); display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.p-yc-name, .p-yc-pick { font-size: 1.2rem; font-weight: 900; color: var(--p-navy); }
.p-yc-pick { border: 0; background: transparent; padding: 0 1.4rem 0 0; appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%230D3B7A' d='M1.6 5.1 8 11.4l6.4-6.3-1.1-1.1L8 9.2 2.7 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center; max-width: 100%; }
.p-yc-pick:focus { outline: none; }
.p-yc-st { font-size: .72rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px; }
.p-yc-st.st-closed { background: var(--p-grey-soft); color: #66708A; }
.p-yc-st.st-upcoming { background: var(--p-amber-soft); color: #B36B00; }
.p-yc-dates { color: var(--p-muted); font-weight: 700; font-size: .85rem; margin-top: .1rem; }
.p-yc-bar { height: 6px; border-radius: 999px; background: var(--p-grey-soft); margin-top: .45rem; overflow: hidden; max-width: 320px; }
.p-yc-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--p-sky), var(--p-blue)); }
.p-yc-edit { align-self: flex-start; background: var(--p-grey-soft); color: var(--p-navy); border-radius: 12px; flex-shrink: 0; }
.p-yc-stats { display: flex; gap: .5rem; }
.p-yc-stats > div { flex: 1; min-width: 74px; text-align: center; padding: .5rem .6rem; border-radius: 14px; background: var(--p-bg); }
.p-yc-stats b { display: block; font-size: 1.2rem; font-weight: 900; color: var(--p-navy); line-height: 1.1; }
.p-yc-stats small { color: var(--p-muted); font-weight: 800; font-size: .74rem; }
.p-yc-next { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 16px; background: linear-gradient(135deg, #FFF7ED, #FEF3C7); text-decoration: none; color: var(--p-navy); }
.p-yc-next .em { font-size: 1.7rem; }
.p-yc-next b { display: block; }
.p-yc-next small { display: block; color: #92400E; font-weight: 700; }
.p-yc-next .bi { color: #B45309; }
.p-yc-next:hover { color: var(--p-navy); filter: brightness(.98); }
.p-yc-prog { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; }
.p-yc-prog .p-yc-bar { flex: 1; margin-top: 0; }
.p-yc-prog small { color: var(--p-muted); font-weight: 800; font-size: .74rem; white-space: nowrap; }
.p-yc-dates { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Absence: confirm what the parent said; an absent child (v143) */
.p-abs-confirm { display: flex; align-items: center; gap: .8rem; width: 100%; border: 0; border-radius: 18px; padding: .9rem 1rem; background: var(--p-purple); color: #fff; box-shadow: 0 6px 18px rgba(124, 92, 252, .3); }
.p-abs-confirm .em { font-size: 1.8rem; }
.p-abs-confirm b { display: block; font-size: 1.05rem; }
.p-abs-confirm small { display: block; opacity: .9; font-weight: 700; }
.p-abs-confirm .bi { margin-left: auto; font-size: 1.4rem; }
.p-abs-confirm:active { transform: scale(.98); }
.p-gate.absent { background: var(--p-purple-soft); }
.p-gate.absent b { color: #5B3FD6; }
.p-qs-ans.p-abs-ok { box-shadow: inset 0 0 0 2px var(--p-purple); background: #F7F5FF; }

/* Medicine (v146) */
.p-nt-quick { grid-template-columns: repeat(4, 1fr); }
.p-nt-qb { font-size: .78rem; padding: .65rem .2rem; }
.p-nt-kind.k-medicine { background: #FCE7F3; }
.p-med { background: var(--p-grey-soft); border-radius: 16px; padding: .75rem .85rem; margin-bottom: .6rem; }
.p-med-h { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .5rem; }
.p-med-h .em { font-size: 1.5rem; line-height: 1.1; }
.p-med-h b { display: block; color: var(--p-navy); }
.p-med-h small { color: var(--p-muted); font-weight: 700; }
.p-med-dose { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-top: 1px solid #E3E8EF; flex-wrap: wrap; }
.p-med-dose .tm { min-width: 52px; font-size: 1.05rem; color: var(--p-navy); }
.p-med-dose .st { font-weight: 800; }
.p-med-dose.given .st { color: var(--p-green); }
.p-med-dose.missed .st { color: var(--p-red); }
.p-med-btn { flex: 1; border: 0; border-radius: 12px; padding: .6rem .5rem; font-weight: 800; background: #fff; }
.p-med-btn.ok { color: var(--p-green); box-shadow: inset 0 0 0 2px var(--p-green-soft); }
.p-med-btn.no { color: var(--p-red); box-shadow: inset 0 0 0 2px var(--p-red-soft); }

/* Attendance report: the register; one child filter (v147) */
.rp2-kpi.tone-purple { color: #7C3AED; } .rp2-kpi.tone-purple .mid b { color: #6D28D9; }
.rp2-child { flex: 0 1 240px; }
.rp2-child input { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 .8rem 0 2.2rem; font-weight: 800; font-size: .88rem; color: var(--p-navy); border-radius: 13px; outline: none; }
.rp2-child input::placeholder { color: var(--p-muted); font-weight: 700; }
.rp2-child [data-role=child-box] { display: contents; }
.rp2-child.on { background: var(--p-blue-soft); }
.rp2-child-on { display: flex; align-items: center; gap: .45rem; padding: 0 .4rem 0 2.2rem; width: 100%; min-width: 0; }
.rp2-child-on b { font-size: .88rem; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.rp2-child-on button { border: 0; background: #fff; width: 26px; height: 26px; border-radius: 50%; color: var(--p-muted); display: grid; place-items: center; flex-shrink: 0; }
.rp2-child-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; z-index: 30; background: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(13, 59, 122, .18); padding: .35rem; }
.rp2-child-list button { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: transparent; padding: .45rem .5rem; border-radius: 10px; text-align: left; }
.rp2-child-list button:hover { background: var(--p-grey-soft); }
.rp2-child-list b { display: block; font-size: .88rem; color: var(--p-navy); }
.rp2-child-list small { color: var(--p-muted); font-weight: 700; font-size: .74rem; }
.rp2-child-none { padding: .6rem; color: var(--p-muted); font-weight: 700; font-size: .85rem; }
.rg-nav { display: flex; align-items: center; gap: .4rem; }
.rg-nav b { min-width: 120px; text-align: center; color: var(--p-navy); text-transform: capitalize; }
.rg-nav .btn { background: var(--p-grey-soft); border-radius: 10px; }
.rg-group { border-radius: 14px; background: #fff; margin-bottom: .6rem; }
.rg-group > summary { display: flex; align-items: center; gap: .55rem; padding: .6rem .4rem; cursor: pointer; list-style: none; }
.rg-group > summary::-webkit-details-marker { display: none; }
.rg-group > summary .cv { transition: transform .15s; color: var(--p-muted); }
.rg-group[open] > summary .cv { transform: rotate(90deg); }
.rg-group > summary b { color: var(--p-navy); font-size: 1rem; }
.rg-group > summary small { color: var(--p-muted); font-weight: 700; margin-right: auto; }
.rg-wrap { overflow-x: auto; border-radius: 12px; }
.rgt { border-collapse: separate; border-spacing: 0; font-size: .8rem; min-width: 100%; }
.rgt th, .rgt td { text-align: center; padding: .3rem .15rem; min-width: 30px; border-bottom: 1px solid #EEF2F7; white-space: nowrap; }
.rgt thead th { font-weight: 800; color: var(--p-navy); background: #F8FAFC; position: sticky; top: 0; }
.rgt thead th span { display: block; font-size: .64rem; color: var(--p-muted); text-transform: uppercase; }
.rgt .nm { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; min-width: 190px; max-width: 230px; padding-left: .4rem; }
.rgt thead .nm { background: #F8FAFC; z-index: 2; }
.rgt .nm a { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; min-width: 0; }
.rgt .nm b { display: block; font-size: .84rem; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgt .nm small { display: block; font-size: .7rem; color: var(--p-muted); font-weight: 700; }
.rgt .ct { font-weight: 900; min-width: 52px; }
.rgt .g { color: #16A34A; } .rgt .r { color: #DC2626; }
.rgt .pc { min-width: 56px; }
.rgt td.off, .rgt th.off { background: #F4F6F9; color: #A0AEC0; }
.rgt tr.tot td { background: #F8FAFC; font-weight: 800; font-size: .74rem; }
.rgt tr.tot .nm { background: #F8FAFC; color: var(--p-muted); }
.rgt tr.flag .nm b { color: #B91C1C; }
.rgt td.mk i { font-size: .95rem; }
.rgt td.mk.p, .rg-leg .mk.p { color: #16A34A; }
.rgt td.mk.l, .rg-leg .mk.l { color: #D97706; }
.rgt td.mk.e, .rg-leg .mk.e { color: #7C3AED; }
.rgt td.mk.a, .rg-leg .mk.a { color: #DC2626; background: #FEF2F2; }
.rg-leg { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .78rem; font-weight: 700; color: var(--p-muted); margin-top: .4rem; }
.rg-leg .mk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--p-grey-soft); margin-left: .4rem; }
.rg-leg .mk.off { color: #A0AEC0; }

.rgt thead th.ct span { display: inline; font-size: inherit; }

/* v148 admin Home: the school in four small numbers on a phone */
@media (max-width: 991.98px) {
    .p-home-nums .p-stat { flex-direction: row; gap: .6rem; padding: .7rem .75rem; border-radius: 18px; }
    .p-home-nums .p-stat-icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 12px; }
    .p-home-nums .p-stat-value { font-size: 1.2rem; }
    .p-home-nums .p-stat-label { font-size: .75rem; line-height: 1.15; display: block; }
    .p-home-nums .p-stat::before { display: none; }
}

/* v151 sign-in pages: install the app */
.p-install-btn { display: flex; align-items: center; gap: .75rem; width: 100%; margin-top: 1rem; padding: .7rem .85rem; border: 0; border-radius: 18px;
    background: linear-gradient(135deg, #EAF4FF 0%, #F4F9FF 100%); color: var(--p-navy); text-align: left; transition: transform .12s ease; }
.p-install-btn:active { transform: scale(.98); }
.p-install-btn img { border-radius: 11px; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(21, 101, 216, .18); }
.p-install-btn span { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.p-install-btn b { display: block; font-weight: 800; }
.p-install-btn small { display: block; color: var(--p-muted); font-size: .78rem; }
.p-install-btn .bi { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--p-blue); color: #fff; }

/* v153 a mouse dragging like a finger (computer in the phone layout): no text selection while dragging */
html.p-mouse-drag, html.p-mouse-drag * { user-select: none !important; cursor: grabbing !important; }

/* v157 privacy and cookie policies */
.p-legal { color: var(--p-navy); font-size: .95rem; line-height: 1.6; }
.p-legal .lead { font-size: 1.02rem; font-weight: 600; }
.p-legal h2 { font-size: 1.05rem; font-weight: 800; margin: 1.4rem 0 .5rem; }
.p-legal ul { padding-left: 1.2rem; }
.p-legal li { margin-bottom: .35rem; }
.p-legal table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .5rem 0 1rem; font-size: .88rem; background: #F4F8FE; border-radius: 14px; overflow: hidden; }
.p-legal th, .p-legal td { padding: .55rem .7rem; vertical-align: top; text-align: left; }
.p-legal th { background: #E8F1FE; font-weight: 800; }
.p-legal tr + tr td { border-top: 1px solid rgba(16, 42, 84, .06); }
.p-legal code { color: var(--p-blue); background: #fff; padding: .05rem .3rem; border-radius: 6px; }
.p-legal-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 14px; background: #F4F8FE; }
.p-legal-tabs button { border: 0; background: none; padding: .45rem .8rem; border-radius: 11px; font-weight: 700; color: var(--p-muted); font-size: .88rem; }
.p-legal-tabs button.on { background: #fff; color: var(--p-blue); box-shadow: 0 2px 8px rgba(16, 42, 84, .08); }
.p-legal-sheet .p-qs-panel { max-width: 720px; text-align: left; }
.p-legal-page { max-width: 760px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.p-legal-page header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.p-legal-page h1 { font-size: 1.6rem; font-weight: 800; color: var(--p-navy); margin: 1rem 0; }
.p-legal-check { display: flex; gap: .6rem; align-items: flex-start; text-align: left; font-size: .88rem; color: var(--p-navy); cursor: pointer; }
.p-legal-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--p-blue); }
.p-legal-check a, .p-legal-read a, .p-auth-legal a { font-weight: 700; }
.p-auth-legal { margin-top: 1.2rem; text-align: center; font-size: .8rem; color: var(--p-muted); }
.p-auth-legal a { color: var(--p-muted); }
.p-legal-gate .p-qs-panel { text-align: center; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
.p-legal-points { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; }
.p-legal-points li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .7rem; margin-bottom: .4rem; border-radius: 14px; background: #F4F8FE; font-size: .9rem; color: var(--p-navy); }
.p-legal-points li span:first-child { font-size: 1.15rem; line-height: 1.2; }
.p-legal-read { margin-bottom: .9rem; font-size: .9rem; }
.p-legal-gate .p-legal-check { margin-bottom: 1rem; }

/* v158 a school leaving PUCHURI */
.p-close-note { display: flex; gap: .75rem; align-items: center; padding: .85rem 1rem; margin-bottom: .75rem; border-radius: 18px; background: #FFF1F1; color: #9B1C1F; text-decoration: none; }
.p-close-note > .bi:first-child { font-size: 1.4rem; flex: 0 0 auto; }
.p-close-note div { flex: 1 1 auto; min-width: 0; }
.p-close-note b { display: block; }
.p-close-note span { display: block; font-size: .85rem; color: #7A2E30; }
a.p-close-note:hover { color: #9B1C1F; }

/* v160 Platform → Website editor */
.p-ws { max-width: 900px; }
.p-ws-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: #fff; border-radius: 20px; padding: .8rem 1rem; margin-bottom: 1rem; box-shadow: var(--p-shadow); }
.p-ws-bar > div:first-child { flex: 1 1 200px; }
.p-ws-bar b { display: block; color: var(--p-navy); }
.p-ws-bar small { color: var(--p-muted); }
.p-ws-lang { display: inline-flex; gap: .2rem; background: #F4F8FE; padding: .2rem; border-radius: 12px; }
.p-ws-lang button { border: 0; background: none; font-weight: 800; padding: .35rem .7rem; border-radius: 10px; color: var(--p-muted); }
.p-ws-lang button.on { background: #fff; color: var(--p-blue); box-shadow: 0 2px 8px rgba(16, 42, 84, .08); }
.p-ws-sec { background: #fff; border-radius: 20px; margin-bottom: .7rem; box-shadow: var(--p-shadow); }
.p-ws-sec summary { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.p-ws-sec summary::-webkit-details-marker { display: none; }
.p-ws-sec summary .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.p-ws-sec summary .tx { flex: 1; min-width: 0; }
.p-ws-sec summary b { display: block; color: var(--p-navy); }
.p-ws-sec summary small { color: var(--p-muted); }
.p-ws-sec[open] .chev { transform: rotate(180deg); }
.p-ws-sec .ic.tone-blue { background: linear-gradient(135deg, #3FA2FF, #1565D8); } .p-ws-sec .ic.tone-green { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.p-ws-sec .ic.tone-amber { background: linear-gradient(135deg, #FFC24B, #F59E0B); } .p-ws-sec .ic.tone-sky { background: linear-gradient(135deg, #5CD0FF, #1EA0F0); }
.p-ws-sec .ic.tone-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); } .p-ws-sec .ic.tone-grey { background: linear-gradient(135deg, #B8C2D3, #8792A8); }
.p-ws-body { padding: 0 1rem 1rem; display: grid; gap: .7rem; }
.p-ws-field { display: block; margin: 0; }
.p-ws-field .lbl { display: block; font-weight: 700; font-size: .85rem; color: var(--p-navy); margin-bottom: .25rem; }
.p-ws-field .lbl em { font-style: normal; font-size: .7rem; background: #E8F1FE; color: var(--p-blue); border-radius: 6px; padding: 0 .3rem; margin-left: .2rem; }
.p-ws-check { display: flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--p-navy); }
.p-ws-check input { width: 20px; height: 20px; accent-color: var(--p-blue); }
.p-ws-media { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.p-ws-media img, .p-ws-media .ph { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #F4F8FE; display: grid; place-items: center; color: var(--p-muted); }
.p-ws-list { display: grid; gap: .6rem; }
.p-ws-item { border-radius: 16px; background: #F4F8FE; padding: .7rem; display: grid; gap: .6rem; }
.p-ws-item-h { display: flex; align-items: center; gap: .3rem; }
.p-ws-item-h b { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--p-blue); font-size: .8rem; margin-right: .3rem; }
.p-ws-plans { display: flex; flex-wrap: wrap; gap: .4rem; }
.p-ws-plans span { background: #F4F8FE; border-radius: 12px; padding: .4rem .7rem; font-size: .85rem; color: var(--p-muted); }
.p-ws-plans span b { color: var(--p-navy); margin-right: .35rem; }
.p-ws-plans .tr { background: #E6F6EB; color: #15803D; font-weight: 700; }
.p-install-btn.pulse { animation: p-install-pulse 1.6s ease-in-out 3; box-shadow: 0 0 0 0 rgba(21, 101, 216, .5); }
@keyframes p-install-pulse { 50% { box-shadow: 0 0 0 10px rgba(21, 101, 216, 0); transform: scale(1.02); } }

/* v162 Platform → Privacy & cookies */
.p-lt { max-width: 980px; }
.p-lt-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-bottom: .7rem; }
.p-lt-card { background: #fff; border-radius: 20px; box-shadow: var(--p-shadow); overflow: hidden; }
.p-lt-tools { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .55rem; background: #F4F8FE; }
.p-lt-tools button { border: 0; background: #fff; min-width: 38px; height: 36px; border-radius: 10px; color: var(--p-navy); font-weight: 700; padding: 0 .55rem; }
.p-lt-tools button.on { background: var(--p-blue); color: #fff; }
.p-lt-tools select { border: 0; background: #fff; height: 36px; border-radius: 10px; padding: 0 .5rem; max-width: 240px; font-size: .85rem; color: var(--p-navy); }
.p-lt-edit { min-height: 420px; max-height: 70vh; overflow-y: auto; padding: 1rem 1.2rem; outline: none; }
.p-lt-edit:focus { box-shadow: inset 0 0 0 2px rgba(30, 160, 240, .25); }
.p-lt-src { display: block; width: 100%; min-height: 420px; height: 60vh; border: 0; padding: 1rem; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #1F2A44; outline: none; resize: vertical; }
.p-lt-foot { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; margin-top: .7rem; }
.p-lt-foot small { margin-right: auto; }

/* Platform → Demo requests */
.p-dr { max-width: 820px; }
.p-dr-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .9rem; }
.p-dr-sum > div { border-radius: 18px; padding: .75rem .9rem; display: flex; flex-direction: column; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .07); }
.p-dr-sum b { font-size: 1.6rem; line-height: 1.1; }
.p-dr-sum span { font-size: .82rem; font-weight: 700; color: var(--p-muted); }
.p-dr-sum .tone-blue b { color: var(--p-blue); } .p-dr-sum .tone-amber b { color: #C7820B; } .p-dr-sum .tone-green b { color: var(--p-green); }
.p-dr-sum > div.tone-blue, .p-dr-sum > div.tone-amber, .p-dr-sum > div.tone-green { background: #fff; }
.p-dr-search { position: relative; margin-bottom: .8rem; }
.p-dr-search .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); }
.p-dr-search .form-control { padding-left: 2.6rem; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(13, 59, 122, .07); height: 48px; }
.p-dr-list { display: grid; gap: .55rem; }
.p-dr-item { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 18px; padding: .8rem .9rem; box-shadow: 0 2px 12px rgba(13, 59, 122, .06); transition: transform .12s; }
.p-dr-item:active { transform: scale(.99); }
.p-dr-item.is-new { box-shadow: inset 4px 0 0 var(--p-blue), 0 2px 12px rgba(13, 59, 122, .08); }
.p-dr-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; color: #fff !important; }
.p-dr-ic.tone-blue { background: linear-gradient(135deg, #3B8BFF, #1565D8); } .p-dr-ic.tone-amber { background: linear-gradient(135deg, #FFC24D, #F08C00); }
.p-dr-ic.tone-green { background: linear-gradient(135deg, #3FD07A, #1E9E4A); } .p-dr-ic.tone-grey { background: linear-gradient(135deg, #A9B4C4, #7A869A); }
.p-dr-tx { flex: 1; display: flex; flex-direction: column; }
.p-dr-tx b { font-size: .98rem; color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-dr-tx small { color: var(--p-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-dr-tx em { font-style: normal; font-size: .85rem; color: var(--p-text); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-dr-side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.p-dr-side small { color: var(--p-muted); font-size: .75rem; font-weight: 700; }
.p-dr-rep { font-size: .72rem; font-weight: 800; color: #C7820B; }
.p-dr-foot { margin: 1rem 0 0; font-size: .84rem; color: var(--p-muted); display: flex; gap: .4rem; }
.p-dr-hero { display: flex; align-items: center; gap: .85rem; margin: .2rem 0 .9rem; }
.p-dr-hero .p-dr-ic { width: 56px; height: 56px; border-radius: 18px; font-size: 1.5rem; }
.p-dr-hero small { color: var(--p-muted); font-weight: 700; }
.p-dr-hero h3 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.p-dr-acts { display: flex; gap: .6rem; margin-bottom: .9rem; }
.p-dr-acts .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 14px; padding: .7rem; font-weight: 800; border: 0; }
.p-dr-rows { display: grid; gap: .55rem; background: #F6F9FE; border-radius: 16px; padding: .85rem 1rem; }
.p-dr-rows > div { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; word-break: break-word; }
.p-dr-rows .bi { color: var(--p-blue); margin-top: .1rem; }
.p-dr-msg { margin-top: .7rem; background: #FFF8E8; border-radius: 16px; padding: .85rem 1rem; }
.p-dr-lbl { display: block; margin: 1rem 0 .45rem; font-weight: 800; font-size: .9rem; }
.p-dr-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.p-dr-status button { border: 0; border-radius: 14px; padding: .6rem .3rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; font-weight: 800; font-size: .8rem; background: #F2F5FA; color: var(--p-muted); }
.p-dr-status button .bi { font-size: 1.15rem; }
.p-dr-status button.on.tone-blue { background: var(--p-blue); color: #fff; } .p-dr-status button.on.tone-amber { background: #F08C00; color: #fff; }
.p-dr-status button.on.tone-green { background: var(--p-green); color: #fff; } .p-dr-status button.on.tone-grey { background: #7A869A; color: #fff; }
.p-dr-sheet textarea { border: 0; background: #F2F5FA; border-radius: 14px; }
@media (max-width: 575.98px) { .p-dr-side .p-badge { display: none; } }
/* Platform → Website: All other texts */
.p-ws-find { position: relative; margin-bottom: .6rem; }
.p-ws-find .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--p-muted); }
.p-ws-find .form-control { padding-left: 2.4rem; }
.p-ws-tgroup + .p-ws-tgroup { margin-top: .6rem; }
.p-ws-thead { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--p-blue); margin: .8rem 0 .35rem; }
.p-ws-txt.changed .form-control { box-shadow: inset 3px 0 0 var(--p-amber); }
.p-ws-undo { border: 0; background: #FEF3E2; color: #B26A00; font-weight: 800; font-size: .72rem; border-radius: 999px; padding: .05rem .5rem; margin-left: .3rem; }
.p-ws-tgroup { display: grid; gap: .6rem; } .p-ws-tgroup[hidden], .p-ws-txt[hidden] { display: none; }
.p-dr-topic { display: inline-block; margin-right: .4rem; padding: 0 .45rem; border-radius: 6px; background: #F1ECFF; color: #6D28D9; font-size: .72rem; font-weight: 800; vertical-align: 2px; }

/* Chat: files left today (in the attach panel) */
.p-attach { flex-direction: column; gap: .7rem; }
.p-attach-row { display: flex; gap: 1.1rem; }
.p-attach button.off span { filter: grayscale(1); opacity: .45; }
.p-attach-left { border-top: 1px solid #EEF2F7; padding-top: .6rem; display: grid; gap: .3rem; }
.p-attach-left:empty { display: none; }
.p-attach-left small { font-size: .7rem; font-weight: 800; color: #8A94A6; text-transform: uppercase; letter-spacing: .04em; }
.p-attach-left small.again { text-transform: none; letter-spacing: 0; color: #B26A00; }
.p-attach-left div { display: flex; gap: .4rem; flex-wrap: wrap; }
.p-attach-left span { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: #EEF8F1; color: #1E7A3E; font-size: .78rem; font-weight: 700; }
.p-attach-left span b { font-weight: 800; }
.p-attach-left span.low { background: #FEF3E2; color: #B26A00; }
.p-attach-left span.none { background: #FDECEC; color: #C62828; }

/* Photo gallery: swipe through the photos of a post or a message */
.p-gal { position: fixed; inset: 0; z-index: 7000; background: #05080D; display: flex; flex-direction: column; animation: p-fade .15s ease-out; }
.p-gal.out { opacity: 0; transition: opacity .15s; }
.p-gal-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: calc(.7rem + env(safe-area-inset-top)) .8rem .7rem 1.1rem; background: linear-gradient(rgba(0, 0, 0, .55), transparent); color: #fff; }
.p-gal-n { font-weight: 800; font-size: .95rem; letter-spacing: .02em; }
.p-gal-acts { display: flex; gap: .4rem; }
.p-gal-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; }
.p-gal-btn:hover { background: rgba(255, 255, 255, .26); }
.p-gal-btn[data-del]:hover { background: rgba(229, 72, 77, .55); }
.p-gal-track { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; }
.p-gal-track::-webkit-scrollbar { display: none; }
.p-gal-slide { flex: 0 0 100%; height: 100%; min-height: 0; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 4.2rem .5rem 5.6rem; }
.p-gal.one .p-gal-slide { padding-bottom: 1.5rem; }
.p-gal-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.p-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.3rem; display: grid; place-items: center; }
.p-gal-nav:hover { background: rgba(255, 255, 255, .28); }
.p-gal-nav.prev { left: 1rem; } .p-gal-nav.next { right: 1rem; }
.p-gal-nav:disabled, .p-gal.one .p-gal-nav { display: none; }
@media (pointer: coarse) { .p-gal-nav { display: none; } }
.p-gal-thumbs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: safe center; gap: .4rem; overflow-x: auto; padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .6)); scrollbar-width: none; }
.p-gal-thumbs:empty { display: none; }
.p-gal-thumbs button { flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #111; opacity: .55; transition: opacity .15s, border-color .15s; }
.p-gal-thumbs button.on { opacity: 1; border-color: #fff; }
.p-gal-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Press and hold menus (mark read / unread) */
.p-ci, .p-up { -webkit-touch-callout: none; }
.p-holding { transform: scale(.985); transition: transform .3s; background: rgba(21, 101, 216, .05) !important; }
.p-ci-n.dot { width: 12px; height: 12px; min-width: 12px; padding: 0; border-radius: 50%; }
.p-act-sheet .p-qs-panel { max-width: 460px; }
.p-act-title { font-weight: 800; color: var(--p-text); text-align: center; padding: .1rem .5rem .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-act-list { display: grid; gap: .45rem; }
.p-act-list button { display: flex; align-items: center; gap: .85rem; width: 100%; border: 0; border-radius: 16px; background: #F4F7FB; padding: .75rem .9rem; font-weight: 800; font-size: 1rem; color: var(--p-text); text-align: left; }
.p-act-list button:active { transform: scale(.985); }
.p-act-list .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff !important; font-size: 1.1rem; flex: 0 0 auto; }
.p-act-list .ic.tone-blue { background: linear-gradient(135deg, #3B8BFF, #1565D8); } .p-act-list .ic.tone-green { background: linear-gradient(135deg, #3FD07A, #1E9E4A); }
.p-act-list .ic.tone-red { background: linear-gradient(135deg, #FF6B6B, #E03131); } .p-act-list .ic.tone-amber { background: linear-gradient(135deg, #FFC24D, #F08C00); }
.p-act-list button.danger { color: #C62828; }
/* a child's parents: long names wrap, the small labels never break in two */
.p-parent-name { overflow-wrap: anywhere; }
.p-parent-meta > span { white-space: nowrap; flex: 0 0 auto; }
/* Language: header button, sign-in pill, My account row, and the picker sheet */
.p-lang-btn { display: inline-flex; align-items: center; gap: .35rem; height: 40px; padding: 0 .75rem; border-radius: 12px; font-weight: 800; font-size: .85rem; }
.p-lang-btn .bi { font-size: 1rem; }
.p-lang-pill { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .5rem .9rem; background: rgba(255, 255, 255, .92); color: var(--p-navy); font-weight: 800; font-size: .88rem;
  box-shadow: 0 6px 18px -8px rgba(13, 59, 122, .35); }
.p-lang-pill .bi-chevron-down { font-size: .7rem; opacity: .7; }
button.p-acc-lang { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; }
.p-acc-lang .val { margin-left: auto; color: var(--p-muted); font-weight: 700; font-size: .9rem; }
.p-lang-sheet .p-qs-panel { max-width: 440px; }
.p-lang-list { display: grid; gap: .5rem; padding-bottom: .4rem; }
.p-lang-list button { display: flex; align-items: center; gap: .9rem; width: 100%; border: 0; border-radius: 18px; background: #F4F7FB; padding: .8rem 1rem; text-align: left; transition: background .15s, box-shadow .15s; }
.p-lang-list button.on { background: #EAF2FF; box-shadow: inset 0 0 0 2px var(--p-blue); }
.p-lang-list .code { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: .85rem; color: #fff !important; flex: 0 0 auto; }
.p-lang-list .code.tone-blue { background: linear-gradient(135deg, #3B8BFF, #1565D8); } .p-lang-list .code.tone-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.p-lang-list .code.tone-green { background: linear-gradient(135deg, #3FD07A, #1E9E4A); } .p-lang-list .code.tone-grey { background: #94A3B8; }
.p-lang-list .tx { flex: 1; display: flex; flex-direction: column; }
.p-lang-list .tx b { color: var(--p-text); font-size: 1.02rem; }
.p-lang-list .tx small { color: var(--p-muted); font-weight: 600; }
.p-lang-list .ok { color: var(--p-blue); font-size: 1.3rem; }
.p-lang-list .no { color: #CBD3DF; font-size: 1.3rem; }
.swal2-container { z-index: 8000 !important; } /* above full-screen views (photo gallery) */
/* Gallery: select several photos */
.p-gal-pick { position: absolute; inset: 0; z-index: 5; background: #05080D; display: flex; flex-direction: column; }
.p-gal-pick[hidden] { display: none; }
.p-gal-pick-top { display: flex; align-items: center; gap: .7rem; padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem .8rem; color: #fff; }
.p-gal-pick-top b { flex: 1; font-size: 1.05rem; }
.p-gal-all { border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; border-radius: 999px; padding: .5rem .9rem; font-size: .88rem; }
.p-gal-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; align-content: start; }
@media (min-width: 768px) { .p-gal-grid { grid-template-columns: repeat(5, 1fr); } }
.p-gal-grid button { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: #111; overflow: hidden; }
.p-gal-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.p-gal-grid button.on img { transform: scale(.86); border-radius: 8px; }
.p-gal-grid button.on { background: #0F3D8A; }
.p-gal-grid i { position: absolute; top: .4rem; right: .4rem; font-size: 1.35rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.p-gal-grid button.on i { color: #3B8BFF; background: #fff; border-radius: 50%; line-height: 1; text-shadow: none; }
.p-gal-pick-bar { padding: .7rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
.p-gal-pick-bar .btn { border-radius: 16px; font-weight: 800; }
.p-gal img { -webkit-touch-callout: none; user-select: none; }
/* Website editor: pick a school's logo */
.p-ws-sl { display: grid; gap: .45rem; max-height: 60vh; overflow-y: auto; padding-bottom: .4rem; }
.p-ws-sl button { display: flex; align-items: center; gap: .8rem; width: 100%; border: 0; border-radius: 16px; background: #F4F7FB; padding: .6rem .8rem; text-align: left; font-weight: 800; color: var(--p-text); }
.p-ws-sl button:disabled { opacity: .55; }
.p-ws-sl img { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; }
.p-ws-sl span { flex: 1; min-width: 0; }
.p-ws-sl i { color: var(--p-green); font-size: 1.3rem; }
.p-ws-sl small { color: var(--p-muted); }
/* Demo request → school */
.p-dr-make { margin-bottom: .8rem; border-radius: 16px; font-weight: 800; color: #fff; border: 0; background: linear-gradient(135deg, #3FD07A, #1E9E4A); box-shadow: 0 10px 22px -12px rgba(30, 158, 74, .7); }
.p-dr-make:hover { color: #fff; filter: brightness(1.05); }
.p-dr-made { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; padding: .8rem 1rem; border-radius: 16px; background: #EAF8EF; color: #15803D; font-weight: 800; text-decoration: none; }
.p-dr-made span { flex: 1; }

/* ---- Platform → System (v185) ------------------------------------------------------------------- */
.p-sys { max-width: 760px; }
.p-sys-env { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 16px; background: var(--p-blue-soft, #EAF2FE); }
.p-sys-env > i { font-size: 1.5rem; }
.p-sys-env b { display: block; font-size: 1.05rem; }
.p-sys-env small { display: block; color: var(--p-muted); overflow-wrap: anywhere; }
.p-sys-env.tone-green { background: #E7F6EC; } .p-sys-env.tone-green > i { color: var(--p-green); }
.p-sys-env.tone-amber { background: var(--p-amber-soft); } .p-sys-env.tone-amber > i { color: #C27C0E; }
.p-sys-env.tone-grey { background: #F1F3F7; } .p-sys-env.tone-grey > i { color: var(--p-muted); }
.p-sys-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }
.p-sys-facts > div { background: #F6F8FB; border-radius: 12px; padding: .55rem .7rem; min-width: 0; }
.p-sys-facts span { display: block; font-size: .75rem; color: var(--p-muted); }
.p-sys-facts b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sys-state { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 14px; margin-bottom: .8rem; }
.p-sys-state > i { font-size: 1.4rem; line-height: 1; }
.p-sys-state b { display: block; } .p-sys-state small { color: var(--p-muted); }
.p-sys-state.ok { background: #E7F6EC; } .p-sys-state.ok > i { color: var(--p-green); }
.p-sys-state.warn { background: var(--p-amber-soft); } .p-sys-state.warn > i { color: #C27C0E; }
.p-sys-list { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .85rem; color: var(--p-muted); max-height: 180px; overflow: auto; }
.p-sys-list li { overflow-wrap: anywhere; }
.p-sys-log { background: #0F1B2D; color: #D7E3F4; border-radius: 12px; padding: .75rem .9rem; font-size: .78rem; max-height: 240px; overflow: auto; white-space: pre-wrap; margin: .8rem 0 0; }
.p-sys-help { display: flex; gap: .5rem; font-size: .85rem; color: var(--p-muted); margin: .8rem 0 0; }
.p-sys-help.danger { color: #B42318; background: var(--p-red-soft); border-radius: 12px; padding: .7rem .85rem; margin: 0 0 .9rem; }
.p-sys-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.p-sys-schools { display: grid; gap: .45rem; }
.p-sys-school { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1.5px solid #E4E9F1; border-radius: 14px; cursor: pointer; background: #fff; margin: 0; }
.p-sys-school .form-check-input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; }
.p-sys-school b { display: block; } .p-sys-school small { display: block; color: var(--p-muted); font-size: .8rem; }
.p-sys-school.on { border-color: var(--p-red); background: var(--p-red-soft); }
@media (max-width: 575.98px) { .p-sys-facts { grid-template-columns: 1fr 1fr; } .p-sys-facts > div:first-child { grid-column: 1 / -1; } }

/* The staging copy: a ribbon on every screen */
.p-env-ribbon { position: fixed; z-index: 9000; left: 50%; transform: translateX(-50%); top: env(safe-area-inset-top, 0); pointer-events: none;
    background: #F5A623; color: #3B2600; font-weight: 800; font-size: .68rem; letter-spacing: .08em; padding: .15rem .8rem; border-radius: 0 0 10px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.p-sys-sec { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.1rem 0 .2rem; }
.p-sys-sec b { display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.p-sys-sec b i { color: var(--p-blue); }
.p-sys-note { font-size: .82rem; color: var(--p-muted); margin: 0 0 .5rem; }
.p-sys-none { font-size: .85rem; color: var(--p-muted); background: var(--p-grey-soft); border-radius: 12px; padding: .6rem .8rem; margin: 0; }
.p-sys-school.is-off { opacity: .5; cursor: default; }
/* System → Health */
.p-sys-hload { display: flex; align-items: center; gap: .6rem; color: var(--p-muted); font-size: .9rem; }
.p-sys-state.bad { background: var(--p-red-soft); } .p-sys-state.bad > i { color: var(--p-red); }
.p-sys-hgroup { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--p-muted); margin: .9rem 0 .35rem; }
.p-sys-hlist { border: 1px solid var(--p-border); border-radius: 14px; overflow: hidden; }
.p-sys-h { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .8rem; background: #fff; }
.p-sys-h + .p-sys-h { border-top: 1px solid var(--p-border); }
.p-sys-h > i { font-size: 1.05rem; line-height: 1.35; flex: 0 0 auto; }
.p-sys-h b { display: block; font-size: .9rem; }
.p-sys-h small { display: block; color: var(--p-muted); font-size: .8rem; overflow-wrap: anywhere; }
.p-sys-h.is-ok > i { color: var(--p-green); }
.p-sys-h.is-warn > i { color: #C27C0E; } .p-sys-h.is-warn { background: #FFFBF2; }
.p-sys-h.is-bad > i { color: var(--p-red); } .p-sys-h.is-bad { background: #FFF6F6; }
.p-sys-h.is-info > i { color: #9AA6B8; }
.p-sys-errs { list-style: none; padding: 0; margin: .35rem 0 0; font-size: .76rem; color: var(--p-text); }
.p-sys-errs li { padding: .25rem 0; border-top: 1px dashed var(--p-border); overflow-wrap: anywhere; }
.p-sys-errs li span { color: var(--p-muted); margin-right: .4rem; }
.p-sys-errs code { font-size: .72rem; color: var(--p-muted); }
/* v196: the gallery's own menu and question appear above it */
.p-gal-menu { z-index: 7600; }
.p-gal-menu button.danger, .p-gal-menu button.danger .bi { color: #DC2626; }
.p-qs.p-gal-ask { z-index: 7500; }

/* v196: Today: two names on each child; search inside the class */
.p-kid-last { margin-top: -.3rem; font-size: .74rem; font-weight: 600; color: var(--p-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-day-filter input { padding-right: 2.6rem; min-height: 44px; }
.p-day-filter input::-webkit-search-cancel-button { display: none; }
.p-day-filter-x { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: #9AA6B8; font-size: 1.1rem; display: grid; place-items: center; }
.p-day-filter-x[hidden] { display: none; }
/* v197: swipe a photo up / down to close */
.p-gal-top, .p-gal-thumbs, .p-gal-nav { transition: opacity .15s; }
.p-gal.dragging .p-gal-top, .p-gal.dragging .p-gal-thumbs, .p-gal.dragging .p-gal-nav { opacity: 0; pointer-events: none; }
/* v200: the child is already at school today */
.p-nt-here { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .7rem; padding: .6rem .8rem; border-radius: 14px; background: #E7F6EC; color: #157A35; font-weight: 700; font-size: .9rem; }
.p-nt-here i { color: var(--p-green); }

/* v201: zoom in the photo viewer */
.p-gal-slide img { transform-origin: center center; will-change: transform; }
.p-gal.zoomed .p-gal-track { overflow-x: hidden; touch-action: none; }
.p-gal.zoomed .p-gal-slide img { cursor: grab; }
.p-gal.zoomed .p-gal-thumbs, .p-gal.zoomed .p-gal-nav { opacity: 0; pointer-events: none; }