*{box-sizing:border-box}
:root{
    --navy:#0d2942;
    --navy-2:#0a3f53;
    --teal:#0ea5a3;
    --teal-2:#18b8aa;
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#122033;
    --muted:#708096;
    --border:#e3eaf2;
    --green:#0f9f6e;
    --blue:#2f7fe7;
    --orange:#f67a24;
    --purple:#7f56d9;
    --red:#c13d3d;
}
html,body{margin:0;padding:0}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}

.app-body{min-height:100vh;background:linear-gradient(135deg,#f7f9fc,#f1f7f8)}
.sidebar{
    position:fixed;inset:0 auto 0 0;width:255px;
    background:linear-gradient(180deg,#102b44,#075467);
    color:#fff;padding:26px 20px;display:flex;flex-direction:column;
    box-shadow:12px 0 35px rgba(15,44,68,.08);z-index:20
}
.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.sidebar-brand>span{
    width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
    background:linear-gradient(135deg,#2bd6c3,#10bfb2);color:#073a44;font-weight:900
}
.sidebar-brand strong,.sidebar-brand small{display:block}
.sidebar-brand strong{font-size:19px}
.sidebar-brand small{font-size:12px;opacity:.72;margin-top:3px}
.unit-identity{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
    border-radius:14px;padding:14px;margin-bottom:18px
}
.unit-identity small,.unit-identity strong,.unit-identity span{display:block}
.unit-identity small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.65}
.unit-identity strong{font-size:18px;margin:5px 0}
.unit-identity span{font-size:12px;opacity:.75}
.sidebar nav{display:grid;gap:6px}
.sidebar nav a{
    padding:12px 14px;border-radius:11px;color:#d8edf0;font-size:15px;
    transition:.15s ease
}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(33,202,185,.20);color:#fff}
.logout-btn{
    margin-top:auto;width:100%;padding:12px;border-radius:11px;
    border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff
}
.main-content{margin-left:255px;padding:34px 38px 48px}
.topbar{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:26px}
.topbar h1{margin:3px 0 5px;font-size:30px;letter-spacing:-.6px}
.topbar p{margin:0;color:var(--muted)}
.eyebrow{font-size:11px!important;font-weight:800;letter-spacing:.12em;color:#15978f!important}
.profile{text-align:right;padding-top:5px}
.profile strong,.profile span{display:block}
.profile strong{font-size:15px}
.profile span{font-size:12px;color:var(--muted);margin-top:4px}

.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.stat-card{
    background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;
    box-shadow:0 8px 26px rgba(29,50,73,.05);position:relative;overflow:hidden
}
.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.accent-green:before{background:var(--green)}
.accent-blue:before{background:var(--blue)}
.accent-orange:before{background:var(--orange)}
.accent-purple:before{background:var(--purple)}
.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.stat-top b{
    width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:#eef8f7;color:#138b82
}
.stat-card>strong{display:block;font-size:25px;margin:13px 0 7px;letter-spacing:-.5px}
.stat-card small{color:var(--muted);font-size:12px}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.quick-card{
    background:#fff;border:1px solid var(--border);border-radius:15px;padding:15px;
    display:flex;align-items:center;gap:12px;transition:.15s ease
}
.quick-card:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(29,50,73,.07)}
.quick-card>span{
    width:38px;height:38px;border-radius:11px;background:#e9faf7;color:#087d73;
    display:grid;place-items:center;font-size:21px;font-weight:700
}
.quick-card strong,.quick-card small{display:block}
.quick-card small{font-size:11px;color:var(--muted);margin-top:4px}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:18px}
.admin-layout{grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr)}
.span-2{min-width:0}
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.panel{
    background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;
    box-shadow:0 7px 24px rgba(29,50,73,.04)
}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:14px}
.panel-head h2{margin:0;font-size:18px}
.panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.panel-head>span{font-size:12px;color:var(--muted)}
.text-link{color:#078f88;font-size:12px;font-weight:800}

.empty-state{
    min-height:210px;border:1px dashed #d7e1eb;border-radius:14px;
    display:grid;place-items:center;align-content:center;text-align:center;padding:30px;color:var(--muted)
}
.empty-state strong{color:var(--text);margin-bottom:6px}
.empty-state span{font-size:12px;max-width:340px;line-height:1.5}
.empty-state.compact{min-height:150px}

.transaction-list{display:grid}
.transaction-row{
    display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;
    padding:13px 0;border-bottom:1px solid #edf1f5
}
.transaction-row:last-child{border-bottom:0}
.transaction-icon{
    width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900
}
.transaction-icon.in{background:#eafaf4;color:#148961}
.transaction-icon.out{background:#fff1ea;color:#d66720}
.transaction-info strong,.transaction-info span,.transaction-value strong,.transaction-value span{display:block}
.transaction-info span,.transaction-value span{color:var(--muted);font-size:11px;margin-top:4px}
.transaction-value{text-align:right}

.account-list{display:grid}
.account-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:13px 0;border-bottom:1px solid #edf1f5
}
.account-row:last-child{border-bottom:0}
.account-row strong,.account-row span{display:block}
.account-row span{color:var(--muted);font-size:11px;margin-top:4px}
.account-row b{font-size:13px}

.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-stats div{padding:14px;border:1px solid var(--border);border-radius:12px;background:#fbfcfe}
.mini-stats span,.mini-stats strong{display:block}
.mini-stats span{font-size:11px;color:var(--muted)}
.mini-stats strong{font-size:21px;margin-top:5px}
.system-ok{padding:11px 0;border-bottom:1px solid var(--border);color:#18785d;font-weight:700;font-size:13px}
.system-ok:last-child{border-bottom:0}

.alert,.success-box{border-radius:13px;padding:13px 15px;margin-bottom:18px}
.alert{background:#fff1f1;border:1px solid #ffd3d3;color:#a62b2b}
.success-box{background:#ecfdf5;border:1px solid #c7efdf;color:#14795a}

label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px}
input,select{
    width:100%;padding:13px 14px;border:1px solid #dce4ee;border-radius:11px;
    background:#fff;outline:none
}
input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,165,163,.09)}
.primary-btn{
    width:100%;margin-top:20px;border:0;border-radius:11px;padding:14px 16px;
    background:linear-gradient(90deg,#0c9290,#16b8aa);color:#fff;font-weight:800
}

.table-wrap{overflow:auto;border:1px solid #edf1f5;border-radius:13px}
.data-table{width:100%;border-collapse:collapse;min-width:740px}
.data-table th{
    text-align:left;padding:12px 14px;background:#f8fafc;color:#67768a;
    font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e7edf3
}
.data-table td{padding:14px;border-bottom:1px solid #edf1f5;font-size:13px;vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table tr:hover td{background:#fbfdff}
.table-sub{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.code-pill{
    display:inline-block;background:#eef8f7;color:#087b72;border-radius:8px;
    padding:5px 8px;font-size:11px;font-weight:800
}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}
.badge-ok{background:#eafaf3;color:#14795a}
.badge-off{background:#f0f2f5;color:#657080}
.inline-form{display:inline-flex;gap:6px;margin:0}
.small-btn{border:0;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:800}
.small-btn.success{background:#e9faf3;color:#14795a}
.small-btn.danger{background:#fff0f0;color:#a62b2b}
.actions{white-space:nowrap}
.mt-20{margin-top:18px}

.login-body{min-height:100vh;background:#f6f9fc}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.brand-panel{
    padding:64px 9vw;display:flex;flex-direction:column;justify-content:center;
    color:#fff;background:radial-gradient(circle at 15% 15%,rgba(22,199,183,.35),transparent 25%),linear-gradient(145deg,#0b2238,#075566)
}
.brand-mark,.mini-logo{display:grid;place-items:center;font-weight:900}
.brand-mark{width:70px;height:70px;border-radius:20px;background:linear-gradient(135deg,#20d6c1,#61eadb);color:#073b4c;font-size:26px}
.brand-panel h1{font-size:60px;margin:20px 0 4px}
.brand-subtitle{font-size:19px;opacity:.9}
.brand-copy{max-width:600px;margin-top:42px;font-size:25px;line-height:1.45;font-weight:700}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.feature-row div{padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(255,255,255,.05)}
.feature-row strong,.feature-row span{display:block}
.feature-row span{font-size:12px;opacity:.75;margin-top:5px}
.login-panel{display:grid;place-items:center;padding:40px}
.login-card,.setup-card{width:min(470px,100%);background:#fff;border-radius:24px;padding:40px;box-shadow:0 24px 70px rgba(18,38,63,.12);border:1px solid #eef2f6}
.login-card h2,.setup-card h1{margin:20px 0 6px;font-size:29px}
.login-card>p,.setup-card>p{color:var(--muted);margin-top:0}
.mini-logo{width:54px;height:54px;border-radius:15px;color:white;background:linear-gradient(135deg,var(--navy-2),var(--teal-2))}
.login-note{margin-top:22px;border-top:1px solid var(--border);padding-top:18px;font-size:12px;line-height:1.6;color:var(--muted)}
.link-btn{display:block;text-align:center}
.simple-body{min-height:100vh;display:grid;place-items:center;padding:32px;background:linear-gradient(145deg,#f3f7fb,#eef9f8)}

@media(max-width:1100px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .quick-actions{grid-template-columns:repeat(2,1fr)}
    .dashboard-grid,.admin-layout{grid-template-columns:1fr}
}
@media(max-width:820px){
    .sidebar{position:static;width:100%;min-height:auto}
    .main-content{margin-left:0;padding:22px}
    .topbar{flex-direction:column}
    .profile{text-align:left}
    .bottom-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
    .stats-grid,.quick-actions{grid-template-columns:1fr}
    .main-content{padding:16px}
    .panel{padding:17px}
    .login-shell{grid-template-columns:1fr}
    .brand-panel{display:none}
    .login-panel{padding:18px}
    .login-card,.setup-card{padding:26px 20px}
}


textarea{
    width:100%;padding:13px 14px;border:1px solid #dce4ee;border-radius:11px;
    background:#fff;outline:none;resize:vertical;font:inherit
}
textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,165,163,.09)}
.split-form{margin-bottom:18px}
.inline-grid-form,.filter-grid{
    display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:12px;align-items:end
}
.align-end{display:flex;align-items:end}
.no-margin{margin-top:0}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.category-chip{display:inline-block;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}
.chip-income{background:#eafaf3;color:#14795a}
.chip-expense{background:#fff0e8;color:#bc5b1f}
.badge-expense{background:#fff0e8;color:#bc5b1f}
.empty-row{text-align:center;color:var(--muted);padding:18px}
.money-in{color:#0f8a62}
.money-out{color:#cf6522}
.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.link-btn{display:block;text-align:center}
@media(max-width:900px){
    .inline-grid-form,.filter-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .inline-grid-form,.filter-grid,.mini-grid{grid-template-columns:1fr}
}


.category-section-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:18px;
}
.category-chip{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
}
.category-chip small{
    font-size:9px;
    font-weight:700;
    opacity:.72;
}
.chip-disabled{
    opacity:.45;
    filter:grayscale(.4);
}
.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.info-card{
    padding:18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fbfdff;
}
.info-card strong,.info-card span{display:block}
.info-card span{
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
    margin-top:6px;
}
.category-add-form{
    grid-template-columns:.8fr 1.6fr 1fr .7fr;
}
@media(max-width:1000px){
    .category-section-grid{grid-template-columns:1fr}
    .category-add-form{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .info-grid,.category-add-form{grid-template-columns:1fr}
}


.danger-outline{
    background:#fff;
    color:#a62b2b;
    border:1px solid #efbcbc;
}
.danger-outline:hover{
    background:#fff5f5;
}


.warning{
    background:#fff4dc;
    color:#9a6100;
}
.danger-outline{
    background:#fff;
    color:#a62b2b;
    border:1px solid #efbcbc;
}
.danger-outline:hover{background:#fff5f5}
.locked-label{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 9px;
    border-radius:8px;
    background:#f3f4f6;
    color:#7a8493;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}
.usage-badge{
    display:inline-block;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}
.usage-badge.used{
    background:#eef4ff;
    color:#385f9c;
}
.usage-badge.unused{
    background:#f3f4f6;
    color:#687382;
}
.category-card-list{
    display:grid;
    gap:10px;
}
.category-summary-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:13px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fbfdff;
}
.category-summary-card strong,
.category-summary-card span{
    display:block;
}
.category-summary-card>div>span{
    margin-top:4px;
    font-size:11px;
    color:var(--muted);
}
.category-summary-card.is-archived{
    opacity:.6;
}


.student-filter{grid-template-columns:2fr 1fr .7fr}
.bill-filter{grid-template-columns:1fr .6fr}
.badge-warning{background:#fff4dc;color:#9a6100}
.fill-remaining{margin-top:10px}
.receipt-body{background:#edf2f7;padding:24px;font-family:Inter,Segoe UI,Arial,sans-serif;color:#172033}
.receipt-toolbar{max-width:850px;margin:0 auto 14px;display:flex;justify-content:space-between;align-items:center}
.receipt-toolbar a,.receipt-toolbar button{border:0;border-radius:9px;padding:10px 14px;background:#0e938f;color:#fff;text-decoration:none;font-weight:800}
.receipt-paper{max-width:850px;margin:auto;background:#fff;padding:34px 40px;box-shadow:0 15px 45px rgba(0,0,0,.09)}
.receipt-header{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding-bottom:18px;border-bottom:2px solid #0e938f}
.receipt-logo{width:58px;height:58px;border-radius:15px;background:linear-gradient(135deg,#0c4656,#18b8aa);color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px}
.receipt-header h1{margin:0 0 4px;font-size:22px}
.receipt-header p{margin:2px 0;color:#6f7c8f;font-size:12px}
.receipt-app{text-align:right}.receipt-app strong,.receipt-app span{display:block}.receipt-app span{font-size:11px;color:#6f7c8f;margin-top:4px}
.receipt-title{text-align:center;padding:24px 0 18px}.receipt-title h2{margin:0 0 5px;font-size:20px}.receipt-title span{font-size:12px;color:#6f7c8f}
.receipt-grid,.receipt-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:20px}
.receipt-grid div,.receipt-meta div{padding:10px 0;border-bottom:1px solid #edf1f5}
.receipt-grid span,.receipt-grid strong,.receipt-meta span,.receipt-meta strong{display:block}
.receipt-grid span,.receipt-meta span{font-size:10px;color:#6f7c8f;text-transform:uppercase;letter-spacing:.05em}
.receipt-grid strong,.receipt-meta strong{margin-top:4px}
.receipt-table{width:100%;border-collapse:collapse;margin:18px 0}.receipt-table th,.receipt-table td{padding:12px;border:1px solid #dde5ee;text-align:left}.receipt-table th:last-child,.receipt-table td:last-child{text-align:right}.receipt-table small{display:block;color:#6f7c8f;margin-top:4px}
.receipt-note{padding:12px 14px;background:#f8fafc;border-radius:10px;font-size:12px}
.receipt-sign{display:grid;grid-template-columns:1fr 220px;gap:20px;margin-top:34px;text-align:center}.receipt-sign span{font-size:12px;color:#6f7c8f}.sign-space{height:70px}
.receipt-footer{margin-top:26px;padding-top:14px;border-top:1px solid #e5ebf2;font-size:10px;color:#7a8797;text-align:center}
@media(max-width:700px){
    .student-filter,.bill-filter{grid-template-columns:1fr}
    .receipt-body{padding:8px}.receipt-paper{padding:22px 16px}.receipt-header{grid-template-columns:54px 1fr}.receipt-app{grid-column:1/-1;text-align:left}.receipt-grid,.receipt-meta{grid-template-columns:1fr}
}
@media print{
    body{background:#fff;padding:0}
    .no-print{display:none!important}
    .receipt-paper{box-shadow:none;max-width:none;padding:10mm}
}