:root{
    --bg:#08111f;
    --bg-2:#0c1729;
    --panel:#101d33;
    --panel-2:#13233d;
    --line:rgba(255,255,255,.08);
    --text:#eef4ff;
    --muted:#9fb2cf;
    --green:#16a34a;
    --orange:#ea580c;
    --red:#dc2626;
    --blue:#3b82f6;
    --shadow:0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:radial-gradient(circle at top left, #122444 0%, var(--bg) 45%, #050b14 100%);
    color:var(--text);
    min-height:100vh;
}
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    padding:28px 32px 18px;
}
.eyebrow{
    color:#7fa7ff;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
    margin-bottom:6px;
}
.topbar h1{
    margin:0;
    font-size:32px;
    line-height:1.1;
}
.header-meta{
    margin-top:10px;
    color:var(--muted);
    font-size:14px;
}
.topbar-actions{
    display:flex;
    align-items:center;
    gap:14px;
}
.user-chip{
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 14px;
    min-width:160px;
    box-shadow:var(--shadow);
}
.user-chip-label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:3px;
}
.logout{
    color:#dbe7ff;
    text-decoration:none;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    padding:12px 16px;
    border-radius:14px;
}
.logout:hover{background:rgba(255,255,255,.12)}
.stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    padding:0 32px 20px;
}
.stat-card{
    border-radius:20px;
    padding:18px 20px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.stat-card.neutral{background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(255,255,255,.03))}
.stat-card.green{background:linear-gradient(180deg, rgba(22,163,74,.22), rgba(255,255,255,.03))}
.stat-card.orange{background:linear-gradient(180deg, rgba(234,88,12,.26), rgba(255,255,255,.03))}
.stat-card.red{background:linear-gradient(180deg, rgba(220,38,38,.24), rgba(255,255,255,.03))}
.stat-label{
    color:var(--muted);
    font-size:13px;
    margin-bottom:10px;
}
.stat-value{
    font-size:34px;
    font-weight:800;
    line-height:1;
}
.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:0 32px 10px;
}
.toolbar-left{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.filter-btn{
    background:rgba(255,255,255,.04);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:12px;
    padding:11px 14px;
    cursor:pointer;
}
.filter-btn.active{
    background:rgba(59,130,246,.22);
    border-color:rgba(59,130,246,.55);
}
.search-input{
    width:360px;
    max-width:100%;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:14px;
    padding:12px 14px;
    outline:none;
}
.search-input::placeholder{color:#7f91af}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
    gap:18px;
    padding:16px 32px 36px;
}
.device{
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border:1px solid var(--line);
    border-radius:22px;
    padding:20px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.device::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:5px;
    opacity:.95;
}
.device.green::before{background:var(--green)}
.device.orange::before{background:var(--orange)}
.device.red::before{background:var(--red)}
.device-top{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.device-title{
    font-size:19px;
    font-weight:800;
    line-height:1.25;
    margin-bottom:6px;
}
.device-subtitle{
    color:var(--muted);
    font-size:14px;
    margin-bottom:4px;
}
.device-ip{
    color:#77a1ff;
    font-size:13px;
}
.status-badge{
    align-self:flex-start;
    border-radius:999px;
    padding:9px 12px;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.12);
}
.status-badge.green{background:rgba(22,163,74,.18); color:#d9ffe6}
.status-badge.orange{background:rgba(234,88,12,.20); color:#fff0df}
.status-badge.red{background:rgba(220,38,38,.20); color:#ffe1e1}
.device-meta{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:16px;
}
.device-meta.split{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.detail-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}
.detail-item span{
    color:var(--muted);
    font-size:13px;
}
.detail-item strong{
    font-size:14px;
    text-align:right;
}
.bin-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px;
}
.bin-card{
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:14px;
}
.bin-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}
.bin-header span{
    color:var(--muted);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.bin-header strong{
    font-size:15px;
}
.fill-row{display:block}
.fill-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}
.fill-meta span{
    color:var(--muted);
    font-size:13px;
}
.fill-meta strong{
    font-size:24px;
    line-height:1;
}
.progress{
    width:100%;
    height:12px;
    background:rgba(255,255,255,.07);
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
}
.progress-bar{
    height:100%;
    border-radius:999px;
}
.fill-good{background:linear-gradient(90deg, #22c55e, #16a34a)}
.fill-high{background:linear-gradient(90deg, #84cc16, #65a30d)}
.fill-warning{background:linear-gradient(90deg, #f59e0b, #ea580c)}
.fill-critical{background:linear-gradient(90deg, #ef4444, #dc2626)}
.fill-neutral{background:linear-gradient(90deg, #64748b, #475569)}
.device-alert{
    margin-top:4px;
    background:rgba(220,38,38,.16);
    color:#ffe2e2;
    border:1px solid rgba(220,38,38,.3);
    padding:12px 14px;
    border-radius:14px;
    font-size:14px;
}
.empty-state{
    margin:18px 32px 36px;
    padding:28px;
    border-radius:18px;
    border:1px dashed rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
    color:var(--muted);
    text-align:center;
}
.hidden{display:none}
.login-body{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.login-shell{
    width:100%;
    max-width:1020px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:24px;
    align-items:stretch;
}
.login-brand,
.login-box{
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow);
}
.login-brand{
    padding:40px;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,.24), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.brand-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    min-width:42px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(59,130,246,.2);
    color:#dce8ff;
    font-weight:800;
    letter-spacing:.08em;
}
.login-brand h1{
    margin:18px 0 12px;
    font-size:42px;
}
.login-brand p{
    color:var(--muted);
    max-width:420px;
    line-height:1.6;
    font-size:16px;
}
.login-box{
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    padding:36px;
}
.login-box h2{
    margin:0 0 18px;
    font-size:28px;
}
.login-form label{
    display:block;
    margin-bottom:14px;
}
.login-form span{
    display:block;
    margin-bottom:8px;
    color:var(--muted);
    font-size:14px;
}
.login-form input{
    width:100%;
    padding:14px 15px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    color:var(--text);
    outline:none;
}
.login-form button{
    margin-top:10px;
    width:100%;
    padding:14px 16px;
    border:none;
    border-radius:14px;
    background:linear-gradient(90deg, #2563eb, #3b82f6);
    color:white;
    font-weight:700;
    cursor:pointer;
}
.login-form button:hover{filter:brightness(1.05)}
.error{
    margin-bottom:16px;
    background:rgba(220,38,38,.18);
    color:#ffdede;
    border:1px solid rgba(220,38,38,.35);
    padding:12px 14px;
    border-radius:14px;
}
@media (max-width: 1100px){
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}
    .login-shell{grid-template-columns:1fr}
}
@media (max-width: 720px){
    .topbar, .stats, .toolbar, .grid{padding-left:18px;padding-right:18px}
    .topbar{flex-direction:column}
    .toolbar{flex-direction:column;align-items:stretch}
    .bin-grid{grid-template-columns:1fr}
    .device-meta.split{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr}
}