:root{
    --bg:#070a0f;
    --panel:#111721;
    --panel2:#0c1118;
    --line:#253142;
    --text:#f3f6fb;
    --muted:#8996a8;
    --blue:#2f6df6;
    --blue2:#79a2ff;
    --green:#3bd68d;
    --danger:#eb6565;
}

*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 0%,rgba(47,109,246,.12),transparent 30%),
        radial-gradient(circle at 90% 100%,rgba(47,109,246,.07),transparent 28%),
        var(--bg);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}

.wrap{
    width:min(1160px,92vw);
    margin:0 auto;
    padding:24px 0 60px;
}

.top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(145deg,#3474ff,#1c4bb8);
}

.mark svg{width:25px;height:25px}

.brand strong{
    display:block;
    font-size:16px;
    letter-spacing:.11em;
}

.brand span{
    display:block;
    margin-top:2px;
    color:#758196;
    font-size:7px;
    letter-spacing:.18em;
    font-weight:900;
}

.page-title{
    margin-top:32px;
}

.kicker{
    color:var(--blue2);
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}

h1{
    margin:7px 0 0;
    font-size:35px;
    letter-spacing:-.045em;
}

.subtitle{
    margin-top:8px;
    color:#9ba8ba;
    font-size:12px;
    line-height:1.6;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:14px;
    margin-top:24px;
}

.card{
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.016),rgba(255,255,255,.006)),var(--panel);
}

.card-wide{
    grid-column:1 / -1;
}

.card h2{
    margin:0;
    font-size:15px;
}

.card p{
    color:var(--muted);
    font-size:10px;
    line-height:1.55;
}

.metric{
    font-size:31px;
    font-weight:950;
    margin-top:10px;
}

.metric-label{
    color:#728095;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:14px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:40px;
    padding:0 13px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#141b24;
    color:#e8eef6;
    cursor:pointer;
    font-size:10px;
    font-weight:900;
}

.btn.primary{
    background:var(--blue);
    border-color:var(--blue);
    color:white;
}

.btn:hover{
    transform:translateY(-1px);
    border-color:#45689b;
}

.table{
    width:100%;
    border-collapse:collapse;
    margin-top:13px;
}

.table th,
.table td{
    padding:9px 8px;
    border-top:1px solid #1d2631;
    text-align:left;
    font-size:9px;
}

.table th{
    color:#758196;
    font-size:7px;
    letter-spacing:.12em;
}

.badge{
    display:inline-flex;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(59,214,141,.1);
    color:var(--green);
    font-size:7px;
    font-weight:900;
}

.error{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid rgba(235,101,101,.35);
    border-radius:10px;
    background:rgba(235,101,101,.08);
    color:#ffaaaa;
    font-size:10px;
}

.success{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid rgba(59,214,141,.3);
    border-radius:10px;
    background:rgba(59,214,141,.08);
    color:#9ff0c5;
    font-size:10px;
}

.login-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 50% 20%,rgba(47,109,246,.16),transparent 34%),
        var(--bg);
}

.login-card{
    width:min(440px,100%);
    padding:26px;
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(17,23,33,.93);
    box-shadow:0 30px 90px rgba(0,0,0,.4);
}

.login-logo{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:var(--blue);
    margin-bottom:18px;
}

.login-logo svg{
    width:32px;
    height:32px;
}

.login-card h1{
    font-size:28px;
}

.field{
    display:grid;
    gap:6px;
    margin-top:13px;
}

.field label{
    color:#9ba8ba;
    font-size:9px;
    font-weight:900;
}

.field input{
    height:44px;
    padding:0 12px;
    border:1px solid #293443;
    border-radius:11px;
    outline:none;
    background:#0b1016;
    color:white;
}

.field input:focus{
    border-color:#4f78bb;
}

.login-submit{
    width:100%;
    height:46px;
    margin-top:17px;
    border:0;
    border-radius:12px;
    background:var(--blue);
    color:white;
    cursor:pointer;
    font-size:10px;
    font-weight:950;
}

.top-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.logout{
    color:#8e9aae;
    font-size:9px;
    font-weight:900;
}

@media(max-width:850px){
    .grid{grid-template-columns:1fr}
    .card-wide{grid-column:auto}
}