*{
    box-sizing:border-box;
}

:root{
    --bg:#05070d;
    --panel:#0b101b;
    --panel2:#101725;
    --border:#222d45;
    --text:#f4f7ff;
    --muted:#8f9ab2;
    --primary:#625cff;
    --primary2:#775cff;
    --green:#27d778;
    --red:#ff5d67;
}

html,body{
    padding:0;
    margin:0;
    min-height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body{
    min-height:100vh;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(88,69,255,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(0,194,255,.09),
            transparent 38%
        ),
        var(--bg);
}

button,
input,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

.hidden{
    display:none!important;
}

.auth-screen{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
}

.auth-card{
    width:min(500px,100%);
    padding:30px;
    border:1px solid var(--border);
    border-radius:22px;
    background:rgba(10,14,24,.96);
    box-shadow:
        0 30px 100px rgba(0,0,0,.35);
}

.brand-big{
    margin-bottom:22px;
}

.brand-big h1{
    margin:12px 0 4px;
    font-size:34px;
}

.brand-big p{
    color:var(--muted);
    margin:0;
}

.brand-icon{
    width:50px;
    height:50px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:900;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );
}

.brand-icon.small{
    width:42px;
    height:42px;
    border-radius:12px;
}

.auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:5px;
    background:#060910;
    border-radius:13px;
    margin-bottom:22px;
}

.auth-tab{
    border:0;
    padding:13px;
    color:var(--muted);
    background:transparent;
    border-radius:10px;
}

.auth-tab.active{
    background:#171e30;
    color:white;
}

.field{
    margin-bottom:16px;
}

.field label{
    display:block;
    color:#9da9c2;
    margin-bottom:8px;
    font-size:12px;
    letter-spacing:.08em;
}

.field small{
    display:block;
    margin-top:7px;
    color:var(--muted);
}

input,
select{
    width:100%;
    border:1px solid #293551;
    background:#0d1421;
    color:white;
    padding:14px 15px;
    border-radius:12px;
    outline:none;
}

input:focus,
select:focus{
    border-color:var(--primary);
}

.btn{
    border:0;
    border-radius:11px;
    padding:11px 16px;
    font-weight:700;
}

.btn.primary{
    color:white;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );
}

.btn.secondary{
    color:white;
    border:1px solid #293551;
    background:#111827;
}

.btn.danger{
    color:#ff747d;
    border:1px solid #662630;
    background:#2b1015;
}

.btn.big{
    width:100%;
    padding:16px;
}

.btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.topbar{
    height:74px;
    padding:0 28px;
    border-bottom:1px solid #171f30;
    background:rgba(6,9,15,.92);

    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.brand strong{
    display:block;
}

.brand span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}

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

.node-mini{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
}

.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#555d6d;
}

.dot.online{
    background:var(--green);
    box-shadow:
        0 0 15px rgba(39,215,120,.7);
}

.app-layout{
    display:grid;
    grid-template-columns:235px 1fr;
    min-height:calc(100vh - 74px);
}

.sidebar{
    padding:18px 14px;
    border-right:1px solid #171f30;
    background:#080c14;
}

.nav{
    width:100%;
    border:0;
    border-radius:11px;
    padding:13px 14px;
    color:#939eb6;
    background:transparent;
    text-align:left;
    margin-bottom:6px;
}

.nav.active{
    background:#161d2d;
    color:white;
}

.content{
    padding:28px;
    max-width:1300px;
    width:100%;
}

.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.page-header h1{
    margin:0;
    font-size:30px;
}

.page-header p{
    color:var(--muted);
    margin:5px 0 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:14px;
    margin-bottom:18px;
}

.stat-card,
.panel,
.server-card{
    border:1px solid var(--border);
    background:rgba(11,16,27,.9);
    border-radius:16px;
}

.stat-card{
    padding:18px;
}

.stat-card span{
    color:var(--muted);
    font-size:12px;
}

.stat-card strong{
    display:block;
    font-size:22px;
    margin-top:8px;
}

.panel{
    padding:22px;
}

.panel-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.panel-title-row h2{
    margin:0 0 5px;
}

.panel-title-row p{
    margin:0;
    color:var(--muted);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 15px;
}

.field.full{
    grid-column:1/-1;
}

.create-panel{
    max-width:800px;
}

.tier-card{
    border:1px solid #233450;
    background:#0d1727;
    padding:18px;
    border-radius:14px;
    margin:8px 0 18px;
    color:#9aa8c0;
    line-height:1.9;
}

.tier-card h3{
    color:#43d98b;
    margin:0 0 5px;
}

.notice{
    padding:13px 14px;
    border-radius:11px;
    margin:14px 0;
    border:1px solid #28334d;
    background:#0d1421;
    color:#aeb8cc;
}

.notice.error{
    border-color:#672932;
    background:#270f14;
    color:#ff6973;
}

.notice.success{
    border-color:#225b3d;
    background:#0d2519;
    color:#43d98b;
}

.servers-list{
    display:grid;
    gap:13px;
}

.server-card{
    padding:20px;
}

.server-head{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.server-name{
    font-size:19px;
    font-weight:800;
}

.server-meta{
    color:var(--muted);
    margin-top:5px;
}

.status-pill{
    border-radius:999px;
    padding:7px 11px;
    height:max-content;
    background:#192236;
    font-size:12px;
}

.server-address{
    padding:11px;
    margin-top:14px;
    background:#080d16;
    border-radius:10px;
    color:#aeb8cc;
}

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

.info-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #1b2438;
}

.info-row:last-child{
    border-bottom:0;
}

.info-row span{
    color:var(--muted);
}

#toast{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9999;
}

.toast-item{
    background:#121a2a;
    border:1px solid #2a3550;
    padding:13px 17px;
    border-radius:12px;
    margin-top:8px;
    box-shadow:
        0 15px 40px rgba(0,0,0,.4);
}

@media(max-width:950px){

    .stats-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:700px){

    .topbar{
        padding:0 15px;
    }

    .app-layout{
        grid-template-columns:1fr;
    }

    .sidebar{
        display:flex;
        overflow-x:auto;
        border-right:0;
        border-bottom:1px solid #171f30;
    }

    .nav{
        width:auto;
        min-width:max-content;
        margin-right:6px;
    }

    .content{
        padding:16px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .field.full{
        grid-column:auto;
    }

    .node-mini{
        display:none;
    }

}