:root {
            color-scheme: light;
            font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
            --brand-color: #1f4f78;
        }
        body { margin: 0; color: #172033; background: #f5f7fa; }
        a { color: var(--brand-color); }
        button, input, select, textarea { font: inherit; }
        .container { max-width: 960px; margin: 0 auto; padding: 3rem 1.25rem; }
        .panel { padding: 2rem; border: 1px solid #dce2ea; border-radius: .75rem; background: #fff; }
        .status { color: #176b3a; font-weight: 600; }
        .flash { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: .5rem; background: #edf2f7; }
        .flash-success { border-left: .25rem solid #198754; }
        .flash-error { border-left: .25rem solid #dc3545; }
        .flash-warning { border-left: .25rem solid #ffc107; }
        .flash-info { border-left: .25rem solid #0dcaf0; }
        code, pre { overflow-wrap: anywhere; }
        .skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; padding: .75rem 1rem; background: #fff; }
        .skip-link:focus { top: 1rem; }
        .app-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
        .app-sidebar { padding: 1.5rem 1rem; color: #fff; background: var(--brand-color); }
        .app-brand { padding: 0 .75rem 1.5rem; border-bottom: 1px solid rgb(255 255 255 / 25%); }
        .app-brand-name { margin: 0; font-size: 1.2rem; }
        .app-school-name { margin: .35rem 0 0; color: rgb(255 255 255 / 82%); font-size: .9rem; }
        .app-nav { display: grid; gap: .4rem; margin-top: 1.5rem; }
        .app-nav a { padding: .7rem .8rem; border-radius: .5rem; color: #fff; text-decoration: none; }
        .app-nav a:hover, .app-nav a:focus-visible, .app-nav a[aria-current="page"] {
            background: rgb(255 255 255 / 18%);
        }
        .app-main { min-width: 0; }
        .app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #dce2ea; background: #fff; }
        .app-user { margin: 0; font-weight: 600; }
        .logout-form { margin: 0; }
        .button-link { border: 0; padding: .55rem .8rem; border-radius: .45rem; color: #fff; background: var(--brand-color); cursor: pointer; }
        .app-content { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
        .page-heading { margin: 0 0 1.25rem; }
        .page-heading h1 { margin: 0; font-size: 1.65rem; }
        .page-heading p { margin: .35rem 0 0; color: #566274; }
        .summary-section { margin-top: 1.75rem; }
        .summary-section h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
        .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .85rem; }
        .summary-card { padding: 1rem; border: 1px solid #dce2ea; border-radius: .65rem; background: #fff; }
        .summary-card p { margin: 0; color: #566274; }
        .summary-card strong { display: block; margin-top: .35rem; font-size: 1.55rem; color: #172033; }
        .empty-state { padding: 2rem 1rem; border: 1px dashed #b8c2cf; border-radius: .65rem; text-align: center; color: #566274; background: #fff; }
        .data-table-wrap { overflow-x: auto; border: 1px solid #dce2ea; border-radius: .65rem; background: #fff; }
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table th, .data-table td { padding: .75rem; border-bottom: 1px solid #e7ebf0; text-align: left; vertical-align: top; }
        .data-table th { color: #3b4758; background: #f8fafc; font-size: .9rem; }
        .data-table tr:last-child td { border-bottom: 0; }
        .status-label { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: #e8edf3; }
        .status-draft { color: #44505f; background: #e8edf3; }
        .status-review, .status-active { color: #714c00; background: #fff2cc; }
        .status-returned { color: #842029; background: #f8d7da; }
        .status-approved, .status-completed, .status-acknowledged { color: #0f5132; background: #d1e7dd; }
        .pagination { margin-top: 1rem; text-align: right; }
        .pagination a, .back-link { display: inline-block; padding: .55rem .8rem; border: 1px solid var(--brand-color); border-radius: .45rem; text-decoration: none; }
        .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 0; }
        .detail-grid div { padding: .8rem; border-radius: .5rem; background: #f8fafc; }
        .detail-grid dt { color: #566274; font-size: .85rem; }
        .detail-grid dd { margin: .25rem 0 0; font-weight: 600; }
        .content-section { margin-top: 1rem; padding: 1rem; border: 1px solid #dce2ea; border-radius: .65rem; background: #fff; }
        .content-section h2 { margin-top: 0; font-size: 1.1rem; }
        .structured-list { margin: 0; padding-left: 1.4rem; }
        .structured-list li + li { margin-top: .65rem; }
        .muted { color: #6b7482; }
        .visually-hidden {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
        }
        .lesson-plan-form { display: grid; gap: 1rem; }
        .lesson-plan-form .content-section { margin-top: 0; }
        .report-filter {
            display: grid; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem;
            border: 1px solid #dce2ea; border-radius: .65rem; background: #fff;
        }
        .report-filter label { display: grid; gap: .35rem; color: #3b4758; font-weight: 600; }
        .report-filter select {
            box-sizing: border-box; width: 100%; padding: .65rem .7rem;
            border: 1px solid #aeb8c5; border-radius: .45rem; color: #172033; background: #fff;
        }
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
        .form-field { display: grid; gap: .35rem; margin-top: .75rem; }
        .form-field > span:first-child { color: #3b4758; font-weight: 600; }
        .form-field input, .form-field select, .form-field textarea {
            box-sizing: border-box; width: 100%; padding: .65rem .7rem;
            border: 1px solid #aeb8c5; border-radius: .45rem; color: #172033; background: #fff;
        }
        .field-error { color: #b42318; }
        .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
        .section-heading h2 { margin-bottom: 0; }
        .repeatable-row {
            display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr auto; gap: .75rem;
            align-items: end; padding: .8rem 0; border-bottom: 1px solid #e7ebf0;
        }
        .repeatable-row:last-child { border-bottom: 0; }
        .form-field-wide { min-width: 0; }
        .mapping-fieldset {
            margin-top: 1rem; padding: .75rem; border: 1px solid #dce2ea; border-radius: .5rem;
        }
        .check-option { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
        .check-option input { margin-top: .25rem; }
        .form-actions { display: flex; align-items: center; gap: .75rem; }
        .button-primary, .button-secondary, .button-danger {
            border: 0; padding: .6rem .85rem; border-radius: .45rem; cursor: pointer;
        }
        .button-primary { color: #fff; background: var(--brand-color); }
        .button-secondary { color: #17324d; background: #dce8f3; }
        .button-danger { color: #842029; background: #f8d7da; }
        .alert { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: .5rem; }
        .alert-warning { color: #664d03; background: #fff3cd; }
        .notification-read-all { margin-bottom: 1rem; text-align: right; }
        .notification-list { display: grid; gap: .75rem; }
        .notification-item {
            display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            padding: 1rem; border: 1px solid #dce2ea; border-radius: .65rem; background: #fff;
        }
        .notification-unread { border-left: .3rem solid var(--brand-color); background: #f8fbff; }
        .notification-content { min-width: 0; }
        .notification-content h2 { margin: .2rem 0; font-size: 1.05rem; }
        .notification-content p { margin: .25rem 0; }
        .notification-content time, .notification-state { color: #6b7482; font-size: .85rem; }
        @media (max-width: 760px) {
            .app-shell { display: block; }
            .app-sidebar { padding: 1rem; }
            .app-brand { padding-bottom: 1rem; }
            .app-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
            .app-header, .app-content { padding: 1rem; }
            .data-table th, .data-table td { min-width: 8rem; }
            .repeatable-row { grid-template-columns: 1fr; }
            .section-heading { align-items: flex-start; flex-direction: column; }
            .notification-item { align-items: stretch; flex-direction: column; }
        }