.badsi-history {
    max-width: 500px;
    margin: 40px auto;
    background: #111;
    border-radius: 20px;
    padding: 20px;
    color: #fff;
}
.state-working { color: #4CAF50; }
.state-break   { color: #ff9800; }
.state-off     { color: #e53935; }
.badsi-history h3  { margin-bottom: 20px; color: #fff; }
.badsi-line        { padding: 10px; border-bottom: 1px solid #333; text-align: left; }
.badsi-logout      { display: inline-block; margin-top: 30px; color: #ff4d4d; font-size: 18px; text-decoration: none; }
.badsi-app         { background: #000; min-height: 100vh; text-align: center; padding: 20px; }
.badsi-app h2      { color: #fff; margin-top: 40px; font-size: 24px; font-weight: 700; }
.badsi-timer       { color: #fff; font-size: 38px; font-weight: 900; margin: 25px 0; font-family: Poppins, sans-serif; }
.badsi-state       { font-size: 22px; margin: 20px 0; font-weight: bold; }
.badsi-btn         { width: 320px; height: 320px; border: none; border-radius: 999px; color: #fff; font-size: 48px; font-weight: 900; line-height: 1.1; margin: 25px auto; display: block; cursor: pointer; text-transform: uppercase; }
.green  { background: #4CAF50 !important; }
.blue   { background: #6f8ec7; }
.red    { background: #e53935; }
.orange { background: #ff9800; }

@media (max-width: 768px) {
    .badsi-btn { width: 300px; height: 300px; font-size: 42px; }
}