:root{color-scheme:dark;--bg: #0f1419;--surface: #1a2332;--surface-2: #243044;--border: #2d3a4f;--text: #e8edf5;--muted: #8b9cb3;--accent: #3b82f6;--accent-hover: #2563eb;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--radius: 12px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:var(--text);background:var(--bg)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(ellipse at top,#1a2744 0%,var(--bg) 60%)}button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius);transition:background .15s,transform .1s}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.5;cursor:not-allowed}input,select{font:inherit;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:.5rem .75rem}.app{width:100%;max-width:none;margin:0;padding:1rem clamp(.75rem,2vw,2rem) 2rem;min-height:100vh}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.header h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.connection{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--danger)}.connection-dot.live{background:var(--success)}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}.dashboard-grid--wide{align-items:stretch}.col-controls,.col-map,.col-extras{min-width:0}.col-controls{display:flex;flex-direction:column;gap:1rem}.col-controls .card,.col-map .card,.col-extras .card{margin-bottom:0}.extras-stack{display:flex;flex-direction:column;gap:.75rem}.extras-message{margin-top:0}@media(min-width:768px){.dashboard-grid{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:1rem}.dashboard-grid--wide .col-map,.dashboard-grid--wide .col-extras{display:flex;flex-direction:column;min-height:0}.dashboard-grid--wide .col-map .map-card--constrained{flex:1;min-height:0;height:100%}.dashboard-grid--wide .col-extras .extras-stack{flex:1;min-height:0;height:100%;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem}.dashboard-grid--wide .col-extras .extras-stack>.card{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.dashboard-grid--wide .col-extras .extras-stack>.card:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}}.col-extras .card{padding:.75rem}.col-extras .card h2{font-size:.7rem;margin-bottom:.5rem}.col-extras .timer-form{gap:.5rem}.col-extras .timer-form label{font-size:.75rem}.col-extras input,.col-extras select{font-size:.8rem;padding:.4rem .5rem}.col-extras .control-btn{padding:.6rem;font-size:.8rem}.col-extras .timer-list{gap:.35rem}.col-extras .timer-item{flex-direction:column;align-items:stretch;gap:.4rem;padding:.5rem;font-size:.75rem}.col-extras .timer-item span{line-height:1.3}.col-extras .timer-item button{align-self:flex-end;padding:.25rem .5rem;font-size:.7rem}.col-extras .consumables-grid{gap:.5rem}.col-extras .consumable-bar label{font-size:.75rem}.col-extras .bar-track{height:6px}.col-extras p{font-size:.8rem!important;margin-bottom:.5rem!important}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}.card h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.75rem}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.stat{background:var(--surface-2);border-radius:10px;padding:.75rem}.stat-label{font-size:.75rem;color:var(--muted);margin-bottom:.25rem}.stat-value{font-size:1.25rem;font-weight:600}.state-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:capitalize;background:var(--surface-2)}.state-badge.cleaning{background:#1e3a5f;color:#93c5fd}.state-badge.charging{background:#14532d;color:#86efac}.state-badge.offline{background:#450a0a;color:#fca5a5}.controls{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.control-btn{padding:1rem;font-size:.95rem;font-weight:600;background:var(--surface-2);color:var(--text)}.control-btn.primary{background:var(--accent);color:#fff}.control-btn.primary:hover:not(:disabled){background:var(--accent-hover)}.control-btn.danger{background:#7f1d1d;color:#fecaca}.control-btn.full-width{grid-column:1 / -1}.fan-select{width:100%;margin-top:.5rem}.message{font-size:.85rem;color:var(--warning);margin-top:.5rem}.map-card{display:flex;flex-direction:column;min-height:0}.map-card--constrained{overflow:hidden}.map-card--constrained .map-header,.map-card--constrained .map-toolbar,.map-card--constrained .message,.map-card--constrained .segment-list{flex-shrink:0}.map-card--constrained .map-container{flex:1 1 0;min-height:80px}.map-container{position:relative;width:100%;min-height:80px;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);touch-action:none;display:flex;align-items:center;justify-content:center}.map-canvas{display:block;max-width:100%;max-height:100%}.map-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.map-header h2{margin-bottom:0}.map-tracking{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted)}.map-tracking-dot{width:7px;height:7px;border-radius:50%;background:var(--success)}.map-tracking.updating .map-tracking-dot{background:var(--warning);animation:pulse 1s ease-in-out infinite}.map-tracking-time{color:var(--muted)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.map-toolbar{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}.map-toolbar button{padding:.5rem .75rem;background:var(--surface-2);color:var(--text);font-size:.85rem}.map-toolbar button.active{background:var(--accent);color:#fff}.segment-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.segment-chip{padding:.4rem .75rem;background:var(--surface-2);color:var(--text);font-size:.85rem;border-radius:999px}.segment-chip:hover{background:var(--accent)}.segment-chip.rename-mode{flex-direction:column;gap:.15rem;padding:.5rem .75rem;min-width:5rem}.segment-hint{font-size:.65rem;color:var(--muted);font-weight:400}.segment-edit{display:flex;gap:.35rem;width:100%;flex-wrap:wrap}.segment-edit input{flex:1;min-width:8rem}.segment-edit-btn{padding:.4rem .6rem;background:var(--surface-2);color:var(--text);font-size:.8rem}.segment-edit-btn:first-of-type{background:var(--accent);color:#fff}.timer-form{display:grid;gap:.75rem}.timer-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}.timer-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}.timer-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:var(--surface-2);border-radius:10px;font-size:.9rem}.timer-item button{padding:.35rem .6rem;background:var(--danger);color:#fff;font-size:.8rem}.consumables-grid{display:grid;gap:.75rem}.consumable-bar{display:flex;flex-direction:column;gap:.25rem}.consumable-bar label{font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between}.bar-track{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}.bar-fill{height:100%;background:var(--accent);border-radius:4px}