:root{color:#e5eefb;background:#09111f;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0}.login-page{background:radial-gradient(circle at 10% 10%,#194276,#0000 35%),linear-gradient(135deg,#08111f,#0d1728 55%,#111827);grid-template-columns:1.25fr .75fr;gap:30px;min-height:100vh;padding:42px;display:grid}.login-hero{flex-direction:column;justify-content:center;display:flex}.brand-row{align-items:center;gap:18px;margin-bottom:28px;display:flex}.brand-row svg{color:#67e8f9}.brand-row h1{margin:0;font-size:46px}.brand-row p{color:#b8c7dd;margin:6px 0}.intro-card,.login-box,.panel,.metric{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172ac7;border:1px solid #94a3b840;border-radius:24px;box-shadow:0 18px 50px #00000047}.intro-card{max-width:850px;padding:30px}.intro-card h2{margin-top:0;font-size:30px}.intro-card p{color:#cbd5e1;font-size:18px;line-height:1.65}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;display:grid}.feature-grid span{color:#dff7ff;background:#0ea5e91f;border:1px solid #7dd3fc2e;border-radius:14px;padding:12px 14px}.login-box{flex-direction:column;align-self:center;gap:15px;padding:34px;display:flex}.login-box svg{color:#22c55e}.login-box h2{margin:0}.login-box p,.login-box small{color:#a7b4c8}.login-box input{color:#fff;background:#020617;border:1px solid #334155;border-radius:14px;padding:15px;font-size:16px}.login-box button,.refresh,.sidebar button{cursor:pointer;color:#fff;background:linear-gradient(135deg,#2563eb,#0891b2);border:0;border-radius:14px;padding:13px 16px;font-weight:700}.error{color:#fecaca;background:#dc262626;border:1px solid #f8717173;border-radius:12px;padding:12px}.app{background:#0b1220;grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{background:#070d19;border-right:1px solid #94a3b826;flex-direction:column;gap:10px;padding:22px;display:flex}.side-brand{align-items:center;gap:12px;margin-bottom:18px;display:flex}.side-brand svg{color:#38bdf8}.side-brand h2{margin:0}.side-brand span{color:#94a3b8}.sidebar button{text-align:left;color:#cbd5e1;background:0 0;border:1px solid #0000}.sidebar button.active{color:#fff;background:#2563eb33;border-color:#60a5fa59}.sidebar .logout{background:#dc262626;border-color:#f8717140;align-items:center;gap:8px;margin-top:auto;display:flex}main{padding:28px;overflow:auto}header{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}header h1{margin:0;font-size:34px}header p{color:#94a3b8;margin:7px 0 0}.refresh{align-items:center;gap:8px;display:flex}.metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:18px;display:grid}.metric{align-items:center;gap:13px;padding:18px;display:flex}.metric-icon{color:#7dd3fc;background:#3b82f629;border-radius:14px;place-items:center;width:44px;height:44px;display:grid}.metric p{color:#93a4ba;margin:0}.metric h3{margin:5px 0;font-size:28px}.metric span{color:#b6c2d4}.metric.good .metric-icon{color:#86efac;background:#22c55e26}.metric.warn .metric-icon{color:#fde047;background:#eab30826}.metric.bad .metric-icon{color:#fca5a5;background:#ef444426}.grid2{grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;display:grid}.panel{padding:20px}.panel-title{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.panel h2{margin:0;font-size:20px}.panel h3{color:#dbeafe;margin:24px 0 8px}.table-wrap{max-height:650px;overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{vertical-align:top;border-bottom:1px solid #94a3b826;padding:10px 12px}th{color:#bfdbfe;text-align:left;background:#111827;position:sticky;top:0}td{color:#d8e2f2}.empty{color:#94a3b8;text-align:center;padding:30px}.alerts{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.alerts li{color:#dbeafe;background:#3b82f61f;border:1px solid #60a5fa33;border-radius:14px;padding:14px 16px}.top-error{margin-bottom:16px}@media (width<=1100px){.login-page{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.grid2,.app{grid-template-columns:1fr}.sidebar{position:static}.feature-grid{grid-template-columns:1fr}}@media (width<=650px){main{padding:16px}.metrics{grid-template-columns:1fr}.brand-row h1{font-size:32px}header{flex-direction:column;align-items:flex-start;gap:12px}}