:root {
    --ink: #17242d;
    --muted: #687882;
    --line: #dfe7e9;
    --soft: #f3f7f7;
    --paper: #ffffff;
    --teal: #155e75;
    --teal-dark: #0f4658;
    --teal-pale: #e7f5f6;
    --orange: #d97706;
    --blue: #2563eb;
    --red: #b42318;
    --green: #147d64;
    --shadow: 0 14px 38px rgba(24, 50, 60, .08);
    --radius: 18px;
    --sidebar: 252px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--soft); }
body { margin: 0; min-height: 100vh; font-size: 15px; line-height: 1.45; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
input, select, textarea { width: 100%; border: 1px solid #cdd9dc; border-radius: 10px; padding: .72rem .82rem; color: var(--ink); background: #fff; transition: border .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,94,117,.12); }
textarea { resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -.025em; }
h2 { margin-bottom: .25rem; font-size: 1.14rem; letter-spacing: -.015em; }
h3 { margin-bottom: .3rem; }
small { color: var(--muted); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar); display: flex; flex-direction: column; padding: 24px 18px; color: #e7f3f5; background: linear-gradient(180deg, #133d4c 0%, #102f3b 100%); }
.brand { display: flex; gap: 12px; align-items: center; padding: 3px 8px 24px; text-decoration: none; }
.brand strong, .auth-brand strong { display: block; color: #fff; font-size: 1.08rem; }
.brand small, .auth-brand small { display: block; max-width: 160px; overflow: hidden; color: #9fc2cc; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #113c4a; background: #d6f2ee; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.brand-mark.large { width: 52px; height: 52px; border-radius: 16px; font-size: 1.25rem; }
.nav-list { display: grid; gap: 5px; overflow-y: auto; }
.nav-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 11px; color: #bcd2d8; text-decoration: none; font-weight: 650; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.is-active { color: #fff; background: rgba(107, 215, 205, .17); box-shadow: inset 3px 0 #7dd3c7; }
.nav-icon { width: 20px; text-align: center; }
.nav-icon::before { content: "•"; }
.nav-icon[data-icon="grid"]::before { content: "▦"; }
.nav-icon[data-icon="receipt"]::before { content: "₹"; }
.nav-icon[data-icon="list"]::before { content: "≡"; }
.nav-icon[data-icon="users"]::before { content: "♙"; }
.nav-icon[data-icon="form"]::before { content: "▤"; }
.nav-icon[data-icon="shield"]::before { content: "◈"; }
.nav-icon[data-icon="calendar"]::before { content: "□"; }
.nav-icon[data-icon="wallet"]::before { content: "◇"; }
.nav-icon[data-icon="chart"]::before { content: "⌁"; }
.nav-icon[data-icon="settings"]::before { content: "⚙"; }
.sidebar-footer { display: grid; gap: 12px; margin-top: auto; padding: 18px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.user-chip { display: flex; gap: 10px; align-items: center; min-width: 0; text-decoration: none; }
.user-chip strong { display: block; max-width: 130px; overflow: hidden; color: #fff; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { display: block; color: #91b2bb; font-size: .7rem; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--teal-dark); background: #bfe7e4; font-weight: 800; }
.sidebar .text-link { color: #a7c6ce; font-size: .8rem; }

.main-content { min-height: 100vh; margin-left: var(--sidebar); padding: 0 32px 48px; }
.topbar { display: flex; gap: 20px; align-items: center; min-height: 104px; padding: 22px 0; }
.topbar .eyebrow { margin-bottom: 3px; }
.top-actions { display: flex; gap: 8px; margin-left: auto; }
.top-actions .button { white-space: nowrap; }
.page-content { display: grid; min-width: 0; gap: 20px; }
.page-content > *, .preview-page > *, [data-preview-report-panel] { min-width: 0; max-width: 100%; }
.preview-page { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: 20px; }
.preview-page[hidden] { display: none !important; }
.eyebrow { margin-bottom: 5px; color: var(--teal); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; min-width: 0; }

.panel { overflow: hidden; padding: 22px; border: 1px solid rgba(205,217,220,.75); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.panel-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-header h2 { margin: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.metric-card { position: relative; overflow: hidden; min-height: 142px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.metric-card::after { position: absolute; right: -24px; bottom: -35px; width: 116px; height: 116px; border-radius: 50%; background: currentColor; content: ""; opacity: .07; }
.metric-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: currentColor; content: ""; }
.metric-card strong { display: block; margin: 10px 0 6px; color: var(--ink); font-size: clamp(1.65rem, 3vw, 2.15rem); letter-spacing: -.045em; }
.metric-label { color: var(--muted); font-size: .8rem; font-weight: 700; }
.accent-teal { color: var(--green); } .accent-orange { color: var(--orange); } .accent-blue { color: var(--blue); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 20px; }
.counter-cta { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 14px; background: linear-gradient(115deg, #edf8f7, #f8fbfb); }
.counter-cta p { margin: 0; color: var(--muted); }
.counter-cta .button { flex: 0 0 auto; margin-left: auto; }
.receipt-illustration { display: grid; flex: 0 0 auto; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; background: var(--teal); font-size: 1.6rem; font-weight: 800; box-shadow: 0 10px 24px rgba(21,94,117,.22); }
.mode-list { display: grid; gap: 13px; }
.mode-list div { display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; align-items: center; }
.mode-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.mode-upi { background: var(--orange); } .mode-cheque { background: var(--blue); } .mode-bank { background: #7c3aed; }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: .68rem 1rem; border: 1px solid transparent; border-radius: 10px; text-decoration: none; font-weight: 750; line-height: 1; transition: transform .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--teal); box-shadow: 0 8px 20px rgba(21,94,117,.18); }
.button.primary:hover { background: var(--teal-dark); }
.button.secondary { color: var(--teal-dark); border-color: #b9d1d6; background: #edf6f7; }
.button.ghost { color: var(--ink); border-color: var(--line); background: #fff; }
.button.light { color: var(--teal-dark); background: #fff; }
.button.full { width: 100%; }
.button.danger-button, .danger-button { color: #fff; background: var(--red); }
.text-link, .text-button { padding: 0; border: 0; color: var(--teal); background: none; text-decoration: none; font-weight: 750; }
.text-link:hover, .text-button:hover { text-decoration: underline; }
.text-button.danger { color: var(--red); }
.icon-link { display: inline-grid; min-width: 30px; min-height: 30px; place-items: center; color: var(--teal); text-decoration: none; font-weight: 750; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.mobile-menu { display: none; }

.table-wrap { overflow-x: auto; margin: 0 -22px -22px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 18px; border-top: 1px solid #e8edef; text-align: left; vertical-align: middle; }
thead th { border-top: 0; color: #6d7c84; background: #f8fafa; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
td { font-size: .86rem; }
td small { display: block; margin-top: 2px; }
td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-actions { text-align: right; white-space: nowrap; }
.table-actions > * + * { margin-left: 10px; }
.empty-cell, .empty-state { padding: 36px !important; color: var(--muted); text-align: center; }
.voided-row { opacity: .58; text-decoration: line-through; }
.badge, .status, .chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: .67rem; font-weight: 800; letter-spacing: .03em; }
.badge { color: #36565f; background: #edf3f4; }
.status-active { color: #0f6a55; background: #def4ec; }
.status-inactive { color: #8a3e35; background: #f9e5e2; }
.overdue { color: var(--red); font-weight: 750; }

.alert { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; padding: 13px 15px; border-radius: 12px; font-weight: 650; }
.alert span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; }
.alert-success { color: #11624f; border: 1px solid #bae3d5; background: #e7f7f1; }
.alert-success span { color: #fff; background: var(--green); }
.alert-error { color: #8d2c23; border: 1px solid #f0c8c4; background: #fff0ee; }
.alert-error span { color: #fff; background: var(--red); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { color: #52636b; font-size: .76rem; font-weight: 750; }
.field small { font-size: .69rem; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.stack-form { display: grid; gap: 16px; }
.stack-form.compact { gap: 12px; }
.inline-form, .filter-row { display: flex; gap: 12px; align-items: end; }
.filter-row.wrap { flex-wrap: wrap; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-label { display: grid; grid-template-columns: auto minmax(130px, 1fr); align-items: center; }
.filter-panel { padding: 14px 18px; }
.filter-panel select { width: auto; min-width: 145px; }
.search-box { display: flex; flex: 1 1 260px; align-items: center; min-width: 200px; padding-left: 12px; border: 1px solid #cdd9dc; border-radius: 10px; background: #fff; }
.search-box input { border: 0; box-shadow: none; }
.money-input, .compact-money { display: flex; align-items: center; overflow: hidden; border: 1px solid #cdd9dc; border-radius: 10px; background: #fff; }
.money-input:focus-within, .compact-money:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,94,117,.12); }
.money-input span, .compact-money span { padding-left: 11px; color: var(--muted); }
.money-input input, .compact-money input { border: 0; box-shadow: none; }
.compact-money { min-width: 105px; }
.compact-money input { min-width: 82px; padding: .55rem .4rem; text-align: right; }
.divider { position: relative; margin: 3px 0; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.divider::after { position: absolute; top: 50%; right: 0; left: 120px; height: 1px; background: var(--line); content: ""; }
.form-panel summary { margin: -22px; padding: 20px 22px; font-weight: 800; }
.form-panel[open] summary { margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.two-column { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 20px; align-items: start; }
.settings-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: start; }
.chip-list, .year-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chip { color: #52636b; background: #edf3f4; }
.chip-active { color: #11624f; background: #dff4ec; }

.search-hero { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; background: linear-gradient(120deg, #fff, #eff8f7); }
.search-hero p { margin-bottom: 0; color: var(--muted); }
.student-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 6px 6px 6px 14px; border: 1px solid #c3d6da; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgba(21,94,117,.08); }
.student-search input { border: 0; box-shadow: none; font-size: 1rem; }
.student-result-list { display: grid; gap: 8px; }
.student-result { display: flex; gap: 13px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 13px; text-decoration: none; transition: border .15s, transform .15s; }
.student-result:hover { border-color: #8eb7bf; transform: translateY(-1px); }
.student-result strong, .student-result small { display: block; }
.large-avatar { width: 42px; height: 42px; }
.choose-arrow { color: var(--teal); font-size: 1.2rem; }
.student-banner { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--radius); color: #eaf6f7; background: linear-gradient(115deg, #154b5d, #176a77); box-shadow: var(--shadow); }
.student-banner h2 { margin-bottom: 2px; color: #fff; font-size: 1.35rem; }
.student-banner p { margin: 0; color: #c1dfe3; }
.student-banner .eyebrow { color: #8fddd3; }
.student-avatar { width: 50px; height: 50px; font-size: 1.2rem; }
.success-empty > span { display: grid; width: 52px; height: 52px; margin: 0 auto 12px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 1.5rem; }
.collection-form { display: grid; gap: 20px; }
.collection-table td { min-width: 120px; }
.collection-table td:first-child { min-width: 190px; }
.checkout-grid { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: stretch; }
.payment-summary { padding: 23px; border-radius: var(--radius); color: #d8ebee; background: linear-gradient(145deg, #143f4e, #0e2e39); box-shadow: var(--shadow); }
.payment-summary .eyebrow { color: #85d7cc; }
.payment-summary > div { display: flex; justify-content: space-between; padding: 8px 0; }
.payment-summary > div strong { color: #fff; }
.payment-summary .grand-total { margin: 13px 0 17px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.payment-summary .grand-total strong { font-size: 1.5rem; }
.payment-summary > small { display: block; margin-top: 12px; color: #96bac2; text-align: center; }

.report-tabs { display: flex; min-width: 0; max-width: 100%; gap: 7px; overflow-x: auto; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.report-tabs a { flex: 0 0 auto; padding: 9px 13px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 750; }
.report-tabs a.is-active { color: #fff; background: var(--teal); }
.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.report-summary article { padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.report-summary span { display: block; color: var(--muted); font-size: .72rem; }
.report-summary strong { display: block; margin-top: 5px; font-size: 1.3rem; }
.security-note { display: flex; gap: 16px; align-items: center; color: #245263; background: #eef7f7; }
.security-note p { margin: 0; }
.security-icon { display: grid; flex: 0 0 auto; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: var(--teal); font-size: 1.5rem; }
.user-settings { grid-template-columns: 320px 1fr; }
.profile-panel { width: min(520px, 100%); }
.embedded-table { overflow: auto; max-height: 520px; margin: 0; border: 1px solid var(--line); border-radius: 13px; }
.fee-plan-layout { grid-template-columns: minmax(350px, .9fr) minmax(480px, 1.1fr); }
.single-column { grid-template-columns: 1fr; }
.mini-form { display: grid; min-width: 260px; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.liability-total { margin: 10px 0 14px; color: var(--teal); font-size: clamp(2rem, 5vw, 3rem); font-weight: 850; letter-spacing: -.05em; }

dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius); box-shadow: 0 24px 80px rgba(10,30,40,.28); }
dialog::backdrop { background: rgba(11,32,40,.55); backdrop-filter: blur(3px); }
.dialog-card { padding: 24px; }
.dialog-card p { color: var(--muted); }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.receipt-page { max-width: 940px; margin: 0 auto; }
.receipt-toolbar { display: flex; justify-content: space-between; margin-bottom: 12px; }
.print-receipt { position: relative; overflow: hidden; padding: 42px; border: 1px solid #ccd7da; background: #fff; box-shadow: var(--shadow); }
.receipt-header { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.receipt-logo { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--teal); border-radius: 15px; color: var(--teal); font-size: 1.35rem; font-weight: 800; }
.receipt-header h1 { font-size: 1.35rem; }
.receipt-header p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.receipt-title { text-align: right; }
.receipt-title strong, .receipt-title span { display: block; }
.receipt-title strong { font-size: 1.1rem; letter-spacing: .12em; }
.receipt-title span { color: var(--muted); font-size: .68rem; }
.receipt-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 20px; padding: 22px 0; }
.receipt-meta-grid span, .receipt-payment span, .receipt-footer span { display: block; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.receipt-meta-grid strong { display: block; margin-top: 3px; }
.receipt-items { border: 1px solid var(--line); }
.receipt-items th, .receipt-items td { padding: 11px 13px; }
.receipt-payment { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 17px 20px; border-radius: 12px; background: #eef5f5; }
.receipt-payment small { display: block; }
.receipt-total { text-align: right; }
.receipt-total strong { display: block; font-size: 1.55rem; }
.receipt-notes, .void-note { margin: 15px 0 0; padding: 10px 12px; border-left: 3px solid var(--teal); background: #f4f8f8; font-size: .8rem; }
.amount-words { margin: 12px 0 0; color: #42565f; font-size: .78rem; }
.void-note { color: var(--red); border-color: var(--red); background: #fff1ef; }
.receipt-footer { display: flex; justify-content: space-between; margin-top: 52px; }
.signature { min-width: 170px; padding-top: 8px; border-top: 1px solid var(--ink); text-align: center; }
.receipt-system-note { margin: 28px 0 0; color: #87949b; font-size: .63rem; text-align: center; }
.void-watermark { position: absolute; z-index: 1; top: 42%; left: 28%; color: rgba(180,35,24,.12); font-size: 7rem; font-weight: 900; letter-spacing: .1em; transform: rotate(-20deg); }

.auth-body { display: grid; min-height: 100vh; padding: 24px; place-items: center; background: radial-gradient(circle at 15% 10%, rgba(126,211,199,.24), transparent 35%), linear-gradient(145deg, #0d3542, #155e75); }
.auth-card, .install-card { width: min(430px, 100%); padding: 34px; border-radius: 24px; background: #fff; box-shadow: 0 30px 100px rgba(2,19,25,.32); }
.install-card { width: min(760px, 100%); }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 30px; }
.auth-brand strong { color: var(--ink); }
.auth-brand small { color: var(--muted); }
.auth-card h1 { margin-bottom: 8px; font-size: 2rem; }
.auth-note { margin: 24px 0 0; color: var(--muted); font-size: .7rem; text-align: center; }
.install-intro { margin-bottom: 25px; text-align: center; }
.install-intro .brand-mark { margin: 0 auto 15px; }
.install-intro p:last-child { margin-bottom: 0; color: var(--muted); }

.sidebar-overlay { display: none; }

@media (max-width: 1020px) {
    :root { --sidebar: 224px; }
    .main-content { padding-right: 22px; padding-left: 22px; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .metric-card:last-child { grid-column: span 2; }
    .dashboard-grid, .two-column, .settings-grid { grid-template-columns: 1fr; }
    .checkout-grid { grid-template-columns: 1fr 300px; }
    .user-settings { grid-template-columns: 280px 1fr; }
}

@media (max-width: 760px) {
    body { font-size: 14px; }
    .sidebar { width: min(84vw, 290px); transform: translateX(-105%); transition: transform .22s ease; }
    body.menu-open .sidebar { transform: translateX(0); }
    .sidebar-overlay { position: fixed; z-index: 20; inset: 0; display: block; pointer-events: none; background: rgba(8,28,35,.48); opacity: 0; transition: opacity .2s; }
    body.menu-open .sidebar-overlay { pointer-events: auto; opacity: 1; }
    .main-content { margin-left: 0; padding: 0 14px 32px; }
    .topbar { min-height: 82px; }
    .mobile-menu { display: block; }
    .top-actions .button { padding: .6rem .75rem; font-size: .78rem; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card:last-child { grid-column: auto; }
    .dashboard-grid, .checkout-grid, .search-hero, .settings-grid, .two-column, .user-settings { grid-template-columns: 1fr; }
    .counter-cta { align-items: flex-start; flex-wrap: wrap; }
    .counter-cta .button { width: 100%; margin-left: 0; }
    .panel { padding: 17px; border-radius: 15px; }
    .table-wrap { margin: 0 -17px -17px; }
    th, td { padding: 11px 13px; }
    .filter-row, .inline-form { align-items: stretch; flex-direction: column; }
    .filter-panel select, .filter-row > *, .inline-form > * { width: 100%; }
    .inline-label { grid-template-columns: 62px 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .student-search { grid-template-columns: auto 1fr; }
    .student-search .button { grid-column: span 2; width: 100%; }
    .student-banner { align-items: flex-start; flex-wrap: wrap; }
    .student-banner .button { width: 100%; }
    .collection-table-wrap { margin-right: -17px; margin-left: -17px; }
    .payment-summary { position: sticky; bottom: 8px; z-index: 5; border-radius: 15px; }
    .report-tabs { margin-right: -14px; margin-left: -14px; border-radius: 0; }
    .receipt-page { margin: 0 -14px; }
    .print-receipt { padding: 22px 17px; border-right: 0; border-left: 0; }
    .receipt-header { grid-template-columns: auto 1fr; }
    .receipt-title { grid-column: span 2; text-align: left; }
    .receipt-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .receipt-payment { gap: 15px; align-items: flex-start; flex-direction: column; }
    .receipt-total { width: 100%; text-align: left; }
    .auth-card, .install-card { padding: 25px 20px; border-radius: 19px; }
}

@media print {
    @page { margin: 12mm; size: A4; }
    body { color: #000; background: #fff; }
    .sidebar, .topbar, .alert, .no-print, .sidebar-overlay, .filter-panel, .report-tabs, .top-actions { display: none !important; }
    .main-content { margin: 0; padding: 0; }
    .page-content { display: block; }
    .panel, .print-receipt { border: 0; box-shadow: none; }
    .print-receipt { padding: 0; }
    .report-summary { margin-bottom: 12px; grid-template-columns: repeat(4, 1fr); }
    .report-summary article { padding: 8px; border: 1px solid #bbb; }
    .report-output { padding: 0; }
    .table-wrap { overflow: visible; margin: 0; }
    th, td { padding: 6px 8px; font-size: 10px; }
    .receipt-header h1 { font-size: 18px; }
}