/* ── Reset & Base ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;
    --gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;
    --gray-800:#1f2937;--gray-900:#111827;
    --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;
    --green-50:#f0fdf4;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;
    --red-50:#fef2f2;--red-500:#ef4444;--red-600:#dc2626;
    --amber-50:#fffbeb;--amber-500:#f59e0b;--amber-600:#d97706;
    --sidebar-w:220px;
    --radius:6px;
}
html{font-size:14px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--gray-50);color:var(--gray-800);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Layout ──────────────────────────────────────── */
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--gray-900);color:#fff;display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;left:0;bottom:0;z-index:100}
.main-content{margin-left:var(--sidebar-w);flex:1;min-width:0}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--gray-700)}
.brand-icon{font-size:22px}
.brand-text{font-size:16px;font-weight:600;letter-spacing:.5px}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);color:var(--gray-400);font-size:13.5px;transition:all .15s}
.nav-item:hover{background:var(--gray-800);color:#fff;text-decoration:none}
.nav-item.active{background:var(--blue-600);color:#fff}
.nav-icon{font-size:15px;width:20px;text-align:center}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--gray-700)}
.version{font-size:11px;color:var(--gray-500)}

/* ── Page Common ─────────────────────────────────── */
.page-header{padding:24px 32px 0}
.page-header h1{font-size:22px;font-weight:700;color:var(--gray-900)}
.page-header p{color:var(--gray-500);margin-top:4px;font-size:13px}
.page-body{padding:20px 32px 40px}

/* ── Cards ───────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden}
.card-header{padding:14px 18px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}
.card-header h2{font-size:15px;font-weight:600}
.card-body{padding:18px}

/* ── Stats Grid ──────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px}
.stat-label{font-size:12px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.stat-value{font-size:28px;font-weight:700;line-height:1.1}
.stat-value.green{color:var(--green-600)}
.stat-value.red{color:var(--red-600)}
.stat-value.blue{color:var(--blue-600)}
.stat-sub{font-size:12px;color:var(--gray-400);margin-top:4px}

/* ── Tables ──────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.3px;padding:10px 14px;background:var(--gray-50);border-bottom:1px solid var(--gray-200);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--gray-100);font-size:13px;white-space:nowrap}
tr:hover td{background:var(--gray-50)}
.mono{font-family:"SF Mono",Monaco,Menlo,monospace;font-size:12px}

/* ── Badges ──────────────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.2px}
.badge-pass{background:var(--green-50);color:var(--green-700)}
.badge-fail{background:var(--red-50);color:var(--red-600)}
.badge-warn{background:var(--amber-50);color:var(--amber-600)}
.badge-neutral{background:var(--gray-100);color:var(--gray-600)}

/* ── Buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue-600);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-success{background:var(--green-600);color:#fff}
.btn-success:hover{background:var(--green-700)}
.btn-outline{background:#fff;border-color:var(--gray-300);color:var(--gray-700)}
.btn-outline:hover{background:var(--gray-50)}
.btn-danger{background:#fff;border-color:var(--red-500);color:var(--red-600)}
.btn-danger:hover{background:var(--red-50)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-lg{padding:12px 28px;font-size:15px;font-weight:600}

/* ── Forms ───────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.form-input,.form-select{width:100%;padding:9px 12px;border:1px solid var(--gray-300);border-radius:var(--radius);font-size:13px;color:var(--gray-800);background:#fff;transition:border-color .15s}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 2px var(--blue-50)}
.form-row{display:flex;gap:16px}
.form-row>*{flex:1}
.form-help{font-size:12px;color:var(--gray-400);margin-top:4px}

/* ── Upload Zone ─────────────────────────────────── */
.upload-zone{border:2px dashed var(--gray-300);border-radius:var(--radius);padding:40px;text-align:center;transition:all .2s;cursor:pointer}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--blue-500);background:var(--blue-50)}
.upload-zone .upload-icon{font-size:36px;margin-bottom:12px}
.upload-zone .upload-text{font-size:14px;color:var(--gray-600)}
.upload-zone .upload-hint{font-size:12px;color:var(--gray-400);margin-top:6px}
.upload-zone input[type=file]{display:none}

/* ── Progress ────────────────────────────────────── */
.progress-bar{height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;margin:16px 0}
.progress-fill{height:100%;background:var(--blue-500);border-radius:3px;transition:width .3s}

/* ── Toast ───────────────────────────────────────── */
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius);font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideIn .25s ease;max-width:360px}
.toast-success{background:var(--green-600);color:#fff}
.toast-error{background:var(--red-600);color:#fff}
.toast-info{background:var(--blue-600);color:#fff}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Tabs ────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:20px}
.tab{padding:10px 20px;font-size:13px;font-weight:500;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab:hover{color:var(--gray-700)}
.tab.active{color:var(--blue-600);border-bottom-color:var(--blue-600)}

/* ── Summary Row ─────────────────────────────────── */
.summary-row{display:flex;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.summary-item{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px 20px;text-align:center;min-width:120px;flex:1}
.summary-num{font-size:24px;font-weight:700}

/* ── Alerts ──────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--radius);font-size:13px;margin-bottom:16px}
.alert-info{background:var(--blue-50);color:var(--blue-700);border:1px solid #bfdbfe}
.alert-warn{background:var(--amber-50);color:var(--amber-600);border:1px solid #fde68a}

/* ── Grid ────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ── Empty State ─────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;color:var(--gray-400)}
.empty-state .empty-icon{font-size:48px;margin-bottom:16px}
.empty-state p{font-size:14px}