*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--green:#22c55e;--green-bg:#f0fdf4;--green-border:#bbf7d0;--yellow:#eab308;--yellow-bg:#fefce8;--yellow-border:#fef08a;--red:#ef4444;--red-bg:#fef2f2;--red-border:#fecaca;--gray:#9ca3af;--gray-bg:#f3f4f6;--text:#1f2937;--text-light:#6b7280;--bg:#fff;--primary:#4f46e5}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.login-page,body{min-height:100dvh}.login-page{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;padding:1rem}.login-card{background:#fff;border-radius:20px;box-shadow:0 20px 60px #00000026;max-width:380px;padding:2.5rem 2rem;text-align:center;width:100%}.login-icon{font-size:3rem;margin-bottom:.5rem}.login-card h1{color:var(--text);font-size:1.75rem;font-weight:800;margin-bottom:.25rem}.subtitle{color:var(--text-light);font-size:.9rem;margin-bottom:2rem}.login-card form{display:flex;flex-direction:column;gap:.75rem}.login-card input{border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;outline:none;padding:.875rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%}.login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.btn-primary{background:var(--primary);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;margin-top:.25rem;padding:.875rem;transition:opacity .2s,transform .1s}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{cursor:not-allowed;opacity:.5}.error{background:var(--red-bg);border-radius:8px;color:var(--red);font-size:.85rem;margin-top:.25rem;padding:.5rem}.main-page{display:flex;flex-direction:column;gap:.75rem;min-height:100dvh;padding:1rem}.other-status{align-items:center;border:2px solid transparent;border-radius:28px;display:flex;flex:1;flex-direction:column;gap:.5rem;justify-content:center;padding:2rem;transition:all .4s ease}.other-status.green{background:var(--green-bg);border-color:var(--green-border)}.other-status.yellow{background:var(--yellow-bg);border-color:var(--yellow-border)}.other-status.red{background:var(--red-bg);border-color:var(--red-border)}.other-status.unknown{background:var(--gray-bg)}.status-label{color:var(--text-light);font-size:1.1rem;font-weight:600;margin-bottom:.25rem}.status-icon{font-size:5rem;line-height:1;margin:.5rem 0}.status-text{font-size:1.75rem;font-weight:800;text-align:center}.other-status.green .status-text{color:var(--green)}.other-status.yellow .status-text{color:var(--yellow)}.other-status.red .status-text{color:var(--red)}.other-status.unknown .status-text{color:var(--gray)}.last-updated{color:var(--text-light);font-size:.8rem;margin-top:.75rem;opacity:.7}.own-controls{padding:.5rem 0 1rem}.own-label{color:var(--text-light);font-size:1rem;font-weight:700;letter-spacing:.05em;margin-bottom:.75rem;text-align:center;text-transform:uppercase}.buttons{display:flex;flex-direction:column;gap:.6rem}.buttons button{border:2px solid transparent;border-radius:14px;cursor:pointer;font-size:1.05rem;font-weight:700;padding:1rem;text-align:center;transition:all .2s ease}.btn-green{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}.btn-yellow{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow)}.btn-red{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}.buttons button.active{border-width:3px;transform:scale(1.02)}.btn-green.active{background:var(--green);border-color:var(--green);color:#fff}.btn-yellow.active{background:var(--yellow);border-color:var(--yellow);color:#fff}.btn-red.active{background:var(--red);border-color:var(--red);color:#fff}.buttons button:active{transform:scale(.97)}.loading-screen{align-items:center;display:flex;justify-content:center;min-height:100dvh}.spinner{animation:spin .8s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top:4px solid var(--primary);height:40px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}