@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700;800&display=swap";:root{--bg-primary:#f3f4f6;--bg-secondary:#fff;--border-color:#e5e7eb;--accent-blue:#2563eb;--accent-blue-dark:#1d4ed8;--accent-blue-light:#2563eb14;--accent-red:#ef4444;--accent-red-light:#ef444414;--accent-green:#10b981;--accent-green-light:#10b98114;--accent-teal:#0891b2;--status-connected:#10b981;--status-disconnected:#ef4444;--status-connecting:#f59e0b;--text-main:#1f2937;--text-muted:#6b7280;--text-dark:#1f2937;--card-bg:#fff;--text-color:#1f2937;--border-radius-lg:8px;--border-radius-md:6px;--border-radius-sm:4px}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Noto Sans,Arial,sans-serif}body{background-color:var(--bg-primary);color:var(--text-main);min-height:100vh;font-size:13.5px;line-height:1.5;overflow-y:auto}#app{flex-direction:column;min-height:100vh;display:flex}header{background:var(--bg-secondary);border-bottom:2px solid var(--border-color);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.logo-section{align-items:center;gap:10px;display:flex}.logo-icon{background:var(--accent-blue);border-radius:var(--border-radius-sm);justify-content:center;align-items:center;width:32px;height:32px;display:flex}.logo-icon svg{fill:#fff;width:18px;height:18px}.logo-section h1{color:var(--text-main);font-size:18px;font-weight:800}.header-actions{align-items:center;gap:12px;display:flex}.btn-header{width:auto;padding:8px 16px;font-size:12px;font-weight:700}.status-badge{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-muted);align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:700;display:flex}.status-dot{background-color:var(--status-disconnected);border-radius:50%;width:8px;height:8px}.status-badge.connected .status-dot{background-color:var(--status-connected)}.status-badge.connecting .status-dot{background-color:var(--status-connecting)}.devices-container{width:100%;max-width:1000px;margin:0 auto;padding:30px 24px}.devices-header-section{margin-bottom:20px}.devices-header-title{color:var(--text-main);align-items:center;font-size:22px;font-weight:800;display:flex}.devices-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px;display:grid}.card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);margin-bottom:20px;padding:24px}.card-title{border-bottom:2px solid var(--border-color);color:var(--text-main);align-items:center;margin-bottom:16px;padding-bottom:8px;font-size:16px;font-weight:700;display:flex}.device-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);cursor:pointer;padding:20px;transition:border-color .2s,transform .15s}.device-card:hover{border-color:var(--accent-blue);transform:translateY(-2px)}.device-card-header{justify-content:space-between;margin-bottom:16px;display:flex}.device-card-alias{color:var(--text-main);margin-bottom:4px;font-size:16px;font-weight:700}.device-card-mac{color:var(--text-muted);font-family:monospace;font-size:12px}.device-card-status{align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.device-card-actions{border-top:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;display:flex}.device-card-btns{gap:8px;display:flex}.btn-card-action{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-main);cursor:pointer;padding:6px 12px;font-size:11px;font-weight:700;transition:background .15s,border-color .15s}.btn-card-action:hover{background:var(--border-color);border-color:var(--text-muted)}.btn-card-action.danger{color:var(--accent-red)}.btn-card-action.danger:hover{background:var(--accent-red-light);border-color:var(--accent-red)}.btn-monitor-arrow{color:var(--accent-blue);cursor:pointer;background:0 0;border:none}.monitor-modal-overlay{background:var(--bg-primary);flex-direction:column;min-height:100vh;display:flex}.monitor-modal-overlay header{border-bottom:2px solid var(--border-color)}.back-btn-container{justify-content:space-between;align-items:center;width:100%;display:flex}.btn-back-nav{color:var(--text-main);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex}.btn-back-nav svg{fill:currentColor;width:16px;height:16px}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;width:100%;max-width:1100px;margin:0 auto;padding:24px;display:grid}.monitor-main{flex-direction:column;flex:1;gap:16px;padding:20px;display:flex;overflow-y:auto}.monitor-content-grid{padding:0}.status-group{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.telemetry-section{flex-direction:column;grid-column:1/-1;gap:10px;display:flex}.telemetry-section-title{color:var(--text-main);margin:0;font-size:15px;font-weight:800}.session-data-group{grid-template-columns:repeat(3,minmax(0,1fr))}.tank-data-group{grid-template-columns:minmax(0,1fr)}.status-row-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.telemetry-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);align-items:center;gap:12px;margin-bottom:0;padding:14px;display:flex}.telemetry-icon-wrapper{border-radius:var(--border-radius-sm);background:var(--bg-primary);border:1px solid var(--border-color);flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.telemetry-icon-wrapper svg{width:18px;height:18px;fill:var(--text-muted)}.telemetry-card.pump-active .telemetry-icon-wrapper{background:var(--accent-blue-light);border-color:var(--accent-blue)}.telemetry-card.pump-active .telemetry-icon-wrapper svg{fill:var(--accent-blue)}.telemetry-content{flex-direction:column;display:flex}.telemetry-label{text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;font-size:11px;font-weight:700}.telemetry-value{color:var(--text-main);margin-top:2px;font-size:17px;font-weight:800;line-height:1.15}.glow-status{color:var(--text-muted);margin-top:4px;font-size:11px;font-weight:700;line-height:1.2}.telemetry-card.pump-active .glow-status{color:var(--accent-blue)}.form-group{margin-bottom:18px}.form-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:11px;font-weight:700;display:block}input[type=text],input[type=password],input[type=number],input[type=datetime-local],select{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-main);width:100%;height:42px;padding:0 14px;font-size:13.5px;transition:border-color .15s}input:focus,select:focus{border-color:var(--accent-blue);outline:none}.btn{background:var(--bg-secondary);color:var(--text-main);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;justify-content:center;align-items:center;gap:8px;width:100%;height:42px;padding:0 16px;font-size:13.5px;font-weight:700;transition:background .15s,color .15s,border-color .15s;display:flex}.btn:hover:not(:disabled){background:var(--bg-primary)}.btn-primary{background:var(--accent-blue);color:#fff;border:none}.btn-primary:hover:not(:disabled){background:var(--accent-blue-dark)}.btn-danger{background:var(--accent-red);color:#fff;border:none}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-secondary{background:var(--border-color);color:var(--text-main);border:none}.btn-secondary:hover:not(:disabled){background:#d1d5db}.btn:disabled{background:var(--bg-primary);color:var(--text-muted);border:1px solid var(--border-color);cursor:not-allowed;opacity:.6}.dialog-backdrop{z-index:1000;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.dialog-box{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);width:90%;max-width:400px;padding:24px}.dialog-title{color:var(--text-main);margin-bottom:12px;font-size:18px;font-weight:800}.dialog-message{color:var(--text-muted);margin-bottom:20px;font-size:14px}.dialog-input{margin-bottom:20px}.dialog-actions{gap:12px;display:flex}.btn-dialog{border-radius:var(--border-radius-sm);border:1px solid var(--border-color);cursor:pointer;flex:1;height:40px;font-weight:700}.btn-dialog-cancel{background:var(--bg-secondary);color:var(--text-main)}.btn-dialog-cancel:hover{background:var(--bg-primary)}.btn-dialog-confirm{background:var(--accent-blue);color:#fff;border:none}.btn-dialog-confirm:hover{background:var(--accent-blue-dark)}.btn-dialog-confirm.danger{background:var(--accent-red)}.btn-dialog-confirm.danger:hover{background:#dc2626}.auth-container{background-color:var(--bg-primary);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);width:100%;max-width:360px;padding:30px}.auth-title{text-align:center;color:var(--text-main);margin-bottom:24px;font-size:24px;font-weight:800}.auth-icon{width:48px;height:48px;margin-bottom:16px;fill:var(--accent-blue)!important}.auth-header{flex-direction:column;align-items:center;margin-bottom:24px;display:flex}.auth-alert{border-radius:var(--border-radius-sm);text-align:center;margin-bottom:16px;padding:12px;font-size:13px;font-weight:700}.auth-alert.error{background:var(--accent-red-light);color:var(--accent-red);border:1px solid #ef444433}.auth-alert.success{background:var(--accent-green-light);color:var(--accent-green);border:1px solid #10b98133}.auth-toggle{text-align:center;color:var(--text-muted);margin-top:16px;font-size:13.5px}.auth-toggle button{color:var(--accent-blue);cursor:pointer;background:0 0;border:none;font-weight:700;text-decoration:underline}.drawer-backdrop{z-index:998;background:#0006;width:100%;height:100%;position:fixed;top:0;left:0}.console-drawer{background:var(--bg-secondary);border-left:2px solid var(--border-color);z-index:999;flex-direction:column;width:400px;transition:transform .3s cubic-bezier(.25,1,.5,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.console-drawer.open{transform:translate(0)}.console-drawer-header{border-bottom:2px solid var(--border-color);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.console-drawer-title{color:var(--text-main);font-size:16px;font-weight:800}.console-drawer-close{color:var(--text-main);cursor:pointer;background:0 0;border:none;font-size:24px}.console-drawer-content{flex-direction:column;flex:1;padding:20px;display:flex}footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border-color);margin-top:auto;padding:24px 0;font-size:12px}.dashboard-layout{gap:24px;width:100%;max-width:1200px;margin:0 auto;padding:20px 24px;display:flex}.sidebar-nav{flex-direction:column;flex-shrink:0;gap:10px;width:220px;display:flex}.main-content{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.monitor-details-grid{grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;display:grid}.control-two-column-grid{grid-column:1/-1;grid-template-columns:minmax(320px,.95fr) minmax(320px,1.05fr);align-items:start;gap:16px;display:grid}.control-panel-card{margin-bottom:0;padding:18px}.monitor-header-info{align-items:center;gap:14px;display:flex}.monitor-device-details{flex-direction:column;align-items:flex-end;line-height:1.25;display:flex}.monitor-device-alias{color:var(--text-main);font-size:14px;font-weight:800}.monitor-device-mac{color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}.monitor-tabs{z-index:20;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);flex:0 0 32px;grid-column:1/-1;grid-template-columns:1fr 1fr;align-self:center;gap:0;width:100%;max-width:1100px;height:32px;min-height:32px;max-height:32px;padding:0;display:grid;position:sticky;top:0;overflow:hidden}.monitor-tab{height:100%;min-height:0;color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;padding:5px 10px;font-size:13px;font-weight:800;line-height:1.15;display:flex}.monitor-tab+.monitor-tab{border-left:1px solid var(--border-color)}.monitor-tab.active{background:var(--accent-blue);color:#fff}.schedule-summary-card{align-content:start;gap:12px;display:grid}.schedule-summary-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;display:grid}.summary-metric{border:1px solid var(--border-color);border-radius:var(--border-radius-md);background:var(--bg-primary);padding:10px}.summary-metric-label{color:var(--text-muted);text-transform:uppercase;font-size:11px;font-weight:800;display:block}.summary-metric-value{color:var(--text-main);margin-top:4px;font-size:16px;font-weight:800;display:block}.history-sections{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:start;gap:16px;display:grid}.history-section{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);padding:14px}.history-section-title{color:var(--text-main);margin-bottom:10px;font-size:13px;font-weight:800}.history-empty{color:var(--text-muted);padding:10px 0;font-size:12.5px}.schedule-card-grid{gap:10px;display:grid}.schedule-history-card{border:1px solid var(--border-color);border-radius:var(--border-radius-md);background:var(--bg-primary);padding:10px}.schedule-history-topline,.schedule-history-metrics{justify-content:space-between;align-items:center;gap:8px;display:flex}.schedule-history-id{font-size:12px;font-weight:800}.schedule-history-status{text-transform:uppercase;overflow-wrap:anywhere;text-align:center;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;line-height:1.15}.schedule-history-time{color:var(--text-muted);margin:8px 0;font-size:12px}.schedule-history-metrics{color:var(--text-main);font-size:12px;font-weight:700}.schedule-history-action{width:100%;margin-top:10px;padding:5px 8px}.overlay-info-grid{border-radius:var(--border-radius-md);background:#0000000a;grid-template-columns:1fr 1fr;gap:12px;padding:12px;font-size:13px;display:grid}.overlay-telemetry-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.responsive-form{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}@media (width<=768px){.dashboard-layout{flex-direction:column;gap:16px;padding:16px}.sidebar-nav{flex-flow:wrap;width:100%}.sidebar-nav button{flex:120px;height:38px;font-size:12.5px}.monitor-details-grid{grid-template-columns:1fr;gap:16px}.status-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}.session-data-group,.control-two-column-grid{grid-template-columns:1fr}.dashboard-grid{gap:12px;padding:14px!important}.monitor-main{gap:12px;padding:14px}.monitor-content-grid{padding:0!important}.monitor-tabs{border-radius:var(--border-radius-md);justify-self:center;width:min(210px,100%);height:28px;min-height:28px;max-height:28px;margin:0 auto;position:static}.monitor-tab{padding:4px 8px;font-size:12px;line-height:1}.history-sections{grid-template-columns:1fr;gap:12px}.history-section,.control-panel-card{padding:12px}.overlay-info-grid,.overlay-telemetry-grid{grid-template-columns:1fr}.responsive-form{flex-direction:column;gap:8px}.responsive-form input,.responsive-form button,.responsive-form select{width:100%}header{text-align:center;flex-direction:column;gap:10px;padding:12px 16px}.header-actions{justify-content:space-between;width:100%}}