*{
box-sizing:border-box
}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#f5f7fb;
color:#172033
}

header{
height:72px;
padding:0 24px;
background:#0f172a;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 30px rgba(15,23,42,.15)
}

header strong{
display:block;
font-size:19px
}

header small{
color:#94a3b8
}

main{
max-width:1180px;
margin:28px auto;
padding:0 16px 50px
}

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

.stat,
.panel{
background:#fff;
border:1px solid #e6eaf1;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.04)
}

.stat{
padding:20px
}

.stat span{
display:block;
color:#748096;
font-size:13px;
font-weight:700
}

.stat strong{
display:block;
margin-top:7px;
font-size:28px
}

.mode{
font-size:19px!important
}

.panel{
padding:21px;
margin-top:18px
}

h2{
margin:0 0 6px
}

.muted{
margin-top:0;
color:#778195
}

.add-grid{
display:grid;
grid-template-columns:1fr 2fr 120px 130px;
gap:12px;
align-items:end
}

.settings-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px
}

label{
display:block;
font-size:13px;
font-weight:800;
margin-bottom:7px
}

input{
width:100%;
border:1px solid #d9dfE8;
padding:11px 12px;
border-radius:10px;
outline:none
}

input:focus{
border-color:#6366f1;
box-shadow:0 0 0 3px rgba(99,102,241,.1)
}

button{
border:0;
padding:11px 15px;
border-radius:10px;
font-weight:800;
cursor:pointer
}

.primary{
background:#4f46e5;
color:#fff
}

.secondary{
background:#edf1f7;
color:#263247
}

.danger{
background:#fee2e2;
color:#991b1b
}

.full{
width:100%
}

.site-row{
border:1px solid #e5e9f0;
border-radius:15px;
padding:15px;
margin-top:11px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px
}

.site-name{
font-weight:900
}

.site-url{
font-size:13px;
color:#667085;
margin-top:4px
}

.site-info{
display:flex;
gap:12px;
margin-top:8px;
font-size:12px
}

.active{
color:#047857;
font-weight:800
}

.inactive{
color:#b91c1c;
font-weight:800
}

.site-actions{
display:flex;
gap:7px;
flex-wrap:wrap
}

.site-actions form{
margin:0
}

.weight{
display:flex;
gap:6px
}

.weight input{
width:70px
}

.input-unit{
display:flex;
align-items:center;
gap:8px
}

.input-unit span{
color:#748096
}

.toggle{
display:flex;
align-items:center;
gap:9px;
margin-top:18px
}

.toggle input{
width:auto
}

.success{
padding:12px 15px;
background:#dcfce7;
border:1px solid #bbf7d0;
color:#166534;
border-radius:12px
}

.empty{
padding:25px;
text-align:center;
color:#8a94a6
}

.login-body{
min-height:100vh;
display:grid;
place-items:center;
padding:20px;
background:
radial-gradient(circle at top left,#312e81,transparent 35%),
#090f1d;
}

.login-card{
width:100%;
max-width:420px;
padding:30px;
border-radius:24px;
background:#fff
}

.login-card h1{
margin-bottom:6px
}

.login-card p{
margin-top:0;
color:#778195
}

.login-card label{
margin-top:14px
}

.logo{
width:55px;
height:55px;
border-radius:16px;
display:grid;
place-items:center;
background:#4f46e5;
color:#fff;
font-weight:900;
font-size:20px
}

.error{
background:#fee2e2;
color:#991b1b;
padding:10px;
border-radius:10px
}

@media(max-width:800px){

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

.add-grid,
.settings-grid{
grid-template-columns:1fr
}

.site-row{
display:block
}

.site-actions{
margin-top:13px
}

}

@media(max-width:480px){

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

header{
padding:0 14px
}

}