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

    --purple:#ad61ff;
    --purple2:#d08cff;

    --green:#61dfa8;
    --red:#ff667f;
    --orange:#ffad62;
    --cyan:#64d4ff;

    --white:#f4edfa;
    --text:#baafc3;
    --muted:#71677a;

    --line:rgba(177,96,255,.16);
}


*{
    box-sizing:border-box;
}


body{
    margin:0;

    min-height:100vh;

    background:
        radial-gradient(
            circle at 85% 6%,
            rgba(116,45,207,.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #05030a,
            #090512 52%,
            #040307
        );

    color:var(--white);

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


button,
input,
textarea{
    font:inherit;
}


button{
    cursor:pointer;
}


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


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


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



/* HEADER */

.vkm-header{
    height:82px;

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

    gap:25px;

    padding:0 42px;

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

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

    backdrop-filter:
        blur(20px);
}


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


.vkm-header-right{
    display:flex;
    align-items:center;

    gap:17px;
}


.vkm-session{
    display:flex;
    align-items:center;

    gap:10px;
}


.vkm-session small{
    display:block;

    color:#71677a;

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

    letter-spacing:.14em;
}


.vkm-session strong{
    display:block;

    margin-top:2px;

    font-size:11px;
}


.vkm-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 12px rgba(97,223,168,.7);
}


.vkm-role-badge{
    padding:6px 8px;

    border:
        1px solid rgba(187,102,255,.26);

    border-radius:7px;

    color:#cc8eff;

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

    letter-spacing:.12em;
}


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

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

    border-radius:9px;

    color:#b6aabf;

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



/* MAIN */

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

    margin:0 auto;

    padding:65px 0 100px;
}


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

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

    letter-spacing:.19em;
}


.vkm-hero h1{
    margin:9px 0 10px;

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

    letter-spacing:-.045em;
}


.vkm-hero p{
    margin:0;

    color:#81768c;

    font-size:13px;
}



/* STATS */

.vkm-stats{
    display:grid;

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

    margin-top:38px;

    overflow:hidden;

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

    border-radius:15px;

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


.vkm-stat{
    min-height:82px;

    padding:18px 22px;

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

    background:transparent;

    color:white;

    text-align:left;
}


.vkm-stat:last-child{
    border-right:0;
}


.vkm-stat:hover,
.vkm-stat.active{
    background:
        rgba(137,60,211,.08);
}


.vkm-stat.active{
    box-shadow:
        inset 0 -2px
        rgba(190,105,255,.75);
}


.vkm-stat span{
    display:block;

    color:#706679;

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

    letter-spacing:.14em;
}


.vkm-stat strong{
    display:block;

    margin-top:7px;

    font-size:24px;
}


.vkm-stat .orange{
    color:var(--orange);
}


.vkm-stat .cyan{
    color:var(--cyan);
}


.vkm-stat .green{
    color:var(--green);
}



/* PANEL */

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

    overflow:hidden;

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

    border-radius:18px;

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


.vkm-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:24px 26px;

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


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

    font-size:22px;
}


.vkm-toolbar-right{
    display:flex;
    align-items:center;

    gap:9px;
}


.vkm-toolbar input{
    width:300px;
    height:41px;

    padding:0 13px;

    outline:none;

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

    border-radius:9px;

    background:#07050c;

    color:white;
}


.vkm-refresh{
    height:41px;

    padding:0 14px;

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

    border-radius:9px;

    background:
        rgba(132,57,210,.07);

    color:#c17cf5;

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



/* REPORT ROW */

.vkm-report{
    display:grid;

    grid-template-columns:
        80px
        110px
        minmax(190px,1fr)
        minmax(190px,1fr)
        120px
        75px;

    align-items:center;

    gap:15px;

    min-height:82px;

    padding:15px 26px;

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


.vkm-report:hover{
    background:
        rgba(139,58,218,.04);
}


.vkm-report-id{
    color:#8c7a9b;

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


.vkm-status{
    font-size:8px;
    font-weight:900;

    letter-spacing:.06em;
}


.vkm-status.open{
    color:var(--orange);
}


.vkm-status.reviewing{
    color:var(--cyan);
}


.vkm-status.resolved{
    color:var(--green);
}


.vkm-status.dismissed{
    color:#918397;
}


.vkm-person strong{
    display:block;

    font-size:11px;
}


.vkm-person span{
    display:block;

    margin-top:4px;

    color:#72677a;

    font-size:9px;
}


.vkm-category{
    color:#bd7bf2;

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

    text-transform:uppercase;
}


.vkm-view{
    padding:8px 10px;

    border:
        1px solid rgba(180,100,255,.24);

    border-radius:8px;

    background:
        rgba(133,58,207,.07);

    color:#c887fb;

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


.vkm-loading,
.vkm-empty{
    padding:32px 26px;

    color:#706579;

    font-size:11px;
}



/* ACTION HISTORY */

.vkm-action-row{
    display:grid;

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

    gap:18px;

    padding:17px 26px;

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


.vkm-action-type{
    color:#c079f5;

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


.vkm-action-main strong{
    display:block;

    font-size:11px;
}


.vkm-action-main p{
    margin:5px 0 0;

    color:#766c80;

    font-size:10px;
}


.vkm-action-time{
    color:#655c6d;

    font-size:9px;

    text-align:right;
}



/* DRAWER */

.vkm-drawer{
    position:fixed;

    inset:0;

    z-index:3000;

    visibility:hidden;

    pointer-events:none;
}


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


.vkm-drawer-backdrop{
    position:absolute;

    inset:0;

    border:0;

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

    opacity:0;

    transition:.25s;
}


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


.vkm-drawer-panel{
    position:absolute;

    top:0;
    right:0;

    width:min(600px,100%);
    height:100%;

    overflow:auto;

    padding:32px;

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

    background:
        linear-gradient(
            145deg,
            #11091c,
            #07050d
        );

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

    transform:
        translateX(100%);

    transition:
        transform .27s ease;
}


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


.vkm-drawer-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:20px;
}


.vkm-drawer-head h2{
    margin:8px 0 0;

    font-size:31px;
}


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

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

    border-radius:9px;

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

    color:#bdafc4;

    font-size:22px;
}


.vkm-case-status{
    margin-top:27px;

    padding:17px;

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

    border-radius:11px;

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


.vkm-case-status span{
    display:block;

    color:#6b6172;

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


.vkm-case-status strong{
    display:block;

    margin-top:5px;

    color:#cf87ff;

    font-size:17px;
}


.vkm-detail-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;

    margin-top:9px;
}


.vkm-detail{
    min-height:83px;

    padding:15px;

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

    border-radius:10px;

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


.vkm-detail span{
    display:block;

    color:#675e70;

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

    letter-spacing:.12em;
}


.vkm-detail strong{
    display:block;

    margin-top:7px;

    color:#cfc4d5;

    font-size:11px;
}


.vkm-case-section{
    margin-top:23px;

    padding-top:21px;

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


.vkm-case-label{
    color:#bd73f6;

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

    letter-spacing:.15em;
}


.vkm-case-text{
    margin-top:10px;

    padding:14px;

    border:
        1px solid rgba(170,91,255,.13);

    border-radius:9px;

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

    color:#aa9fb3;

    font-size:11px;
    line-height:1.6;

    white-space:pre-wrap;
}


.vkm-primary-action{
    width:100%;
    height:42px;

    margin-top:13px;

    border:
        1px solid rgba(105,210,255,.35);

    border-radius:9px;

    background:
        rgba(77,172,214,.08);

    color:#71d8ff;

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


.vkm-note-label{
    display:block;

    margin-top:17px;
    margin-bottom:7px;

    color:#6d6375;

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


.vkm-note{
    width:100%;
    min-height:100px;

    resize:vertical;

    padding:12px;

    outline:none;

    border:
        1px solid rgba(174,94,255,.17);

    border-radius:9px;

    background:#07050c;

    color:white;

    font-size:11px;
}


.vkm-close-actions{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

    margin-top:9px;
}


.vkm-resolve,
.vkm-dismiss{
    height:42px;

    border-radius:9px;

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


.vkm-resolve{
    border:
        1px solid rgba(91,222,165,.35);

    background:
        rgba(63,180,128,.08);

    color:#68dfa9;
}


.vkm-dismiss{
    border:
        1px solid rgba(255,106,128,.31);

    background:
        rgba(201,55,78,.07);

    color:#ff8295;
}


.vkm-message{
    margin-top:16px;

    padding:12px;

    border-radius:9px;

    font-size:10px;
}


.vkm-message.ok{
    color:#6ddfad;

    border:
        1px solid rgba(92,221,166,.22);

    background:
        rgba(66,176,129,.06);
}


.vkm-message.error{
    color:#ff899b;

    border:
        1px solid rgba(255,98,124,.23);

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



/* DENIED */

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

    display:grid;
    place-items:center;

    padding:30px;

    text-align:center;

    background:#05030a;
}


.vkm-denied strong{
    color:#ae63ff;

    letter-spacing:.22em;
}


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

    font-size:42px;
}


.vkm-denied p{
    color:#82768c;
}


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

    margin-top:18px;

    padding:12px 18px;

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

    border-radius:10px;

    color:#ca8aff;
}



/* RESPONSIVE */

@media(max-width:1000px){

    .vkm-report{
        grid-template-columns:
            70px
            100px
            1fr
            75px;
    }

    .vkm-report .reporter,
    .vkm-report .category-column{
        display:none;
    }

    .vkm-action-row{
        grid-template-columns:1fr;
    }

    .vkm-action-time{
        text-align:left;
    }
}


@media(max-width:750px){

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

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

    .vkm-toolbar-right{
        width:100%;
    }

    .vkm-toolbar input{
        width:100%;
    }

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


@media(max-width:600px){

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

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

    .vkm-session{
        display:none;
    }

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

        padding-top:40px;
    }

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

    .vkm-report{
        grid-template-columns:
            60px
            90px
            1fr;
    }

    .vkm-report .view-column{
        grid-column:
            1 / -1;
    }
}



/* ==========================================================
   VOLTKIN PLAYER MODERATION V2
   ========================================================== */

.vkm-player-moderation{
    margin-top:18px;
    border:
        1px solid rgba(180,95,255,.22);
    background:
        linear-gradient(
            145deg,
            rgba(118,46,184,.10),
            rgba(5,3,10,.35)
        );
}

.vkm-penalty-target{
    margin:10px 0 18px;
    color:#82778e;
    font-size:12px;
    letter-spacing:.08em;
}

.vkm-penalty-target strong{
    margin-left:8px;
    color:#f3edf7;
}

.vkm-penalty-actions{
    display:grid;
    gap:10px;
    margin-top:14px;
}

.vkm-timeout-row{
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:10px;
}

.vkm-timeout-select{
    width:100%;
    min-height:44px;
    padding:0 12px;

    border:
        1px solid rgba(178,96,255,.25);

    border-radius:8px;

    background:#0b0711;
    color:#f3edf7;
}

.vkm-penalty-warning,
.vkm-penalty-timeout,
.vkm-penalty-suspend{
    min-height:44px;
    border-radius:8px;
    border:1px solid transparent;

    font-weight:800;
    letter-spacing:.06em;

    cursor:pointer;
}

.vkm-penalty-warning{
    background:
        rgba(255,197,92,.10);
    border-color:
        rgba(255,197,92,.32);
    color:#ffd178;
}

.vkm-penalty-timeout{
    background:
        rgba(93,193,255,.10);
    border-color:
        rgba(93,193,255,.30);
    color:#6fd0ff;
}

.vkm-penalty-suspend{
    background:
        rgba(255,83,117,.10);
    border-color:
        rgba(255,83,117,.30);
    color:#ff7189;
}

.vkm-penalty-warning:hover:not(:disabled),
.vkm-penalty-timeout:hover:not(:disabled),
.vkm-penalty-suspend:hover:not(:disabled){
    transform:translateY(-1px);
}

.vkm-penalty-actions button:disabled,
.vkm-timeout-select:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.vkm-penalty-permission{
    margin-top:13px;
    color:#81768b;
    font-size:12px;
    line-height:1.5;
}

@media(max-width:600px){

    .vkm-timeout-row{
        grid-template-columns:1fr;
    }
}