:root { --sg-primary: #3843d0; --sg-bg: #f5f6f8; --sg-sidebar: #202653; }
html, body { min-height: 100%; }
body { background: var(--sg-bg); color: #202535; }
.btn-primary { --bs-btn-bg: var(--sg-primary); --bs-btn-border-color: var(--sg-primary); --bs-btn-hover-bg: #2e37b4; --bs-btn-hover-border-color: #2e37b4; }
.app-sidebar { width: 260px !important; background: var(--sg-sidebar); color: white; }
.brand { color: white; font-size: 1.35rem; line-height: 1.05; padding: .75rem; }
.brand span, .brand-login span { color: #858cff; }
.app-sidebar .nav-link { color: #d8daf0; padding: .7rem .85rem; }
.app-sidebar .nav-link:hover { color: white; background: rgba(255,255,255,.08); }
.app-sidebar .nav-link.active { background: var(--sg-primary); color: white; }
.sidebar-account { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem .75rem 0; }
.app-mobile-nav { background: var(--sg-sidebar); }
.app-main { min-height: 100vh; }
.summary-card { height: 100%; background: white; border: 1px solid #e7e8ed; border-radius: .75rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .65rem; }
.summary-card span { color: #6b7280; font-size: .9rem; }
.summary-card strong { font-size: 1.75rem; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 430px); }
.brand-login { color: #202653; font-size: 1.25rem; font-weight: 700; }
.form-card { max-width: 680px; }
.detail-label { display: block; color: #6b7280; font-size: .8rem; margin-bottom: .2rem; }
.commission-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; }
.commission-summary > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eceef2; padding: .45rem 0; }
.commission-summary .net { color: var(--sg-primary); font-size: 1.05rem; }
.invoice-total-card { background: var(--sg-sidebar); color: white; }
.student-form, .adjustment-form { scroll-margin-top: 70px; }
.form-control:focus, .form-select:focus { border-color: #858cff; box-shadow: 0 0 0 .2rem rgba(56,67,208,.15); }
@media (min-width: 992px) { .app-sidebar { position: fixed; inset: 0 auto 0 0; } .app-main { margin-left: 260px; } }
@media (max-width: 991.98px) { .app-main { padding-top: 56px; } }
@media (max-width: 575.98px) { .commission-summary { grid-template-columns: 1fr; } }