@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy:#0f172a; --blue:#2563eb; --cyan:#06b6d4; --bg:#f8fafc;
  --card:#ffffff; --text:#1e293b; --muted:#64748b; --border:#e2e8f0;
  --green:#16a34a; --yellow:#d97706; --orange:#ea580c; --red:#dc2626;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Arial,sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }
.app { min-height:100vh; display:flex; }
.sidebar { width:250px; background:var(--navy); color:#cbd5e1; padding:24px 16px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; }
.brand { display:flex; gap:12px; align-items:center; margin:0 8px 34px; }
.brand strong { display:block; color:#fff; font-size:16px; }
.brand span { display:block; color:#94a3b8; font-size:11px; margin-top:3px; }

.brand-logo { width:40px; height:40px; object-fit:contain; border-radius:10px; display:block; }
.brand-center .brand-logo { width:56px; height:56px; }

.brand-mark { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; font-weight:700; font-size:20px; box-shadow:0 8px 20px #0003; }
nav { display:grid; gap:6px; }
nav a,.sidebar-bottom a { padding:12px 14px; border-radius:9px; color:#94a3b8; font-size:14px; font-weight:500; }
nav a:hover, nav a.active,.sidebar-bottom a:hover { background:#1e293b; color:#fff; }
.badge { float:right; background:#334155; color:#cbd5e1; padding:2px 7px; border-radius:999px; font-size:10px; }
.sidebar-bottom { margin-top:auto; display:grid; gap:4px; }
.content { width:calc(100% - 250px); margin-left:250px; padding:32px 40px 48px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; }
.eyebrow { margin:0 0 7px; color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.12em; }
h1 { margin:0; font-size:28px; letter-spacing:-.03em; }
h2 { margin:0; font-size:16px; }
.subtitle,.panel-header p { color:var(--muted); font-size:13px; margin:7px 0 0; }
.user-chip { background:#fff; border:1px solid var(--border); border-radius:999px; padding:9px 14px; font-size:12px; font-weight:600; }
.status-dot { width:8px; height:8px; background:var(--green); border-radius:50%; display:inline-block; margin-right:7px; }
.status-dot.orange { background:var(--orange); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
.stat-card,.panel { background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 5px 18px #0f172a08; }
.stat-card { padding:20px; }
.stat-card span { color:var(--muted); font-size:12px; }
.stat-card strong { display:block; font-size:27px; margin:8px 0; }
.stat-card small { color:var(--green); font-size:11px; }
.stat-card.warning small { color:var(--orange); }
.two-columns { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; margin-bottom:18px; }
.panel { padding:22px; }
.panel-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.pill,.tag { display:inline-block; border-radius:999px; font-size:10px; font-weight:600; padding:5px 9px; }
.pill { background:#eff6ff; color:var(--blue); }
.fake-chart { height:190px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); background:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,#f1f5f9 38px); }
.chart-line { position:absolute; left:0; right:0; bottom:25px; height:120px; background:linear-gradient(145deg,transparent 0 8%,#2563eb 8% 9%,transparent 9% 17%,#2563eb 17% 18%,transparent 18% 28%,#2563eb 28% 29%,transparent 29% 39%,#2563eb 39% 40%,transparent 40% 52%,#2563eb 52% 53%,transparent 53% 67%,#2563eb 67% 68%,transparent 68% 82%,#2563eb 82% 83%,transparent 83%); opacity:.75; }
.chart-labels { display:flex; justify-content:space-between; color:#94a3b8; font-size:10px; margin-top:10px; }
.status-list { display:grid; gap:18px; margin-top:26px; }
.status-list div { display:flex; justify-content:space-between; font-size:13px; }
.status-list strong { font-size:12px; color:var(--muted); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; color:#94a3b8; font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:12px 10px; border-bottom:1px solid var(--border); }
td { padding:15px 10px; border-bottom:1px solid #f1f5f9; white-space:nowrap; }
.tag.success { background:#ecfdf5; color:var(--green); }
.tag.warning { background:#fff7ed; color:var(--orange); }
.tag.neutral { background:#f1f5f9; color:var(--muted); }
.text-link { color:var(--blue); font-size:12px; font-weight:600; }
.toolbar { display:flex; gap:12px; margin-bottom:18px; }
.search,select,input { font:inherit; }
.search { flex:1; border:1px solid var(--border); border-radius:9px; padding:11px 13px; outline:none; }
select { border:1px solid var(--border); border-radius:9px; padding:11px 13px; background:#fff; color:var(--muted); }
.btn { border:0; border-radius:9px; padding:11px 16px; font-weight:600; cursor:pointer; display:inline-block; text-align:center; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-full { width:100%; }
.alert-list { display:grid; gap:14px; max-width:900px; }
.alert-card { display:flex; gap:16px; background:#fff; border:1px solid var(--border); border-left:4px solid var(--orange); padding:20px; border-radius:12px; }
.alert-card.critical { border-left-color:var(--red); }.alert-card.high { border-left-color:var(--orange); }.alert-card.medium { border-left-color:var(--yellow); }
.alert-icon { width:36px; height:36px; border-radius:10px; background:#fff1f2; color:var(--red); display:grid; place-items:center; font-weight:700; }
.alert-level { color:var(--red); font-size:10px; font-weight:700; letter-spacing:.08em; }
.alert-card.high .alert-level { color:var(--orange); }.alert-card.medium .alert-level { color:var(--yellow); }
.alert-card h2 { margin:5px 0; }.alert-card p { color:var(--muted); font-size:13px; margin:0 0 8px; }.alert-card small { color:#94a3b8; }
.bar-chart { height:190px; display:flex; align-items:flex-end; gap:12px; padding:10px 5px 0; border-bottom:1px solid var(--border); }
.bar-chart i { flex:1; background:linear-gradient(to top,var(--blue),var(--cyan)); border-radius:6px 6px 0 0; min-width:20px; }
.ranking { display:grid; gap:16px; }.ranking div { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; font-size:12px; }.ranking b { color:#94a3b8; }.ranking strong { color:var(--blue); }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0f172a,#172554); padding:20px; }
.login-card { width:min(420px,100%); background:#fff; border-radius:18px; padding:38px; box-shadow:0 24px 70px #0005; }
.brand-center { justify-content:center; margin:0 0 32px; }.brand-center h1 { font-size:24px; }.brand-center p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.login-form { display:grid; gap:9px; }.login-form label { font-size:12px; font-weight:600; margin-top:7px; }.login-form input { border:1px solid var(--border); border-radius:9px; padding:12px; outline:none; }.login-form .btn { margin-top:12px; }
.demo-note { color:#94a3b8; text-align:center; font-size:10px; margin:22px 0 0; }
@media (max-width: 950px) { .sidebar { width:210px; }.content { width:calc(100% - 210px); margin-left:210px; padding:24px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.two-columns { grid-template-columns:1fr; } }
@media (max-width: 650px) { .app { display:block; }.sidebar { position:static; width:100%; min-height:auto; }.content { width:100%; margin:0; padding:20px; }.stats-grid { grid-template-columns:1fr; }.topbar { gap:14px; flex-direction:column; }.toolbar { flex-direction:column; } }