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

:root{
    --bg:#07111f;
    --bg2:#0b1b30;
    --panel:#10223a;
    --panel2:#17283f;
    --border:rgba(255,255,255,.11);
    --muted:#9fb2ce;
    --text:#edf5ff;
    --green:#36f1a0;
    --cyan:#50e0ea;
    --red:#ff5f76;
    --yellow:#ffd166;
    --shadow:0 24px 80px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at top left,rgba(80,224,234,.14),transparent 28%),
        radial-gradient(circle at top right,rgba(54,241,160,.12),transparent 24%),
        linear-gradient(135deg,#050b14,#09192c 58%,#07111f);
    color:var(--text);
    min-height:100vh;
}

a{color:inherit;text-decoration:none}
button,.btn{
    border:0;
    background:linear-gradient(135deg,var(--green),#4ee7bd);
    color:#03131f;
    padding:14px 20px;
    border-radius:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 35px rgba(54,241,160,.22);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn.secondary{
    background:rgba(255,255,255,.09);
    color:var(--text);
    border:1px solid var(--border);
    box-shadow:none;
}
.btn.ghost{
    background:rgba(255,255,255,.08);
    color:var(--text);
    border:1px solid var(--border);
    box-shadow:none;
}
input,select,textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.13);
    background:#0b1728;
    color:var(--text);
    border-radius:14px;
    padding:14px 15px;
    outline:none;
    font:inherit;
}
textarea{min-height:110px;resize:vertical}
label{display:block;color:#c8d5e8;font-weight:800;margin:14px 0 8px}

.hero-login{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.3fr .7fr;
}
.login-art{
    padding:68px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-art h1{
    font-size:64px;
    line-height:1;
    margin:0 0 26px;
    letter-spacing:-2.8px;
    max-width:880px;
}
.login-art p{
    color:var(--muted);
    font-size:20px;
    line-height:1.7;
    max-width:850px;
}
.login-box-wrap{
    padding:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.035);
    border-left:1px solid var(--border);
    backdrop-filter:blur(18px);
}
.login-box{
    width:100%;
    max-width:420px;
    background:rgba(16,34,58,.82);
    border:1px solid var(--border);
    border-radius:28px;
    padding:34px;
    box-shadow:var(--shadow);
}
.login-box h2{font-size:32px;margin:0 0 8px}
.login-box p{color:var(--muted);line-height:1.6}
.error,.notice{
    border-radius:14px;
    padding:14px 16px;
    margin:16px 0;
}
.error{
    background:rgba(255,95,118,.13);
    border:1px solid rgba(255,95,118,.35);
    color:#ffc7d0;
}
.notice{
    background:rgba(54,241,160,.12);
    border:1px solid rgba(54,241,160,.32);
    color:#bfffe4;
}

.brand{
    display:flex;
    align-items:center;
    gap:16px;
}
.brand-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    color:#06111d;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:26px;
    box-shadow:0 18px 50px rgba(80,224,234,.22);
}
.brand strong{display:block;font-size:22px}
.brand span{display:block;color:var(--muted);margin-top:4px}

.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:310px 1fr;
}
.sidebar{
    border-right:1px solid var(--border);
    background:rgba(9,22,39,.86);
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    gap:34px;
}
.nav{
    display:grid;
    gap:12px;
}
.nav a{
    display:flex;
    gap:14px;
    align-items:center;
    color:#c8d5e8;
    padding:17px 18px;
    border-radius:17px;
    font-weight:900;
}
.nav a span{
    width:11px;
    height:11px;
    border-radius:999px;
    background:#3e5c7c;
}
.nav a.active{
    background:rgba(80,224,234,.12);
    color:#fff;
}
.nav a.active span{background:var(--green);box-shadow:0 0 18px var(--green)}

.engine-card{
    margin-top:auto;
    border:1px solid var(--border);
    border-radius:20px;
    background:rgba(255,255,255,.06);
    padding:22px;
}
.engine-card small,.engine-card span{display:block;color:var(--muted)}
.engine-card strong{display:block;font-size:21px;margin:10px 0}

.content{
    padding:40px;
}
.topbar{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-start;
    margin-bottom:30px;
}
.topbar h1{
    font-size:42px;
    margin:0 0 10px;
    letter-spacing:-1.6px;
}
.topbar p{
    margin:0;
    color:var(--muted);
    font-size:17px;
}
.top-actions{display:flex;gap:12px;align-items:center}

.grid{display:grid;gap:20px}
.kpis{grid-template-columns:repeat(4,1fr);margin-bottom:24px}
.card{
    background:rgba(16,34,58,.78);
    border:1px solid var(--border);
    border-radius:26px;
    padding:26px;
    box-shadow:0 20px 70px rgba(0,0,0,.15);
}
.kpi small{display:block;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.kpi strong{display:block;font-size:38px;margin:10px 0}
.trend{color:var(--muted)}
.trend.positive{color:var(--green)}
.trend.danger{color:var(--red)}
.panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:20px;
}
.panel-title h2{margin:0;font-size:24px}
.pill{
    border:1px solid rgba(80,224,234,.28);
    background:rgba(80,224,234,.1);
    color:#baf9ff;
    border-radius:999px;
    padding:8px 13px;
    font-size:13px;
    font-weight:900;
}
.muted{color:var(--muted);line-height:1.65}

.table{
    width:100%;
    border-collapse:collapse;
}
.table th{
    color:#9fb2ce;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-size:12px;
    text-align:left;
    padding:16px 14px;
    border-bottom:1px solid var(--border);
}
.table td{
    padding:18px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#dce9fb;
}
.status{
    width:12px;
    height:12px;
    display:inline-block;
    border-radius:999px;
    margin-right:10px;
    background:#7a8ba3;
}
.status.up{background:var(--green);box-shadow:0 0 18px var(--green)}
.status.down{background:var(--red);box-shadow:0 0 18px var(--red)}
.status.warning{background:var(--yellow);box-shadow:0 0 18px var(--yellow)}
.status.unknown{background:#8aa0bb}

.form-card{max-width:980px}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 20px;
}
.span-2{grid-column:span 2}
.actions-row{display:flex;gap:12px;margin-top:10px}

@media(max-width:1100px){
    .hero-login,.app-shell{grid-template-columns:1fr}
    .sidebar{position:relative}
    .kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
    .content,.login-art,.login-box-wrap{padding:24px}
    .login-art h1{font-size:42px}
    .kpis,.form-grid{grid-template-columns:1fr}
    .span-2{grid-column:span 1}
    .topbar{flex-direction:column}
}