:root{--bg:#0e1116;--panel:#171c23;--panel-soft:#202731;--text:#f5f7fa;--muted:#9ba7b4;--border:#2b3541;--accent:#f2b84b;--safe:#62c38a;--danger:#da6262;--night:#8297d8}*{box-sizing:border-box}html{background:var(--bg)}body{background:var(--bg);color:var(--text);margin:0;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button:disabled{cursor:not-allowed;opacity:.45}.shell{gap:14px;width:min(100%,760px);margin:0 auto;padding:20px 16px 48px;display:grid}.panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 12px 30px #00000029}.hero,.sectionHeader,.autoRow,.footerPanel{justify-content:space-between;align-items:center;gap:18px;display:flex}h1,h2,p{margin-top:0}h1{margin-bottom:6px;font-size:clamp(2rem,8vw,3.4rem)}h2{margin-bottom:6px;font-size:1.2rem}.eyebrow{color:var(--muted);letter-spacing:.16em;margin-bottom:8px;font-size:.72rem;font-weight:700}.muted{color:var(--muted);margin-bottom:0;line-height:1.5}.statusBadge,.safe{white-space:nowrap;border-radius:999px;font-size:.76rem;font-weight:800}.statusBadge{color:var(--safe);background:#62c38a1f;border:1px solid #62c38a59;padding:10px 12px}.safe{color:var(--safe)}.safe.blocked{color:var(--accent)}.lockoutPanel{box-shadow:none;align-items:center;gap:16px;display:flex}.lockoutPanel strong{margin-bottom:6px;display:block}.lockoutIcon{border-radius:50%;flex:0 0 42px;place-items:center;width:42px;height:42px;font-size:1.2rem;font-weight:900;display:grid}.weatherLockoutPanel{background:linear-gradient(135deg, #f2b84b1a, var(--panel) 52%);border-color:#f2b84b61}.weatherLockoutPanel .lockoutIcon{color:var(--accent);background:#f2b84b1a;border:1px solid #f2b84b6b}.nightLockoutPanel{background:linear-gradient(135deg, #8297d81c, var(--panel) 52%);border-color:#8297d861}.nightLockoutPanel .eyebrow,.nightLockoutPanel .moonIcon{color:var(--night)}.nightLockoutPanel .moonIcon{background:#8297d81a;border:1px solid #8297d86b}.faultPanel{border-color:#da626273}.controls{grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px;display:grid}.controlButton,.autoButton,.loginButton,.logoutButton{border:1px solid var(--border);background:var(--panel-soft);color:var(--text);cursor:pointer;border-radius:16px;font-weight:800;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .12s}.controlButton:not(:disabled):active,.autoButton:not(:disabled):active{transform:scale(.98)}.controlButton{min-height:74px;font-size:1.05rem}.controlButton.direction{color:#b9e8cc;background:#62c38a14;border-color:#62c38a47}.controlButton.direction.active,.controlButton.direction.moving{color:#08130d;border-color:var(--safe);background:var(--safe);box-shadow:0 0 0 1px #62c38a33,0 0 22px #62c38a38}.controlButton.stop{color:#fff;background:#da626224;border-color:#da626273}.controlButton.stop.active{border-color:var(--danger);background:var(--danger);box-shadow:0 0 0 1px #da626233,0 0 22px #da626240}.controlButton.moving{animation:1s ease-in-out infinite statePulse}.autoButton,.loginButton{min-width:84px;color:var(--bg);background:var(--accent);border-color:var(--accent);padding:14px 18px}.autoButton:not(.active){color:var(--text);background:var(--panel-soft);border-color:var(--border)}.autoButton.active{color:#08130d;background:var(--safe);border-color:var(--safe);box-shadow:0 0 0 1px #62c38a33,0 0 22px #62c38a38}.autoButton.weatherHold{animation:1s ease-in-out infinite statePulse}.logoutButton{padding:10px 14px}.controlMessage{margin:12px 0 0;font-size:.88rem}.successMessage{color:var(--safe)}.errorMessage{color:var(--danger)}.commandToast{z-index:1000;left:50%;bottom:max(24px, env(safe-area-inset-bottom));border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#171c23f5;border-radius:16px;gap:4px;width:min(100% - 32px,520px);padding:14px 16px;animation:.18s ease-out toastIn;display:grid;position:fixed;transform:translate(-50%);box-shadow:0 18px 50px #0000006b}.commandToast.successToast{border-color:#62c38a6b}.commandToast.errorToast{border-color:#da62628c}.commandToast.successToast .toastLabel{color:var(--safe)}.commandToast.errorToast .toastLabel{color:var(--danger)}.toastLabel{letter-spacing:.14em;font-size:.66rem;font-weight:800}@keyframes statePulse{0%,to{opacity:1}50%{opacity:.48}}@keyframes reducedStatePulse{0%,to{filter:brightness()}50%{filter:brightness(.72)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.controlButton.moving,.autoButton.weatherHold{animation:2s ease-in-out infinite reducedStatePulse}.commandToast{animation:none}}.weatherGrid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.weatherItem{background:var(--panel-soft);border:1px solid var(--border);border-radius:14px;flex-direction:column;justify-content:space-between;min-height:82px;padding:14px;display:flex}.weatherItem span{color:var(--muted);font-size:.82rem}.weatherItem strong{font-size:1.05rem}.eventPanel strong{margin-bottom:6px;display:block}.loginShell{place-items:center;min-height:100vh;padding:24px 16px;display:grid}.loginPanel{width:min(100%,420px)}.loginForm{gap:16px;margin-top:24px;display:grid}.loginForm label{color:var(--muted);gap:7px;font-size:.85rem;font-weight:700;display:grid}.loginForm input{border:1px solid var(--border);background:var(--panel-soft);width:100%;color:var(--text);border-radius:12px;outline:none;padding:13px 14px}.loginForm input:focus{border-color:var(--accent)}.loginMessage{margin:0;font-size:.88rem}@media (max-width:540px){.hero{flex-direction:column;align-items:flex-start}.controls{grid-template-columns:1fr}.controlButton{min-height:62px}.autoRow{align-items:flex-end}.footerPanel{flex-direction:column;align-items:flex-start}.lockoutPanel{align-items:flex-start}}