*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--bg:#0b1016;
--panel:#121922;
--line:#1c2834;
--text:#dbe4ec;
--muted:#8190a0;
--accent:#3baeff;
--green:#67ff9a;
--yellow:#ffd166;
}

body{
background:var(--bg);
color:var(--text);
font-family:Inter,system-ui,sans-serif;
display:flex;
min-height:100vh;
overflow-x:hidden;
}

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

.sidebar{
width:260px;
background:#0f151d;
border-right:1px solid var(--line);
padding:28px;
display:flex;
flex-direction:column;
justify-content:space-between;
position:fixed;
top:0;
left:0;
height:100vh;
z-index:100;
}

.brand{
display:flex;
align-items:center;
gap:12px;
font-size:18px;
font-weight:600;
margin-bottom:40px;
}

.brand-dot{
width:12px;
height:12px;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 12px rgba(59,174,255,.45);
animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
opacity:.5;
transform:scale(.95);
}

50%{
opacity:1;
transform:scale(1.1);
}

100%{
opacity:.5;
transform:scale(.95);
}

}

.menu{
display:flex;
flex-direction:column;
gap:10px;
}

.menu-item{
padding:14px 16px;
border-radius:12px;
color:#8b9aac;
transition:.2s;
font-size:14px;
}

.menu-item:hover,
.menu-item.active{
background:#17212d;
color:white;
}

.sidebar-footer{
font-size:12px;
color:#657384;
line-height:1.8;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.04);
}

.main{
margin-left:260px;
width:calc(100% - 260px);
padding:28px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
font-size:14px;
color:#8d9cad;
gap:20px;
flex-wrap:wrap;
}

.top-status{
padding:10px 14px;
border-radius:999px;
background:#13202a;
border:1px solid #203241;
font-size:13px;
}

.hero-auth-layout{
display:grid;
grid-template-columns:1fr 380px;
gap:24px;
margin-bottom:24px;
}

.hero{
background:var(--panel);
border:1px solid var(--line);
border-radius:24px;
padding:36px;
}

.hero-title{
font-size:42px;
line-height:1.1;
margin-bottom:18px;
max-width:800px;
}

.hero-text{
max-width:800px;
line-height:1.8;
color:var(--muted);
font-size:15px;
}

.card,
.panel{
background:var(--panel);
border:1px solid var(--line);
border-radius:22px;
padding:24px;
}

.auth-panel{
height:fit-content;
}

input{
width:100%;
background:#0e141b;
border:1px solid #243445;
padding:15px;
border-radius:14px;
color:white;
margin-bottom:14px;
font-size:14px;
outline:none;
transition:.2s;
}

input:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(59,174,255,.08);
}

button{
border:none;
background:var(--accent);
color:white;
padding:15px;
border-radius:14px;
font-weight:600;
cursor:pointer;
width:100%;
margin-bottom:12px;
transition:.2s;
}

button:hover{
opacity:.92;
transform:translateY(-1px);
}

.secondary-btn{
background:#18222e;
border:1px solid #253748;
}

.auth-message{
margin-top:12px;
font-size:13px;
line-height:1.7;
color:#8ea0b1;
}

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

.card-label{
font-size:13px;
color:var(--muted);
margin-bottom:10px;
}

.card-value{
font-size:34px;
margin-bottom:10px;
font-weight:600;
}

.card-sub{
font-size:13px;
color:#738394;
}

.layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-bottom:24px;
}

.section-title{
margin-bottom:18px;
font-size:15px;
font-weight:600;
}

.logs{
display:flex;
flex-direction:column;
gap:12px;
max-height:340px;
overflow:hidden;
}

.log-entry{
background:#0d141b;
border:1px solid #192633;
padding:12px;
border-radius:12px;
font-size:13px;
color:#8fa0b2;
line-height:1.6;
}

table{
width:100%;
border-collapse:collapse;
}

th,td{
padding:14px;
border-bottom:1px solid #1b2633;
text-align:left;
font-size:14px;
}

th{
font-size:13px;
color:#7e8ea0;
}

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

.yellow{
color:var(--yellow);
}

canvas{
max-height:320px;
}

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-thumb{
background:#223142;
border-radius:999px;
}

::-webkit-scrollbar-track{
background:transparent;
}

@media(max-width:1250px){

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

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

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

}

@media(max-width:820px){

body{
flex-direction:column;
}

.sidebar{
position:relative;
width:100%;
height:auto;
border-right:none;
border-bottom:1px solid var(--line);
}

.main{
margin-left:0;
width:100%;
padding:18px;
}

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

.hero-title{
font-size:32px;
}

.hero{
padding:26px;
}

.panel,
.card{
padding:20px;
}

}