:root{--primary:#17324d;--secondary:#245b7a;--bg:#f4f7fa;--card:#fff;--text:#1f2937;--muted:#667085;--border:#dbe3ea;--danger:#b42318;--success:#067647;--warning:#b54708}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{background:var(--primary);color:#fff;padding:14px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px;position:sticky;top:0;z-index:10}.brand{color:#fff;text-decoration:none;font-weight:800;font-size:19px}.topbar nav{display:flex;gap:16px;flex-wrap:wrap}.topbar nav a{color:#fff;text-decoration:none;font-size:14px}
.container{max-width:1180px;margin:28px auto;padding:0 18px}.footer{text-align:center;color:var(--muted);padding:30px 10px;font-size:13px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 4px 16px rgba(16,24,40,.05);margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.stat{padding:18px;border-radius:14px;background:#fff;border:1px solid var(--border)}.stat strong{font-size:28px;display:block;color:var(--primary)}.muted{color:var(--muted)}
h1{color:var(--primary);margin-top:0}h2{color:var(--secondary)}
.btn{display:inline-block;padding:10px 14px;border:0;border-radius:9px;background:var(--secondary);color:#fff;text-decoration:none;cursor:pointer;font-weight:650}.btn.secondary{background:#667085}.btn.danger{background:var(--danger)}.btn.success{background:var(--success)}.btn.warning{background:var(--warning)}
form{display:grid;gap:12px}label{font-weight:650;font-size:14px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfd8e3;border-radius:8px;background:#fff;font:inherit}textarea{min-height:100px}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:11px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:14px}th{background:#17324d;color:#fff}tr:nth-child(even) td{background:#f8fafc}
.alert{padding:12px 14px;border-radius:9px;margin-bottom:18px}.alert.success{background:#ecfdf3;color:var(--success)}.alert.error{background:#fef3f2;color:var(--danger)}.alert.warning{background:#fffaeb;color:var(--warning)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:#eef2f6}.badge.success{background:#ecfdf3;color:var(--success)}.badge.danger{background:#fef3f2;color:var(--danger)}.badge.warning{background:#fffaeb;color:var(--warning)}
.actions{display:flex;gap:8px;flex-wrap:wrap}.search{display:flex;gap:8px}.search input{flex:1}
.hero{padding:38px;background:linear-gradient(135deg,#17324d,#245b7a);color:#fff;border-radius:18px;margin-bottom:22px}.hero h1{color:#fff}.hero p{max-width:760px;color:#e5eef5}
.login{max-width:430px;margin:70px auto}.small{font-size:12px}.right{text-align:right}
@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.search{flex-direction:column}table{font-size:12px;display:block;overflow-x:auto;white-space:nowrap}}