:root {
    --navy-950: #0d1e42;
    --navy-900: #132852;
    --navy-800: #183264;
    --navy-700: #24447c;
    --navy-100: #e9eef8;
    --navy-50: #f3f6fb;
    --gold-600: #ad9239;
    --gold-500: #c7ae56;
    --gold-100: #f8f2dc;
    --teal-600: #197d78;
    --violet-600: #6e57a5;
    --green-700: #18734c;
    --green-100: #e3f5ec;
    --red-700: #a53c43;
    --red-100: #fae9ea;
    --amber-700: #94620d;
    --amber-100: #fff2d2;
    --ink: #172038;
    --text: #35415a;
    --muted: #758096;
    --line: #e2e7ef;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --shadow-sm: 0 2px 8px rgba(17, 32, 66, .06);
    --shadow-md: 0 14px 38px rgba(17, 32, 66, .11);
    --radius-sm: 9px;
    --radius: 14px;
    --radius-lg: 20px;
    --sidebar-width: 268px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--canvas); font-family: inherit; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
img { max-width: 100%; }
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.block { display: block; }
.muted-text { color: var(--muted); }
.danger-text { color: var(--red-700) !important; }
.code-text { direction: ltr; display: inline-block; color: var(--navy-800); letter-spacing: .02em; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 0 0 auto; width: var(--sidebar-width); min-height: 100vh; z-index: 50; display: flex; flex-direction: column; background: linear-gradient(165deg, var(--navy-950) 0%, #142b58 65%, #1a386c 100%); color: #fff; box-shadow: -10px 0 40px rgba(11, 27, 59, .1); overflow-y: auto; }
.brand { min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-logo { width: 57px; height: 57px; border-radius: 50%; object-fit: cover; background: #fff; padding: 2px; box-shadow: 0 7px 22px rgba(0,0,0,.22); }
.brand-copy { min-width: 0; display: flex; flex-direction: column; }
.brand-copy strong { font-size: 22px; line-height: 1.25; letter-spacing: -.03em; }
.brand-copy span { margin-top: 2px; color: rgba(255,255,255,.63); font-size: 12px; white-space: nowrap; }
.sidebar-close { display: none !important; margin-right: auto; color: #fff !important; font-size: 26px; }
.main-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 16px 13px 20px; }
.nav-section { padding: 17px 13px 7px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.nav-item { position: relative; display: flex; align-items: center; min-height: 45px; gap: 12px; padding: 10px 13px; border-radius: 10px; color: rgba(255,255,255,.76); font-size: 13.5px; font-weight: 600; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset -3px 0 0 var(--gold-500); }
.nav-item.active .icon { color: var(--gold-500); }
.nav-item .icon { color: rgba(255,255,255,.62); }
.nav-item small { margin-right: auto; color: rgba(255,255,255,.36); font-size: 9px; }
.nav-item.muted { opacity: .64; cursor: not-allowed; }
.nav-pill { margin-right: auto; padding: 3px 7px; border-radius: 99px; color: var(--navy-950); background: var(--gold-500); font-size: 9px; font-weight: 800; }
.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.security-note { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.05); color: var(--gold-500); }
.security-note div { display: flex; flex-direction: column; }
.security-note strong { color: #fff; font-size: 11px; }
.security-note span { margin-top: 2px; color: rgba(255,255,255,.5); font-size: 9.5px; }
.main-area { min-height: 100vh; margin-right: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 35; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 30px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-start, .topbar-actions, .user-menu { display: flex; align-items: center; }
.topbar-start { gap: 15px; }
.page-heading { display: flex; flex-direction: column; }
.page-heading .eyebrow { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.page-heading h1 { margin: 2px 0 0; color: var(--ink); font-size: 20px; line-height: 1.35; }
.topbar-actions { gap: 13px; }
.date-chip { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--navy-50); direction: ltr; font-size: 11.5px; }
.icon-button { width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; color: var(--text); background: transparent; transition: .18s ease; }
.icon-button:hover { background: var(--navy-50); color: var(--navy-800); }
.notification-button { position: relative; border: 1px solid var(--line); }
.notification-button span { position: absolute; top: 6px; left: 7px; width: 6px; height: 6px; border: 1.5px solid #fff; border-radius: 50%; background: var(--gold-600); }
.user-menu { gap: 9px; padding-right: 12px; border-right: 1px solid var(--line); }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--navy-700), var(--navy-900)); font-size: 15px; font-weight: 800; }
.user-meta { min-width: 88px; display: flex; flex-direction: column; }
.user-meta strong { color: var(--ink); font-size: 12px; }
.user-meta span { color: var(--muted); font-size: 10px; direction: ltr; text-align: right; }
.menu-button { display: none; }
.page-content { max-width: 1600px; margin: 0 auto; padding: 28px 30px 55px; }

.alert { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 15px; border-radius: 11px; font-size: 13px; box-shadow: var(--shadow-sm); }
.alert span { flex: 1; }
.alert button { cursor: pointer; color: inherit; background: transparent; font-size: 20px; opacity: .65; }
.alert-success { color: var(--green-700); border: 1px solid #bfe4d1; background: var(--green-100); }
.alert-error { color: var(--red-700); border: 1px solid #f0c8cb; background: var(--red-100); }

.welcome-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 145px; margin-bottom: 22px; padding: 26px 30px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(112deg, var(--navy-950), var(--navy-800)); box-shadow: var(--shadow-md); }
.welcome-card::before { content: ""; position: absolute; width: 330px; height: 330px; top: -185px; left: 6%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.02); }
.welcome-card::after { content: ""; position: absolute; width: 9px; height: 76px; top: 0; right: 30px; background: var(--gold-500); border-radius: 0 0 9px 9px; }
.welcome-card > * { position: relative; z-index: 1; }
.section-kicker { display: block; margin-bottom: 6px; color: var(--gold-600); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.welcome-card .section-kicker { color: var(--gold-500); }
.welcome-card h2 { max-width: 690px; margin: 0; font-size: clamp(20px, 2vw, 27px); line-height: 1.45; letter-spacing: -.035em; }
.welcome-card p { margin: 7px 0 0; color: rgba(255,255,255,.64); font-size: 13px; }
.year-summary { min-width: 225px; display: flex; flex-direction: column; padding: 17px 19px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.year-summary span { color: rgba(255,255,255,.6); font-size: 10px; }
.year-summary strong { margin: 3px 0; color: var(--gold-500); font-size: 21px; direction: ltr; text-align: right; }
.year-summary small { color: rgba(255,255,255,.55); font-size: 9.5px; direction: ltr; text-align: right; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.metric-card { position: relative; overflow: hidden; min-height: 120px; display: flex; align-items: flex-start; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-card::before { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--navy-700); }
.metric-card.gold::before { background: var(--gold-500); }.metric-card.teal::before { background: var(--teal-600); }.metric-card.violet::before { background: var(--violet-600); }
.metric-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--navy-700); background: var(--navy-100); }
.metric-card.gold .metric-icon { color: var(--gold-600); background: var(--gold-100); }.metric-card.teal .metric-icon { color: var(--teal-600); background: #e3f4f2; }.metric-card.violet .metric-icon { color: var(--violet-600); background: #eee9f7; }
.metric-card > div:last-child { display: flex; flex: 1; flex-direction: column; }
.metric-card span { color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-card strong { margin: 1px 0 5px; color: var(--ink); font-size: 27px; line-height: 1.25; }
.metric-card a { display: inline-flex; align-items: center; gap: 3px; color: var(--navy-700); font-size: 10px; font-weight: 700; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); gap: 18px; margin-bottom: 26px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 19px; border-bottom: 1px solid var(--line); }
.panel-header > div { position: relative; }
.panel-header h3, .section-title h3 { margin: 0; color: var(--ink); font-size: 15px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--navy-700); background: transparent; font-size: 11px; font-weight: 700; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 12px 15px; color: var(--muted); background: #fafbfc; border-bottom: 1px solid var(--line); text-align: right; font-size: 10px; font-weight: 700; white-space: nowrap; }
td { padding: 13px 15px; color: var(--text); border-bottom: 1px solid #edf0f4; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfe; }
.person-cell { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.person-cell > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--navy-700); background: var(--navy-100); font-weight: 800; }
.person-cell strong { color: var(--ink); font-size: 11.5px; }
.status { display: inline-flex; align-items: center; width: max-content; padding: 4px 8px; border-radius: 99px; color: var(--navy-700); background: var(--navy-100); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.status::before { content: ""; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: currentColor; }
.status-active, .status-accepted { color: var(--green-700); background: var(--green-100); }
.status-inactive, .status-rejected, .status-withdrawn { color: var(--red-700); background: var(--red-100); }
.status-waitlisted, .status-assessment, .status-under_review { color: var(--amber-700); background: var(--amber-100); }
.status-provisional_acceptance, .status-submitted { color: var(--navy-700); background: var(--navy-100); }
.activity-list { padding: 7px 17px 12px; }
.activity-item { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 8px; padding: 12px 0; }
.activity-item:not(:last-child)::after { content: ""; position: absolute; top: 25px; right: 4px; bottom: -12px; width: 1px; background: var(--line); }
.activity-dot { width: 9px; height: 9px; margin-top: 5px; border: 2px solid #fff; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 2px var(--gold-100); }
.activity-item strong { display: block; color: var(--ink); font-size: 10.5px; line-height: 1.5; }
.activity-item p { margin: 2px 0; color: var(--muted); font-size: 9.5px; }
.activity-item time { color: #9aa3b3; font-size: 9px; direction: ltr; }
.quick-section { margin-top: 5px; }
.section-title { display: flex; justify-content: space-between; margin-bottom: 11px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.quick-action { display: flex; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: .18s ease; }
.quick-action:hover { border-color: #cbd4e4; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-action > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: var(--navy-700); background: var(--navy-100); }
.quick-action > div { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.quick-action strong { color: var(--ink); font-size: 11.5px; }
.quick-action small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.quick-action > .icon { color: var(--muted); }
.empty-state { min-height: 210px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px; color: var(--muted); text-align: center; }
.empty-state > span, .empty-state > .icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 18px; color: var(--navy-700); background: var(--navy-100); }
.empty-state strong { color: var(--ink); font-size: 13px; }
.empty-state p { margin: 5px 0 0; font-size: 11px; }
.empty-state.compact { min-height: 120px; }

.page-toolbar { min-height: 56px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.toolbar-copy p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.toolbar-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 11.5px; font-weight: 700; transition: .18s ease; white-space: nowrap; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-primary { color: #fff; background: var(--navy-800); box-shadow: 0 5px 14px rgba(24,50,100,.18); }
.button-primary:hover:not(:disabled) { background: var(--navy-950); transform: translateY(-1px); }
.button-secondary { color: var(--navy-800); border-color: #d8dfeb; background: #fff; }
.button-secondary:hover:not(:disabled) { border-color: #bac7da; background: var(--navy-50); }
.button-danger-soft { color: var(--red-700); background: var(--red-100); }.button-success-soft { color: var(--green-700); background: var(--green-100); }
.button-xs { min-height: 28px; padding: 5px 9px; font-size: 9.5px; }.button-sm { min-height: 32px; padding: 6px 10px; font-size: 10px; }.button-lg { min-height: 48px; font-size: 13px; }.button-full { width: 100%; }
.filter-bar { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid var(--line); }
.search-field { min-width: 300px; display: flex; align-items: center; gap: 8px; height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: .18s ease; }
.search-field:focus-within { border-color: var(--navy-700); box-shadow: 0 0 0 3px var(--navy-100); }
.search-field .icon { color: var(--muted); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11.5px; }
.search-field.grow { flex: 1; }.table-actions { width: 110px; text-align: center; white-space: nowrap; }.table-actions form { display: inline; }
select, input, textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d7deea; border-radius: 9px; outline: 0; color: var(--text); background: #fff; font-size: 12px; transition: .18s ease; }
select:focus, input:focus, textarea:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px var(--navy-100); }
select { min-width: 150px; }
.form-layout { display: flex; flex-direction: column; gap: 16px; }
.form-panel .panel-header { justify-content: flex-start; }
.form-panel .panel-header > div { padding-right: 42px; }
.step-badge { position: absolute; top: 0; right: 0; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy-800); font-size: 11px; font-weight: 800; }
.form-grid { display: grid; gap: 17px; padding: 21px; }.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label { color: var(--ink); font-size: 11px; font-weight: 700; }.field-group label b { color: var(--red-700); }
.field-group small { color: var(--muted); font-size: 9.5px; }.field-group .field-error { min-height: 0; color: var(--red-700); }
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon > .icon { position: absolute; right: 12px; z-index: 1; color: var(--muted); pointer-events: none; }
.input-with-icon input { padding-right: 40px; padding-left: 40px; }
.password-toggle { position: absolute; left: 5px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; border-radius: 8px; color: var(--muted); background: transparent; }
.role-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 20px; }
.role-choice { position: relative; display: flex; gap: 11px; min-height: 80px; padding: 14px; cursor: pointer; border: 1px solid var(--line); border-radius: 11px; transition: .18s ease; }
.role-choice:has(input:checked) { border-color: var(--navy-700); background: var(--navy-50); box-shadow: 0 0 0 2px var(--navy-100); }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-check { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #ccd5e3; border-radius: 7px; color: transparent; background: #fff; }
.role-choice input:checked + .role-check { color: #fff; border-color: var(--navy-800); background: var(--navy-800); }
.role-choice strong { color: var(--ink); font-size: 11.5px; }.role-choice p { margin: 4px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 4px 0; }

.academic-year-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 15px 19px; border-right: 4px solid var(--gold-500); }
.academic-year-bar span { color: var(--muted); font-size: 11px; font-weight: 700; }
.academic-year-bar strong { color: var(--ink); font-size: 18px; }
.academic-year-bar small { margin-right: auto; color: var(--muted); direction: ltr; font-size: 10px; }

.entity-form { display: flex; flex-direction: column; gap: 16px; }
.form-section { overflow: hidden; }
.form-section-title { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.form-section-title > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--navy-700); background: var(--navy-100); }
.form-section-title h2 { margin: 0; color: var(--ink); font-size: 13px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }.form-grid .span-3 { grid-column: span 3; }.form-grid .span-4 { grid-column: span 4; }
.form-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.conditional-fields[hidden] { display: none !important; }
.readonly-field { color: var(--navy-800); background: var(--navy-50); font-weight: 700; }
.form-errors { align-items: flex-start; }.form-errors ul { margin: 7px 0 0; padding-right: 18px; }.form-errors li { margin: 3px 0; }
.switch-field { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; }
.switch-field input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.switch-field > span { position: relative; width: 39px; height: 22px; flex: 0 0 auto; border-radius: 99px; background: #cbd3df; transition: .18s ease; }
.switch-field > span::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: .18s ease; }
.switch-field input:checked + span { background: var(--navy-800); }.switch-field input:checked + span::after { transform: translateX(-17px); }
.switch-field strong { color: var(--text); font-size: 11px; }

.record-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px; }
.record-identity { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; }
.record-avatar { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--navy-700); background: var(--navy-100); font-size: 18px; font-weight: 800; }
.record-identity h2 { margin: 0 0 5px; color: var(--ink); font-size: 17px; }
.record-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }
.record-status { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.detail-card { overflow: hidden; }.detail-card.wide { grid-column: 1 / -1; }
.data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--line); }
.data-list > div { min-height: 64px; padding: 12px 15px; background: #fff; }
.data-list dt { margin-bottom: 5px; color: var(--muted); font-size: 9.5px; }.data-list dd { margin: 0; color: var(--ink); font-size: 11.5px; font-weight: 700; overflow-wrap: anywhere; }
.guardianship-card { border-right: 4px solid var(--gold-500); }
.linked-record { display: inline-flex; align-items: center; gap: 6px; color: var(--navy-700); font-size: 11px; font-weight: 700; }

.documents-panel { overflow: hidden; margin-bottom: 16px; }
.count-badge { min-width: 28px; min-height: 24px; display: grid; place-items: center; padding: 3px 8px; border-radius: 99px; color: var(--navy-700); background: var(--navy-100); font-size: 10px; font-weight: 800; }
.document-list { display: flex; flex-direction: column; }
.document-row { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 17px; border-bottom: 1px solid var(--line); }.document-row:last-child { border-bottom: 0; }
.document-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--navy-700); background: var(--navy-100); }
.document-copy { min-width: 150px; display: flex; flex: 1; align-items: center; gap: 8px; flex-wrap: wrap; }.document-copy strong { color: var(--ink); font-size: 11px; }.document-copy small { width: 100%; color: var(--muted); font-size: 9px; direction: ltr; text-align: right; }
.document-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.inline-upload, .inline-form { display: inline-flex; align-items: center; gap: 4px; }.inline-upload label { position: relative; overflow: hidden; }.inline-upload input[type="file"] { position: absolute; inset: 0; min-height: 0; cursor: pointer; opacity: 0; }
.button-success { color: #fff; background: var(--green-700); }.button-danger-ghost { color: var(--red-700); border-color: #edc5c8; background: #fff; }

.workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stack-form { display: flex; flex-direction: column; gap: 10px; padding: 17px; }
.timeline-panel { overflow: hidden; }.status-timeline { padding: 8px 18px 16px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); }.timeline-item:last-child { border-bottom: 0; }
.timeline-item::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border: 2px solid #fff; border-radius: 50%; background: var(--navy-700); box-shadow: 0 0 0 2px var(--navy-100); }
.timeline-item strong { color: var(--ink); font-size: 10.5px; }.timeline-item p { margin: 3px 0 0; color: var(--muted); font-size: 9.5px; }.timeline-item time { color: var(--muted); font-size: 9px; direction: ltr; }
.table-action { color: var(--navy-700); font-size: 10px; font-weight: 700; }
.status-verified, .status-enrolled, .status-graduated { color: var(--green-700); background: var(--green-100); }
.status-missing, .status-rejected, .status-expired, .status-suspended { color: var(--red-700); background: var(--red-100); }
.status-pending_review, .status-transferred { color: var(--amber-700); background: var(--amber-100); }

.print-body { min-height: 100vh; color: #111; background: #eef1f6; }
.print-trigger { position: fixed; top: 20px; left: 20px; z-index: 3; }
.print-document { width: min(210mm, calc(100% - 30px)); min-height: 297mm; margin: 25px auto; padding: 16mm; background: #fff; box-shadow: var(--shadow-md); }
.print-header { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; gap: 15px; padding-bottom: 12px; border-bottom: 2px solid var(--navy-900); text-align: center; }.print-header img { width: 78px; height: 78px; border-radius: 50%; }.print-header h1 { margin: 0; color: var(--navy-900); font-size: 20px; }.print-header p { margin: 4px 0 0; font-size: 11px; }.print-header .print-code { text-align: left; direction: ltr; font-size: 10px; }
.print-section { margin-top: 16px; }.print-section h2 { margin: 0 0 9px; padding: 7px 10px; color: var(--navy-900); border-right: 4px solid var(--gold-500); background: #f0f3f8; font-size: 12px; }
.print-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid #ccd2dc; background: #ccd2dc; }.print-grid > div { min-height: 52px; padding: 8px 10px; background: #fff; }.print-grid span { display: block; margin-bottom: 3px; color: #657087; font-size: 9px; }.print-grid strong { font-size: 11px; }
.signature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 42px; text-align: center; font-size: 11px; }.signature-grid div { padding-top: 28px; border-top: 1px dotted #777; }

.role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.role-card { display: flex; flex-direction: column; min-height: 245px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.role-card-top { display: flex; align-items: center; gap: 11px; }
.role-card-top > div:last-child { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 6px; }
.role-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--navy-700); background: var(--navy-100); }
.role-card h3 { margin: 0; color: var(--ink); font-size: 13px; }
.role-card > p { min-height: 43px; margin: 14px 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.role-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.role-stats div { display: flex; flex-direction: column; align-items: center; padding: 9px; background: #fafbfc; }
.role-stats strong { color: var(--ink); font-size: 16px; }.role-stats span { color: var(--muted); font-size: 9px; }
.permission-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; padding: 14px 17px; }
.permission-toolbar > div { display: flex; gap: 9px; }.permission-toolbar > div:first-child { flex-direction: column; gap: 2px; }
.permission-toolbar strong { color: var(--ink); font-size: 13px; }.permission-toolbar span { color: var(--muted); font-size: 10px; }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 85px; }
.permission-group { overflow: hidden; }
.permission-group-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.permission-group-title > div { display: flex; align-items: center; gap: 9px; }.permission-group-title > div > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--navy-700); background: var(--navy-100); }
.permission-group-title h3 { margin: 0; color: var(--ink); font-size: 12px; }
.mini-check { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9.5px; }.mini-check input { width: 15px; min-height: 15px; accent-color: var(--navy-800); }
.permission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 7px; background: #edf0f4; }
.permission-item { position: relative; min-height: 57px; display: flex; align-items: center; gap: 9px; padding: 10px; cursor: pointer; background: #fff; }
.permission-item input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #cbd4e1; border-radius: 6px; color: transparent; }
.permission-item input:checked + .check-box { color: #fff; border-color: var(--navy-800); background: var(--navy-800); }
.permission-item strong { display: block; color: var(--text); font-size: 10px; line-height: 1.4; }.permission-item small { color: var(--muted); font-size: 8px; }
.sticky-actions { position: fixed; right: calc(var(--sidebar-width) + 30px); left: 30px; bottom: 18px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; border: 1px solid #d8dfeb; border-radius: 13px; background: rgba(255,255,255,.95); box-shadow: 0 12px 40px rgba(17,32,66,.15); backdrop-filter: blur(12px); }
.sticky-actions > span { color: var(--muted); font-size: 10px; }.sticky-actions > div { display: flex; gap: 8px; }

.report-search { min-width: 290px; }.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.report-card { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: 1fr auto; gap: 12px; min-height: 200px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.report-card[hidden] { display: none; }.report-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--navy-700); background: var(--navy-100); }
.report-copy span { color: var(--gold-600); font-size: 9px; font-weight: 800; }.report-copy h3 { margin: 3px 0 6px; color: var(--ink); font-size: 13px; }.report-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.report-card > .button, .report-card > .planned-badge { grid-column: 1 / -1; align-self: end; }
.planned-badge { width: max-content; display: inline-flex; padding: 5px 8px; border-radius: 7px; color: var(--amber-700); background: var(--amber-100); font-size: 9px; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.settings-card { min-height: 210px; padding: 18px; }.settings-card-head { display: flex; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.settings-card-head > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--navy-700); background: var(--navy-100); }
.settings-card h3 { margin: 0; color: var(--ink); font-size: 13px; }.settings-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.settings-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }.settings-list > div { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 8px 2px; border-bottom: 1px solid #edf0f4; }.settings-list > div:last-child { border: 0; }
.settings-list strong { color: var(--text); font-size: 10.5px; }.settings-list span, .settings-list small { margin-right: auto; color: var(--muted); font-size: 9px; }.settings-list small { margin-right: 0; direction: ltr; }
.settings-card-action { display: flex; align-items: flex-end; flex: 1; padding-top: 22px; }
.demo-settings-card { display: flex; flex-direction: column; border-color: #c8d4e7; background: linear-gradient(145deg,#fff,#f7f9fd); }

/* Demo data workspace */
.demo-credentials { overflow: hidden; margin-bottom: 18px; border-color: #c9b25e; box-shadow: 0 8px 24px rgba(108,87,17,.09); }
.demo-section-heading { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.demo-section-heading > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--navy-700); background: var(--navy-100); }
.demo-section-heading h2 { margin: 0; color: var(--ink); font-size: 15px; }.demo-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.demo-passwords { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding: 1px; background: var(--line); }
.demo-passwords > div { padding: 16px 20px; background: #fffdf5; }.demo-passwords span,.demo-passwords strong { display: block; }.demo-passwords span { color: var(--muted); font-size: 9.5px; }.demo-passwords strong { margin-top: 7px; color: var(--navy-900); font-size: 17px; letter-spacing: .4px; }
.demo-account-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 20px; }.demo-account-columns h3 { margin: 0 0 10px; color: var(--ink); font-size: 12px; }.demo-account-columns table { min-width: 520px; }
.demo-status-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 20px; border-right: 4px solid var(--green-700); background: linear-gradient(145deg,#fff,#f6fbf8); }
.demo-status-icon { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--green-700); background: var(--green-100); }
.demo-status-copy { flex: 1; }.demo-status-copy h2 { margin: 8px 0 5px; color: var(--navy-900); font-size: 17px; direction: ltr; text-align: right; }.demo-status-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.demo-status-actions { display: flex; align-items: center; gap: 8px; }
.demo-module-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.demo-module-links a { min-height: 145px; display: flex; align-items: flex-start; flex-direction: column; gap: 7px; padding: 17px; transition: .18s ease; }.demo-module-links a:hover { transform: translateY(-2px); border-color: #c5d0e1; box-shadow: var(--shadow-md); }
.demo-module-links a > span { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 11px; color: var(--navy-700); background: var(--navy-100); }.demo-module-links strong { color: var(--ink); font-size: 11.5px; }.demo-module-links small { color: var(--muted); font-size: 9px; line-height: 1.6; }
.demo-count-panel { overflow: hidden; margin-bottom: 16px; }.demo-count-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; padding: 1px; background: var(--line); }.demo-count-grid > div { min-height: 67px; display: flex; justify-content: center; flex-direction: column; padding: 12px 15px; background: #fff; }.demo-count-grid span { color: var(--muted); font-size: 9px; }.demo-count-grid strong { margin-top: 4px; color: var(--navy-900); font-size: 17px; }
.demo-danger-zone { overflow: hidden; border-color: #ecc9cc; }.demo-danger-zone .demo-section-heading { background: #fff9f9; }.demo-danger-zone .demo-section-heading > span { color: var(--red-700); background: var(--red-100); }
.demo-danger-form { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: end; gap: 14px; padding: 20px; }.demo-danger-form .demo-confirm-check { grid-column: 1 / -1; }
.demo-confirm-check { display: flex; align-items: center; gap: 9px; color: var(--text); cursor: pointer; font-size: 10px; line-height: 1.6; }.demo-confirm-check input { width: 17px; min-height: 17px; flex: 0 0 auto; accent-color: var(--navy-800); }
.demo-create-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr); gap: 16px; }.demo-create-card,.demo-safety-card { overflow: hidden; }
.demo-preview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; padding: 1px; background: var(--line); }.demo-preview-grid > div { min-height: 85px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 12px; text-align: center; background: #fff; }.demo-preview-grid strong { color: var(--navy-900); font-size: 23px; }.demo-preview-grid span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.demo-check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 20px; list-style: none; }.demo-check-list li { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 10px; }.demo-check-list .icon { color: var(--green-700); }
.demo-create-form { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-top: 1px solid var(--line); background: #fafbfc; }.demo-create-form .demo-confirm-check { max-width: 520px; }
.demo-safety-card { padding: 22px; }.demo-safety-card h3 { margin: 16px 0 7px; color: var(--ink); font-size: 14px; }.demo-safety-card > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; line-height: 1.8; }.demo-safety-points { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--line); }.demo-safety-points div { padding: 12px; background: #fff; }.demo-safety-points strong,.demo-safety-points span { display: block; }.demo-safety-points strong { color: var(--ink); font-size: 10px; }.demo-safety-points span { margin-top: 3px; color: var(--muted); font-size: 8.5px; }.demo-last-purge { display: block; margin-top: 15px; color: var(--muted); font-size: 9px; }
.disabled-card { display: flex; flex-direction: column; justify-content: space-between; background: #fbfcfd; }
.password-change-card { max-width: 620px; margin: 20px auto; overflow: hidden; }
.password-change-head { display: flex; gap: 14px; padding: 23px; border-bottom: 1px solid var(--line); background: var(--navy-50); }
.password-change-head > span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: var(--navy-800); }
.password-change-head h2 { margin: 0; color: var(--ink); font-size: 17px; }.password-change-head p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.7; }
.password-change-form { display: flex; flex-direction: column; gap: 17px; padding: 23px; }

.guest-body { min-height: 100vh; background: #fff; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr); }
.login-visual { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 50px; color: #fff; background: linear-gradient(145deg, #101f42 0%, #18356d 63%, #24457c 100%); }
.visual-pattern { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle at 13% 15%, rgba(199,174,86,.18) 0 1px, transparent 2px), radial-gradient(circle at 78% 82%, rgba(255,255,255,.1) 0 1px, transparent 2px); background-size: 34px 34px, 46px 46px; }
.login-visual::before { content: ""; position: absolute; width: min(70vw, 760px); height: min(70vw, 760px); border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 75px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.018); }
.login-visual::after { content: ""; position: absolute; top: 0; right: 44px; width: 8px; height: 110px; border-radius: 0 0 8px 8px; background: var(--gold-500); }
.school-identity { position: relative; z-index: 1; max-width: 550px; display: flex; align-items: center; flex-direction: column; text-align: center; }
.identity-kicker { margin-bottom: 24px; color: var(--gold-500); font-size: 11px; font-weight: 700; }
.login-logo { width: 166px; height: 166px; object-fit: cover; margin-bottom: 22px; padding: 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #fff; box-shadow: 0 25px 65px rgba(0,0,0,.3); }
.school-identity h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.45; letter-spacing: -.04em; }
.school-identity > p { max-width: 510px; margin: 12px 0 20px; color: rgba(255,255,255,.67); font-size: 13px; line-height: 1.9; }
.stage-list { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 600; }.stage-list i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-500); }
.visual-footer { position: absolute; right: 35px; left: 35px; bottom: 25px; z-index: 1; display: flex; justify-content: space-between; color: rgba(255,255,255,.4); font-size: 9px; }.visual-footer strong { color: var(--gold-500); font-size: 12px; }
.login-panel { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 45px 7vw; background: #fff; }
.login-card { width: 100%; max-width: 420px; }.login-heading { margin-bottom: 26px; }.secure-badge { width: max-content; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 15px; padding: 6px 9px; border-radius: 99px; color: var(--green-700); background: var(--green-100); font-size: 9.5px; font-weight: 700; }
.login-heading h2 { margin: 0; color: var(--ink); font-size: 30px; letter-spacing: -.04em; }.login-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.login-form { display: flex; flex-direction: column; gap: 18px; }.login-form label { font-size: 11.5px; }.login-form input { min-height: 48px; border-radius: 10px; }.label-row { display: flex; align-items: center; justify-content: space-between; }.label-row span { color: var(--muted); font-size: 8.5px; }
.login-help { display: flex; gap: 10px; margin-top: 24px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--navy-700); background: var(--navy-50); }.login-help p { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.6; }.login-help strong { color: var(--text); }
.copyright { position: absolute; bottom: 16px; margin: 0; color: #a2aabb; font-size: 8.5px; }.mobile-brand { display: none; }

.error-page { min-height: 65vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px; text-align: center; }
.error-code { color: var(--navy-100); font-size: 100px; font-weight: 900; line-height: 1; letter-spacing: -.08em; }.error-icon { width: 70px; height: 70px; display: grid; place-items: center; margin-top: -35px; border-radius: 22px; color: var(--navy-700); background: #fff; box-shadow: var(--shadow-md); }
.error-page h2 { margin: 20px 0 8px; color: var(--ink); font-size: 20px; }.error-page p { max-width: 430px; margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.sidebar-overlay { display: none; }

/* Finance */
.finance-metrics .metric-card strong { font-size: 18px; }
.finance-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin: 0 0 16px; }
.finance-summary-grid article { min-height: 92px; display: flex; justify-content: center; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.finance-summary-grid article span { color: var(--muted); font-size: 9.5px; font-weight: 700; }.finance-summary-grid article strong { color: var(--navy-900); font-size: 17px; }.finance-summary-grid article.danger { border-color: #efd3d5; background: #fffafb; }
.report-summary { grid-template-columns: repeat(4,minmax(0,1fr)); margin: 16px 0; }.text-success { color: var(--green-700) !important; }.text-danger { color: var(--red-700) !important; }
.account-balance { display: block; color: var(--navy-900); font-size: 20px; white-space: nowrap; }.record-status:has(.account-balance) { align-items: flex-end; flex-direction: column; }.record-status small { color: var(--muted); font-size: 9px; }
.finance-actions-grid { margin: 16px 0; }.section-divider { width: calc(100% - 34px); margin: 5px 17px; border: 0; border-top: 1px solid var(--line); }
.repeater-table { display: flex; flex-direction: column; gap: 8px; padding: 4px 17px 15px; }.repeater-row { display: flex; align-items: flex-end; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfc; }.repeater-row .field-group { min-width: 180px; }.repeater-row .grow { flex: 1; }.repeater-remove { margin-bottom: 3px; color: var(--red-700); background: var(--red-100); }
.plan-total { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--line); }.plan-total span { color: var(--muted); font-size: 10px; }.plan-total strong { color: var(--navy-900); font-size: 17px; }
.cashbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-bottom: 16px; }.cashbox-card { overflow: hidden; }.cashbox-card-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; padding: 17px; border-bottom: 1px solid var(--line); }.cashbox-card-head h3 { margin: 2px 0; color: var(--ink); font-size: 14px; }.cashbox-card-head small { color: var(--muted); font-size: 9px; }.compact-list { margin: 14px 17px; }.compact-list > div { min-height: 52px; }.cashbox-open-form { padding-top: 14px; }.cashbox-forms { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 17px 17px; }.cashbox-forms details { flex: 1; }.cashbox-forms summary { width: 100%; list-style: none; cursor: pointer; }.detail-form { margin-top: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.receipt-card { position: relative; overflow: hidden; max-width: 900px; margin: 0 auto 16px; padding: 22px; }.receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.receipt-head h2 { margin: 4px 0 0; color: var(--navy-900); }.receipt-amount { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin: 18px 0; padding: 20px; border-radius: 13px; color: #fff; background: linear-gradient(135deg,var(--navy-900),var(--navy-700)); }.receipt-amount span { color: rgba(255,255,255,.7); font-size: 10px; }.receipt-amount strong { font-size: 28px; }.receipt-data { border: 1px solid var(--line); }.receipt-invalid { opacity: .88; }.cancelled-stamp { position: absolute; top: 105px; left: 45px; z-index: 2; padding: 10px 22px; border: 5px double var(--red-700); border-radius: 8px; color: var(--red-700); font-size: 29px; font-weight: 900; transform: rotate(-13deg); opacity: .72; }
.print-sheet { width: min(190mm,calc(100% - 30px)); min-height: 260mm; margin: 25px auto; padding: 14mm; background: #fff; box-shadow: var(--shadow-md); }.print-sheet .print-header { grid-template-columns: 80px 1fr; text-align: right; }.print-document-meta { display: flex; justify-content: space-between; gap: 12px; margin: 15px 0; padding: 10px; border: 1px solid #ccd2dc; font-size: 10px; }.print-amount { margin: 14px 0; }.print-details { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; padding: 1px; background: #ccd2dc; }.print-details div { padding: 9px; background: #fff; }.print-details dt { color: #657087; font-size: 9px; }.print-details dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; }.print-table { width: 100%; margin-top: 14px; border-collapse: collapse; }.print-table th,.print-table td { padding: 9px; border: 1px solid #ccd2dc; }.receipt-verification { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 15px; padding: 11px; border: 1px dashed #8993a4; }.receipt-verification img { width: 105px; height: 105px; flex: 0 0 auto; }.receipt-verification > div { min-width: 0; }.receipt-verification span,.receipt-verification small { display: block; color: #657087; font-size: 8px; }.receipt-verification small { margin-top: 6px; direction: ltr; overflow-wrap: anywhere; }.print-stamp { top: 50%; left: 38%; }
.verification-card { max-width: 520px; margin: 8vh auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-md); }.verification-card .login-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.verification-card .login-brand img { width: 62px; height: 62px; border-radius: 50%; }.verification-card .login-brand strong,.verification-card .login-brand span { display: block; }.verification-card .login-brand span { margin-top: 4px; color: var(--muted); font-size: 10px; }.verification-result { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; margin: 20px 0; padding: 18px; border-radius: 12px; }.verification-result.valid { color: var(--green-700); background: var(--green-100); }.verification-result.invalid { color: var(--red-700); background: var(--red-100); }
.status-issued,.status-active,.status-paid,.status-approved { color: var(--green-700); background: var(--green-100); }.status-unpaid,.status-overdue,.status-cancelled,.status-refunded { color: var(--red-700); background: var(--red-100); }.status-partial,.status-partially_refunded,.status-pending { color: var(--amber-700); background: var(--amber-100); }.status-draft { color: var(--navy-700); background: var(--navy-100); }

/* Academic and portal */
.table-input { width: 92px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.switch-field.compact { min-height: 34px; margin: 0; }.approval-timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-bottom: 16px; padding: 1px; background: var(--line); overflow: hidden; }.timeline-step { min-height: 85px; display: flex; justify-content: center; flex-direction: column; gap: 4px; padding: 14px; background: #fff; }.timeline-step:before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #c7ceda; }.timeline-step.active:before { background: var(--green-700); box-shadow: 0 0 0 4px var(--green-100); }.timeline-step strong { color: var(--ink); font-size: 11px; }.timeline-step span,.timeline-step small { color: var(--muted); font-size: 9px; }
.grade-sheet-panel { overflow: hidden; }.grade-entry-wrap { max-height: 68vh; }.grade-entry-table { min-width: 900px; }.grade-entry-table thead th { position: sticky; top: 0; z-index: 2; }.grade-entry-table thead small { display: block; margin-top: 3px; font-weight: 500; }.score-cell { min-width: 125px; display: grid; gap: 5px; }.score-cell input,.score-cell select { min-height: 34px; padding: 6px; font-size: 9px; }.score-cell input { direction: ltr; text-align: center; font-weight: 800; }.result-actions,.decision-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 16px; }.result-actions .inline-form { flex-wrap: wrap; }.result-actions input { min-width: 160px; }.result-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 22px; }.result-hero h2 { margin: 5px 0 9px; color: var(--navy-900); }.result-score { min-width: 170px; display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 17px; border-radius: 14px; color: #fff; background: linear-gradient(135deg,var(--navy-900),var(--navy-700)); }.result-score strong { font-size: 30px; }.result-score span { color: rgba(255,255,255,.8); }.result-score .status { margin-top: 5px; }.result-print-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 14px 0; padding: 1px; background: #ccd2dc; }.result-print-summary div { padding: 12px; text-align: center; background: #fff; }.result-print-summary span,.result-print-summary strong { display: block; }.result-print-summary span { color: #657087; font-size: 9px; }.result-print-summary strong { margin-top: 4px; font-size: 12px; }
.status-submitted,.status-second_round,.status-incomplete { color: var(--amber-700); background: var(--amber-100); }.status-reviewed { color: var(--violet-600); background: #eeeaf8; }.status-locked,.status-passed,.status-promoted,.status-graduated { color: var(--green-700); background: var(--green-100); }.status-failed,.status-withheld,.status-repeat,.status-transferred { color: var(--red-700); background: var(--red-100); }
.portal-entry-link,.portal-staff-link { display: block; margin-top: 15px; color: var(--navy-700); font-size: 10px; font-weight: 800; text-align: center; }.portal-body { min-height: 100vh; color: var(--text); background: #f2f5fa; }.portal-topbar { position: sticky; top: 0; z-index: 20; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px max(24px,calc((100% - 1160px)/2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }.portal-brand { display: flex; align-items: center; gap: 11px; color: var(--navy-900); }.portal-brand img { width: 54px; height: 54px; border-radius: 50%; }.portal-brand strong,.portal-brand span,.portal-user strong,.portal-user span { display: block; }.portal-brand span,.portal-user span { margin-top: 3px; color: var(--muted); font-size: 9px; }.portal-user { display: flex; align-items: center; gap: 9px; }.portal-user > div { margin-left: 5px; }.portal-main { width: min(1160px,calc(100% - 32px)); margin: 0 auto; padding: 28px 0 55px; }.portal-main.portal-guest { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg,#eef2f8,#fff); }.portal-login { width: min(940px,100%); min-height: 560px; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 24px 65px rgba(16,38,80,.16); }.portal-login-brand { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 13px; padding: 45px; color: #fff; text-align: center; background: radial-gradient(circle at 20% 15%,rgba(199,174,86,.25),transparent 34%),linear-gradient(145deg,var(--navy-950),var(--navy-700)); }.portal-login-brand img { width: 170px; height: 170px; border-radius: 50%; box-shadow: 0 15px 36px rgba(0,0,0,.2); }.portal-login-brand h1 { margin: 10px 0; font-size: 24px; }.portal-login-brand span { color: rgba(255,255,255,.72); font-size: 10px; }.portal-login-brand strong { color: var(--gold-500); }.portal-login-form { display: flex; justify-content: center; flex-direction: column; gap: 18px; padding: 50px; }.portal-login-form h2 { margin: 0 0 8px; color: var(--navy-900); }.button-block { width: 100%; }.portal-welcome { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }.portal-welcome span { color: var(--muted); font-size: 10px; }.portal-welcome h1 { margin: 4px 0 0; color: var(--navy-900); }.application-status-card { margin-bottom: 18px; }.application-decision { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; padding: 18px; border-top: 1px solid var(--line); }.application-decision strong { color: var(--navy-900); font-size: 18px; }.application-decision p { margin: 5px 0 0; }.portal-students .section-title { margin-bottom: 12px; }.portal-student-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.portal-student-card { padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }.portal-student-head { display: flex; align-items: center; gap: 12px; }.portal-student-head h3 { margin: 3px 0; color: var(--navy-900); }.portal-student-head p { margin: 0; color: var(--muted); font-size: 9px; }.portal-student-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }.portal-balance span,.portal-balance strong { display: block; text-align: left; }.portal-balance span { color: var(--muted); font-size: 8px; }.portal-balance strong { margin-top: 3px; color: var(--navy-900); }.portal-pending { color: var(--muted); font-size: 10px; }.portal-page-actions { display: flex; gap: 8px; margin-bottom: 14px; }.portal-decision { margin-top: 16px; padding: 20px; text-align: center; }.portal-decision span,.portal-decision strong { display: block; }.portal-decision strong { margin-top: 6px; color: var(--navy-900); font-size: 19px; }.portal-form-card { max-width: 520px; margin: 30px auto; padding: 20px; }

@media (max-width: 1180px) {
    .metric-grid, .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finance-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .demo-module-links { grid-template-columns: repeat(2,minmax(0,1fr)); }.demo-count-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.demo-create-layout { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    :root { --sidebar-width: 278px; }
    .sidebar { transform: translateX(105%); transition: transform .23s ease; }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-open { overflow: hidden; }
    .sidebar-open .sidebar-overlay { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(8,18,39,.48); backdrop-filter: blur(2px); }
    .sidebar-close, .menu-button { display: inline-flex !important; }
    .main-area { margin-right: 0; }
    .sticky-actions { right: 20px; left: 20px; }
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-panel { padding: 85px 25px 50px; }
    .mobile-brand { position: absolute; top: 22px; right: 25px; display: flex; align-items: center; gap: 8px; color: var(--navy-800); }.mobile-brand img { width: 42px; height: 42px; border-radius: 50%; }.mobile-brand strong { font-size: 19px; }
}

@media (max-width: 760px) {
    .topbar { min-height: 70px; padding: 11px 15px; }.page-heading .eyebrow, .date-chip, .user-meta { display: none; }.page-heading h1 { font-size: 17px; }.topbar-actions { gap: 5px; }.user-menu { padding-right: 6px; }.user-menu form { display: none; }
    .page-content { padding: 19px 15px 40px; }
    .academic-year-bar { align-items: flex-start; flex-direction: column; }.academic-year-bar small { margin-right: 0; }
    .metric-grid, .quick-grid, .role-grid, .report-grid, .settings-grid, .permission-groups, .finance-summary-grid, .cashbox-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }.activity-panel { order: 2; }
    .page-toolbar { align-items: stretch; flex-direction: column; }.toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }.toolbar-actions .button { width: 100%; }
    .filter-bar { align-items: stretch; flex-direction: column; }.search-field, .report-search { width: 100%; min-width: 0; }.filter-bar select { width: 100%; }
    .form-grid.cols-2, .form-grid.cols-3, .form-grid.cols-4, .role-choice-grid, .permission-list, .form-split, .detail-grid, .workflow-grid { grid-template-columns: 1fr; }
    .form-grid .span-2, .form-grid .span-3, .form-grid .span-4, .detail-card.wide { grid-column: auto; }
    .record-header, .document-row { align-items: flex-start; flex-direction: column; }.record-status { margin-right: 0; }.document-actions { width: 100%; justify-content: flex-start; }
    .data-list { grid-template-columns: 1fr; }.timeline-item { grid-template-columns: 12px 1fr; }.timeline-item time { grid-column: 2; }
    .permission-toolbar { align-items: flex-start; flex-direction: column; }.sticky-actions > span { display: none; }.sticky-actions { justify-content: center; bottom: 9px; }.sticky-actions > div { width: 100%; }.sticky-actions .button { flex: 1; }
    .report-card { min-height: 170px; }
    .repeater-row { align-items: stretch; flex-direction: column; }.repeater-row .field-group,.repeater-remove { width: 100%; }.print-document-meta,.receipt-head { align-items: flex-start; flex-direction: column; }.receipt-card { padding: 16px; }
    .approval-timeline,.result-print-summary { grid-template-columns: repeat(2,1fr); }.result-actions,.decision-panel,.result-hero,.portal-topbar { align-items: stretch; flex-direction: column; }.result-score { width: 100%; }.portal-login { grid-template-columns: 1fr; }.portal-login-brand { padding: 28px; }.portal-login-brand img { width: 105px; height: 105px; }.portal-login-brand h1 { font-size: 18px; }.portal-login-form { padding: 30px 24px; }.portal-student-grid { grid-template-columns: 1fr; }.portal-user { flex-wrap: wrap; }.portal-user > div { width: 100%; }.portal-student-actions { align-items: stretch; flex-direction: column; }.portal-balance span,.portal-balance strong { text-align: right; }
    .demo-passwords,.demo-account-columns,.demo-module-links,.demo-preview-grid,.demo-check-list,.demo-count-grid { grid-template-columns: 1fr; }.demo-status-hero,.demo-create-form { align-items: stretch; flex-direction: column; }.demo-status-actions { display: grid; grid-template-columns: 1fr 1fr; }.demo-danger-form { grid-template-columns: 1fr; }.demo-danger-form .demo-confirm-check { grid-column: auto; }
}

@media print {
    .sidebar, .topbar, .page-toolbar, .filter-bar, .button, .sticky-actions { display: none !important; }
    .main-area { margin: 0; }.page-content { max-width: none; padding: 0; }.panel { border-color: #bbb; box-shadow: none; }
    body { color: #000; background: #fff; } table { font-size: 10pt; } th { color: #000; background: #eee !important; }
    .print-trigger { display: none !important; }.print-document,.print-sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
}