:root { font-family: Arial, sans-serif; color: #17212b; background: #f3f6f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: start center; }
.card { width: min(100%, 480px); min-height: 100vh; background: white; text-align: center; box-shadow: 0 8px 30px #2233441a; }
.banner { width: 100%; padding: 15px; font-weight: 700; color: white; transition: background .3s; }
.connected { background: #2e7d32; }
.connecting { background: #ef6c00; }
.disconnected { background: #c62828; }
h1 { margin: 28px 0 24px; font-size: 1.6rem; }
.login-panel, #dashboard { padding: 0 28px 30px; }
.login-panel label { display: block; text-align: left; font-weight: 700; margin-bottom: 8px; }
.login-row { display: flex; gap: 8px; }
input[type=password] { min-width: 0; flex: 1; padding: 11px; border: 1px solid #9eabb5; border-radius: 6px; font-size: 1rem; }
button { border: 0; border-radius: 6px; padding: 10px 15px; color: white; background: #1565c0; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary { background: #52606d; padding: 7px 10px; }
.error { min-height: 1.2em; color: #b71c1c; }
.status { margin: 8px 0 20px; font-size: 1.2rem; font-weight: 700; }
.status.online { color: #2e7d32; }
.status.offline { color: #c62828; }
.tank { width: 100%; height: 54px; display: grid; place-items: center; border-radius: 8px; margin: 0 0 28px; color: white; font-size: 1.15rem; font-weight: 700; box-shadow: 0 4px 8px #0002; }
.tank-full { background: #1976d2; }
.tank-empty { background: #c62828; }
.tank-unknown { background: #757575; }
.switch { position: relative; display: inline-block; width: 70px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #aaa; transition: .3s; border-radius: 34px; }
.slider::before { position: absolute; content: ""; width: 26px; height: 26px; left: 4px; bottom: 4px; background: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background: #2e7d32; }
input:checked + .slider::before { transform: translateX(36px); }
.log-container { margin-top: 30px; text-align: left; }
.log-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
textarea { width: 100%; height: 165px; padding: 10px; resize: none; border: 1px solid #455a64; border-radius: 5px; color: #9fef9f; background: #182026; font: 12px/1.5 Consolas, monospace; }
@media (min-width: 481px) { .card { min-height: auto; margin-top: 5vh; border-radius: 12px; overflow: hidden; } }