*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f4f7fb;
color:#1f2937;
padding:30px;
}

header{
display:none;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

body:not(.login-mode) header{
display:flex;
}

.brand{
display:flex;
gap:15px;
align-items:center;
}

#labLogo{
height:48px;
border-radius:10px;
}

#labTitle{
font-size:24px;
font-weight:700;
}

#headerStatus{
font-size:14px;
color:#16a34a;
}

.card{
background:white;
border-radius:18px;
padding:22px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:all .22s ease;
cursor:default;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(0,0,0,.10);
}

.login-card{
max-width:420px;
margin:90px auto;
display:flex;
flex-direction:column;
gap:14px;
}

input,select,button{
padding:12px;
border-radius:10px;
border:1px solid #d1d5db;
font-size:15px;
}

button{
background:#111827;
color:white;
border:none;
cursor:pointer;
}

button:hover{
opacity:.92;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-bottom:22px;
}

.big{
font-size:34px;
font-weight:700;
margin:14px 0;
}

.ok{
color:#16a34a;
font-weight:700;
}

.alarm{
color:#dc2626;
font-weight:700;
}

.chart-box{
height:420px;
}

#clock{
font-size:15px;
font-weight:600;
}

@media(max-width:768px){
body{padding:15px;}
#labTitle{font-size:18px;}
.big{font-size:28px;}
}

.card.ok-state{
border-left:6px solid #16a34a;
}

.card.warn-state{
border-left:6px solid #f59e0b;
background:#fffaf0;
}

@keyframes alarmPulse{
0%{transform:scale(1);}
50%{transform:scale(1.02);}
100%{transform:scale(1);}
}

.card.alarm-state{
border:3px solid #dc2626;
background:#ffe5e5;
box-shadow:
0 0 0 4px rgba(220,38,38,.15),
0 0 25px rgba(220,38,38,.35);
animation:alarmPulse 1.2s infinite;
}

.card.alarm-state h3{
color:#b91c1c;
font-weight:800;
}

@keyframes bannerBlink{
0%{opacity:1;}
50%{opacity:.7;}
100%{opacity:1;}
}

.alarm-banner{
margin-bottom:18px;
padding:16px 22px;
border-radius:16px;
background:#dc2626;
color:white;
font-size:18px;
font-weight:800;
box-shadow:0 10px 30px rgba(220,38,38,.35);
animation:bannerBlink 1s infinite;
text-align:center;
letter-spacing:.4px;
}

body.tv-mode{
padding:10px;
background:#ffffff;
}

body.tv-mode .card{
padding:28px;
}

body.tv-mode .big{
font-size:42px;
}

body.tv-mode #topHeader{
margin-bottom:10px;
}

#summaryRow{
gap:10px;
margin-bottom:12px;
}

#summaryRow .card{
padding:8px 10px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
min-height:auto;
}

#summaryRow h3{
font-size:11px;
margin-bottom:3px;
color:#6b7280;
font-weight:600;
line-height:1;
}

#summaryRow .big{
font-size:16px;
margin:0;
line-height:1;
font-weight:700;
}

.modal-bg{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.modal-box{
background:white;
padding:28px;
border-radius:20px;
width:420px;
max-width:95%;
box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.modal-box h2{
margin-bottom:14px;
font-size:24px;
}

.modal-box p{
margin:10px 0;
font-size:16px;
}

#chart_inc1,
#chart_inc2{
width:100% !important;
height:120px !important;
display:block;
}

#chart_inc1,
#chart_inc2{
display:block !important;
width:100% !important;
height:140px !important;
}

.sparkline{
width:100%;
height:70px;
margin-top:10px;
}

.sparkline svg{
width:100%;
height:100%;
display:block;
}

#dashboard .grid{
align-items:start;
}

#dashboard .card{
height:auto !important;
min-height:unset !important;
padding:18px !important;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

#dashboard .big{
margin:8px 0 !important;
line-height:1.1;
}

#dashboard canvas{
display:none !important;
}

.grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}