*{box-sizing:border-box}
body{
    margin:0;
    background:#f5f7fb;
    color:#172033;
    font-family:Tahoma,Arial,sans-serif
}
.layout{display:flex;min-height:100vh}
.sidebar{
    width:250px;
    background:#111827;
    color:#fff;
    padding:22px 14px
}
.brand{
    font-size:23px;
    font-weight:800;
    margin-bottom:25px
}
.sidebar nav a{
    display:block;
    padding:11px 14px;
    margin:4px 0;
    border-radius:9px;
    color:#cbd5e1;
    text-decoration:none;
    cursor:pointer
}
.sidebar nav a:hover,.sidebar nav a.active{
    background:#2563eb;
    color:#fff
}
.content{
    flex:1;
    padding:28px;
    min-width:0
}
header{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.stat-card,.panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:20px;
    box-shadow:0 4px 15px rgba(0,0,0,.035)
}
.stat-card span,.stat-card small{
    display:block;
    color:#64748b
}
.stat-card strong{
    display:block;
    font-size:28px;
    margin-top:8px
}
.good{color:#16a34a}
.bad{color:#dc2626}
.muted{color:#64748b}
.login-body{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:#111827
}
.login-card{
    width:min(92%,420px);
    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.login-card h1{
    font-size:25px;
    margin-bottom:5px
}
@media(max-width:850px){
    .sidebar{width:75px;padding:18px 8px}
    .sidebar .brand{font-size:0}
    .sidebar .brand:after{content:"⚡";font-size:25px}
    .sidebar nav a{font-size:0;text-align:center}
    .sidebar nav a::first-letter{font-size:20px}
    .content{padding:18px}
}