:root {
    --sidebar-width: 260px;
    --brand: #0f766e;
    --brand-dark: #115e59;
    --bg: #f6f8fb;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: #1f2937; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: #fff; border-right: 1px solid #e5e7eb; z-index: 1030; }
.sidebar-brand { display:flex; gap:.8rem; align-items:center; padding:1rem 1.1rem; border-bottom:1px solid #eef0f3; min-height:82px; }
.brand-logo-wrap { width:50px; height:54px; display:grid; place-items:center; flex:0 0 auto; }
.brand-logo { width:100%; height:100%; object-fit:contain; display:block; }
.brand-title { font-weight:800; letter-spacing:.04em; }
.brand-subtitle { color:#6b7280; font-size:.72rem; line-height:1.25; max-width:145px; }
.sidebar-nav .nav-item { display:flex; align-items:center; gap:.8rem; color:#4b5563; text-decoration:none; padding:.72rem .85rem; border-radius:10px; margin-bottom:.25rem; }
.sidebar-nav .nav-item:hover { background:#f0fdfa; color:var(--brand-dark); }
.sidebar-nav .nav-item i { width:20px; text-align:center; }
.nav-section { color:#9ca3af; font-size:.7rem; font-weight:700; letter-spacing:.08em; padding:.95rem .85rem .4rem; }
.main-content { margin-left: var(--sidebar-width); min-height:100vh; }
.main-content--full { margin-left:0; }
.app-topbar { min-height:82px; }
.avatar-circle { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#ecfdf5; color:var(--brand); }
.page-heading h1 { font-size:1.45rem; font-weight:750; margin-bottom:.25rem; }
.page-heading p { color:#6b7280; margin-bottom:0; }
.stat-card { border:0; border-radius:16px; box-shadow:0 6px 24px rgba(15,23,42,.05); }
.stat-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:#f0fdfa; color:var(--brand); font-size:1.2rem; }
.card { border-color:#e7eaf0; border-radius:14px; }
.table > :not(caption) > * > * { vertical-align:middle; }
.badge-soft { background:#ecfdf5; color:#047857; }
.login-wrapper { min-height:calc(100vh - 2rem); display:grid; place-items:center; }
.login-card { width:min(920px, 100%); overflow:hidden; border:0; box-shadow:0 18px 60px rgba(15,23,42,.12); }
.login-side { min-height:520px; position:relative; overflow:hidden; background:linear-gradient(135deg,#0f766e,#134e4a); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:3rem; }
.login-side::after { content:""; position:absolute; width:330px; height:330px; right:-120px; bottom:-130px; border-radius:50%; background:rgba(255,255,255,.06); }
.login-logo-shell { width:112px; height:118px; padding:9px; border-radius:22px; background:rgba(255,255,255,.96); box-shadow:0 12px 30px rgba(0,0,0,.14); position:relative; z-index:1; }
.login-school-logo { width:100%; height:100%; object-fit:contain; display:block; }
.login-system-label { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; opacity:.75; margin-bottom:.45rem; position:relative; z-index:1; }
.login-side h2, .login-side p { position:relative; z-index:1; }
.login-form { padding:3rem; background:#fff; }
.file-preview { max-width:100%; max-height:520px; border:1px solid #e5e7eb; border-radius:10px; }
@media (max-width:991.98px) { .main-content { margin-left:0; } }
@media print { .no-print, .sidebar, .navbar { display:none !important; } .main-content { margin:0 !important; } body { background:#fff; } }

.topbar-school-logo { width:31px; height:33px; object-fit:contain; }
.topbar-school-name { font-size:.78rem; font-weight:700; color:#374151; line-height:1.15; }
.mobile-brand-logo { width:42px; height:45px; object-fit:contain; }
.mobile-brand-header { min-height:72px; }
@media (max-width:575.98px) { .login-form { padding:2rem 1.35rem; } .login-side { min-height:340px; padding:2.25rem 1.75rem; } .login-logo-shell { width:88px; height:93px; } .topbar-school-name { display:none; } }