:root{
--bg:#090c10;
--sidebar:#0d1117;
--panel:#11161d;
--panel2:#151b23;
--line:#232b36;
--text:#f7f9fb;
--muted:#8994a4;
--green:#34d17b;
--yellow:#ffbd4a;
--red:#ff626d;
--blue:#64a8ff;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
}

.sidebar{
position:fixed;
left:0;
top:0;
bottom:0;
width:230px;
padding:24px 16px;
background:var(--sidebar);
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
z-index:20;
}

.side-brand{
display:flex;
align-items:center;
gap:12px;
padding:0 8px 28px;
}

.logo-mark{
width:38px;
height:38px;
border-radius:11px;
background:#fff;
color:#080b10;
font-weight:900;
font-size:22px;
display:grid;
place-items:center;
}

.side-brand strong{
font-size:18px;
display:block;
}

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

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

nav a{
display:flex;
align-items:center;
gap:12px;
padding:11px 13px;
border-radius:10px;
text-decoration:none;
color:#9ba6b5;
font-size:14px;
}

nav a:hover,
nav a.active{
background:#181e27;
color:#fff;
}

.side-server{
margin-top:auto;
padding:14px;
background:#121821;
border:1px solid var(--line);
border-radius:12px;
font-size:13px;
}

.side-server small{
display:block;
color:var(--muted);
margin:5px 0 0 19px;
}

.dot{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
margin-right:7px;
box-shadow:0 0 10px rgba(52,209,123,.5);
}

.app{
margin-left:230px;
min-height:100vh;
}

.topbar{
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 34px;
border-bottom:1px solid var(--line);
background:rgba(9,12,16,.93);
position:sticky;
top:0;
z-index:10;
backdrop-filter:blur(14px);
}

.topbar h1{
margin:0;
font-size:21px;
}

.topbar p{
margin:4px 0 0;
font-size:12px;
color:var(--muted);
}

main{
max-width:1480px;
margin:0 auto;
padding:30px 34px 60px;
}

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

.section-head h2{
font-size:18px;
margin:0;
}

.section-head p{
margin:5px 0 0;
font-size:13px;
color:var(--muted);
}

.cards{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
margin-bottom:22px;
}

.card{
padding:19px;
border:1px solid var(--line);
border-radius:14px;
background:var(--panel);
}

.card span{
display:block;
font-size:12px;
color:var(--muted);
margin-bottom:9px;
}

.card strong{
font-size:30px;
}

.card.green strong{color:var(--green)}
.card.yellow strong{color:var(--yellow)}
.card.red strong{color:var(--red)}

.panel{
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:22px;
margin-bottom:20px;
}

.metrics{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
}

.metric{
background:var(--panel2);
border:1px solid var(--line);
border-radius:13px;
padding:16px;
min-height:115px;
}

.metric span{
display:block;
color:var(--muted);
font-size:12px;
margin-bottom:9px;
}

.metric strong{
font-size:24px;
display:block;
}

.metric small{
display:block;
color:var(--muted);
font-size:11px;
margin-top:5px;
}

.metric.speed strong{
font-size:29px;
}

.metric .uptime{
font-size:18px;
padding-top:7px;
}

.bar{
height:5px;
background:#242d39;
border-radius:999px;
overflow:hidden;
margin-top:15px;
}

.bar i{
display:block;
height:100%;
background:var(--green);
border-radius:999px;
}

.metric-note{
color:var(--muted);
font-size:11px;
margin:13px 0 0;
}

.server-online{
font-size:12px;
color:#c9d0da;
}

.notice{
padding:15px 18px;
margin-bottom:20px;
border-radius:13px;
border:1px solid #6d5117;
background:#2b220e;
color:#f2ce79;
font-size:13px;
}

.create-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1.2fr .8fr auto;
gap:11px;
align-items:end;
}

label span{
display:block;
font-size:11px;
color:var(--muted);
margin:0 0 7px 2px;
}

input,
select,
button{
font:inherit;
border:1px solid var(--line);
background:var(--panel2);
color:var(--text);
border-radius:10px;
padding:12px 13px;
outline:none;
}

input:focus,
select:focus{
border-color:#445064;
}

.create-grid input,
.create-grid select{
width:100%;
height:46px;
}

button{
cursor:pointer;
}

.primary{
background:#f6f7f9;
color:#0c0f14;
border-color:#f6f7f9;
font-weight:750;
}

.create-btn{
height:46px;
white-space:nowrap;
}

.ghost{
background:transparent;
}

.hint{
color:var(--muted);
font-size:12px;
}

.search{
display:flex;
gap:8px;
}

.search input{
width:340px;
}

.table-wrap{
overflow:auto;
}

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

th,
td{
text-align:left;
padding:14px 12px;
border-top:1px solid var(--line);
font-size:13px;
}

th{
color:var(--muted);
font-size:10px;
text-transform:uppercase;
letter-spacing:.08em;
}

.client-link{
font-weight:750;
color:#fff;
text-decoration:none;
}

.client-link:hover{
text-decoration:underline;
}

.sub{
color:var(--muted);
font-size:11px;
margin-top:4px;
}

.mono{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.status{
display:inline-flex;
padding:5px 8px;
border-radius:999px;
font-size:10px;
font-weight:850;
letter-spacing:.06em;
}

.status.online{
background:#103822;
color:#69e49b;
}

.status.offline{
background:#222934;
color:#aeb7c4;
}

.status.never{
background:#29252e;
color:#c7b8ce;
}

.status.expired{
background:#3c2a0d;
color:#ffd173;
}

.status.disabled{
background:#3d151a;
color:#ff9fa6;
}

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

.mini-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.panel.mini{
margin:0;
}

.mini h3{
font-size:13px;
color:var(--muted);
margin:0 0 12px;
}

.mini strong{
font-size:25px;
display:block;
}

.mini span{
font-size:11px;
color:var(--muted);
display:block;
margin-top:6px;
}

@media(max-width:1200px){

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

.metrics{
grid-template-columns:repeat(3,1fr);
}

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

}

@media(max-width:760px){

.sidebar{
width:66px;
padding:18px 9px;
}

.side-brand div:not(.logo-mark),
.sidebar nav span,
.side-server{
display:none;
}

.logo-mark{
width:42px;
height:42px;
}

nav a{
justify-content:center;
font-size:18px;
padding:12px;
}

.app{
margin-left:66px;
}

.topbar{
padding:0 18px;
}

main{
padding:20px 14px 50px;
}

.cards,
.metrics,
.mini-grid{
grid-template-columns:1fr 1fr;
}

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

.section-head{
align-items:flex-start;
flex-direction:column;
}

.search{
width:100%;
}

.search input{
width:100%;
}

}



/* ===== CLIENT PAGE ===== */

.crumb{
display:inline-block;
font-size:12px;
color:var(--muted);
text-decoration:none;
margin-bottom:4px;
}

.crumb:hover{
color:#fff;
}

.client-main{
max-width:1250px;
}

.client-layout{
display:grid;
grid-template-columns:minmax(0,1.6fr) 360px;
gap:20px;
}

.client-info{
margin-bottom:20px;
}

.info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-bottom:24px;
}

.info-item{
background:var(--panel2);
border:1px solid var(--line);
border-radius:13px;
padding:17px;
}

.info-item span{
display:block;
font-size:11px;
color:var(--muted);
margin-bottom:8px;
}

.info-item strong{
font-size:17px;
}

.client-details{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid var(--line);
}

.client-details > div{
padding:15px 8px;
border-bottom:1px solid var(--line);
}

.client-details > div:nth-child(odd){
padding-right:22px;
}

.client-details span{
display:block;
font-size:11px;
color:var(--muted);
margin-bottom:5px;
}

.client-details strong{
font-size:13px;
font-weight:600;
}

.detail-small{
font-size:11px !important;
word-break:break-all;
}

.qr-card{
text-align:center;
}

.qr-title h2{
margin:0;
font-size:18px;
}

.qr-title p{
margin:5px 0 0;
color:var(--muted);
font-size:12px;
}

.qr-wrap{
margin:20px auto;
background:#fff;
padding:13px;
border-radius:15px;
width:min(275px,100%);
}

.qr-wrap img{
display:block;
width:100%;
height:auto;
}

.activation-box{
background:var(--panel2);
border:1px solid var(--line);
border-radius:13px;
padding:15px;
margin:0 0 12px;
}

.activation-box span{
display:block;
font-size:11px;
color:var(--muted);
}

.activation-box strong{
display:block;
font-size:27px;
letter-spacing:.17em;
margin:7px 0;
}

.activation-box small{
color:var(--muted);
font-size:10px;
}

.download-button{
display:block;
background:#f5f7f9;
color:#090c10;
text-decoration:none;
font-weight:800;
border-radius:11px;
padding:13px;
}

.security-note{
font-size:10px;
line-height:1.5;
color:var(--muted);
margin:12px 0 0;
}

.subscription-panel{
margin-top:0;
}

.expire-big{
font-size:18px;
}

.extend-row{
display:flex;
gap:9px;
flex-wrap:wrap;
}

.extend-btn{
min-width:100px;
}

.extend-btn:hover{
border-color:#4c596b;
background:#1b222c;
}

.danger-panel{
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
}

.danger-panel h2{
margin:0;
font-size:17px;
}

.danger-panel p{
margin:6px 0 0;
color:var(--muted);
font-size:12px;
max-width:600px;
}

.danger-actions{
display:flex;
gap:10px;
flex-shrink:0;
}

.disable-btn{
background:#35280c;
border-color:#70551b;
color:#ffd477;
}

.enable-btn{
background:#123a24;
border-color:#276a43;
color:#71e59f;
}

.delete-btn{
background:#351519;
border-color:#6e2c33;
color:#ff9ca4;
}

.disable-btn:hover,
.delete-btn:hover,
.enable-btn:hover{
filter:brightness(1.15);
}

@media(max-width:1050px){

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

.qr-card{
max-width:460px;
}

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

}

@media(max-width:700px){

.info-grid,
.client-details{
grid-template-columns:1fr;
}

.danger-panel{
align-items:flex-start;
flex-direction:column;
}

.danger-actions{
width:100%;
flex-direction:column;
}

.danger-actions form,
.danger-actions button{
width:100%;
}

}



.reset-device-btn{
background:#17263a;
border-color:#29486d;
color:#9ec9ff;
}

.reset-device-btn:hover:not(:disabled){
filter:brightness(1.18);
}

.reset-device-btn:disabled{
opacity:.35;
cursor:not-allowed;
}