:root{
    --bg:#05030a;
    --panel:#0c0814;

    --purple:#a456ff;
    --purple2:#c477ff;

    --green:#61e0a7;
    --red:#ff607c;
    --orange:#ffaf63;

    --white:#f4edfa;
    --text:#b4a8bf;
    --muted:#716779;

    --line:rgba(172,95,255,.17);
}


*{
    box-sizing:border-box;
}


body{
    margin:0;

    min-height:100vh;

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(118,47,210,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #05030a,
            #080510 55%,
            #040307
        );

    color:var(--white);

    font-family:
        Inter,
        system-ui,
        sans-serif;
}


a{
    color:inherit;
    text-decoration:none;
}


button,
input,
textarea{
    font:inherit;
}


button{
    cursor:pointer;
}


button:disabled{
    cursor:not-allowed;
    opacity:.38;
}



.vka-page{
    min-height:100vh;
}



/* HEADER */

.vka-header{
    height:82px;

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

    gap:30px;

    padding:0 42px;

    border-bottom:
        1px solid var(--line);

    background:
        rgba(6,4,11,.84);

    backdrop-filter:
        blur(20px);
}


.vka-logo img{
    width:170px;
    display:block;
}


.vka-header-right{
    display:flex;
    align-items:center;
    gap:25px;
}


.vka-admin-status{
    display:flex;
    align-items:center;
    gap:10px;
}


.vka-admin-status small{
    display:block;

    color:#6f6678;

    font-size:8px;
    font-weight:900;

    letter-spacing:.13em;
}


.vka-admin-status strong{
    display:block;

    margin-top:2px;

    font-size:11px;
}


.vka-online{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 12px rgba(97,224,167,.75);
}


.vka-back{
    padding:10px 14px;

    border:
        1px solid var(--line);

    border-radius:9px;

    color:#b9adc3;

    font-size:10px;
    font-weight:850;
}



/* MAIN */

.vka-main{
    width:min(
        1400px,
        calc(100% - 50px)
    );

    margin:0 auto;

    padding:65px 0 100px;
}


.vka-kicker,
.vka-panel-label{
    color:var(--purple2);

    font-size:8px;
    font-weight:900;

    letter-spacing:.19em;
}


.vka-title h1{
    margin:9px 0 10px;

    font-size:
        clamp(38px,5vw,65px);

    letter-spacing:-.045em;
}


.vka-title p{
    margin:0;

    color:#81768c;

    font-size:13px;
}



/* STATS */

.vka-stats{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    margin-top:38px;

    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:15px;

    background:
        rgba(11,7,18,.72);
}


.vka-stats article{
    padding:21px 24px;

    border-right:
        1px solid var(--line);
}


.vka-stats article:last-child{
    border-right:0;
}


.vka-stats span{
    color:#706678;

    font-size:8px;
    font-weight:900;

    letter-spacing:.14em;
}


.vka-stats strong{
    display:block;

    margin-top:7px;

    font-size:25px;
}


.vka-stats .danger{
    color:#ff8095;
}



/* PANELS */

.vka-panel{
    margin-top:18px;

    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(16,9,27,.94),
            rgba(6,5,11,.93)
        );
}


.vka-toolbar{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;

    padding:24px 26px;

    border-bottom:
        1px solid var(--line);
}


.vka-toolbar h2{
    margin:6px 0 0;

    font-size:22px;
}



/* SEARCH */

.vka-search{
    position:relative;

    width:min(420px,45%);
}


.vka-search input{
    width:100%;
    height:45px;

    padding:
        0 75px
        0 15px;

    outline:none;

    border:
        1px solid rgba(172,95,255,.18);

    border-radius:10px;

    background:#08060d;

    color:white;
}


.vka-search input:focus{
    border-color:
        rgba(188,110,255,.55);
}


.vka-search span{
    position:absolute;

    top:50%;
    right:13px;

    transform:
        translateY(-50%);

    color:#815f9c;

    font-size:8px;
    font-weight:900;
}



/* USER TABLE */

.vka-table-head,
.vka-user{
    display:grid;

    grid-template-columns:
        minmax(210px,1.4fr)
        90px
        110px
        100px
        180px
        70px;

    align-items:center;

    gap:15px;

    padding:0 26px;
}


.vka-table-head{
    min-height:45px;

    color:#655c6d;

    font-size:8px;
    font-weight:900;

    letter-spacing:.14em;

    background:
        rgba(255,255,255,.012);
}


.vka-user{
    min-height:76px;

    border-top:
        1px solid rgba(166,90,255,.08);

    transition:.18s;
}


.vka-user:hover{
    background:
        rgba(131,58,209,.055);
}


.vka-user-main strong{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:13px;
}


.vka-user-main span{
    display:block;

    margin-top:4px;

    color:#746a7c;

    font-size:10px;
}


.vka-owner-mini{
    padding:3px 5px;

    border:
        1px solid rgba(198,119,255,.30);

    border-radius:5px;

    color:#d795ff;

    font-size:6px;
    font-weight:900;

    letter-spacing:.09em;
}


.vka-role{
    color:#94879d;

    font-size:9px;
    font-weight:900;
}


.vka-role.admin{
    color:#c578ff;
}


.vka-role.mod{
    color:#65cfff;
}


.vka-account-status{
    font-size:8px;
    font-weight:900;
}


.vka-account-status.active{
    color:var(--green);
}


.vka-account-status.suspended{
    color:var(--red);
}


.vka-verified{
    color:#916872;

    font-size:8px;
    font-weight:900;
}


.vka-verified.yes{
    color:var(--green);
}


.vka-last-login{
    color:#746a7c;

    font-size:9px;
}


.vka-view{
    border:
        1px solid rgba(179,101,255,.24);

    border-radius:8px;

    padding:8px 10px;

    background:
        rgba(128,57,204,.07);

    color:#c88aff;

    font-size:8px;
    font-weight:900;
}


.vka-loading,
.vka-empty{
    padding:35px 26px;

    color:#716779;

    font-size:11px;
}



/* DRAWER */

.vka-drawer{
    position:fixed;

    inset:0;

    z-index:2000;

    visibility:hidden;

    pointer-events:none;
}


.vka-drawer.open{
    visibility:visible;
    pointer-events:auto;
}


.vka-drawer-backdrop{
    position:absolute;

    inset:0;

    border:0;

    background:
        rgba(0,0,0,.65);

    opacity:0;

    transition:.25s;
}


.vka-drawer.open
.vka-drawer-backdrop{
    opacity:1;
}


.vka-drawer-panel{
    position:absolute;

    top:0;
    right:0;

    width:min(570px,100%);

    height:100%;

    overflow:auto;

    padding:32px;

    border-left:
        1px solid rgba(181,102,255,.27);

    background:
        linear-gradient(
            145deg,
            #10091b,
            #07050d
        );

    box-shadow:
        -35px 0 100px rgba(0,0,0,.5);

    transform:
        translateX(100%);

    transition:
        transform .28s ease;
}


.vka-drawer.open
.vka-drawer-panel{
    transform:translateX(0);
}


.vka-drawer-top{
    display:flex;

    justify-content:space-between;
    align-items:flex-start;

    gap:20px;
}


.vka-user-title{
    display:flex;
    align-items:center;

    gap:10px;
}


.vka-drawer-top h2{
    margin:8px 0 0;

    font-size:32px;
}


.vka-owner-badge{
    margin-top:8px;

    padding:5px 7px;

    border:
        1px solid rgba(207,125,255,.38);

    border-radius:6px;

    color:#dc9eff;

    background:
        rgba(154,69,221,.09);

    font-size:7px;
    font-weight:900;

    letter-spacing:.12em;
}


.vka-close{
    width:38px;
    height:38px;

    border:
        1px solid var(--line);

    border-radius:9px;

    background:
        rgba(255,255,255,.02);

    color:#baadbf;

    font-size:23px;
}



/* DETAILS */

.vka-profile-id{
    margin-top:30px;

    padding:18px;

    border:
        1px solid var(--line);

    border-radius:12px;

    background:
        rgba(255,255,255,.015);
}


.vka-profile-id span,
.vka-detail span{
    display:block;

    color:#696171;

    font-size:8px;
    font-weight:900;

    letter-spacing:.13em;
}


.vka-profile-id strong{
    display:block;

    margin-top:5px;

    color:#ba75ff;

    font-size:21px;
}


.vka-detail-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

    margin-top:10px;
}


.vka-detail{
    min-height:92px;

    padding:16px;

    border:
        1px solid var(--line);

    border-radius:12px;

    background:
        rgba(255,255,255,.012);
}


.vka-detail strong{
    display:block;

    margin-top:8px;

    color:#cfc3d6;

    font-size:11px;

    overflow-wrap:anywhere;
}



/* ACTIONS */

.vka-action-section{
    margin-top:26px;

    padding-top:24px;

    border-top:
        1px solid var(--line);
}


.vka-action-label{
    color:#b96fff;

    font-size:8px;
    font-weight:900;

    letter-spacing:.17em;
}


.vka-action-section p{
    margin:
        8px 0
        15px;

    color:#756b80;

    font-size:10px;
    line-height:1.55;
}


.vka-role-buttons{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:8px;
}


.vka-role-buttons button{
    height:40px;

    border:
        1px solid rgba(178,98,255,.20);

    border-radius:9px;

    background:
        rgba(145,61,223,.05);

    color:#9e90aa;

    font-size:8px;
    font-weight:900;
}


.vka-role-buttons button.current{
    color:white;

    border-color:
        rgba(201,121,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(110,50,195,.65),
            rgba(166,70,239,.40)
        );
}


.vka-reason-label{
    display:block;

    margin-bottom:7px;

    color:#6d6376;

    font-size:7px;
    font-weight:900;

    letter-spacing:.13em;
}


.vka-reason{
    width:100%;
    min-height:85px;

    resize:vertical;

    padding:12px;

    outline:none;

    border:
        1px solid rgba(169,91,255,.17);

    border-radius:9px;

    background:#07050c;

    color:white;

    font-size:11px;
}


.vka-reason:focus{
    border-color:
        rgba(194,111,255,.46);
}


.vka-status-action{
    width:100%;
    height:43px;

    margin-top:10px;

    border:
        1px solid rgba(255,91,119,.40);

    border-radius:9px;

    background:
        rgba(207,54,82,.10);

    color:#ff8498;

    font-size:8px;
    font-weight:900;

    letter-spacing:.08em;
}


.vka-status-action.reactivate{
    border-color:
        rgba(88,220,161,.37);

    background:
        rgba(54,183,128,.08);

    color:#69dfa9;
}


.vka-current-suspension{
    margin-top:10px;

    padding:11px;

    border:
        1px solid rgba(255,95,122,.15);

    border-radius:8px;

    color:#ad7b85;

    background:
        rgba(180,51,72,.045);

    font-size:10px;
    line-height:1.55;
}


.vka-action-message{
    margin-top:18px;

    padding:12px;

    border-radius:9px;

    font-size:10px;
}


.vka-action-message.ok{
    border:
        1px solid rgba(91,220,161,.23);

    color:#70dfad;

    background:
        rgba(65,177,128,.06);
}


.vka-action-message.error{
    border:
        1px solid rgba(255,93,122,.23);

    color:#ff8fa1;

    background:
        rgba(198,55,80,.07);
}



/* AUDIT */

.vka-refresh{
    padding:10px 13px;

    border:
        1px solid var(--line);

    border-radius:8px;

    background:
        rgba(127,56,204,.06);

    color:#bd80ee;

    font-size:8px;
    font-weight:900;
}


.vka-audit-row{
    display:grid;

    grid-template-columns:
        155px
        1fr
        180px;

    gap:18px;

    padding:17px 26px;

    border-top:
        1px solid rgba(166,90,255,.08);
}


.vka-audit-action{
    color:#bf77f4;

    font-size:9px;
    font-weight:900;
}


.vka-audit-main strong{
    font-size:11px;
}


.vka-audit-main p{
    margin:
        5px 0
        0;

    color:#796f82;

    font-size:10px;
    line-height:1.5;
}


.vka-audit-time{
    color:#665d70;

    font-size:9px;

    text-align:right;
}



/* DENIED */

.vka-denied{
    min-height:100vh;

    display:grid;
    place-items:center;

    padding:30px;

    text-align:center;

    background:#05030a;
}


.vka-denied strong{
    color:#a961ff;

    letter-spacing:.22em;
}


.vka-denied h1{
    margin:13px 0 8px;

    font-size:44px;
}


.vka-denied p{
    color:#81768a;
}


.vka-denied a{
    display:inline-block;

    margin-top:18px;

    padding:12px 18px;

    border:
        1px solid var(--line);

    border-radius:10px;

    color:#c789ff;
}



/* RESPONSIVE */

@media(max-width:1000px){

    .vka-table-head{
        display:none;
    }

    .vka-user{
        grid-template-columns:
            1fr
            auto
            auto;

        padding:
            17px 20px;
    }

    .vka-last-login,
    .vka-verified{
        display:none;
    }

    .vka-audit-row{
        grid-template-columns:1fr;
    }

    .vka-audit-time{
        text-align:left;
    }
}


@media(max-width:700px){

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

    .vka-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .vka-search{
        width:100%;
    }

    .vka-detail-grid{
        grid-template-columns:1fr;
    }
}


@media(max-width:600px){

    .vka-header{
        padding:0 16px;
    }

    .vka-logo img{
        width:130px;
    }

    .vka-admin-status{
        display:none;
    }

    .vka-main{
        width:
            calc(100% - 24px);

        padding-top:40px;
    }

    .vka-drawer-panel{
        padding:24px 18px;
    }

    .vka-role-buttons{
        grid-template-columns:1fr;
    }
}