*{box-sizing:border-box}body{margin:0;font-family:tahoma,Arial;background:#f4f6fb;color:#172033}a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}.side{width:250px;background:#111827;color:#fff;padding:22px;position:sticky;top:0;height:100vh}
.side h1{font-size:24px;margin:0 0 28px}.side a{display:block;padding:12px 14px;border-radius:12px;margin-bottom:6px;color:#d1d5db}.side a:hover{background:#1f2937;color:#fff}
.main{flex:1;padding:28px}.top{background:#fff;border-radius:18px;padding:18px 22px;margin-bottom:22px;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card,.panel,table{background:#fff;border-radius:18px;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.card{padding:22px}.card span{display:block;color:#64748b;margin-bottom:10px}.card b{font-size:32px}
.panel{padding:22px;margin-bottom:22px}.panel h2{margin-top:0}input,select,textarea{width:100%;padding:12px 14px;border:1px solid #dbe2ee;border-radius:12px;margin:7px 0;background:#fff}textarea{min-height:88px}
button{background:#2563eb;color:#fff;border:0;border-radius:12px;padding:12px 22px;cursor:pointer}button:hover{background:#1d4ed8}
table{width:100%;border-collapse:collapse;overflow:hidden}th,td{text-align:right;padding:13px 14px;border-bottom:1px solid #edf2f7;font-size:14px}th{background:#f8fafc;color:#475569}
.login-body{display:grid;place-items:center;min-height:100vh}.login-card{width:380px;background:#fff;padding:28px;border-radius:22px;box-shadow:0 12px 40px rgba(15,23,42,.12)}.login-card h1{margin-top:0}.alert{background:#fee2e2;color:#991b1b;padding:12px;border-radius:12px;margin-bottom:12px}
@media(max-width:900px){.app{display:block}.side{width:auto;height:auto;position:relative}.grid{grid-template-columns:1fr}.main{padding:16px}}