:root {
    color-scheme: light;
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --ink: #22313f;
    --muted: #718096;
    --line: #e8edf3;
    --mint: #c9f2df;
    --mint-strong: #57b98e;
    --sky: #d8ecff;
    --sky-strong: #5f9fe3;
    --peach: #ffe1cd;
    --peach-strong: #e39b6c;
    --rose: #ffd9e2;
    --rose-strong: #d96b87;
    --lavender: #e9ddff;
    --lavender-strong: #8d79d6;
    --yellow: #fff0bd;
    --radius: 8px;
    --shadow: 0 18px 60px rgba(34, 49, 63, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background:
        linear-gradient(135deg, rgba(216, 236, 255, 0.65), transparent 34%),
        linear-gradient(315deg, rgba(255, 225, 205, 0.55), transparent 38%),
        var(--bg);
    color: var(--ink);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

.is-hidden {
    display: none !important;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid rgba(232, 237, 243, 0.8);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    padding: 24px 18px;
    z-index: 20;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: #fff;
    object-fit: contain;
    padding: 4px;
    box-shadow: 0 10px 26px rgba(38, 58, 77, 0.09);
}

.brand-name {
    font-size: 18px;
    font-weight: 800;
}

.brand-caption,
.card-label,
.section-eyebrow,
.topbar-eyebrow {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.nav-group-label {
    margin: 4px 10px 8px;
    color: #91a0ad;
    font-size: 12px;
    font-weight: 700;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border-radius: var(--radius);
    color: #536373;
    font-weight: 700;
    padding: 0 12px;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-badge {
    margin-left: auto;
    min-width: 22px;
    border-radius: 999px;
    background: #ff6f91;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 5px 7px;
    text-align: center;
}

.nav-item:hover,
.nav-item.is-active {
    background: #eef7f4;
    color: #243442;
}

.nav-item.is-active {
    box-shadow: inset 0 0 0 1px rgba(87, 185, 142, 0.2);
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c6d1da;
}

.nav-item.is-active .nav-dot {
    background: var(--mint-strong);
}

.sidebar-card {
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(233, 221, 255, 0.72), rgba(255, 240, 189, 0.62));
    padding: 16px;
}

.sidebar-card strong {
    display: block;
    margin-top: 5px;
    font-size: 18px;
}

.sidebar-card p {
    margin: 8px 0 0;
    color: #627284;
    line-height: 1.5;
}

.app-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    overflow: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(232, 237, 243, 0.82);
    background: rgba(247, 248, 251, 0.86);
    backdrop-filter: blur(18px);
    padding: 18px 28px;
    z-index: 10;
}

.topbar h1 {
    margin: 2px 0 0;
    font-size: 24px;
    line-height: 1.1;
}

.topbar-eyebrow {
    margin: 0;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.semester-pill {
    display: grid;
    gap: 2px;
    min-width: 210px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 10px 12px;
}

.semester-pill span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.semester-pill strong {
    font-size: 13px;
}

.topbar-link {
    display: inline-grid;
    min-height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: #4f7898;
    font-size: 13px;
    font-weight: 900;
    padding: 0 12px;
    white-space: nowrap;
}

.soft-button,
.icon-button,
.danger-button {
    border: 0;
    border-radius: var(--radius);
    background: #22313f;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

.soft-button {
    min-height: 42px;
    padding: 0 16px;
}

.danger-button {
    min-height: 38px;
    background: #b84b65;
    padding: 0 14px;
}

.icon-button {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
}

.menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 3px auto;
    background: currentColor;
    border-radius: 999px;
}

.content-shell {
    overflow-y: auto;
    padding: 26px 28px 34px;
    outline: none;
    transition: opacity 160ms ease;
}

.content-shell.is-loading {
    opacity: 0.45;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.hero-panel,
.module-hero {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    border: 1px solid rgba(232, 237, 243, 0.82);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(216, 236, 255, 0.58));
    box-shadow: var(--shadow);
    padding: 24px;
}

.hero-panel h2,
.module-hero h2 {
    max-width: 760px;
    margin: 0;
    font-size: 34px;
    line-height: 1.08;
}

.hero-panel p,
.module-hero p,
.pastel-note p {
    max-width: 760px;
    margin: 12px 0 0;
    color: #5d6d7d;
    line-height: 1.6;
}

.semester-progress {
    display: grid;
    align-content: center;
    min-width: 220px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    padding: 18px;
}

.semester-progress span {
    color: var(--muted);
    font-weight: 700;
}

.semester-progress small {
    margin-top: 8px;
    color: #627284;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.semester-progress strong {
    margin: 10px 0;
    font-size: 36px;
}

.progress-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f6;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint-strong), var(--sky-strong));
}

.stats-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stat-card,
.panel {
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 40px rgba(34, 49, 63, 0.05);
}

.stat-card {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 18px;
}

.stat-card span,
.stat-card small {
    color: #617184;
    font-weight: 700;
}

.stat-card strong {
    font-size: 34px;
}

.tone-mint {
    background: linear-gradient(135deg, rgba(201, 242, 223, 0.78), rgba(255, 255, 255, 0.92));
}

.tone-sky {
    background: linear-gradient(135deg, rgba(216, 236, 255, 0.82), rgba(255, 255, 255, 0.92));
}

.tone-peach {
    background: linear-gradient(135deg, rgba(255, 225, 205, 0.82), rgba(255, 255, 255, 0.92));
}

.tone-rose {
    background: linear-gradient(135deg, rgba(255, 217, 226, 0.82), rgba(255, 255, 255, 0.92));
}

.span-7 {
    grid-column: span 7;
}

.span-5 {
    grid-column: span 5;
}

.panel {
    padding: 20px;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-heading h3 {
    margin: 2px 0 0;
    font-size: 18px;
}

.panel-heading a {
    color: #4f8fbe;
    font-weight: 800;
}

.muted-chip {
    border-radius: 999px;
    background: var(--surface-soft);
    color: #627284;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 10px;
}

.status-list,
.student-list,
.module-stack,
.timeline {
    display: grid;
    gap: 12px;
}

.status-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
}

.status-copy {
    display: grid;
    gap: 2px;
}

.status-copy span,
.timeline-item span,
.student-row span {
    color: var(--muted);
    font-size: 13px;
}

.progress-track.tone-mint span {
    background: var(--mint-strong);
}

.progress-track.tone-sky span {
    background: var(--sky-strong);
}

.progress-track.tone-rose span {
    background: var(--rose-strong);
}

.status-percent {
    color: #627284;
    font-weight: 800;
    text-align: right;
}

.timeline-item,
.student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 12px;
}

.timeline-item {
    justify-content: flex-start;
}

.timeline-item time {
    display: grid;
    min-width: 52px;
    place-items: center;
    border-radius: var(--radius);
    background: var(--yellow);
    font-weight: 800;
    padding: 8px 6px;
}

.timeline-item div,
.student-row div:first-child {
    display: grid;
    gap: 4px;
}

.score-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: #fff;
    padding: 7px 9px 7px 12px;
}

.score-pill strong {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: var(--rose);
}

.module-stack span {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: #596b7d;
    font-weight: 700;
    line-height: 1.45;
    padding: 12px;
}

.module-page {
    display: grid;
    gap: 18px;
}

.module-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}

.module-layout.wide {
    grid-template-columns: 390px minmax(0, 1fr);
}

.class-feature-grid {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.list-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.list-page-grid,
.form-page-grid {
    display: grid;
    gap: 18px;
}

.form-page-grid {
    max-width: 760px;
}

.student-import-grid {
    max-width: none;
    grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
}

.soft-link-button {
    display: inline-grid;
    min-height: 42px;
    place-items: center;
    border-radius: var(--radius);
    background: #22313f;
    color: #fff;
    font-weight: 900;
    padding: 0 16px;
}

.form-intro {
    margin: -4px 0 16px;
    color: #617184;
    line-height: 1.6;
}

.class-summary {
    display: grid;
    align-content: center;
    min-width: 220px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    padding: 18px;
}

.class-summary span,
.class-summary small,
.table-subtext {
    color: var(--muted);
    font-weight: 800;
}

.class-summary strong {
    margin: 4px 0;
    font-size: 42px;
}

.student-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
    min-width: 320px;
}

.student-summary-grid div {
    display: grid;
    align-content: center;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    padding: 16px;
}

.student-summary-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.student-summary-grid strong {
    margin-top: 4px;
    font-size: 36px;
}

.student-summary-grid .summary-text {
    font-size: 22px;
    line-height: 1.15;
}

.form-pair {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.student-id-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-note-student-pair {
    grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 1.6fr);
    align-items: end;
}

.student-note-student-pair label {
    min-width: 0;
}

.student-note-student-pair select {
    width: 100%;
    min-width: 0;
}

.form-actions,
.action-row,
.toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.action-stack,
.inline-note-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-stack {
    max-width: 260px;
}

.inline-note-form input,
.inline-note-form select {
    min-height: 32px;
    max-width: 150px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 8px;
}

.care-filter-toolbar .matrix-filter {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.care-action-panel {
    display: grid;
    gap: 12px;
}

.care-followup-form {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(260px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.care-followup-form label {
    display: grid;
    gap: 7px;
    color: #536373;
    font-weight: 900;
}

.care-followup-form select,
.care-followup-form textarea,
.care-forward-form input,
.care-forward-form select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 10px;
}

.care-followup-form textarea {
    resize: vertical;
    min-height: 72px;
}

.care-forward-form {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.care-print-area {
    display: grid;
    gap: 14px;
}

.care-recap-print-area {
    display: grid;
    gap: 12px;
}

.care-recap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.care-timeline {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.care-timeline .timeline-item {
    grid-template-columns: 132px 1fr;
    align-items: start;
}

.action-row {
    flex-wrap: nowrap;
}

.mini-button {
    display: inline-grid;
    min-height: 34px;
    place-items: center;
    border-radius: var(--radius);
    background: var(--sky);
    color: #2f6f9f;
    font-weight: 900;
    padding: 0 12px;
}

.compact-button {
    min-height: 34px;
    padding: 0 12px;
}

.table-subtext {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.performance-note {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(95, 159, 227, 0.28);
    border-radius: var(--radius);
    background: rgba(216, 236, 255, 0.56);
    color: #456174;
    line-height: 1.5;
    padding: 12px;
}

.performance-note strong {
    color: var(--ink);
}

.transfer-dialog {
    width: min(92vw, 460px);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    padding: 0;
}

.transfer-dialog::backdrop {
    background: rgba(34, 49, 63, 0.34);
    backdrop-filter: blur(3px);
}

.transfer-dialog-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 26px 80px rgba(34, 49, 63, 0.18);
    padding: 18px;
}

.transfer-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.transfer-dialog-head h3 {
    margin: 2px 0 0;
    font-size: 20px;
}

.dialog-close-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: #536373;
    cursor: pointer;
    font-weight: 900;
}

.transfer-student-current {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(87, 185, 142, 0.26);
    border-radius: var(--radius);
    background: rgba(201, 242, 223, 0.45);
    padding: 11px;
}

.transfer-student-current.graduation-warning {
    border-color: rgba(246, 189, 96, 0.5);
    background: rgba(255, 241, 210, 0.7);
}

.transfer-student-current span,
.transfer-dialog-card label span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.transfer-dialog-card label {
    display: grid;
    gap: 7px;
}

.transfer-dialog-card select,
.transfer-dialog-card input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 9px 11px;
}

.promotion-preview-list {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(216, 236, 255, 0.95);
    border-radius: var(--radius);
    background: rgba(248, 251, 255, 0.86);
    padding: 11px;
}

.promotion-preview-list span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.promotion-preview-list strong {
    color: #2d3c4b;
    font-size: 13px;
}

.promotion-preview-list em {
    color: #617184;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.transfer-dialog-card p {
    margin: 0;
    color: #617184;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.confirm-dialog {
    width: min(92vw, 430px);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    padding: 0;
}

.confirm-dialog::backdrop {
    background: rgba(34, 49, 63, 0.38);
    backdrop-filter: blur(3px);
}

.confirm-dialog-card {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(232, 237, 243, 0.92);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 26px 80px rgba(34, 49, 63, 0.2);
    padding: 20px;
}

.confirm-dialog-card h3 {
    margin: 2px 0 8px;
    font-size: 22px;
    line-height: 1.25;
}

.confirm-dialog-card p:not(.section-eyebrow) {
    margin: 0;
    color: #617184;
    font-weight: 800;
    line-height: 1.55;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.confirm-dialog .soft-button.is-danger {
    background: #b84b65;
}

.readonly-field {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(87, 185, 142, 0.28);
    border-radius: var(--radius);
    background: rgba(201, 242, 223, 0.48);
    color: #456174;
    padding: 12px;
}

.readonly-field span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.readonly-field strong {
    color: var(--ink);
    font-size: 16px;
}

.readonly-field small {
    color: #617184;
    font-weight: 800;
    line-height: 1.4;
}

.soft-button:disabled,
.danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.semester-table {
    min-width: 860px;
}

.semester-progress-mini {
    display: grid;
    gap: 6px;
    min-width: 150px;
}

.semester-progress-mini > span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
}

.status-badge {
    display: inline-grid;
    min-height: 28px;
    place-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    padding: 0 10px;
}

.status-sangat_baik {
    background: var(--mint);
    color: #27634b;
}

.status-baik {
    background: var(--sky);
    color: #2f6f9f;
}

.status-perlu_perhatian {
    background: var(--rose);
    color: #8a334a;
}

.status-lulus {
    background: #fff1d2;
    color: #8a5a17;
}

.performance-status-cell {
    min-width: 150px;
}

.performance-status {
    display: inline-grid;
    gap: 6px;
    align-items: start;
}

.performance-status .status-badge {
    min-height: 30px;
    font-size: 11px;
    padding: 0 11px;
}

.performance-status > span:last-child {
    color: #718096;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    padding-left: 2px;
}

.mini-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mini-metrics span {
    border-radius: 999px;
    background: var(--surface-soft);
    color: #617184;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 8px;
}

.attendance-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 6px;
    min-width: 300px;
}

.attendance-mini {
    display: grid;
    gap: 2px;
    border-radius: var(--radius);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
    padding: 7px 8px;
}

.attendance-mini strong,
.attendance-mini em {
    font: inherit;
}

.attendance-mini em {
    opacity: 0.78;
}

.assignment-relation-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.assignment-relation-strip span {
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.84);
    color: #526273;
    font-weight: 900;
    line-height: 1.35;
    padding: 12px;
}

.deadline-pill {
    display: inline-grid;
    min-height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--mint);
    color: #27634b;
    font-size: 12px;
    font-weight: 900;
    padding: 0 10px;
}

.deadline-pill.is-past {
    background: var(--rose);
    color: #8a334a;
}

.assignment-category-pill {
    display: inline-grid;
    margin: 0 0 7px;
    border-radius: 999px;
    background: var(--lavender);
    color: #5d4fa8;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 9px;
}

.assignment-category-pill.category-uh,
.assignment-category-pill.category-uts,
.assignment-category-pill.category-uas {
    background: var(--rose);
    color: #8a334a;
}

.assignment-category-pill.category-kegiatan,
.assignment-category-pill.category-praktik {
    background: var(--mint);
    color: #27634b;
}

.assignment-category-pill.category-proyek {
    background: var(--peach);
    color: #9b5a36;
}

.note-category-pill {
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--lavender);
    color: #5d4fa8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 7px 10px;
    white-space: nowrap;
}

.note-category-masalah,
.note-category-kasus {
    background: var(--rose);
    color: #8a334a;
}

.note-category-prestasi {
    background: var(--mint);
    color: #27634b;
}

.note-category-wali_kelas {
    background: var(--sky);
    color: #2f6f9f;
}

.note-snippet {
    max-width: 420px;
}

.note-preview-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.note-preview-actions .mini-button {
    min-height: 34px;
    border: 0;
    background: #22313f;
    color: #fff;
    padding: 0 12px;
}

.note-preview-actions .print-button {
    background: #4f8fbe;
}

.student-note-print-area {
    gap: 14px;
}

.student-note-document-head {
    grid-template-columns: minmax(0, 1fr) 240px;
}

.note-print-status small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.note-document-facts {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    max-width: none;
}

.note-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.note-document-block {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 160px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(248, 251, 255, 0.88);
    padding: 13px;
}

.note-document-block span,
.note-signature-grid span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.note-document-block p {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}

.note-signature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.note-signature-grid div {
    display: grid;
    gap: 54px;
    min-height: 112px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.76);
    padding: 13px;
}

.note-signature-grid strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.assignment-progress {
    display: grid;
    gap: 8px;
    min-width: 150px;
}

.assignment-progress span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
}

.teacher-summary-grid {
    min-width: 420px;
}

.teacher-table-panel .data-table {
    min-width: 980px;
}

.teacher-account-line {
    display: block;
    margin-bottom: 7px;
    color: #536373;
    font-weight: 900;
}

.teacher-skill {
    display: inline-grid;
    min-height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--lavender);
    color: #5d4fa8;
    font-size: 12px;
    font-weight: 900;
    padding: 0 10px;
}

.teacher-note-cell {
    max-width: 260px;
    color: #536373;
    line-height: 1.45;
}

.teacher-form-pair {
    grid-template-columns: 1fr 1fr;
}

.user-summary-grid {
    min-width: 420px;
}

.user-table-panel .data-table {
    min-width: 900px;
}

.user-username {
    display: inline-grid;
    min-height: 30px;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-soft);
    color: #536373;
    font-size: 12px;
    font-weight: 900;
    padding: 0 10px;
}

.role-pill {
    display: inline-grid;
    min-height: 30px;
    place-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    padding: 0 10px;
}

.role-admin {
    background: var(--lavender);
    color: #5d4fa8;
}

.role-guru {
    background: var(--sky);
    color: #2f6f9f;
}

.user-form-pair {
    grid-template-columns: 1fr 180px;
}

.matrix-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.8);
    padding: 14px;
}

.matrix-filter {
    min-width: 280px;
}

.import-guide-panel {
    align-content: start;
}

.import-guide-list {
    display: grid;
    gap: 10px;
}

.import-guide-list div,
.template-example {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    padding: 12px;
}

.import-guide-list strong,
.template-example strong {
    color: var(--ink);
    font-weight: 900;
}

.import-guide-list span,
.template-example span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.template-example {
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(201, 242, 223, 0.62), rgba(216, 236, 255, 0.72));
}

.matrix-filter label {
    display: grid;
    gap: 7px;
    color: #536373;
    font-weight: 900;
}

.matrix-filter select {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 7px 9px;
}

.attendance-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.legend-pill {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 10px;
}

.legend-help {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.matrix-scroll {
    overflow: auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.attendance-matrix {
    min-width: 900px;
}

.attendance-matrix th,
.attendance-matrix td {
    min-width: 232px;
}

.attendance-matrix th {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.attendance-matrix .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 220px;
    background: #fff;
}

.attendance-matrix thead .sticky-col {
    z-index: 3;
}

.matrix-column-type {
    display: inline-grid;
    margin-bottom: 6px;
    border-radius: 999px;
    background: var(--lavender);
    color: #5d4fa8;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 7px;
}

.matrix-column-type.type-assignment {
    background: var(--peach);
    color: #9b5a36;
}

.matrix-column-type.type-activity {
    background: var(--lavender);
    color: #5d4fa8;
}

.attendance-matrix th strong,
.attendance-matrix th small {
    display: block;
}

.attendance-matrix th small {
    margin-top: 4px;
    color: var(--muted);
}

.matrix-cell {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 7px;
    transition: background 160ms ease, border-color 160ms ease;
}

.attendance-status-buttons {
    display: grid;
    grid-template-columns: repeat(6, 30px);
    gap: 4px;
    align-items: center;
}

.attendance-status-button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #cfd5db;
    border-radius: 999px;
    background: #fff;
    color: #46515d;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(42, 52, 64, 0.04);
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.attendance-status-button:hover {
    transform: translateY(-1px);
    border-color: #9ba6b2;
    box-shadow: 0 6px 14px rgba(42, 52, 64, 0.12);
}

.attendance-status-button:focus-visible {
    outline: 3px solid rgba(80, 145, 255, 0.28);
    outline-offset: 2px;
}

.attendance-status-button:disabled {
    cursor: wait;
    opacity: 0.74;
    transform: none;
}

.status-option-hadir {
    border-color: rgba(69, 168, 87, 0.26);
    background: rgba(201, 242, 223, 0.72);
    color: #27634b;
}

.status-option-izin {
    border-color: rgba(76, 159, 218, 0.28);
    background: rgba(216, 236, 255, 0.82);
    color: #2f6f9f;
}

.status-option-sakit {
    border-color: rgba(216, 164, 48, 0.3);
    background: rgba(255, 240, 189, 0.82);
    color: #806527;
}

.status-option-alfa {
    border-color: rgba(220, 90, 114, 0.26);
    background: rgba(255, 217, 226, 0.82);
    color: #8a334a;
}

.status-option-terlambat {
    border-color: rgba(224, 138, 77, 0.28);
    background: rgba(255, 225, 205, 0.82);
    color: #9b5a36;
}

.status-option-cabut {
    border-color: rgba(128, 104, 216, 0.28);
    background: rgba(233, 221, 255, 0.84);
    color: #5d4fa8;
}

.attendance-status-button[aria-pressed="true"] {
    border-color: rgba(29, 39, 51, 0.5);
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.68), 0 6px 16px rgba(42, 52, 64, 0.18);
}

.status-option-hadir[aria-pressed="true"] {
    background: #45a857;
}

.status-option-izin[aria-pressed="true"] {
    background: #4c9fda;
}

.status-option-sakit[aria-pressed="true"] {
    background: #d8a430;
}

.status-option-alfa[aria-pressed="true"] {
    background: #dc5a72;
}

.status-option-terlambat[aria-pressed="true"] {
    background: #e08a4d;
}

.status-option-cabut[aria-pressed="true"] {
    background: #8068d8;
}

.matrix-cell[data-status="hadir"],
.status-bg-hadir {
    background: rgba(201, 242, 223, 0.85);
    color: #27634b;
}

.matrix-cell[data-status="izin"],
.status-bg-izin {
    background: rgba(216, 236, 255, 0.9);
    color: #2f6f9f;
}

.matrix-cell[data-status="sakit"],
.status-bg-sakit {
    background: rgba(255, 240, 189, 0.9);
    color: #806527;
}

.matrix-cell[data-status="alfa"],
.status-bg-alfa {
    background: rgba(255, 217, 226, 0.9);
    color: #8a334a;
}

.matrix-cell[data-status="terlambat"],
.status-bg-terlambat {
    background: rgba(255, 225, 205, 0.9);
    color: #9b5a36;
}

.matrix-cell[data-status="cabut"],
.status-bg-cabut {
    background: rgba(233, 221, 255, 0.9);
    color: #5d4fa8;
}

.matrix-cell[data-status="empty"] {
    background: var(--surface-soft);
}

.grade-matrix {
    min-width: 980px;
}

.grade-matrix th,
.grade-matrix td {
    min-width: 170px;
}

.grade-cell {
    display: grid;
    gap: 6px;
    min-height: 136px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 9px;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.grade-cell[data-grade-status="sangat_baik"] {
    border-color: rgba(87, 185, 142, 0.36);
    background: rgba(201, 242, 223, 0.82);
}

.grade-cell[data-grade-status="baik"] {
    border-color: rgba(95, 159, 227, 0.34);
    background: rgba(216, 236, 255, 0.88);
}

.grade-cell[data-grade-status="perlu_perhatian"] {
    border-color: rgba(217, 107, 135, 0.34);
    background: rgba(255, 217, 226, 0.88);
}

.grade-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(232, 237, 243, 0.94);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
    font: inherit;
    font-size: 20px;
    font-weight: 900;
    outline: none;
    padding: 8px 10px;
}

.grade-input:focus {
    border-color: rgba(95, 159, 227, 0.62);
    box-shadow: 0 0 0 3px rgba(216, 236, 255, 0.7);
}

.grade-input:disabled {
    opacity: 0.72;
}

.grade-note {
    display: grid;
    gap: 4px;
}

.grade-note-input {
    width: 100%;
    min-height: 30px;
    border: 1px solid rgba(232, 237, 243, 0.94);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    color: #536373;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    outline: none;
    padding: 5px 7px;
}

.grade-note-input:focus {
    border-color: rgba(95, 159, 227, 0.62);
    box-shadow: 0 0 0 2px rgba(216, 236, 255, 0.64);
}

.grade-note-input:disabled {
    opacity: 0.72;
}

.grade-note span {
    color: #718096;
    font-size: 11px;
    font-weight: 900;
    text-align: right;
}

.grade-status {
    color: #536373;
    font-size: 12px;
    font-weight: 900;
}

.autosave-state,
.matrix-autosave-note {
    color: #718096;
    font-size: 12px;
    font-weight: 900;
}

.autosave-state[data-state="saving"] {
    color: #9b5a36;
}

.autosave-state[data-state="saved"] {
    color: #27634b;
}

.autosave-state[data-state="error"] {
    color: #8a334a;
}

.matrix-autosave-note {
    margin: 14px 0 0;
}

.pastel-note {
    background: linear-gradient(135deg, rgba(201, 242, 223, 0.62), rgba(255, 225, 205, 0.58));
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(232, 237, 243, 0.82);
    color: #81909f;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 28px;
}

.auth-body {
    min-height: 100vh;
}

.public-body {
    min-height: 100vh;
}

.public-shell {
    display: grid;
    gap: 22px;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 34px;
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 40px rgba(34, 49, 63, 0.05);
    padding: 14px 16px;
}

.public-nav .brand-block {
    margin-bottom: 0;
}

.public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: stretch;
    gap: 18px;
}

.public-hero-copy,
.public-lookup-card {
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow);
}

.public-hero-copy {
    display: grid;
    align-content: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(216, 236, 255, 0.68));
    padding: 34px;
}

.public-hero-copy h1 {
    max-width: 760px;
    margin: 0;
    font-size: 44px;
    line-height: 1.05;
}

.public-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: #5d6d7d;
    font-size: 17px;
    line-height: 1.7;
}

.public-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
}

.public-stats span {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(232, 237, 243, 0.88);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    padding: 12px;
}

.public-stats strong {
    font-size: 30px;
}

.public-stats em {
    color: #617184;
    font-style: normal;
    font-weight: 900;
}

.public-lookup-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px;
}

.public-lookup-card h2 {
    margin: 0;
    font-size: 24px;
}

.public-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.public-info-grid article {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.84);
    padding: 16px;
}

.public-info-grid strong {
    font-size: 16px;
}

.public-info-grid span {
    color: #617184;
    font-weight: 800;
    line-height: 1.5;
}

.public-report {
    display: grid;
    gap: 18px;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-panel {
    width: min(100%, 460px);
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
    padding: 28px;
}

.auth-panel h1 {
    margin: 4px 0 0;
    font-size: 32px;
}

.auth-copy {
    color: #617184;
    line-height: 1.6;
}

.auth-form,
.data-form,
.report-picker {
    display: grid;
    gap: 14px;
}

.data-form.compact {
    margin-top: 14px;
}

.auth-form label,
.data-form label,
.report-picker label {
    display: grid;
    gap: 7px;
    color: #536373;
    font-weight: 800;
}

.auth-form input,
.data-form input,
.data-form select,
.data-form textarea,
.report-picker select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 9px 11px;
}

.field-group {
    display: grid;
    gap: 9px;
}

.field-label-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    color: #536373;
    font-weight: 800;
}

.field-label-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.class-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(248, 251, 255, 0.72);
    padding: 10px;
}

.class-picker-item {
    display: flex !important;
    align-items: center;
    gap: 9px !important;
    min-width: 0;
    border: 1px solid rgba(232, 237, 243, 0.92);
    border-radius: var(--radius);
    background: #fff;
    color: #536373;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    padding: 9px 10px;
}

.class-picker-item input {
    width: 16px;
    min-height: 16px;
    flex: 0 0 auto;
}

.class-picker-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-mini-state {
    grid-column: 1 / -1;
    color: var(--muted);
    font-weight: 800;
    padding: 8px;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 50px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-grid;
    width: 34px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: #4f7898;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle[aria-pressed="true"] {
    background: var(--sky);
    color: #2f6f9f;
}

.password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.password-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.data-form textarea {
    resize: vertical;
}

.check-row {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 9px !important;
}

.check-row input {
    width: 18px;
    min-height: 18px;
}

.captcha-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--mint), var(--sky));
    padding: 12px;
}

.captcha-row strong {
    font-size: 24px;
}

.captcha-row a {
    color: #2f6f9f;
    font-weight: 900;
}

.auth-button {
    width: 100%;
}

.auth-home-link {
    display: inline-grid;
    min-height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(248, 251, 255, 0.82);
    color: #4f7898;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.alert-box,
.success-box {
    border-radius: var(--radius);
    font-weight: 800;
    margin: 14px 0;
    padding: 12px;
}

.alert-box {
    background: var(--rose);
    color: #8a334a;
}

.success-box {
    background: var(--mint);
    color: #27634b;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
}

.table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 900;
}

.table-sort-link em {
    border: 1px solid rgba(95, 159, 227, 0.24);
    border-radius: 999px;
    background: rgba(216, 236, 255, 0.48);
    color: #4f7898;
    font-size: 11px;
    font-style: normal;
    line-height: 1;
    padding: 5px 8px;
}

.table-sort-link.is-active em {
    background: var(--sky);
    color: #2f6f9f;
}

.data-table th {
    color: #617184;
    font-size: 12px;
    text-transform: uppercase;
}

.class-table-panel .data-table {
    min-width: 1140px;
}

.row-actions {
    min-width: 170px;
}

.row-actions summary {
    cursor: pointer;
    color: #4f8fbe;
    font-weight: 900;
}

.pagination-row {
    margin-top: 16px;
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(232, 237, 243, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    padding: 10px;
}

.pagination-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.pagination-summary strong {
    color: var(--ink);
}

.pagination-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.pagination-button {
    display: inline-grid;
    min-width: 34px;
    min-height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: #536373;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    padding: 0 11px;
}

.pagination-button.is-current {
    border-color: rgba(87, 185, 142, 0.35);
    background: var(--mint);
    color: #27634b;
}

.pagination-button.is-disabled {
    background: #f5f7fa;
    color: #a7b1bd;
    cursor: not-allowed;
}

.report-hero {
    align-items: center;
}

.report-picker {
    min-width: 320px;
}

.report-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 12px;
    border: 1px solid rgba(232, 237, 243, 0.86);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 38px rgba(34, 49, 63, 0.05);
    padding: 16px;
}

.report-filter-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.report-filter-title strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
}

.report-filter-title span {
    max-width: 420px;
    color: #617184;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.report-filter-panel label,
.report-field {
    display: grid;
    gap: 7px;
    color: #536373;
    font-weight: 900;
    min-width: 0;
}

.report-field-wide {
    grid-column: span 2;
}

.report-field.is-disabled {
    display: none;
}

.report-filter-panel select,
.report-filter-panel input {
    min-height: 38px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 7px 9px;
}

.report-filter-actions {
    display: grid;
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.report-filter-actions .soft-button {
    min-height: 38px;
    padding: 0 12px;
}

.report-print-area {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.report-card h3 {
    margin: 6px 0 12px;
    font-size: 24px;
}

.report-meta {
    display: grid;
    gap: 8px;
    color: #617184;
    font-weight: 800;
}

.big-progress strong {
    display: block;
    margin-bottom: 14px;
    font-size: 46px;
}

.report-preview-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(201, 242, 223, 0.46), rgba(216, 236, 255, 0.54));
}

.report-preview-heading h3 {
    margin: 2px 0 10px;
    font-size: 24px;
    line-height: 1.25;
}

.report-preview-copy {
    min-width: 0;
}

.report-preview-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 8px;
    max-width: 760px;
}

.report-preview-facts span {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(232, 237, 243, 0.82);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.68);
    padding: 10px 11px;
}

.report-preview-facts em {
    color: #718096;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.report-preview-facts strong {
    color: #2d3c4b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.report-preview-score {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(232, 237, 243, 0.88);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    padding: 14px;
}

.report-preview-score span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
}

.report-preview-score strong {
    font-size: 34px;
    line-height: 1;
}

.report-student-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    break-inside: avoid;
}

.report-student-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.report-student-profile h3 {
    margin: 2px 0 12px;
    font-size: 24px;
    line-height: 1.2;
}

.student-profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    gap: 8px;
    max-width: 760px;
}

.student-profile-facts span {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(232, 237, 243, 0.88);
    border-radius: var(--radius);
    background: rgba(248, 251, 255, 0.82);
    padding: 9px 10px;
}

.student-profile-facts em {
    color: #81909f;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.student-profile-facts strong {
    color: #2d3c4b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.report-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.report-metric-grid > div {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(248, 251, 255, 0.88);
    padding: 12px;
}

.report-metric-grid span {
    color: #617184;
    font-size: 12px;
    font-weight: 900;
}

.report-metric-grid strong {
    font-size: 26px;
}

.report-section-block {
    display: grid;
    gap: 10px;
}

.subject-report-list {
    display: grid;
    gap: 14px;
}

.subject-report-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(232, 237, 243, 0.94);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.86));
    padding: 14px;
}

.subject-report-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
    align-items: start;
    gap: 12px;
}

.subject-report-head h3 {
    margin: 2px 0 5px;
    font-size: 22px;
    line-height: 1.2;
}

.subject-report-head span,
.subject-score span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.subject-score {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(87, 185, 142, 0.25);
    border-radius: var(--radius);
    background: rgba(201, 242, 223, 0.42);
    padding: 10px;
}

.subject-score strong {
    font-size: 28px;
    line-height: 1;
}

.report-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.report-section-title span {
    color: #718096;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.report-attendance-summary {
    grid-template-columns: repeat(6, minmax(78px, 1fr));
    min-width: 0;
}

.report-activity-table {
    min-width: 760px;
}

.report-activity-table th {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.report-activity-table td:first-child {
    min-width: 260px;
}

.report-activity-table td:nth-child(5) {
    min-width: 180px;
    color: #536373;
    line-height: 1.45;
}

.status-bg-empty {
    background: var(--surface-soft);
    color: #718096;
}

.span-report {
    grid-column: 1 / -1;
}

.empty-state {
    color: var(--muted);
    font-weight: 800;
}

.print-button {
    width: 100%;
}

.print-export {
    min-height: auto;
    background: #fff;
}

.print-export-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    padding: 12px 18px;
}

.print-export-toolbar strong {
    color: #2d3c4b;
    font-size: 14px;
    line-height: 1.3;
}

.print-export-toolbar div {
    display: flex;
    gap: 8px;
}

.print-export-toolbar button {
    min-height: 36px;
    border: 0;
    border-radius: var(--radius);
    background: #22313f;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    padding: 0 12px;
}

.print-export-shell {
    display: grid;
    gap: 14px;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 18px;
}

.print-export .panel {
    box-shadow: none;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 7mm;
    }

    body {
        background: #fff;
    }

    .sidebar,
    .topbar,
    .app-footer,
    .mobile-overlay,
    .report-picker,
    .report-filter-panel,
    .module-hero > p,
    .module-hero > h2,
    .module-hero > div > p {
        display: none !important;
    }

    .app-shell,
    .app-main {
        display: block;
        height: auto;
        overflow: visible;
    }

    .content-shell {
        overflow: visible;
        padding: 0;
    }

    .panel,
    .module-hero {
        box-shadow: none;
        break-inside: avoid;
    }

    .report-page {
        gap: 6px;
    }

    .report-student-card {
        page-break-inside: avoid;
    }

    .print-export-shell {
        padding: 0;
        width: 100%;
        gap: 6px;
    }

    .print-export .panel {
        border-color: #d8e0e8;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-export .report-student-card {
        gap: 8px;
        padding: 10px;
    }

    .print-export-toolbar {
        display: none !important;
    }

    .print-export .report-preview-heading {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .print-export .report-preview-facts {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .print-export .report-student-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .print-export .student-profile-facts {
        grid-template-columns: repeat(4, minmax(112px, 1fr));
    }

    .print-export .report-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .print-export .report-attendance-summary {
        grid-template-columns: repeat(6, minmax(78px, 1fr));
    }

    .print-export .report-activity-table {
        min-width: 760px;
        font-size: 12px;
    }

    .print-export .report-activity-table th,
    .print-export .report-activity-table td {
        padding: 5px 7px;
    }

    .print-export .report-preview-heading {
        padding: 10px;
    }

    .print-export .report-student-head {
        gap: 10px;
        padding-bottom: 8px;
    }

    .print-export .report-student-profile h3 {
        margin-bottom: 6px;
        font-size: 20px;
    }

    .print-export .student-profile-facts,
    .print-export .report-preview-facts,
    .print-export .report-metric-grid,
    .print-export .report-attendance-summary {
        gap: 5px;
    }

    .print-export .student-profile-facts span,
    .print-export .report-preview-facts span,
    .print-export .report-metric-grid > div,
    .print-export .attendance-mini {
        padding: 6px 7px;
    }

    .print-export .report-section-block {
        gap: 5px;
    }

    .print-export .report-section-title {
        gap: 8px;
    }

    .print-export .section-eyebrow {
        font-size: 10px;
    }
}

.mobile-overlay {
    display: none;
}

@media (max-width: 1100px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .span-7,
    .span-5 {
        grid-column: 1 / -1;
    }

    .module-layout {
        grid-template-columns: 1fr;
    }

    .module-layout.wide,
    .report-grid,
    .class-feature-grid {
        grid-template-columns: 1fr;
    }

    .report-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-title {
        grid-column: 1 / -1;
    }

    .report-filter-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-preview-heading {
        grid-template-columns: 1fr;
    }

    .report-student-head {
        grid-template-columns: 1fr;
    }

    .report-metric-grid,
    .report-attendance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-profile-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-preview-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: min(84vw, 310px);
        transition: transform 180ms ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .mobile-overlay {
        position: fixed;
        inset: 0;
        display: block;
        pointer-events: none;
        background: rgba(34, 49, 63, 0.26);
        opacity: 0;
        transition: opacity 180ms ease;
        z-index: 15;
    }

    body.sidebar-open .mobile-overlay {
        pointer-events: auto;
        opacity: 1;
    }

    .app-main {
        min-width: 0;
    }

    .topbar {
        align-items: flex-start;
        padding: 16px;
    }

    .icon-button {
        display: grid;
        flex: 0 0 auto;
    }

    .topbar-actions {
        display: none;
    }

    .report-picker {
        min-width: 0;
    }

    .content-shell {
        padding: 16px;
    }

    .hero-panel,
    .module-hero {
        display: grid;
        padding: 18px;
    }

    .hero-panel h2,
    .module-hero h2 {
        font-size: 28px;
    }

    .semester-progress {
        min-width: 0;
    }

    .student-summary-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .assignment-relation-strip {
        grid-template-columns: 1fr;
    }

    .teacher-summary-grid {
        min-width: 0;
    }

    .user-summary-grid {
        min-width: 0;
    }

    .matrix-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .matrix-filter {
        min-width: 0;
    }

    .pagination-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-controls {
        justify-content: flex-start;
    }

    .student-import-grid {
        grid-template-columns: 1fr;
    }

    .class-picker-grid {
        grid-template-columns: 1fr;
    }

    .toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .report-filter-panel,
    .report-metric-grid,
    .report-attendance-summary,
    .subject-report-head,
    .student-profile-facts,
    .report-preview-facts {
        grid-template-columns: 1fr;
    }

    .public-hero {
        grid-template-columns: 1fr;
    }

    .public-hero-copy h1 {
        font-size: 34px;
    }

    .public-info-grid {
        grid-template-columns: 1fr;
    }

    .report-field-wide {
        grid-column: auto;
    }

    .report-filter-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-filter-title span,
    .report-section-title span {
        text-align: left;
    }

    .report-filter-actions {
        grid-template-columns: 1fr;
    }

    .report-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .status-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .form-pair {
        grid-template-columns: 1fr;
    }

    .student-note-student-pair {
        grid-template-columns: 1fr;
    }

    .status-percent {
        text-align: left;
    }

    .student-row,
    .app-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-stats {
        grid-template-columns: 1fr;
    }
}