:root{
    --canvas:#f5f7fc;
    --panel:#ffffff;
    --panel-soft:#f8faff;
    --ink:#101828;
    --ink-soft:#344054;
    --muted:#667085;
    --brand:#0b4bdf;
    --brand-dark:#0739aa;
    --brand-bright:#2f6bff;
    --brand-soft:#eaf0ff;
    --cyan:#25c2f5;
    --violet:#7559ff;
    --line:#e6eaf2;
    --line-strong:#cfd6e4;
    --ok:#087d55;
    --ok-soft:#dcfae6;
    --bad:#b42318;
    --bad-soft:#fee4e2;
    --warn:#a15c00;
    --warn-soft:#fff3d6;
    --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 5px 16px rgba(44,62,105,.05);
    --shadow-lg:0 18px 55px rgba(38,55,96,.12);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--canvas)}
body{
    margin:0;
    min-height:100vh;
    font:14px/1.5 Inter,"Segoe UI Variable","Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:var(--canvas);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none;transition:color .16s ease,background .16s ease,opacity .16s ease}
a:hover{color:var(--brand-dark)}
input,select,textarea,button{font:inherit}

/* Application shell */
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.nav-toggle,.mobile-menu-button,.nav-overlay{display:none}
aside{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:24px 18px 18px;
    overflow-y:auto;
    background:rgba(255,255,255,.96);
    border-right:1px solid var(--line);
    box-shadow:8px 0 32px rgba(58,75,116,.035);
    z-index:20;
}
.brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin:2px 12px 34px;
    color:var(--ink);
}
.brand:hover{color:var(--ink)}
.brand-logo{display:block;width:142px;height:auto}
.brand-subtitle{
    margin-left:2px;
    color:#7a8699;
    font-size:10px;
    font-weight:750;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.nav-label{
    margin:0 12px 8px;
    color:#98a2b3;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.nav-label-spaced{margin-top:24px}
nav a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:43px;
    margin-bottom:4px;
    padding:10px 13px 10px 42px;
    color:#4b5870;
    border:1px solid transparent;
    border-radius:12px;
    font-weight:650;
}
nav a:before{
    content:"";
    position:absolute;
    left:15px;
    width:13px;
    height:13px;
    border:2px solid #a9b3c5;
    border-radius:5px;
    transition:all .16s ease;
}
nav a:hover{color:var(--brand);background:#f6f8fd}
nav a:hover:before{border-color:var(--brand);transform:rotate(5deg)}
nav a.nav-active{
    color:var(--brand);
    background:linear-gradient(120deg,#edf2ff,#f7f9ff);
    border-color:#dfe7ff;
    box-shadow:0 5px 16px rgba(11,75,223,.08);
}
nav a.nav-active:before{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.sidebar-footer{
    margin-top:auto;
    padding:17px 13px 2px;
    border-top:1px solid var(--line);
    color:#768197;
    font-size:12px;
}
.service-state{display:flex;align-items:center;font-weight:650;color:#4b5870}
.server-version{margin:6px 0 0 16px;color:#98a2b3;font-size:11px}
.system-dot{
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:8px;
    border-radius:50%;
    background:#20c997;
    box-shadow:0 0 0 4px rgba(32,201,151,.12);
}

main{min-width:0}
header{
    position:sticky;
    top:0;
    z-index:10;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 34px;
    background:rgba(245,247,252,.88);
    border-bottom:1px solid rgba(220,226,239,.9);
    backdrop-filter:blur(15px);
}
.header-leading{display:flex;align-items:center;min-width:0}
.page-title{display:flex;flex-direction:column;line-height:1.15}
.page-title span{
    color:var(--brand);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.13em;
}
.page-title strong{margin-top:5px;font-size:22px;letter-spacing:-.025em}
.user-menu{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 7px 6px 8px;
    color:#475467;
    background:rgba(255,255,255,.72);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:0 3px 12px rgba(44,62,105,.05);
    font-weight:650;
}
.user-avatar{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(145deg,var(--brand),var(--brand-bright));
    color:#fff;
    font-weight:800;
    box-shadow:0 5px 14px rgba(11,75,223,.24);
}
.user-name{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.separator{display:block;width:1px;height:18px;background:var(--line)}
.user-menu a{padding:5px 8px 5px 2px;color:#596579}
.user-menu a:hover{color:var(--brand)}
.content{max-width:1680px;margin:0 auto;padding:32px 34px 54px}

/* Dashboard and surfaces */
.grid{display:grid;grid-template-columns:repeat(6,minmax(145px,1fr));gap:16px}
.card,.filter-panel{
    position:relative;
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:18px;
    padding:23px;
    box-shadow:var(--shadow-sm);
}
.metric{min-height:128px;overflow:hidden;isolation:isolate}
.metric:before{
    content:"";
    position:absolute;
    z-index:-1;
    right:-25px;
    top:-35px;
    width:105px;
    height:105px;
    border-radius:50%;
    background:linear-gradient(140deg,rgba(11,75,223,.13),rgba(37,194,245,.08));
}
.metric:after{
    content:"";
    position:absolute;
    top:0;
    left:22px;
    width:34px;
    height:3px;
    border-radius:0 0 8px 8px;
    background:linear-gradient(90deg,var(--brand),var(--cyan));
}
.metric strong{
    display:block;
    margin-top:14px;
    color:#0d1730;
    font-size:32px;
    line-height:1.05;
    letter-spacing:-.045em;
}
.metric span{color:var(--muted);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.035em}
h1{margin:0 0 20px;font-size:27px;letter-spacing:-.03em}
h2{margin:0 0 16px;font-size:18px;letter-spacing:-.018em}
p{color:#536078}
.card>p:first-child{margin-top:0}.card>p:last-child{margin-bottom:0}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:19px}
.panel-heading h2,.results-heading h2{margin:0 0 4px}
.panel-heading p{margin:0;color:var(--muted);font-size:13px}
.section{margin-top:25px}
.results-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 3px 13px}
.result-count{color:var(--muted);font-size:12px;font-weight:650}

/* Forms and actions */
.toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.card .toolbar:last-child,.filter-panel .toolbar:last-child{margin-bottom:0}
.toolbar-filters{flex-wrap:nowrap}
.toolbar-actions{display:flex;gap:9px;align-items:center}
.field{display:flex;flex-direction:column;gap:7px;min-width:150px}
.field-grow{flex:1 1 260px}.field-ip{flex:0 1 230px}.field-state{flex:0 1 180px}
.field label{color:#3d4960;font-size:12px;font-weight:750}
.label-note{color:#98a2b3;font-weight:550}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
    min-height:42px;
    padding:9px 12px;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line-strong);
    border-radius:10px;
    outline:none;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input::placeholder,textarea::placeholder{color:#a2abba}
input:focus,select:focus,textarea:focus{
    border-color:#6d91ee;
    box-shadow:0 0 0 4px rgba(11,75,223,.105);
}
input[type=checkbox]{accent-color:var(--brand)}
input[type=submit],button,.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 16px;
    color:#fff;
    background:linear-gradient(135deg,var(--brand),#326dff);
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
    font-weight:750;
    box-shadow:0 6px 16px rgba(11,75,223,.18);
    transition:transform .12s ease,box-shadow .16s ease,background .16s ease;
}
input[type=submit]:hover,button:hover,.button:hover{
    color:#fff;
    background:linear-gradient(135deg,var(--brand-dark),var(--brand));
    box-shadow:0 9px 22px rgba(11,75,223,.23);
    transform:translateY(-1px);
}
input[type=submit]:active,button:active,.button:active{transform:translateY(0)}
input.button-secondary,.button-secondary{
    color:#3c485e;
    background:#fff;
    border-color:var(--line-strong);
    box-shadow:none;
}
input.button-secondary:hover,.button-secondary:hover{color:var(--brand);background:var(--brand-soft);border-color:#bfd0ff;box-shadow:none}
button.button-danger,.button-danger{color:var(--bad);background:#fff;border-color:#fecdca;box-shadow:none}
button.button-danger:hover,.button-danger:hover{color:#912018;background:var(--bad-soft);border-color:#fda29b;box-shadow:none}
button.button-muted,.button-muted{background:#647087;box-shadow:none}
.button-small{min-height:32px;padding:5px 10px;font-size:12px;border-radius:8px}

/* Data */
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:separate;border-spacing:0;white-space:nowrap}
th,td{text-align:left;padding:14px 15px;border-bottom:1px solid #edf0f5;vertical-align:middle}
th{
    position:sticky;
    top:0;
    z-index:1;
    color:#7b8698;
    background:#f8faff;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.075em;
}
tbody tr{transition:background .13s ease}
tbody tr:hover{background:#f8faff}
tr:last-child td{border-bottom:0}
td code{padding:4px 7px;color:#344054;background:#f2f5fa;border-radius:6px;font:12px/1.4 Consolas,"SFMono-Regular",monospace}
.cell-actions{text-align:right}
.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.035em}
.badge-ok{color:var(--ok);background:var(--ok-soft)}
.badge-warn{color:var(--warn);background:var(--warn-soft)}
.badge-bad{color:var(--bad);background:var(--bad-soft)}
.status-dot{display:inline-flex;align-items:center;gap:7px;color:#475467;font-size:12px;font-weight:650}
.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#98a2b3}
.status-dot.is-on:before{background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.12)}
.status-dot.is-off:before{background:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.1)}
.alert{margin-bottom:17px;padding:14px 16px;border:1px solid transparent;border-radius:12px;font-weight:650}
.alert-ok{color:var(--ok);background:var(--ok-soft);border-color:#abefc6}
.alert-error{color:var(--bad);background:var(--bad-soft);border-color:#fecdca}
.empty{padding:48px;text-align:center;color:var(--muted)}
.key-box{padding:18px;color:#fff;background:linear-gradient(130deg,#0c1830,#15346f);border-radius:12px;word-break:break-all;font:750 18px Consolas,monospace;letter-spacing:1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* Authentication */
.login-page{
    min-height:100vh;
    padding:22px;
    display:grid;
    place-items:center;
    overflow-x:hidden;
    background:#eef3ff;
}
.auth-shell{
    position:relative;
    width:min(1100px,96vw);
    min-height:650px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(255,255,255,.8);
    border-radius:30px;
    box-shadow:0 35px 90px rgba(34,57,113,.18);
}
.auth-intro{
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:54px;
    background:linear-gradient(145deg,#f7f9ff 0%,#eaf1ff 58%,#e6faff 100%);
}
.auth-intro:after{
    content:"";
    position:absolute;
    z-index:-2;
    left:-18%;
    bottom:-34%;
    width:620px;
    height:620px;
    border-radius:48%;
    background:linear-gradient(140deg,rgba(11,75,223,.94),rgba(37,194,245,.68));
    transform:rotate(-12deg);
}
.auth-logo{width:174px;height:auto}
.auth-copy{position:relative;z-index:1;max-width:470px;margin-bottom:36px;color:#fff}
.auth-copy .eyebrow{color:rgba(255,255,255,.72)}
.auth-copy h1{margin:11px 0 16px;font-size:44px;line-height:1.06;letter-spacing:-.045em}
.auth-copy p{max-width:420px;margin:0;color:rgba(255,255,255,.78);font-size:16px}
.eyebrow{display:block;color:var(--brand);font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.auth-orbit{position:absolute;z-index:-1;border:1px solid rgba(11,75,223,.14);border-radius:50%}
.auth-orbit-one{top:105px;right:-115px;width:300px;height:300px}
.auth-orbit-two{top:155px;right:-60px;width:190px;height:190px}
.login-card{
    align-self:center;
    width:100%;
    max-width:470px;
    padding:50px;
    background:#fff;
}
.login-heading{margin-bottom:28px}
.login-heading h2,.error-card h2{margin:8px 0 7px;font-size:31px;line-height:1.12;letter-spacing:-.035em}
.login-heading p{margin:0;color:var(--muted)}
.login-card .field{margin:17px 0}
.login-card input[type=email],.login-card input[type=password],.login-card input[type=text]{width:100%}
.login-card input[type=submit]{width:100%;margin-top:12px}
.auth-link{margin:20px 0 0;text-align:center;font-size:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .field{min-width:0}
.setup-card{max-width:530px;padding-top:38px;padding-bottom:38px}
.auth-shell-setup{grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr)}
.error-shell{width:min(560px,94vw)}
.error-card{max-width:none;padding:46px;border-radius:26px;box-shadow:var(--shadow-lg)}
.error-logo{width:145px;height:auto;margin-bottom:36px}
.error-glyph{display:grid;place-items:center;width:48px;height:48px;margin-bottom:19px;color:var(--bad);background:var(--bad-soft);border-radius:15px;font-size:24px;font-weight:900}
.error-card p{font-size:15px}
.error-code{display:flex;flex-direction:column;gap:4px;margin:24px 0;padding:15px 17px;background:#f7f9fd;border:1px solid var(--line);border-radius:12px}
.error-code span{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.error-code strong{font-family:Consolas,monospace;font-size:14px}

/* Responsive */
@media(max-width:1320px){
    .grid{grid-template-columns:repeat(3,1fr)}
    .toolbar-filters{flex-wrap:wrap}
    .field-grow,.field-ip,.field-state{flex:1 1 220px}
    .toolbar-actions{flex:1 0 100%}
}
@media(max-width:960px){
    .layout{display:block}
    .nav-toggle{position:fixed;opacity:0;pointer-events:none}
    aside{
        position:fixed;
        display:flex;
        z-index:40;
        left:0;
        top:0;
        width:286px;
        max-width:86vw;
        transform:translateX(-103%);
        transition:transform .22s ease;
        box-shadow:22px 0 55px rgba(16,24,40,.2);
    }
    .nav-toggle:checked~aside{transform:translateX(0)}
    .nav-overlay{position:fixed;z-index:35;inset:0;background:rgba(12,22,43,.48);cursor:pointer;backdrop-filter:blur(3px)}
    .nav-toggle:checked~.nav-overlay{display:block}
    .mobile-menu-button{
        display:grid;
        place-items:center;
        flex:0 0 42px;
        height:42px;
        margin-right:13px;
        color:var(--brand);
        background:#fff;
        border:1px solid var(--line);
        border-radius:11px;
        cursor:pointer;
        box-shadow:var(--shadow-sm);
    }
    .mobile-menu-button span{font-size:22px;line-height:1;transform:translateY(-1px)}
    header{height:70px;padding:0 21px}
    .content{padding:24px 20px 42px}
    .auth-shell{width:min(720px,95vw);grid-template-columns:1fr;min-height:0}
    .auth-intro{min-height:230px;padding:34px}
    .auth-intro:after{left:auto;right:-180px;bottom:-340px}
    .auth-copy{margin:50px 0 0;max-width:500px}
    .auth-copy h1{font-size:31px}
    .auth-copy p{font-size:14px}
    .auth-orbit{display:none}
    .login-card{max-width:none;padding:38px}
}
@media(max-width:640px){
    .grid{grid-template-columns:1fr}
    .user-avatar,.user-name{display:none}
    .user-menu{gap:8px;padding-left:12px}
    .content{padding:19px 14px 34px}
    .card,.filter-panel{padding:18px;border-radius:15px}
    .toolbar,.toolbar-filters{align-items:stretch;flex-direction:column}
    .field,.field-grow,.field-ip,.field-state{width:100%}
    .toolbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
    .toolbar-actions input{width:100%}
    .page-title strong{font-size:19px}
    .login-page{padding:10px;background:#fff}
    .auth-shell{width:100%;border:0;border-radius:0;box-shadow:none}
    .auth-intro{min-height:205px;padding:29px 25px}
    .auth-logo{width:142px}
    .auth-copy{margin:38px 0 0}
    .auth-copy h1{margin-bottom:9px;font-size:27px}
    .login-card{padding:32px 25px}
    .login-heading h2,.error-card h2{font-size:27px}
    .form-grid{grid-template-columns:1fr;gap:0}
    .error-shell{width:100%}
    .error-card{padding:32px 25px;border-radius:0;box-shadow:none}
}