:root {
    --primary: #1683d8;
    --primary-dark: #0b5fa5;
    --primary-soft: #eaf5fd;
    --sidebar: #102437;
    --canvas: #f5f7fa;
    --border: #e3e9ef;
    --text: #172536;
    --muted: #6f7d8c;
    --success: #1b9b69;
    --warning: #d88a19;
    --danger: #c94444;
    --sidebar-width: 236px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--canvas); font: 14px Inter,"Segoe UI",Arial,sans-serif; }
a { color: var(--primary-dark); text-decoration: none; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; display: flex; width: var(--sidebar-width); flex-direction: column; color: #dce7f0; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 11px; height: 76px; padding: 0 21px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 17px; font-weight: 750; }
.brand > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--primary); }
.brand small { display: block; margin-top: 2px; color: #91a8ba; font-size: 8px; letter-spacing: .12em; }
.admin-sidebar nav { flex: 1; padding: 20px 11px; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 11px; min-height: 44px; margin-bottom: 4px; padding: 0 12px; border-radius: 9px; color: #b9c9d6; font-weight: 650; }
.admin-sidebar nav a:hover,.admin-sidebar nav a.active { color: #fff; background: rgba(22,131,216,.22); }
.admin-sidebar nav a.active { box-shadow: inset 3px 0 var(--primary); }
.admin-sidebar nav i { width: 19px; font-size: 17px; }
.admin-sidebar-foot { display: grid; gap: 12px; padding: 18px 21px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-sidebar-foot small { color: #7891a5; }
.admin-sidebar-foot a { color: #b9c9d6; }
.admin-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.admin-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; height: 72px; padding: 0 28px; border-bottom: 1px solid var(--border); background: #fff; }
.admin-user { display: flex; align-items: center; gap: 9px; }
.admin-user > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--primary-dark); background: var(--primary-soft); }
.admin-content { max-width: 1500px; margin: auto; padding: 30px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 5px; font-size: 30px; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.panel,.metric-card { border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(25,49,74,.07); }
.panel { padding: 22px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.panel h2,.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.metric-card { min-height: 145px; padding: 19px; }
.metric-card i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--primary-dark); background: var(--primary-soft); font-size: 18px; }
.metric-card small { display: block; margin: 14px 0 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.metric-card strong { font-size: 28px; }
.btn { padding: .62rem .9rem; border-radius: 9px; font-size: 13px; font-weight: 650; }
.btn-primary { border-color: var(--primary); background: var(--primary); }
.btn-light { border-color: var(--border); background: #fff; }
.form-control,.form-select { min-height: 42px; border-color: #dbe4eb; border-radius: 9px; font-size: 14px; }
.form-label { margin-bottom: 6px; color: #44596a; font-size: 12px; font-weight: 700; }
.data-table { margin: 0; }
.data-table th { padding: 11px; border-color: var(--border); color: #758494; background: #f8fafb; font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
.data-table td { padding: 13px 11px; border-color: var(--border); color: #506173; font-size: 12px; vertical-align: middle; }
.data-table td strong,.data-table td small { display: block; }
.data-table td strong { color: var(--text); font-size: 13px; }
.data-table td small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.status { display: inline-flex; padding: 4px 9px; border-radius: 99px; font-size: 10px; font-weight: 750; }
.status.active { color: #16825b; background: #e8f8f1; }
.status.pending { color: #946014; background: #fff4df; }
.status.suspended { color: #a13939; background: #fff0f0; }
.status.inactive { color: #69747f; background: #edf1f4; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-grid div { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.detail-grid small,.detail-grid strong { display: block; }
.detail-grid small { margin-bottom: 4px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.message-success,.message-error,.message-warning { margin-bottom: 18px; padding: 12px 14px; border-radius: 9px; font-size: 13px; }
.message-success { color: #126d4c; border: 1px solid #bce6d5; background: #eaf8f2; }
.message-error { color: #9c3030; border: 1px solid #f1cccc; background: #fff7f7; }
.message-warning { color: #805313; border: 1px solid #f2d7a9; background: #fff7e9; }
.validation-summary-errors,.field-error { color: var(--danger); font-size: 12px; }
.validation-summary-errors { margin-bottom: 15px; padding: 12px 14px; border: 1px solid #f1cccc; border-radius: 9px; background: #fff7f7; }
.empty-state { padding: 36px 20px; color: var(--muted); text-align: center; }
.empty-state i { color: var(--primary); font-size: 30px; }
.admin-login { display: grid; min-height: 100vh; padding: 24px; place-items: center; background: linear-gradient(145deg,#0d304c,#102437); }
.admin-login-card { width: 100%; max-width: 410px; padding: 30px; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.admin-login-card .brand { height: auto; margin-bottom: 30px; padding: 0; border: 0; color: var(--text); }
.admin-login-card h1 { font-size: 28px; }
.menu-button { display: grid; width: 38px; height: 38px; margin-right: 12px; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
@media(max-width:991.98px){.admin-sidebar{transform:translateX(-100%);transition:.2s}.admin-sidebar.open{transform:translateX(0);box-shadow:10px 0 35px rgba(0,0,0,.2)}.admin-main{margin-left:0}.admin-content{padding:22px}}
@media(max-width:767.98px){.admin-content{padding:18px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .btn{width:100%}.detail-grid{grid-template-columns:1fr}.panel{padding:18px}}