:root{
--bg:#07090d;
--sidebar:#0b0e14;
--panel:#10141c;
--panel2:#151a24;
--border:#222b39;
--border2:#303b4e;
--text:#f1f5fa;
--muted:#8995a6;
--primary:#7887ff;
--purple:#9d78ff;
--green:#55e4a3;
--red:#ff6d7c;
--orange:#f0b85e;
}

*{
box-sizing:border-box;
}

body{
margin:0;
background:
radial-gradient(
circle at 85% -10%,
rgba(121,135,255,.12),
transparent 32%
),
var(--bg);
color:var(--text);
font-family:
Inter,
system-ui,
Arial,
sans-serif;
}

button,
input,
select{
font:inherit;
}

button{
cursor:pointer;
}

.hidden{
display:none!important;
}

.layout{
display:grid;
grid-template-columns:245px minmax(0,1fr);
min-height:100vh;
}

.sidebar{
position:sticky;
top:0;
height:100vh;
background:rgba(10,13,19,.96);
border-right:1px solid var(--border);
padding:20px 14px;
}

.brand{
display:flex;
align-items:center;
gap:11px;
padding:6px 8px 25px;
}

.brand-logo{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:11px;
background:
linear-gradient(
135deg,
var(--primary),
var(--purple)
);
font-weight:900;
box-shadow:
0 10px 30px
rgba(120,135,255,.25);
}

.brand strong{
display:block;
letter-spacing:.09em;
}

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

nav{
display:flex;
flex-direction:column;
gap:5px;
}

.nav{
border:0;
background:transparent;
color:#9ba6b6;
border-radius:9px;
padding:11px 12px;
display:flex;
align-items:center;
gap:12px;
text-align:left;
}

.nav:hover,
.nav.active{
background:#151b25;
color:white;
}

.profile{
position:absolute;
bottom:18px;
left:14px;
right:14px;
background:#10151e;
border:1px solid var(--border);
border-radius:12px;
padding:12px;
overflow:hidden;
}

.profile strong{
font-size:12px;
display:block;
overflow:hidden;
text-overflow:ellipsis;
}

.profile span{
font-size:10px;
color:var(--muted);
}

.main{
min-width:0;
}

header{
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 25px;
border-bottom:1px solid var(--border);
background:rgba(7,9,13,.75);
backdrop-filter:blur(18px);
position:sticky;
top:0;
z-index:50;
}

header h1{
font-size:17px;
margin:0;
}

header p{
margin:4px 0 0;
color:var(--muted);
font-size:11px;
}

.header-actions,
.buttons,
.form-row{
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
}

main{
padding:24px;
max-width:1550px;
margin:auto;
}

.page{
display:none;
}

.active-page{
display:block;
}

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

.metric{
border:1px solid var(--border);
border-radius:15px;
padding:18px;
background:
linear-gradient(
145deg,
rgba(19,24,34,.96),
rgba(12,16,23,.96)
);
}

.metric span{
color:var(--muted);
font-size:11px;
}

.metric strong{
display:block;
font-size:31px;
margin-top:7px;
}

.metric small{
display:block;
color:#626e7f;
font-size:10px;
margin-top:5px;
}

.panel{
background:
linear-gradient(
145deg,
rgba(17,22,31,.97),
rgba(12,16,23,.97)
);
border:1px solid var(--border);
border-radius:16px;
margin-bottom:17px;
overflow:hidden;
}

.panel-title{
min-height:70px;
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
border-bottom:1px solid var(--border);
}

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

.panel-title p{
font-size:11px;
color:var(--muted);
margin:4px 0 0;
}

.super-panel{
border-color:
rgba(157,120,255,.35);
}

.super-label{
font-size:10px;
font-weight:900;
padding:6px 9px;
border-radius:999px;
color:#cdbfff;
background:#201a36;
border:1px solid #493a70;
}

.services{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:12px;
padding:17px;
}

.service{
display:flex;
align-items:center;
gap:12px;
background:#0d1118;
border:1px solid var(--border);
padding:14px;
border-radius:12px;
}

.service-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
background:#181f2a;
border-radius:9px;
font-size:10px;
font-weight:900;
}

.service strong{
display:block;
font-size:12px;
}

.service span{
display:block;
font-size:10px;
color:var(--muted);
margin-top:4px;
}

.online{
color:var(--green)!important;
}

.offline{
color:var(--red)!important;
}

.badge{
font-size:10px;
font-weight:900;
padding:6px 9px;
border-radius:999px;
border:1px solid #3e4560;
background:#161b28;
}

.button{
border:1px solid var(--border2);
background:#171d28;
color:white;
border-radius:9px;
padding:9px 12px;
font-size:11px;
font-weight:800;
}

.button:hover{
background:#202938;
}

.button.primary{
border-color:transparent;
background:
linear-gradient(
135deg,
var(--primary),
var(--purple)
);
}

.button.danger{
background:#30161c;
color:#ff9aa5;
border-color:#59242d;
}

.button.good{
background:#122a21;
color:#78eab3;
border-color:#23503e;
}

.search,
.short-input{
background:#090d13;
border:1px solid var(--border2);
color:white;
border-radius:9px;
padding:10px 11px;
outline:none;
}

.search{
min-width:250px;
}

.short-input{
width:100px;
}

.search:focus,
.short-input:focus{
border-color:#6674cc;
}

.table-wrap{
overflow:auto;
}

table{
width:100%;
border-collapse:collapse;
min-width:850px;
}

thead{
background:#0c1017;
}

th{
padding:11px 13px;
font-size:9px;
text-transform:uppercase;
letter-spacing:.08em;
color:#778395;
text-align:left;
}

td{
padding:12px 13px;
border-top:1px solid #1d2531;
font-size:12px;
}

tbody tr:hover{
background:rgba(255,255,255,.018);
}

.account-email{
font-weight:750;
}

.account-user{
font-size:10px;
color:var(--muted);
margin-top:3px;
}

.role{
display:inline-flex;
padding:5px 8px;
border-radius:999px;
font-size:9px;
font-weight:900;
background:#151b25;
border:1px solid var(--border2);
}

.role.admin{
color:#72e3aa;
border-color:#24533f;
}

.role.super_admin{
color:#cab9ff;
background:#211a37;
border-color:#4a3972;
}

.status{
display:inline-flex;
align-items:center;
gap:6px;
font-size:9px;
font-weight:900;
}

.status::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
}

.status.active{
color:#6fe5aa;
}

.status.active::before{
background:var(--green);
}

.status.banned{
color:#ff8994;
}

.status.banned::before{
background:var(--red);
}

.action-row{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.role-select{
border:1px solid var(--border2);
background:#0d1118;
color:white;
border-radius:8px;
padding:7px;
font-size:10px;
}

.switch-grid{
padding:17px;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:10px;
}

.switch-card{
background:#0d1118;
border:1px solid var(--border);
padding:14px;
border-radius:11px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
}

.switch-card strong{
display:block;
font-size:12px;
}

.switch-card span{
display:block;
font-size:10px;
color:var(--muted);
margin-top:3px;
}

.switch-card input{
width:19px;
height:19px;
}

.buttons{
padding:0 17px 17px;
}

.danger-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:12px;
padding:17px;
}

.danger-card{
background:#120e12;
border:1px solid #3c242c;
border-radius:12px;
padding:15px;
}

.danger-card strong{
font-size:12px;
}

.danger-card p{
font-size:10px;
color:var(--muted);
min-height:30px;
}

.form-row{
padding:17px;
}

.maintenance{
padding:13px 16px;
margin-bottom:18px;
border-radius:12px;
border:1px solid #624d23;
background:#1b160c;
color:#f4c86e;
display:flex;
gap:10px;
align-items:center;
font-size:11px;
}

.empty{
text-align:center;
padding:35px;
color:var(--muted);
}

#toasts{
position:fixed;
right:18px;
top:86px;
z-index:9999;
display:flex;
flex-direction:column;
gap:8px;
}

.toast{
width:min(370px,calc(100vw - 36px));
padding:12px 14px;
border:1px solid var(--border2);
border-radius:10px;
background:#151b24;
box-shadow:
0 20px 55px
rgba(0,0,0,.4);
font-size:11px;
}

.toast.bad{
border-color:#602934;
color:#ffabb3;
}

.toast.good{
border-color:#27513f;
color:#83ebb9;
}

.audit-detail{
font-family:monospace;
font-size:9px;
color:#9aa5b5;
white-space:pre-wrap;
max-width:380px;
}

@media(max-width:1000px){

.layout{
grid-template-columns:72px minmax(0,1fr);
}

.sidebar{
padding:18px 8px;
}

.brand div:not(.brand-logo),
.nav span,
.profile{
display:none;
}

.brand{
justify-content:center;
padding-left:0;
padding-right:0;
}

.nav{
justify-content:center;
}

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

}

@media(max-width:650px){

.layout{
display:block;
}

.sidebar{
display:none;
}

header{
padding:0 12px;
}

main{
padding:12px;
}

.cards,
.services,
.switch-grid,
.danger-grid{
grid-template-columns:1fr;
}

.header-actions .button:not(.primary){
display:none;
}

}