body {
    background: #f4f7fb;
    color: var(--ink);
    font-family: "Almarai", "Segoe UI", Tahoma, sans-serif;
    font-size: 16px;
    max-width: 100%;
}
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}
.mast-logo,
.meter-ico svg,
.ico {
    max-width: none;
}
/* Lock background scroll while the mobile/tablet drawer is open */
body:has(.nav-open:checked) {
    overflow: hidden;
}
h1, h2, h3, .brand strong { font-family: "Almarai", "Segoe UI", Tahoma, sans-serif; }
.login-brand-name { font-family: "El Messiri", "Almarai", sans-serif; }

.nav-open { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.app-shell { min-height: 100vh; }
.app-shell.has-sidebar {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    background:
        radial-gradient(circle at top left, rgba(12, 61, 145, 0.05), transparent 30%),
        #f4f7fb;
}
.shell-body { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.app-main { min-width: 0; flex: 1; }

.side-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0a3278 0%, #0c3d91 48%, #0a2f70 100%);
    color: #fff;
    padding: 16px 12px 14px;
    z-index: 40;
    overflow: auto;
}
.side-brand {
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 10px;
    display: grid;
    justify-items: stretch;
    gap: 6px;
}
.side-brand-compact { justify-items: start; }
.side-nav-title {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, 0.55);
}
.side-year-box {
    display: none;
    margin-top: 10px;
    width: 100%;
    gap: 6px;
}
.side-year-label {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.62);
}
.side-year {
    margin: 0;
    text-align: right;
    display: grid;
    gap: 2px;
    color: rgba(255, 255, 255, 0.92);
}
.side-year strong {
    font-size: 14px;
    font-weight: 800;
    color: #ffd000;
}
.side-year-switch select {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 800;
    padding: 0 10px;
}
.side-year-switch select option {
    color: #0b2f6e;
    background: #fff;
}
.nav-backdrop {
    display: none;
}
.side-menu { display: grid; gap: 4px; flex: 1; align-content: start; }
.side-label {
    margin: 12px 10px 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255,255,255,.55);
    text-transform: none;
}
.side-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,.88);
    font-weight: 700;
    font-size: 14px;
}
.side-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-menu a.active {
    background: #ffd000;
    color: #0c3d91;
}
.side-menu a.active .ico { stroke: #0c3d91; }
.side-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: grid;
    gap: 8px;
}
.side-nav .who-chip.side-who,
.side-nav .who-chip.side-who b,
.side-nav .who-chip.side-who span {
    color: #fff !important;
}
.side-nav .who-chip.side-who small {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 600;
}
.side-nav .who-chip.side-who .avatar {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.side-nav a.side-profile {
    text-decoration: none;
    border-radius: 12px;
    padding: 8px;
    transition: background .15s ease;
}
.side-nav a.side-profile:hover { background: rgba(255, 255, 255, 0.1); }
.profile-meta {
    margin: 0;
    display: grid;
    gap: 12px;
}
.profile-meta > div {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f8;
}
.profile-meta dt {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}
.profile-meta dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
}
.profile-split { align-items: start; }

.mast {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 22px;
    background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
    border-bottom: 1px solid #e6eaf0;
    position: sticky;
    top: 0;
    z-index: 30;
}
.mast-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mast-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    min-width: 0;
}
.mast-logo {
    height: 48px;
    width: auto;
    display: block;
    background: transparent;
    object-fit: contain;
}
.mast-brand-text {
    display: grid;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}
.mast-brand-text b {
    font-size: 16px;
    color: var(--navy);
    white-space: nowrap;
}
.mast-brand-text small {
    color: #7b8aa3;
    font-size: 12px;
    font-weight: 700;
}
.burger {
    display: none;
    cursor: pointer;
    color: var(--navy);
    font-weight: 800;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    padding: 8px 12px;
    background: #fff;
}
.mast-tools {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mast-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    min-height: 44px;
    color: var(--navy);
    border-left: 1px solid #e6eaf0;
    position: relative;
}
.mast-item span { display: grid; line-height: 1.15; }
.mast-item b { font-size: 14px; }
.mast-item small { color: #8b97a8; font-size: 11px; font-weight: 700; }
.mast-bell { cursor: default; }
.mast-bell .bell-dot {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e21878;
    box-shadow: 0 0 0 2px #fff;
}
.mast-user {
    position: relative;
    border-left: 1px solid #e6eaf0;
    padding: 0 12px;
}
.mast-user summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    min-height: 44px;
}
.mast-user summary::-webkit-details-marker { display: none; }
.mast-user-text { display: grid; line-height: 1.15; text-align: right; }
.mast-user-text b { color: var(--navy); font-size: 14px; }
.mast-user-text small { color: #8b97a8; font-size: 11px; font-weight: 700; }
.mast-user-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(8, 42, 102, 0.12);
    padding: 8px;
    z-index: 40;
    display: grid;
    gap: 4px;
}
.mast-user-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
}
.mast-user-menu a:hover { background: #f3f7ff; color: var(--navy); }
.mast-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    min-height: 44px;
    border-left: 1px solid #e6eaf0;
    color: var(--navy);
    font-weight: 800;
    font-size: 13px;
}
.mast-logout:hover { color: var(--pink); }

/* Notifications bell */
.mast-notif { position: relative; }
.mast-notif > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    border-radius: 12px;
    color: var(--navy);
    position: relative;
}
.mast-notif > summary::-webkit-details-marker { display: none; }
.mast-notif > summary:hover { background: #eef4ff; }
.notif-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d64545;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mast-notif-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    width: min(320px, 86vw);
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(8, 42, 102, 0.12);
    padding: 8px;
    z-index: 40;
    display: grid;
    gap: 4px;
}
.mast-notif-item {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
.mast-notif-item:hover { background: #f3f7ff; }
.mast-notif-item.is-unread { background: #eef4ff; }
.mast-notif-item strong { font-size: 13px; }
.mast-notif-item small { color: var(--muted); font-size: 11px; }
.mast-notif-all {
    display: block;
    text-align: center;
    padding: 10px;
    margin-top: 4px;
    border-top: 1px solid #eef2f8;
    font-weight: 800;
    color: var(--navy);
}
.notif-list { display: grid; gap: 10px; }
.notif-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e7eef8;
    border-radius: 14px;
    background: #fff;
}
.notif-item.is-unread { border-color: #b7cdf3; background: #f5f8ff; }
.notif-item p { margin: 4px 0; color: #445; }
.notif-actions { display: flex; gap: 8px; align-items: flex-start; }

.announcement-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.announcement-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid #e7eef8;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    min-height: 120px;
}
.announcement-card:hover { border-color: var(--navy); background: #f7faff; }
.announcement-card p { margin: 0; color: #556; font-size: 14px; }
.announcement-card small { color: var(--muted); }
.announcement-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.announcement-mini-list li { display: grid; gap: 2px; }
.announcement-mini-list a { color: var(--navy); font-weight: 800; }
.announcement-body p { line-height: 1.7; white-space: pre-wrap; }

.subject-hub-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.subject-hub-meta h2 { margin: 0 0 4px; }
.subject-hub-meta p { margin: 0; color: #5b6b84; }
.subject-hub-teacher { margin-top: 8px !important; }
.subject-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.subject-hub-grid > .card { margin: 0; }
.subject-hub-grid .homework-board,
.subject-hub-grid .table-wrap { margin-top: 8px; }

@media (max-width: 1023px) {
    .subject-hub-grid { grid-template-columns: 1fr; }
}

/* Chat list pagination / filters */
.chat-list-filters {
    margin: 0 0 12px;
    gap: 8px !important;
}
.chat-list-filters label { font-size: 13px; }
.chat-list-filters input[type="search"],
.chat-list-filters select {
    width: 100%;
    min-height: 44px;
}
.chat-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef2f8;
}
.chat-page-meta { color: #5b6b84; font-size: 12px; margin: 0; }
.chat-page-nav { display: flex; gap: 8px; }

/* Attendance */
.attendance-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.att-status-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.att-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
}
.att-chip input { position: absolute; opacity: 0; pointer-events: none; }
.att-chip.is-active {
    border-color: var(--navy);
    background: #eef4ff;
    color: var(--navy);
    box-shadow: 0 0 0 2px rgba(12, 61, 145, 0.12);
}
.att-chip.att-absent.is-active { border-color: #c0392b; background: #fdecea; color: #c0392b; }
.att-chip.att-late.is-active { border-color: #d68910; background: #fef5e7; color: #b9770e; }
.att-chip.att-excused.is-active { border-color: #1e8449; background: #eafaf1; color: #1e8449; }
.att-note {
    width: 100%;
    min-width: 120px;
    min-height: 44px;
    border: 1px solid #d7e0ef;
    border-radius: 12px;
    padding: 8px 12px;
}
@media (max-width: 767px) {
    .attendance-table .att-status-group { gap: 4px; }
    .att-chip { min-height: 40px; padding: 0 10px; font-size: 12px; }
}
.app-footer {
    margin-top: auto;
    border-top: 1px solid #e6eaf0;
    background: #fff;
}
.app-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 32px 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    color: var(--ink);
    font-size: 13px;
}
.app-footer-inner p { margin: 0; }
.app-footer .muted { color: var(--muted); }
.who-chip, .year-chip, .logout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 700;
}
.who-chip span, .year-chip span { display: grid; line-height: 1.2; }
.who-chip small, .year-chip small { color: var(--muted); font-weight: 400; font-size: 12px; }
.who-chip b, .year-chip b { font-size: 14px; }
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8eef8;
    color: var(--navy);
    display: grid;
    place-items: center;
}
.logout-link {
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    padding: 8px 12px;
    background: #fff;
}
.ico { width: 18px; height: 18px; flex: none; }

/* legacy horizontal nav kept for print hide / old refs */
.main-nav { display: none; }

.context-bar { padding: 12px 28px 0; }
.is-home .context-bar { display: none; }
.context-bar .class-switch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #e4ebf6;
    border-radius: 14px;
    background: #fff;
}
.context-bar .class-switch label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
}
.context-bar .class-switch select,
.context-bar .class-switch .select-search,
.context-bar .class-switch .select-search-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.mast-year-menu {
    padding: 0;
}
.mast-year-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-height: 44px;
    padding: 0 14px;
    color: var(--navy);
}
.mast-year-menu > summary::-webkit-details-marker { display: none; }
.mast-year-text {
    display: grid;
    line-height: 1.15;
    text-align: right;
}
.mast-year-text b {
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mast-year-text b::after {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    margin-top: -2px;
    opacity: .7;
}
.mast-year-text small {
    color: #8b97a8;
    font-size: 11px;
    font-weight: 700;
}
.mast-year-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(8, 42, 102, 0.12);
    padding: 6px;
    z-index: 30;
    display: grid;
    gap: 2px;
}
.mast-year-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
    text-align: right;
}
.mast-year-dropdown a:hover,
.mast-year-dropdown a.active {
    background: #eef4ff;
}
.level-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 900px) {
    .level-grid { grid-template-columns: repeat(4, 1fr); }
}
.page-head .crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: #8b97a8;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    padding: 0;
    max-width: none;
}
.page-head .crumb a { color: #8b97a8; }
.page-head .crumb a:hover { color: var(--navy); }
.page-head .crumb strong { color: #0b2f6e; font-weight: 800; }
.page-head .crumb-sep { color: #b0bac8; font-weight: 700; line-height: 1; }
.page-head .crumb-ico {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: #9aa8bc;
}
.page-head .crumb-ico .ico,
.page-head .crumb-ico svg { width: 18px; height: 18px; }

.wrap { width: auto; max-width: 1280px; margin: 0 auto; padding: 4px 32px 48px; }
.wrap.wide { max-width: 1440px; }
.home-wrap { padding-top: 0; }

.home-top {
    margin-bottom: 18px;
}
.home-top .page-head {
    margin-bottom: 0;
}
.home-meters {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
    overflow: hidden;
    min-height: 88px;
}
.home-meter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px;
    border-left: 1px solid #eef2f8;
}
.home-meter:last-child { border-left: 0; }
.home-meter b {
    display: block;
    font-size: 22px;
    color: #0b2f6e;
    line-height: 1.1;
}
.home-meter span {
    display: block;
    color: #8b97a8;
    font-size: 12px;
    font-weight: 700;
}
.meter-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.meter-ico svg { width: 20px; height: 20px; }
.meter-ico.tone-purple { background: #f1e8ff; color: #7b4fd3; }
.meter-ico.tone-teal { background: #e5f7f4; color: #1f9d8c; }
.meter-ico.tone-blue { background: #e8f0ff; color: #2a63c7; }

.home-pick {
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
    padding: 14px;
    display: grid;
    gap: 8px;
}
.home-pick > span {
    color: #8b97a8;
    font-size: 13px;
    font-weight: 800;
}
.home-pick select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d9e3f2;
    border-radius: 12px;
    background: #f8fbff;
    padding: 0 12px;
    color: #0b2f6e;
    font-weight: 700;
}

.home-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: start;
}
.home-main { min-width: 0; }
.home-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}
.subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.subject-tile strong,
.subject-tile .subject-action,
.page-head h1,
.mast-brand-text b,
.dash-list strong,
.homework-card strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.subject-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1px solid #e7eef8;
    border-top: 3px solid var(--navy);
    border-radius: 18px;
    padding: 14px 14px 12px;
    color: var(--ink);
    min-height: 108px;
    box-shadow: 0 8px 20px rgba(15, 46, 96, 0.04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.subject-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 46, 96, 0.07);
    border-color: #d5e2f4;
}
.subject-tile:focus-visible {
    outline: 3px solid rgba(12, 61, 145, 0.25);
    outline-offset: 2px;
}
.subject-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.subject-tile strong {
    font-size: 16px;
    font-weight: 800;
    color: #0b2f6e;
    line-height: 1.35;
}
.subject-ico {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #eef4ff;
    color: #2a63c7;
}
.subject-ico svg { width: 18px; height: 18px; }
.subject-action {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #1d5bbf;
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
}
.subject-action i {
    font-style: normal;
    font-size: 16px;
    line-height: 1;
}
.tone-orange { border-top-color: #f0a04b; }
.tone-orange .subject-ico { background: #fff3e6; color: #d97706; }
.tone-pink { border-top-color: #e56aa8; }
.tone-pink .subject-ico { background: #fde8f2; color: #c2357d; }
.tone-teal { border-top-color: #2bb3a5; }
.tone-teal .subject-ico { background: #e5f7f4; color: #1f9d8c; }
.tone-purple { border-top-color: #8b6cf0; }
.tone-purple .subject-ico { background: #f1e8ff; color: #6d4ad4; }
.tone-blue { border-top-color: #3b82f6; }
.tone-blue .subject-ico { background: #e8f0ff; color: #2563eb; }
.tone-gold { border-top-color: #e4b93c; }
.tone-gold .subject-ico { background: #fff7dd; color: #b8860b; }
.tone-navy { border-top-color: #0c3d91; }
.tone-navy .subject-ico { background: #e8eefc; color: #0c3d91; }
.tone-mint { border-top-color: #34c38f; }
.tone-mint .subject-ico { background: #e8faf2; color: #0f9f6e; }

.motto-card {
    width: 100%;
    margin: 0;
    padding: 12px;
    border: 1px solid #e7eef8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 46, 96, 0.05);
    line-height: 0;
    overflow: hidden;
}
.motto-card img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    object-fit: unset;
    background: transparent;
}

.rank-card {
    margin-top: 18px;
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
    overflow: hidden;
}
.rank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f8;
}
.rank-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rank-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f0ff;
    color: #2a63c7;
}
.rank-ico svg { width: 22px; height: 22px; }
.rank-title h2 {
    margin: 0;
    font-size: 18px;
    color: #0b2f6e;
}
.rank-title p {
    margin: 3px 0 0;
    color: #8b97a8;
    font-size: 13px;
    font-weight: 700;
}
.rank-deco {
    width: 84px;
    height: 42px;
    border-radius: 40% 60% 55% 45%;
    background:
        radial-gradient(circle at 30% 40%, #9fd0f5 0 36%, transparent 37%),
        radial-gradient(circle at 62% 45%, #f3d27a 0 28%, transparent 29%),
        radial-gradient(circle at 78% 55%, #f3a4c8 0 24%, transparent 25%),
        radial-gradient(circle at 48% 70%, #8fd8c8 0 26%, transparent 27%);
    opacity: 0.9;
}
.rank-card .table-wrap,
.rank-card .rank-table-wrap {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.btn { background: var(--navy); color: #fff; border-color: var(--navy); border-radius: 12px; }
.btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e6eaf0;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
}
.btn-text.danger { color: var(--danger); }
.card, .panel, .class-card, .section-card {
    border-radius: 16px;
    border: 1px solid #e6eaf0;
    box-shadow: 0 1px 2px rgba(16, 40, 79, 0.04);
}
.class-card::before { display: none; }
.grade-block h2, .sections-home h3, .manage-block .section-head h2 {
    background: transparent;
    color: var(--navy);
    padding: 0;
    border-radius: 0;
    font-size: 18px;
}
.section-tools { display: flex; gap: 8px; align-items: center; padding: 0 16px 14px; }
.section-tools details, .row-actions details { position: relative; }
.section-tools details form, .row-actions details form {
    position: absolute;
    z-index: 6;
    left: 0;
    top: calc(100% + 6px);
    width: 240px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    padding: 12px;
}
.manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 8px; }
.row-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}
.stack > .row-actions,
.edit-row-form > .row-actions,
form.stack > .row-actions {
    position: relative;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    margin-top: 26px;
}
.stack > .row-actions::before,
.edit-row-form > .row-actions::before,
form.stack > .row-actions::before {
    content: "الإجراء";
    position: absolute;
    inset-inline-start: 0;
    top: -20px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #5c6b80;
    white-space: nowrap;
}
.row-actions .inline-delete { display: inline-flex; margin: 0; }
.row-actions .btn-save,
.row-actions .btn-ghost,
.row-actions .btn-danger-soft,
.row-actions .btn {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}
.check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.check[hidden] { display: none !important; }
.inline-delete { margin: 0; }
.toolbar-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.section-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
}
.edit-table-wrap {
    border-radius: 16px;
    border: 1px solid #e7eef8;
    overflow: auto;
    background: #fff;
    box-shadow: 0 8px 22px rgba(8, 42, 102, 0.04);
    padding: 12px;
}
.edit-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; table-layout: fixed; }
.edit-table th,
.edit-table td {
    padding: 12px 14px;
    text-align: right;
    vertical-align: middle;
    border-bottom: 0;
}
.edit-table tbody td {
    border-bottom: 1px solid #eef2f8;
    background: #fff;
}
.edit-table tbody tr:last-child > td { border-bottom: 0; }
.edit-table tbody tr:hover > td { background: #f7f9fd; }
.edit-table .col-name { width: auto; }
.edit-table .col-score { width: 120px; }
.edit-table .col-type { width: 168px; }
.edit-table .col-section { width: 230px; }
#roster-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
#roster-table .col-score { width: 76px; }
#roster-table .col-type { width: 148px; }
#roster-table .col-section { width: 220px; }
#roster-table .col-actions { width: 136px; }
#roster-table td.col-score { padding-inline: 6px; }
#roster-table select {
    padding-inline: 8px;
    font-size: 13px;
}
#roster-table input[name="student_code"] {
    padding-inline: 2px;
    text-align: center;
}
#roster-table .col-name { width: auto; }
#roster-table .col-name textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    field-sizing: content;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    padding: 8px 12px;
    resize: none;
    overflow: hidden;
    text-overflow: unset;
}
#add-student .edit-row-form .grow {
    flex: 1 1 420px;
}
#add-student .edit-row-form .grow input {
    text-overflow: unset;
    overflow: visible;
}
.edit-table .col-date { width: 160px; }
td.row-actions,
table:not(.edit-table) th.col-actions,
table:not(.edit-table) td.col-actions {
    width: 1%;
    white-space: nowrap;
}
.edit-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.edit-table select,
.edit-table textarea,
.edit-table .cell-input,
.table-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.table-wrap select,
.table-wrap textarea,
.answers-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.answers-box select,
.answers-box textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 0 16px;
    font-weight: 800;
    font-size: 14px;
    color: var(--navy, #0c3d91);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.edit-table textarea,
.table-wrap textarea,
.answers-box textarea {
    height: auto;
    min-height: 72px;
    border-radius: 12px;
    padding: 10px 14px;
    white-space: normal;
    overflow: auto;
}
.edit-table input[type="number"],
.table-wrap input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.edit-table input[type="number"]::-webkit-outer-spin-button,
.edit-table input[type="number"]::-webkit-inner-spin-button,
.table-wrap input[type="number"]::-webkit-outer-spin-button,
.table-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.edit-table .cell-input-center { text-align: center; font-weight: 800; letter-spacing: .04em; }
.edit-table input:hover,
.edit-table select:hover,
.edit-table textarea:hover,
.table-wrap input:hover,
.table-wrap select:hover,
.table-wrap textarea:hover,
.answers-box input:hover,
.answers-box select:hover {
    border-color: #b4c6e0;
}
.edit-table input:focus,
.edit-table select:focus,
.edit-table textarea:focus,
.table-wrap input:focus,
.table-wrap select:focus,
.table-wrap textarea:focus,
.answers-box input:focus,
.answers-box select:focus {
    background: #fff;
    border-color: var(--navy);
    outline: none;
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}
.edit-table tbody tr.answers-row > td {
    padding-top: 0;
    border-bottom: 1px solid #eef2f8;
    background: #f7f9fd !important;
}
.edit-table tbody tr:has(+ tr.answers-row) > td {
    border-bottom: 0;
}
.manage-page .answers-box .edit-row-form.add-row {
    background: transparent;
    border: 0;
    padding: 0;
}
.manage-page .col-actions .btn-ghost {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 11px;
}
.edit-table td { background: #fff; }
.edit-table tbody tr:nth-child(even) > td { background: #fafbfd; }
.edit-table tbody tr:hover > td { background: #f3f7ff; }
.edit-table tbody tr.is-selected > td { background: #eef4ff; }
.edit-table .center-check {
    display: flex;
    justify-content: center;
    margin: 0;
}
.answers-row > td {
    background: #f3f6fb;
    padding: 10px 14px 14px;
}
.answers-row .answers-details { margin: 0; }
.answers-row .answers-details summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d5e0f0;
    color: var(--navy);
    font-weight: 800;
}
.answers-row .answers-box {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #d8e2f0;
    background: #fff;
}
.compact-answers { table-layout: fixed; }
.compact-answers .col-name { width: auto; }
.compact-answers .col-score { width: 100px; }
.compact-answers .col-actions { width: 180px; }
.compact-answers th { font-size: 12px; }
.compact-answers td { padding: 8px 10px; }
.compact-answers input {
    min-height: 40px;
    font-size: 14px;
}
.fields-edit-table .col-type { width: 130px; }
.btn-danger-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1.5px solid #f0c3c3;
    background: #fff5f5;
    color: var(--danger);
    font-weight: 800;
}
.btn-danger-soft:hover { background: #ffe8e8; border-color: #e39a9a; }
.btn-save {
    min-height: 40px;
    border-radius: 11px;
    padding: 0 16px;
}
.edit-row-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}
.edit-row-form.add-row label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-weight: 700;
    color: var(--muted);
    font-size: 13px;
}
.edit-row-form .grow { flex: 1 1 260px; }
.edit-row-form .score-field { flex: 0 0 140px; }
.edit-row-form .type-field { flex: 0 0 140px; }
.edit-row-form .date-field { flex: 0 0 170px; }
.edit-row-form.add-row input {
    min-height: 44px;
    border: 1.5px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 8px 12px;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-weight: 700;
}
.btn-ghost:hover { border-color: var(--navy); background: #f4f7fc; }
.page-head {
    display: block;
    margin: 10px 0 12px;
}
.page-head-main { min-width: 0; }
.page-head h1 {
    font-size: 30px;
    margin: 0 0 4px;
    color: #0b2f6e;
    font-weight: 800;
    line-height: 1.25;
}
.page-head .lede {
    margin: 0;
    color: #8b97a8;
    font-size: 14px;
    font-weight: 700;
}
.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 46, 96, 0.04);
}
.page-toolbar .home-meters {
    width: 100%;
    min-height: 72px;
    box-shadow: none;
    border: 0;
    background: transparent;
}
.page-toolbar .mark-tools,
.page-toolbar .page-actions,
.page-toolbar .report-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
}
.page-toolbar .tool-field {
    display: grid;
    gap: 4px;
    margin: 0;
    min-width: 160px;
    font-size: 12px;
    font-weight: 700;
    color: #8b97a8;
}
.page-toolbar .tool-field select,
.page-toolbar .tool-field input[type="search"],
.page-toolbar .mark-tools select,
.page-toolbar .mark-tools input[type="search"],
.page-toolbar .report-toolbar select {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 0 16px;
    color: var(--navy, #0c3d91);
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.page-toolbar .tool-field input[type="search"],
.page-toolbar .mark-tools input[type="search"] {
    min-width: 220px;
    cursor: text;
}
.page-toolbar .tool-field select:hover,
.page-toolbar .tool-field input[type="search"]:hover,
.page-toolbar .mark-tools select:hover,
.page-toolbar .mark-tools input[type="search"]:hover {
    border-color: var(--navy);
    background: #f4f7fc;
}
.page-toolbar .tool-field select:focus,
.page-toolbar .tool-field input[type="search"]:focus,
.page-toolbar .mark-tools select:focus,
.page-toolbar .mark-tools input[type="search"]:focus,
.page-toolbar .report-toolbar select:focus {
    background: #fff;
    border-color: var(--navy);
    outline: none;
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}
.page-toolbar .btn-ghost,
.page-toolbar .btn {
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.mark-head { margin-bottom: 14px; }
.mark-tools {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.week-filter-bar {
    width: 100%;
    max-width: 100%;
}
.week-filter-bar label,
.week-filter-bar label:first-of-type {
    width: max-content;
    min-width: 0;
    max-width: 100%;
}
.week-filter-bar .week-filter-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    flex: 0 0 auto;
}
.page-toolbar .week-filter-bar {
    width: 100%;
    max-width: 100%;
}
.page-toolbar .mat-filter {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}
.page-toolbar .mat-filter label {
    display: grid;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #8b97a8;
}
.page-toolbar .mat-filter select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    padding: 0 16px;
    background: #fff;
    color: var(--navy, #0c3d91);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-toolbar .mat-filter select:focus {
    outline: none;
    border-color: var(--navy, #0c3d91);
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}
.page-toolbar .mat-filter-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
}
.note-sheet .note-picks {
    display: grid;
    gap: 8px;
    min-width: 300px;
}
.note-sheet .note-picks select,
.note-sheet .note-picks .select-search {
    width: 100%;
    min-width: 300px;
    max-width: none;
}
.note-sheet .note-picks .select-search-btn {
    height: auto;
    min-height: 44px;
    line-height: 1.5;
    padding: 8px 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
.note-sheet .note-picks .select-search-panel {
    width: min(560px, 92vw);
    min-width: min(340px, 92vw);
    max-width: none;
}
.note-sheet .note-picks .select-search-list {
    max-height: 340px;
}
.note-sheet .note-picks .select-search-item {
    height: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.55;
}
.sheet-scroll.compact { max-height: calc(100vh - 280px); }
.sticky-save {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    padding: 12px 14px;
    border: 1px solid #dce6f5;
    border-radius: 14px;
    margin-top: 12px;
    box-shadow: 0 -8px 24px rgba(8, 42, 102, 0.06);
}
.star-input { width: 84px; text-align: center; }
.settings-card h2 { margin-bottom: 10px; }
.answers-details { margin-top: 8px; }
.answers-details summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.answers-box { background: #f7f9fc; border: 1px solid #e6eaf0; border-radius: 12px; padding: 10px 12px; margin-top: 8px; }

/* Unified forms / tables / cards */
.ui-field,
.stack label,
.edit-row-form.add-row label,
.class-switch label,
.pick-card label {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.ui-control,
.stack input:not([type="checkbox"]):not([type="radio"]),
.stack select,
.stack textarea,
.class-switch select,
.pick-card select,
.edit-row-form.add-row input,
.card input[type="text"],
.card input[type="password"],
.card input[type="number"],
.card input[type="date"],
.card input[type="file"],
.card select,
.card textarea,
.split .card input,
.split .card select,
.split .card textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy, #0c3d91);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.password-field {
    position: relative;
    display: block;
    width: 100%;
}
.card .password-field input[type="password"],
.card .password-field input[type="text"],
.stack .password-field input[type="password"],
.stack .password-field input[type="text"] {
    padding-inline-end: 44px;
}
.password-eye {
    position: absolute;
    top: 50%;
    inset-inline-end: 5px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8ea0bc;
    display: grid;
    place-items: center;
    z-index: 1;
}
.password-eye:hover { color: var(--navy, #0c3d91); background: #eef3fb; }
.password-eye .eye-off { display: none; }
.password-eye.is-visible .eye-on { display: none; }
.password-eye.is-visible .eye-off { display: block; }
.card textarea,
.stack textarea,
.settings-card textarea {
    width: 100%;
    min-height: 96px;
    height: auto;
    border-radius: 12px;
    padding: 10px 14px;
    white-space: normal;
    overflow: auto;
    resize: vertical;
    line-height: 1.6;
}
.ui-control:hover,
.stack input:hover,
.stack select:hover,
.card input:hover,
.card select:hover,
.card textarea:hover {
    background: #fff;
    border-color: #aebfdb;
}
.ui-control:focus,
.stack input:focus,
.stack select:focus,
.stack textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus {
    outline: none;
    border-color: var(--navy);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}

.table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e7eef8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(8, 42, 102, 0.04);
    padding: 12px;
    max-width: 100%;
}
.table-wrap > table,
.edit-table,
.rank-table,
.ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.table-wrap > table th,
.table-wrap > table td,
.edit-table th,
.edit-table td,
.rank-table th,
.rank-table td,
.ui-table th,
.ui-table td {
    padding: 13px 16px;
    text-align: right;
    vertical-align: middle;
}
.table-wrap > table thead th,
.edit-table thead th,
.rank-table thead th,
.ui-table thead th {
    background: linear-gradient(180deg, #1553b8, #0c3d91);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    border: 0;
}
.table-wrap > table thead th:first-child,
.edit-table thead th:first-child,
.rank-table thead th:first-child,
.ui-table thead th:first-child {
    border-start-start-radius: 16px;
    border-end-start-radius: 16px;
}
.table-wrap > table thead th:last-child,
.edit-table thead th:last-child,
.rank-table thead th:last-child,
.ui-table thead th:last-child {
    border-start-end-radius: 16px;
    border-end-end-radius: 16px;
}
.table-wrap > table tbody td,
.edit-table tbody td,
.rank-table tbody td,
.ui-table tbody td {
    background: #fff;
    border-bottom: 1px solid #eef2f8;
}
.table-wrap > table tbody tr:last-child > td,
.edit-table tbody tr:last-child > td,
.rank-table tbody tr:last-child > td,
.ui-table tbody tr:last-child > td { border-bottom: 0; }
.table-wrap > table tbody tr:hover > td,
.edit-table tbody tr:hover > td,
.rank-table tbody tr:hover > td,
.ui-table tbody tr:hover > td { background: #f7f9fd; }

.card, .panel, .class-card, .section-card {
    background: #fff;
}
.lede { color: #8b97a8; margin: 0; }
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.pills a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #d5e0f0;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
}
.pills a.active,
.pills a:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.split { gap: 18px; }
.split > * { min-width: 0; max-width: 100%; }
.flash {
    max-width: 1280px;
    margin: 12px auto 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #eef6ff;
    border: 1px solid #c9dbf5;
    color: var(--navy);
    font-weight: 700;
}

.manage-page .manage-block { margin-bottom: 22px; }
.manage-page .settings-card { padding: 18px; }
.manage-page .edit-row-form.add-row {
    background: #f7f9fd;
    border: 1px solid #e4ebf6;
    border-radius: 14px;
    padding: 14px;
}
.manage-page .edit-table .col-actions { width: 360px; white-space: nowrap; }
.manage-page .accounts-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
.manage-page .accounts-table .col-name,
.manage-page .accounts-table .col-type,
.fit-table th,
.fit-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}
.manage-page .accounts-table .col-grade { width: 22%; }
.manage-page .accounts-table .col-account {
    width: 118px;
    white-space: nowrap;
}
.manage-page .accounts-table .col-status {
    width: 96px;
    white-space: nowrap;
    overflow-wrap: normal;
}
.manage-page .accounts-table .col-actions {
    width: 248px;
    white-space: nowrap;
}
.manage-page .accounts-table td.col-actions { padding-inline: 6px; }
.manage-page .accounts-table .col-name {
    overflow-wrap: break-word;
}
.manage-page .accounts-table .col-actions .row-actions {
    flex-wrap: nowrap;
    gap: 6px;
}
.manage-page .accounts-table .row-actions .btn-ghost,
.manage-page .accounts-table .row-actions .btn-danger-soft {
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
}
.fit-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
.manage-page .edit-table:not(.accounts-table) .col-actions .row-actions { flex-wrap: nowrap; }
.manage-page .empty-cell {
    text-align: center;
    color: var(--muted);
    padding: 28px 14px !important;
}
.manage-page .empty-state {
    text-align: center;
    padding: 36px 20px;
}
.manage-page .empty-state h2 { margin: 0 0 8px; }
.manage-page .btn-danger-soft:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.filter-inline {
    display: flex;
    align-items: end;
    gap: 10px;
}
.filter-inline label { min-width: 200px; }
.filter-inline select { min-height: 44px; }
.search-box {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #e4ebf6;
    border-radius: 14px;
    background: #f7f9fd;
}
.search-box.compact {
    margin: 0;
    min-width: 200px;
    padding: 8px 10px;
}
.search-box label {
    display: grid;
    gap: 6px;
    margin: 0;
    font-weight: 700;
    color: var(--muted);
    font-size: 13px;
}
.search-box label span { color: var(--navy); }
.search-box input,
.table-search-wrap input,
.student-search,
.child-search {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy, #0c3d91);
    width: 100%;
    max-width: 100%;
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-search-wrap {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--muted);
    font-size: 13px;
}
.report-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    width: 100%;
}
.report-toolbar label,
.week-filter-bar label,
.mark-tools label,
.page-toolbar .tool-field {
    flex: 1 1 220px;
    width: auto;
    min-width: min(100%, 200px);
    max-width: none;
}
.report-toolbar > .btn,
.report-toolbar > .btn-ghost,
.week-filter-bar > .btn,
.week-filter-bar > .btn-ghost,
.mark-tools > .btn,
.mark-tools > .btn-ghost,
.page-toolbar > .btn,
.page-toolbar > .btn-ghost {
    flex: 0 0 auto;
    align-self: flex-end;
}
.report-toolbar label:has([name="week_from"]),
.report-toolbar label:has([name="week_to"]) {
    flex: 1 1 340px;
    min-width: min(100%, 280px);
}
.report-toolbar label:has([name="week_from"]) .select-search-btn,
.report-toolbar label:has([name="week_to"]) .select-search-btn,
.report-toolbar label:has([name="week_from"]) .select-search-item,
.report-toolbar label:has([name="week_to"]) .select-search-item {
    height: auto;
    min-height: 44px;
    line-height: 1.45;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
.report-toolbar label:has([name="week_from"]) .select-search-panel,
.report-toolbar label:has([name="week_to"]) .select-search-panel {
    width: min(460px, 92vw);
    min-width: min(320px, 92vw);
    max-width: none;
}
.att-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    justify-content: start;
    gap: 14px 16px;
    align-items: end;
    width: 100%;
}
.page-toolbar .att-filter {
    width: 100%;
}
.att-filter label,
.page-toolbar .att-filter label {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #8b97a8;
}
.att-filter input,
.att-filter select,
.page-toolbar .att-filter input,
.page-toolbar .att-filter select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    padding: 0 16px;
    background: #fff;
    color: var(--navy, #0c3d91);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}
.att-filter input:focus,
.att-filter select:focus {
    outline: none;
    border-color: var(--navy, #0c3d91);
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}
.att-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    grid-column: 1 / -1;
    justify-content: flex-start;
}
.att-filter-actions .btn,
.att-filter-actions .btn-ghost,
.page-toolbar .att-filter-actions .btn,
.page-toolbar .att-filter-actions .btn-ghost {
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.att-report-card {
    margin-bottom: 16px;
}
.student-picker,
.child-picker {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e4ebf6;
    border-radius: 14px;
    background: #f7f9fd;
}
.student-picked,
.child-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    align-items: center;
}
.child-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #c9dbf5;
    background: #eef4ff;
    color: var(--navy);
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: right;
}
.child-chip span { display: grid; gap: 2px; line-height: 1.2; }
.child-chip b { font-size: 14px; }
.child-chip small { color: #6b7c93; font-size: 11px; font-weight: 700; }
.child-chip:hover { background: #dde8ff; }
.student-results,
.child-results {
    display: grid;
    gap: 6px;
    max-height: 240px;
    overflow: auto;
}
.pick-result,
.child-result {
    display: grid;
    gap: 2px;
    text-align: right;
    border: 1px solid #e4ebf6;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--navy);
    cursor: pointer;
}
.pick-result strong,
.child-result strong {
    font-size: 14px;
    font-weight: 800;
}
.pick-result small,
.child-result small {
    color: #6b7c93;
    font-size: 12px;
    font-weight: 700;
}
.pick-result:hover,
.child-result:hover {
    border-color: var(--navy);
    background: #f3f7ff;
}
.nest-form {
    margin-top: 10px;
    min-width: 260px;
    padding: 12px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
}
.edit-row-form.add-row select {
    width: 100%;
    min-height: 44px;
    border: 1.5px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 8px 12px;
    font-weight: 600;
}
.grade-pick {
    border: 1px solid #e4ebf6;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0;
    background: #f7f9fd;
}
.grade-pick legend {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
}
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 12px;
}
.check-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px 8px;
}
.check-grid .check {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}
.subjects-table .col-actions { width: 200px; }

.sections-page .grade-pills { margin-bottom: 16px; }
.crud-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: #f5f8fc;
    border: 1px solid #e4ebf6;
}
.crud-field {
    display: grid;
    gap: 6px;
    margin: 0;
    flex: 1 1 180px;
    max-width: 240px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.crud-field input,
.crud-field select {
    min-height: 44px;
    border: 1px solid #d7e1ef;
    border-radius: 10px;
    background: #fff;
    padding: 8px 12px;
    font-weight: 700;
}
.crud-bar .btn { min-height: 44px; align-self: end; }
.crud-bar .crud-field.grow { flex: 1 1 280px; max-width: none; }
.crud-bar .crud-field.date-field { flex: 0 0 190px; max-width: 190px; }
.homework-add .section-head {
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.homework-add .section-head h2 { margin: 0; }
.homework-add .section-head .hint { margin: 0; }

/* =========================================================
   Responsive Design System
   Mobile  ≤767 | Tablet 768–1023 | Desktop ≥1024 | Large ≥1440
   ========================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.empty-state {
    text-align: center;
    padding: 28px 16px;
    color: var(--muted);
}
.empty-state strong {
    display: block;
    color: var(--navy);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 6px;
}
.empty-state p,
.empty-state span {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.empty-cell {
    text-align: center !important;
    color: var(--muted);
    font-weight: 700;
    padding: 24px 12px !important;
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: min(70dvh, 720px);
}
.chat-pane { min-width: 0; }
.chat-pane-list {
    display: grid;
    gap: 12px;
    align-content: start;
}
.chat-start h2,
.chat-thread-list h2 {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--navy);
}
.chat-threads {
    display: grid;
    gap: 8px;
}
.chat-thread-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #e7eef8;
    background: #f8fbff;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.chat-thread-item:hover,
.chat-thread-item.is-active {
    background: #eef4ff;
    border-color: #c9daf5;
}
.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dfeaff;
    color: var(--navy);
    font-weight: 800;
    flex: 0 0 auto;
}
.chat-thread-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.chat-thread-meta strong {
    color: var(--navy);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-thread-meta em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #7b8aa3;
}
.chat-thread-meta small {
    color: #8b97a8;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-empty-pane {
    min-height: 360px;
    display: grid;
    place-items: center;
}
.chat-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: min(70dvh, 720px);
}
.chat-box.is-embedded { min-height: min(70dvh, 720px); }
.chat-conv-head {
    display: grid;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f8;
}
.chat-conv-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-conv-title strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
}
.chat-conv-title small {
    color: #8b97a8;
    font-size: 12px;
    font-weight: 700;
}
.chat-log {
    flex: 1;
    max-height: none;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #f3f7fc;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}
.chat-empty-log {
    margin: auto;
    text-align: center;
    color: #8b97a8;
    font-weight: 800;
    padding: 24px 12px;
}
.chat-empty-log span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
}
.chat-bubble {
    max-width: min(78%, 460px);
    padding: 10px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(15, 27, 45, .08);
    overflow-wrap: anywhere;
    box-shadow: 0 4px 12px rgba(15, 46, 96, 0.04);
}
.chat-bubble.mine {
    align-self: flex-start;
    background: #e8f3ff;
    border-color: #cfe2ff;
}
.chat-bubble.theirs {
    align-self: flex-end;
    background: #fff;
}
.chat-bubble strong {
    display: block;
    font-size: 12px;
    color: var(--navy);
}
.chat-bubble p { margin: .35rem 0; white-space: pre-wrap; line-height: 1.55; }
.chat-bubble small { opacity: .65; font-size: 11px; font-weight: 700; }
.chat-attachment-media { max-width: min(280px, 100%); border-radius: 8px; display: block; }
.chat-file-link { font-weight: 800; }
.chat-compose {
    display: grid;
    gap: 10px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.chat-compose-main {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.chat-compose textarea,
.chat-compose-main textarea {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 64px;
    border-radius: 14px;
}
.chat-compose-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}
.chat-link-field {
    display: grid;
    gap: 4px;
    flex: 1 1 240px;
    min-width: 180px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #8b97a8;
}
.link-prefix-field {
    display: flex;
    align-items: center;
    direction: ltr;
    width: 100%;
    min-height: 42px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.link-prefix {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 10px;
    background: #f4f7fc;
    color: #5c6b84;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    border-inline-end: 1px solid #e6eaf0;
}
.stack .link-prefix-field input[type="text"],
.chat-link-field .link-prefix-field input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 12px;
    color: var(--navy, #0c2148);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}
.link-prefix-field:focus-within {
    border-color: var(--navy, #0c3d91);
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}
.chat-attach {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-height: 42px;
}
.chat-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.chat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #d5e0f0;
    background: #fff;
    color: var(--navy, #0c2148);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.chat-attach-btn:hover {
    border-color: var(--navy, #0c3d91);
    background: #f4f7fc;
}
.chat-attach-name {
    font-size: 13px;
    font-weight: 700;
    color: #8b97a8;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}
.chat-back::before {
    content: "›";
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}

@media (min-width: 1440px) {
    .subject-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wrap { max-width: 1360px; }
    .wrap.wide { max-width: 1520px; }
}

@media (max-width: 1023px) {
    .app-shell.has-sidebar { grid-template-columns: 1fr; }
    .mast-logo { height: 44px; }
    .mast-year,
    .mast-bell { display: none; }
    .mast-brand-text b { font-size: 14px; }
    .mast-item small,
    .mast-logout span { display: none; }
    .side-nav {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 88vw);
        max-width: 320px;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 0 20px 50px rgba(8, 42, 102, .28);
        z-index: 50;
    }
    html[dir="rtl"] .side-nav {
        inset: 0 0 0 auto;
        transform: translateX(105%);
    }
    .nav-open:checked ~ .side-nav { transform: translateX(0); }
    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(8, 42, 102, .35);
        z-index: 45;
        cursor: pointer;
    }
    .nav-open:checked ~ .nav-backdrop { display: block; }
    .burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .mast {
        height: auto;
        min-height: 64px;
        padding: 8px 16px;
        gap: 8px;
    }
    .mast-tools { gap: 0; }
    .has-sidebar .mast-who,
    .has-sidebar .mast-logout { display: flex; }
    .mast-who small { display: none; }
    .side-foot { display: flex; }
    .side-year-box { display: grid; }
    .wrap { padding-left: 16px; padding-right: 16px; }
    .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manage-grid,
    .split,
    .home-board { grid-template-columns: 1fr; }
    .home-meters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: 0;
        overflow: visible;
    }
    .home-meter {
        flex: initial;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        padding: 12px 10px;
        border-left: 0;
        border-bottom: 0;
        border-inline-start: 1px solid #eef2f8;
        min-width: 0;
    }
    .home-meter:first-child { border-inline-start: 0; }
    .home-meter b { font-size: 20px; }
    .home-meter span { font-size: 11px; }
    .home-side {
        max-width: none;
        width: 100%;
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }
    .page-head {
        gap: 12px;
    }
    .page-head-main { min-width: 0; }
    .edit-table {
        table-layout: auto;
        min-width: 680px;
    }
    .accounts-table,
    .fit-table,
    #roster-table {
        min-width: 0;
        table-layout: fixed;
    }
    .edit-table .col-score,
    .edit-table .col-type,
    .edit-table .col-date { width: auto; min-width: 88px; }
    .edit-table .col-actions { width: 1%; min-width: 280px; white-space: nowrap; }
    .edit-table-wrap,
    .manage-page .table-wrap {
        padding: 8px;
    }
    .add-row,
    .edit-row-form,
    .stack {
        display: grid;
        gap: 10px;
    }
    .stack label,
    .edit-row-form label {
        display: grid;
        gap: 6px;
        min-width: 0;
    }
    .page-toolbar,
    .report-toolbar,
    .mark-tools,
    .page-actions,
    .page-toolbar .mat-filter {
        width: 100%;
        flex-wrap: wrap;
    }
    .page-toolbar .mat-filter label {
        flex: 1 1 calc(50% - 10px);
    }
    .class-switch select,
    .report-toolbar select,
    .filter-inline select {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .crud-bar .crud-field,
    .crud-bar .crud-field.grow,
    .crud-bar .crud-field.date-field {
        flex: 1 1 100%;
        max-width: none;
    }
    .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sheet-scroll {
        max-height: none;
        min-height: 220px;
    }
    .sheet-scroll::before {
        content: "مرّر الجدول أفقياً لعرض كل الأعمدة";
        display: block;
        position: sticky;
        right: 0;
        z-index: 5;
        padding: 8px 12px;
        background: #fff8e8;
        color: #8a6a00;
        font-size: 12px;
        font-weight: 800;
        border-bottom: 1px solid #f0e0a8;
    }
    .edit-table .row-actions,
    .edit-table .col-actions,
    td.row-actions {
        white-space: nowrap;
    }
    .edit-table .col-actions,
    td.row-actions {
        min-width: 240px;
        width: 1%;
    }
}

@media (max-width: 767px) {
    .mast-brand-text { display: none; }
    .mast-logo { height: 40px; }
    .mast-user-text b { font-size: 13px; }
    .mast-user-text small { display: none; }
    .mast-logout span { display: none; }
    .mast-item,
    .mast-user,
    .mast-logout {
        padding-left: 8px;
        padding-right: 8px;
        border-left: 0;
    }
    .wrap { padding: 4px 12px 32px; }
    .page-head {
        display: grid;
        gap: 10px;
    }
    .page-head h1 { font-size: 22px; line-height: 1.3; }
    .page-head .lede { font-size: 14px; }
    .page-toolbar { width: 100%; }
    .subject-grid { grid-template-columns: 1fr; }
    .subject-tile {
        min-height: 96px;
        gap: 10px;
        padding: 12px;
    }
    .subject-action {
        width: 100%;
        justify-content: space-between;
    }
    .home-meters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-meter {
        align-items: center;
        text-align: center;
        padding: 10px 6px;
    }
    .home-meter .meter-ico { width: 34px; height: 34px; }
    .home-side {
        grid-template-columns: 1fr;
    }
    .level-grid { grid-template-columns: 1fr; }
    .context-bar { padding: 10px 12px 0; }
    .class-switch { padding: 4px 0 8px; }
    .sheet { min-width: 720px; }
    table.sheet.final-entry-sheet { min-width: 100%; width: 100%; }
    .sheet .student {
        min-width: 160px;
        max-width: 200px;
        font-size: 14px;
    }
    .sheet th { min-width: 72px; font-size: 12px; }
    .mark.num,
    .final-input {
        width: 64px;
        min-width: 64px;
        min-height: 40px;
    }
    .savebar.sticky-save,
    .sticky-save {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: rgba(244, 247, 251, 0.96);
        backdrop-filter: blur(6px);
    }
    .savebar .btn,
    .sticky-save .btn {
        width: 100%;
    }
    .chat-compose-main { flex-wrap: wrap; }
    .chat-compose textarea { width: 100%; flex: 1 1 100%; min-height: 72px; }
    .chat-compose .btn { width: auto; min-width: 120px; min-height: 48px; }
    .pills { gap: 8px; }
    .pills a,
    .btn,
    .btn-ghost,
    .btn-danger {
        min-height: 44px;
    }
    .motto-card,
    .rank-card {
        max-width: 100%;
    }
    .motto-card { padding: 8px; border-radius: 18px; }
    .motto-card img { border-radius: 14px; }
    .final-grades-table { min-width: 520px; }
    .final-grades-table th,
    .final-grades-table td {
        padding: 8px;
        font-size: 13px;
    }
    .dash-list li {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .dash-list-side {
        width: 100%;
        justify-content: space-between;
    }

    /* Admin / list tables → card view */
    .edit-table-wrap,
    .manage-page .table-wrap {
        overflow: visible;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }
    table.js-card-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    table.js-card-table,
    table.js-card-table tbody {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-spacing: 0;
    }
    table.js-card-table tbody tr {
        display: grid;
        gap: 8px;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #e7eef8;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 16px rgba(15, 46, 96, 0.04);
    }
    table.js-card-table tbody tr.empty-row,
    table.js-card-table tbody tr:has(.empty-cell) {
        box-shadow: none;
    }
    table.js-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        width: 100%;
        border: 0 !important;
        padding: 4px 0 !important;
        background: transparent !important;
        text-align: right;
    }
    table.js-card-table tbody td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        color: #8b97a8;
    }
    table.js-card-table tbody td.col-actions,
    table.js-card-table tbody td:last-child:not([data-label]),
    table.js-card-table tbody td.col-actions::before {
        grid-template-columns: 1fr;
    }
    table.js-card-table tbody td.col-actions {
        padding-top: 8px !important;
        border-top: 1px solid #eef2f8 !important;
        margin-top: 4px;
    }
    table.js-card-table tbody td.col-actions::before,
    table.js-card-table tbody td.row-actions::before,
    table.js-card-table tbody td:has(> .row-actions)::before {
        content: "الإجراء";
    }
    table.js-card-table .row-actions {
        width: max-content;
        max-width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    table.js-card-table .row-actions .btn-save,
    table.js-card-table .row-actions .btn-ghost,
    table.js-card-table .row-actions .btn-danger-soft,
    table.js-card-table .row-actions .btn,
    table.js-card-table td.row-actions > .btn-ghost,
    table.js-card-table td.row-actions > .btn,
    table.js-card-table td.row-actions > form {
        flex: 0 0 auto;
        min-height: 40px;
        justify-content: center;
    }
    table.js-card-table input,
    table.js-card-table select,
    table.js-card-table textarea {
        width: 100%;
        min-width: 0;
    }

    /* Chat: list OR conversation on mobile */
    .chat-layout {
        grid-template-columns: 1fr;
        min-height: calc(100dvh - 170px);
        gap: 12px;
    }
    .chat-app.mode-list .chat-pane-conversation { display: none; }
    .chat-app.mode-thread .chat-pane-list { display: none; }
    .chat-app.mode-thread .chat-layout { min-height: calc(100dvh - 120px); }
    .chat-box,
    .chat-box.is-embedded {
        min-height: calc(100dvh - 140px);
        border-radius: 18px;
    }
    .chat-compose {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        align-items: stretch;
    }
    .chat-bubble { max-width: 88%; }
    .chat-empty-pane { min-height: 240px; }
    .chat-back { width: 100%; justify-content: center; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-meters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-meter {
        flex-direction: row;
        align-items: center;
        text-align: right;
    }
    .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-head h1 { font-size: 26px; }
    .home-side {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    .side-nav { width: min(260px, 70vw); }
    .sheet-scroll { max-height: min(58dvh, 360px); }
    .chat-layout { min-height: calc(100dvh - 120px); }
    .chat-box,
    .chat-box.is-embedded { min-height: calc(100dvh - 130px); }
    .chat-log { max-height: none; min-height: 120px; }
    .home-meters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-meter {
        flex-direction: row;
        border-bottom: 0;
        border-inline-start: 1px solid #eef2f8;
    }
    .mast { min-height: 56px; padding: 6px 12px; }
    .page-head h1 { font-size: 20px; }
    .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-side { grid-template-columns: 1fr 1fr; }
}

/* Parent portal — child switcher */
.child-switcher {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}
.child-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #d7e0ef;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    min-height: 64px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.child-chip:hover {
    border-color: var(--navy);
    background: #f4f7fc;
}
.child-chip.is-active {
    border-color: var(--navy);
    background: linear-gradient(180deg, #eef4ff, #fff);
    box-shadow: 0 0 0 2px rgba(12, 61, 145, 0.12);
}
.child-chip b {
    font-size: 15px;
    line-height: 1.3;
}
.child-chip small {
    color: #5b6b84;
    font-size: 12px;
}
.parent-context-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.parent-active-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    padding: 8px 4px;
}
.parent-active-label {
    font-size: 12px;
    color: #5b6b84;
    background: #eef2f8;
    border-radius: 999px;
    padding: 2px 10px;
}
.parent-active-child strong { font-size: 15px; }
.parent-active-child small { color: #5b6b84; }
.parent-child-summary {
    margin-bottom: 16px;
}
.parent-child-summary h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}
.parent-child-summary > p {
    margin: 0 0 12px;
    color: #5b6b84;
}
.parent-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.parent-child-hint { margin: 0 0 12px; }
.note-board-title {
    margin: 18px 0 10px;
    font-size: 1.15rem;
    color: var(--navy, #0c3d91);
}
.note-board {
    display: grid;
    gap: 14px;
}
.note-card {
    background: #fff;
    border: 1px solid #e4ebf6;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
    overflow: hidden;
}
.note-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    align-items: baseline;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f7faff, #fff);
    border-bottom: 1px solid #e7eef8;
}
.note-card-head strong {
    color: var(--navy, #0c3d91);
    font-size: 1.05rem;
}
.note-card-head span {
    color: #5b6b84;
    font-size: 13px;
    font-weight: 700;
}
.note-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}
.note-section {
    border: 1px solid #e6eef8;
    border-radius: 14px;
    padding: 10px 12px 8px;
    background: #fff;
    min-width: 0;
}
.note-section h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--navy, #0c3d91);
}
.note-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.note-section li {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f4f8ff;
    color: #16325c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}
.note-section li.is-support {
    background: #fff6ee;
    color: #7a3e12;
}
.note-section.is-behavior { border-top: 3px solid #0c3d91; }
.note-section.is-academic { border-top: 3px solid #0b8f86; }
.note-section.is-projects { border-top: 3px solid #d4a017; }
.note-section.is-arts { border-top: 3px solid #c2185b; }
.note-plain {
    margin: 0;
    padding: 14px 16px 16px;
    color: #16325c;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}
@media (max-width: 767px) {
    .note-sections { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .child-switcher { grid-template-columns: 1fr 1fr; gap: 8px; }
    .child-chip { min-height: 56px; padding: 10px 12px; }
    .parent-quick-links .btn,
    .parent-quick-links .btn-ghost { flex: 1 1 calc(50% - 8px); text-align: center; }
}

@media print {
    .mast, .main-nav, .side-nav, .context-bar, .crumb, .burger, .nav-backdrop,
    .child-switcher { display: none !important; }
    .app-shell.has-sidebar { display: block; }
    .note-card {
        break-inside: avoid;
        box-shadow: none;
        border-color: #c5d0e0;
    }
    .note-card-head,
    .note-section li {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.select-search {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.select-search-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden;
}
.select-search-btn {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 44px;
    color: var(--navy, #0c3d91);
    direction: rtl;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.select-search-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.select-search-panel {
    position: absolute;
    z-index: 50;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(440px, 100%);
    min-width: min(280px, 100%);
    max-width: 100%;
    top: calc(100% + 4px);
    display: grid;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid #d5e0f0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 35, 63, .16);
}
.select-search-panel[hidden] { display: none !important; }
.select-search-input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    direction: rtl;
    text-align: right;
}
.select-search-list {
    max-height: 240px;
    overflow: auto;
    display: grid;
    gap: 2px;
}
.select-search-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    border: 0;
    background: transparent;
    direction: rtl;
    text-align: right;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy, #0c3d91);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}
.select-search-item:hover,
.select-search-item.is-selected { background: #eef4ff; }
.select-search-empty { margin: 0; padding: 8px; color: var(--muted, #8b97a8); font-size: 13px; }
.stack .select-search,
.card .select-search,
.edit-row-form .select-search,
.pick-card .select-search,
.settings-card .select-search,
.mat-filter .select-search,
.att-filter .select-search,
.family-week-pick .select-search,
.context-bar .class-switch .select-search {
    display: block;
    width: 100%;
}
.stack .select-search-btn,
.card .select-search-btn,
.edit-row-form .select-search-btn,
.pick-card .select-search-btn,
.settings-card .select-search-btn,
.mat-filter .select-search-btn,
.att-filter .select-search-btn,
.family-week-pick .select-search-btn,
.context-bar .class-switch .select-search-btn {
    width: 100%;
}
.recipient-picks {
    border: 1px solid #e4ebf6;
    border-radius: 16px;
    padding: 14px;
    margin: 0 0 12px;
    background: #f8fbff;
}
.recipient-picks legend { font-weight: 800; padding: 0 6px; color: var(--navy, #0c3d91); }
.pick-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pick-modes .check {
    flex: 1 1 180px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    justify-content: flex-start;
    font-weight: 800;
    color: var(--navy, #0c3d91);
}
.pick-modes .check:has(input:checked) {
    border-color: #0c3d91;
    background: #eef4ff;
}
.stack input[type="checkbox"],
.stack input[type="radio"],
.recipient-picks input[type="checkbox"],
.recipient-picks input[type="radio"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 18px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    accent-color: #0c3d91;
}
.recipient-search {
    display: grid;
    gap: 4px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: #8b97a8;
}
.recipient-search input[type="search"] {
    width: 100%;
    height: 44px;
    min-height: 44px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    padding: 0 16px;
    color: var(--navy, #0c3d91);
    font-size: 14px;
    font-weight: 700;
}
.recipient-search input[type="search"]:focus {
    outline: none;
    border-color: var(--navy, #0c3d91);
    box-shadow: 0 0 0 3px rgba(12, 61, 145, 0.12);
}
.recipient-list {
    max-height: 220px;
    overflow: auto;
    display: grid;
    gap: 6px;
    margin-top: 8px;
}
.recipient-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    text-align: start;
}
.report-toolbar label.recipient-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy, #0c3d91);
    text-align: start;
}
.report-toolbar .recipient-item span {
    text-align: start;
}
.recipient-item:has(input:checked) {
    border-color: #b9cef0;
    background: #eef4ff;
}
.recipient-item[hidden] { display: none !important; }
#notes-board tbody tr[hidden] { display: none !important; }

.week-plan-card {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e7eef8;
    border-inline-start: 4px solid #0c3d91;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
}
.week-plan-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.week-plan-card-head p {
    margin: 0;
    color: #8b97a8;
    font-size: 12px;
    font-weight: 800;
}
.week-plan-card-head h2 {
    margin: 2px 0;
    color: #0b2f6e;
    font-size: 22px;
}
.week-plan-card-head span {
    color: #5d6b80;
    font-size: 13px;
    font-weight: 700;
}
.week-plan-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.week-plan-subjects li {
    padding: 6px 10px;
    border-radius: 12px;
    background: #eef4ff;
    color: #0c3d91;
    font-size: 13px;
    font-weight: 800;
}
.week-plan-empty {
    margin: 0;
    color: #6b7c93;
    font-size: 14px;
}
.family-board {
    display: grid;
    gap: 14px;
    margin: 8px 0 22px;
}
.family-board-head p,
.family-panel-head p {
    margin: 0;
    color: #8b97a8;
    font-size: 12px;
    font-weight: 800;
}
.family-board-head h2,
.family-panel-head h2 {
    margin: 2px 0;
    color: #0b2f6e;
    font-size: 26px;
    line-height: 1.2;
}
.family-board-head span,
.family-panel-head span {
    color: #5d6b80;
    font-size: 13px;
    font-weight: 700;
}
.family-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.family-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 210px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e7eef8;
    border-top: 3px solid var(--tone, #0c3d91);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
    color: inherit;
    text-decoration: none;
}
.family-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 46, 96, 0.08);
}
.family-card.tone-personal { --tone: #0c3d91; }
.family-card.tone-broadcast { --tone: #1f9d8c; }
.family-card.tone-thinking { --tone: #7b4fd3; }
.family-card-kicker {
    font-size: 14px;
    font-weight: 800;
    color: #0b2f6e;
}
.family-card b {
    font-size: 32px;
    line-height: 1;
    color: #0b2f6e;
}
.family-card small {
    color: #6b7c93;
    font-size: 12px;
    font-weight: 700;
}
.family-lines {
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.family-lines li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #31435c;
}
.family-lines em {
    font-style: normal;
    color: #6b7c93;
}
.family-card-empty {
    margin: 4px 0 0;
    color: #8b97a8;
    font-size: 13px;
}
.family-card-more {
    margin-top: auto;
    font-size: 12px;
    font-weight: 800;
    color: #2a63c7;
}
.family-panel {
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(15, 46, 96, 0.05);
}
.family-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}
.family-week-pick label {
    display: grid;
    gap: 6px;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    color: #6b7c93;
    font-size: 12px;
    font-weight: 800;
}
.family-week-pick select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    height: 44px;
    border: 1px solid #d5e0f0;
    border-radius: 12px;
    background: #fff;
    padding: 0 16px;
    color: #0c3d91;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}
.family-topic-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}
.family-topic-bar label {
    display: grid;
    gap: 6px;
    flex: 1;
    min-width: 220px;
    color: #6b7c93;
    font-size: 12px;
    font-weight: 800;
}
.family-topic-bar select {
    min-height: 42px;
    border: 1px solid #d9e3f2;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
    color: #0b2f6e;
    font-weight: 700;
}
.family-topic-meta {
    margin: 0 0 12px;
    color: #5d6b80;
    font-size: 13px;
    font-weight: 700;
}
.family-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.family-metric {
    display: grid;
    gap: 6px;
    padding: 14px;
    background: #f7faff;
    border: 1px solid #e6eef8;
    border-radius: 16px;
}
.family-metric span {
    color: #6b7c93;
    font-size: 13px;
    font-weight: 700;
}
.family-metric b {
    color: #0b2f6e;
    font-size: 20px;
    line-height: 1.35;
}
.family-metric.is-empty b { color: #9aa8bc; }
.family-metric.is-note { grid-column: 1 / -1; }
.family-empty {
    margin: 0;
    color: #6b7c93;
}
@media (max-width: 800px) {
    .family-grid { grid-template-columns: 1fr; }
    .family-panel-head { flex-direction: column; align-items: stretch; }
}
label[hidden],
[data-target-field][hidden],
#some-students[hidden] { display: none !important; }