:root {
    --paper: #f4f7f5;
    --surface: #ffffff;
    --muted: #56665d;
    --orange: #a74731;
    --motion-duration: 240ms;
    --motion-ease: cubic-bezier(.2, .65, .3, 1);
    --control-radius: 8px;
}

body, body * { letter-spacing: 0; }
body { overflow-wrap: anywhere; background-image: none; }
input, textarea, select, button { font-family: var(--body); }
[hidden] { display: none !important; }
.app-main { min-width: 0; }
.app-main:focus { outline: none; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 12px 18px; transform: translateY(-150%); border-radius: 8px; background: var(--green-dark); color: white; }
.skip-link:focus { transform: none; color: white; }
.topbar { height: 76px; gap: 18px; background: var(--surface); }
.desktop-nav a { display: flex; min-height: 44px; align-items: center; gap: 7px; }
.desktop-nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--green); }
.user-menu { flex-shrink: 0; }
.account-shortcut { display: flex; min-height: 44px; gap: 7px; align-items: center; font-size: 13px; }
.account-shortcut i { font-size: 21px; }
.header-help { display: flex; min-height: 44px; gap: 7px; align-items: center; font-weight: 600; font-size: 13px; }
.brand { flex-shrink: 0; }
.brand-mark { flex: 0 0 44px; }
.brand-mark img { object-fit: contain; }
.navigation-drawer { max-width: 1200px; margin: 24px auto; padding: 18px; background: var(--surface); }
.navigation-drawer.offcanvas { --bs-offcanvas-width: 380px; max-width: 100%; margin: 0; padding: 0; background: var(--surface); border: 0; }
.navigation-drawer h2 { margin: 4px 0 0; font: 600 25px/1.2 var(--heading); }
.navigation-drawer .offcanvas-header { gap: 18px; padding: 26px 22px 20px; border-bottom: 1px solid var(--line); }
.navigation-drawer .offcanvas-body { padding: 12px 16px 26px; }
.drawer-links { display: grid; gap: 6px; }
.drawer-links a { display: flex; min-height: 56px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.drawer-links a:hover, .drawer-links a[aria-current="page"] { background: var(--sage); }
.drawer-links a>.bi { margin-left: auto; color: var(--muted); font-size: 12px; }
.drawer-icon { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 8px; background: #f0f4ec; color: var(--green); font-size: 19px; }
.notice { display: flex; gap: 12px; align-items: flex-start; min-height: 62px; padding: 12px 14px; border-left: 4px solid var(--green); background: #eaf4e7; color: var(--green-dark); }
.notice.error { border-left-color: #a43b30; color: #863f2c; }
.notice>.bi { padding-top: 8px; font-size: 19px; }
.notice-message { flex: 1; align-self: center; min-width: 0; }
.notice-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; }
.notice-close:hover { background: rgba(0,0,0,.05); }
.ux-toasts { position: fixed; right: 18px; bottom: 24px; z-index: 1090; width: min(340px, calc(100% - 36px)); }
.ux-toast { width: 100%; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 28px rgba(32,60,45,.15); }
.ux-toast .toast-body { display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 13px; }
.ux-toast .toast-body>span { flex: 1; }
.ux-toast .toast-body>.bi { color: var(--green); font-size: 19px; }
.navigation-progress { position: fixed; z-index: 2000; top: 0; left: 0; width: 0; height: 3px; background: var(--green); opacity: 0; pointer-events: none; }
body.is-navigating .navigation-progress { width: 85%; opacity: 1; transition: width 1.2s var(--motion-ease); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 56px; }
.password-toggle { position: absolute; top: 50%; right: 5px; display: grid; width: 44px; height: 44px; transform: translateY(-50%); place-items: center; border: 0; border-radius: 8px; background: transparent; color: #526558; font-size: 19px; }
.password-toggle:active { transform: translateY(-50%); }
.password-toggle:hover { background: #edf4e8; }
.btn-primary, .btn-primary-wide, .btn-outline { position: relative; overflow: hidden; }
.btn-primary:disabled, .btn-primary-wide:disabled { transform: none; }
.auth-art { display: flex; justify-content: flex-start; padding-top: 62px; }
.auth-art::before, .auth-art::after { content: none; }
.auth-art h1 { margin: 18px 0 12px; }
.auth-art .eyebrow { color: #654b15; }
.auth-illustration { aspect-ratio: 9 / 7; }
.auth-wrap { border-radius: 8px; }
.menu-card, .child-order-card, .stat-card, .manual-cards>a { border-radius: 8px; }
.muted, .page-heading p, .menu-card p { color: var(--muted); }
.field-help, .settings-note { color: var(--muted); }
.menu-card-foot { gap: 10px; }
.menu-card-foot strong { min-width: 0; }
.menu-card-foot>a { flex: 0 0 44px; }
.menu-price-repair { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.menu-price-repair label { display: grid; gap: 4px; min-width: 78px; font-size: 10px; font-weight: 600; }
.menu-price-repair .form-control, .menu-price-repair .form-select { min-height: 40px; padding: 5px 7px; font-size: 13px; }
.profile-identity>div { min-width: 0; }
.profile-identity .avatar { flex-shrink: 0; }
.child-order-title>div { min-width: 0; }
.child-order-form .btn-primary { min-height: 48px; height: auto; padding: 10px 14px; white-space: normal; }
.person-row .avatar { flex-shrink: 0; }
.order-preview { display: grid; gap: 10px; padding: 13px; border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; background: #edf5e9; }
.order-preview>strong { font-size: 14px; font-weight: 600; }
.order-preview dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 12px; margin: 0; font-size: 12px; }
.order-preview dt { font-weight: 500; color: var(--muted); }
.order-preview dd { margin: 0; text-align: right; font-weight: 600; }
.order-preview.is-updated { animation: summary-enter .22s var(--motion-ease); }
.order-preview-note { margin: 0; color: #526558; font-size: 11px; }
.child-order-card.is-selected { border-color: #6e9979; box-shadow: 0 4px 16px rgba(45,112,77,.09); }
.confirmation-popup { --swal2-width: min(480px, calc(100vw - 28px)); border-radius: 8px; }
.confirmation-popup .swal2-html-container { white-space: pre-line; line-height: 1.6; }
.confirmation-popup .swal2-actions { gap: 10px; margin-inline: 18px; }
.confirmation-popup .swal2-actions button { margin: 0; min-width: 112px; }
.logo-preview img { aspect-ratio: 1; }
.form-control[type="file"] { max-width: 100%; font-size: 13px; }
.school-footer { padding-bottom: 28px; min-width: 0; color: var(--muted); }
.manual-search-status { margin: 8px 0; color: var(--green-dark); font-size: 12px; }
.manual-head .manual-back { margin: 0; }
.manual-content section { scroll-margin-top: 100px; }
.manual-content li { line-height: 1.65; }
.import-surface, .status-manager, .table-surface, .report-panel, .feedback-item { min-width: 0; }
.import-heading { align-items: center; }
.import-steps { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0; color: var(--muted); font-size: 13px; }
.import-steps span { display: inline-flex; gap: 8px; align-items: center; }
.import-steps b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e9f1e7; color: var(--green-dark); }
.import-form, .import-confirm, .feedback-manage, .status-update-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.import-file-label { display: grid; flex: 1 1 240px; gap: 7px; font-weight: 600; }
.import-help { max-width: 900px; }
.csv-review { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.csv-errors { margin: 15px 0; padding: 14px 16px; border-left: 3px solid #a74731; background: #fff2ed; color: #702e24; }
.csv-errors ul { margin: 8px 0 0; padding-left: 22px; }
.confirm-partial { display: flex; max-width: 520px; gap: 10px; align-items: flex-start; }
.import-result { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; padding: 14px 16px; background: #eaf4e7; color: var(--green-dark); }
.school-roster-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.school-roster-grid>.surface, .report-panel { padding: 22px; }
.school-roster-grid h2, .report-panel h2, .feedback-item h2 { margin: 5px 0 14px; font: 600 22px/1.2 var(--heading); }
.link-code-form { margin-bottom: 18px; }
.status-manager { margin: 18px 0; padding: 22px; }
.status-catalog { display: grid; gap: 10px; }
.status-config-row { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(130px,1.2fr) 90px minmax(110px,.8fr) minmax(100px,.7fr) 44px; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.status-config-row label { display: grid; gap: 5px; margin: 0; font-size: 11px; font-weight: 600; }
.status-config-row .switch-row { display: flex; min-height: 38px; gap: 7px; align-items: center; }
.status-config-row .icon-button { align-self: end; }
.classroom-manager { margin: 18px 0; padding: 22px; }
.classroom-edit-list { display: grid; gap: 10px; }
.classroom-edit-row { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(130px,1fr) minmax(130px,1fr) minmax(160px,1.2fr) minmax(125px,.8fr) 44px; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.classroom-edit-row label { display: grid; gap: 5px; margin: 0; font-size: 11px; font-weight: 600; }
.classroom-edit-row .switch-row { display: flex; min-height: 40px; gap: 7px; align-items: center; }
.status-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfa; }
.status-chip small { color: var(--muted); }
.status-add { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.status-add summary, .admin-cancel summary { width: fit-content; cursor: pointer; color: var(--green-dark); font-weight: 600; }
.status-add form { margin-top: 16px; }
.status-update-form { min-width: 190px; }
.status-update-form .form-select { flex: 1 1 100px; min-width: 0; }
.roster-search { display: grid; max-width: 380px; gap: 6px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.admin-cancel { min-width: 150px; }
.admin-cancel form { min-width: 190px; padding: 10px 0; }
.admin-cancel label, .feedback-manage label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.report-wide { grid-column: 1 / -1; }
.report-chart { position: relative; height: 290px; min-height: 250px; width: 100%; }
.report-panel .section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.feedback-list { display: grid; gap: 14px; }
.feedback-item { padding: 20px; }
.feedback-item>header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; }
.feedback-message { margin: 14px 0; white-space: normal; }
.feedback-response { margin: 12px 0; padding: 12px 14px; border-left: 3px solid var(--green); background: #edf5e9; }
.feedback-response p { margin: 5px 0 0; }
.feedback-manage { align-items: end; padding-top: 14px; border-top: 1px solid var(--line); }
.feedback-manage label:last-of-type { flex: 1 1 250px; }
.feedback-manage textarea { min-width: 0; }
.family-feedback-history { margin-top: 18px; }
.family-feedback-history h3 { font: 600 18px/1.3 var(--heading); }
.family-feedback-history article { padding: 12px 0; border-top: 1px solid var(--line); }
.family-feedback-history article>p { margin: 6px 0; color: var(--muted); }
.teacher-class-list { display: grid; gap: 16px; }
.teacher-class { padding: 20px; }
.teacher-class>header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.teacher-class h2 { margin: 5px 0 12px; font: 600 22px/1.2 var(--heading); }
.payment-entry { margin-bottom: 18px; padding: 22px; }
.payment-filters, .payment-form-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 18px; }
.payment-filters label, .payment-form-grid label { display: grid; flex: 1 1 220px; gap: 6px; font-size: 12px; font-weight: 600; }
.payment-record-form { min-width: 0; }
.payment-allocation { width: 125px; }
.payment-total { display: grid; gap: 3px; min-width: 145px; padding: 9px 12px; border-left: 3px solid var(--green); background: #edf5e9; }
.payment-total span { color: var(--muted); font-size: 11px; }
.payment-total strong { font-size: 18px; }
.payment-empty { padding: 12px 0; }
.payment-warning { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 12px 0; padding: 12px 14px; border-left: 3px solid #b87521; background: #fff6e6; color: #704716; }
.payment-warning span { flex-basis: 100%; }
.order-filter { margin: 16px 0; padding: 20px; }
.order-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.order-filter-form label { display: grid; flex: 1 1 150px; gap: 5px; font-size: 12px; font-weight: 600; }
.order-filter-form button, .order-filter-form>.btn-outline { min-height: 44px; }
.order-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.order-pagination span { color: var(--muted); font-size: 13px; }
.order-ticket-links { display: flex; flex-wrap: wrap; gap: 12px; }
.order-ticket-links>div { display: flex; align-items: center; gap: 6px; padding-right: 12px; border-right: 1px solid var(--line); }
.financial-report { margin-top: 18px; }
.financial-report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.financial-report-grid h3 { font: 600 18px/1.25 var(--heading); }
.payment-reverse { min-width: 145px; }
.payment-reverse form { min-width: 210px; padding: 10px 0; }
.receipt-sheet { max-width: 900px; margin: 0 auto 20px; padding: 26px; }
.receipt-sheet>header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 20px; }
.receipt-sheet h2 { margin: 5px 0 0; font: 600 25px/1.2 var(--heading); }
.receipt-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 22px; margin: 0 0 20px; }
.receipt-meta div { min-width: 0; }
.receipt-meta dt { color: var(--muted); font-size: 11px; }
.receipt-meta dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.receipt-meta .receipt-wide { grid-column: 1 / -1; }
@media (max-width: 760px) {
    .payment-entry, .receipt-sheet { padding: 16px; }
    .payment-filters label, .payment-filters .btn-outline { flex-basis: 100%; }
    .payment-form-grid label { flex-basis: 100%; }
    .financial-report-grid { grid-template-columns: minmax(0,1fr); }
    .payment-allocation { width: 100%; }
    .receipt-meta { grid-template-columns: minmax(0,1fr); }
    .receipt-meta .receipt-wide { grid-column: auto; }
}
@media print {
    .topbar, .school-footer, .mobile-nav, .desktop-nav, .user-menu, .payment-entry, #recibos, .no-print, .page-heading { display: none !important; }
    body, .app-main { background: white !important; }
    .app-main { max-width: none; padding: 0; }
    .receipt-sheet { max-width: none; margin: 0; border: 0; box-shadow: none; }
}
@media (max-width: 760px) {
    .school-roster-grid, .report-grid { grid-template-columns: minmax(0,1fr); }
    .report-wide { grid-column: auto; }
    .report-chart { height: 270px; }
    .school-roster-grid>.surface, .report-panel, .status-manager { padding: 17px; }
    .classroom-manager { padding: 17px; }
    .classroom-edit-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .classroom-edit-row .icon-button { grid-column: 2; justify-self: end; }
    .status-config-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .status-config-row .icon-button { grid-column: 2; justify-self: end; }
    .feedback-manage { align-items: stretch; }
    .feedback-manage label, .feedback-manage button { flex: 1 1 100%; }
}
html:not(.aos-ready) [data-aos], [data-aos]:focus-within { opacity: 1 !important; transform: none !important; }
.ux-dialog-in { animation: dialog-enter .2s var(--motion-ease); }
.ux-dialog-out { animation: dialog-exit .16s ease-in; }
@keyframes summary-enter { from { transform: translateY(3px); } to { transform: none; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dialog-exit { to { opacity: 0; transform: translateY(5px); } }
@media (max-width: 1023px) {
    .desktop-nav { display: none; }
    .account-shortcut span { display: none; }
    .mobile-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 74px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); }
    .mobile-nav a { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; min-width: 0; min-height: 56px; color: #526558; }
    .mobile-nav a i { display: grid; width: 44px; height: 28px; place-items: center; border-radius: 8px; font-size: 21px; }
    .mobile-nav a span { font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; }
    .mobile-nav a.active i { width: 44px; height: 28px; }
    .mobile-nav a.active { color: var(--green-dark); }
    .school-footer { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
    .ux-toasts { bottom: calc(92px + env(safe-area-inset-bottom)); }
    .auth-wrap { grid-template-columns: minmax(0,1fr); max-width: 620px; }
    .auth-art { min-height: 246px; padding: 30px; }
    .auth-art h1 { font-size: 33px; max-width: 300px; }
    .auth-art p { max-width: 250px; font-size: 13px; }
    .auth-illustration { bottom: -6%; right: 0; width: 47%; max-height: 70%; }
    .auth-panel { width: 100%; padding: 30px; }
}
@media (max-width: 600px) {
    .topbar { height: 66px; gap: 10px; padding-inline: 16px; }
    .account-shortcut { display: none; }
    .auth-art { min-height: 276px; padding: 26px 23px; }
    .auth-art h1 { font-size: 29px; max-width: 285px; }
    .auth-art p { max-width: 220px; }
    .auth-illustration { bottom: 0; width: 44%; }
    .auth-panel { padding: 28px 22px; }
    .auth-panel h2 { font-size: 29px; }
    .auth-panel .form-stack { margin-top: 20px; }
    .form-control, .form-select { font-size: 16px; }
    .field-help { font-size: 12px; }
    .section-heading { flex-wrap: wrap; }
    .order-section-heading h2 { max-width: 240px; }
    .person-row { flex-wrap: wrap; align-items: center; }
    .person-details { flex-basis: calc(100% - 62px); }
    .child-order-link { margin-left: 58px; }
    .page-heading { flex-wrap: wrap; }
    .page-heading h1 { font-size: 29px; }
    .logo-setting { grid-template-columns: minmax(0,1fr); }
    .logo-preview { width: 96px; height: 96px; }
    .welcome-banner { min-height: 335px; }
    .welcome-art { width: 48%; right: 0; }
    .welcome-copy h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
    .swal2-popup { --swal2-show-animation: none; --swal2-hide-animation: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .navigation-progress, .ux-dialog-in, .ux-dialog-out, .order-preview.is-updated, .button-spinner { animation: none !important; transition: none !important; }
    .offcanvas, .offcanvas-backdrop { transition: none !important; }
}
@media print {
    .navigation-progress, .navigation-drawer, .ux-toasts, .skip-link, .notice-close { display: none !important; }
    .school-footer { padding-bottom: 12px; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}