@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}.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}.technician-control-grid{margin-top:0}.technician-command-stack{gap:16px;display:grid}.control-panel-card{margin-bottom:0;padding:18px}.history-card{justify-self:center;width:100%;max-width:920px;margin-bottom:0;padding:16px}.compact-card-title{padding-bottom:6px;font-size:14px}.compact-history-scroll{flex:1;max-height:260px;overflow:auto}.compact-history-table{border-collapse:collapse;width:100%;font-size:12px}.compact-history-table th{text-transform:uppercase;font-size:10.5px;color:var(--text-muted)!important;padding:6px 4px!important}.compact-history-table td{padding:7px 4px!important}.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}.registry-panel,.link-user-panel{border:2px solid var(--border-color);border-radius:var(--border-radius-lg);background:#fff;box-shadow:0 16px 40px #1f29371f}.registry-panel input,.registry-panel select,.link-user-panel input,.link-user-panel select{color:var(--text-main)!important;background:#fff!important;border:1px solid #cbd5e1!important}.data-table th,.data-table td{border-bottom:1px solid var(--border-color)}.direct-schedule-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.device-registry-panel{gap:14px;display:grid}.registry-help{border-left:4px solid var(--accent-blue);border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0;color:var(--text-main);padding:10px 12px;font-size:12.5px;line-height:1.35}.registry-help.primary{background:#2563eb0d}.registry-help.warning{background:#f59e0b0f;border-left-color:#f59e0b}.registry-form-grid{grid-template-columns:minmax(220px,1.25fr) minmax(180px,1fr) 120px 120px 150px;align-items:start;gap:12px;display:grid}.registry-field{gap:5px;display:grid}.registry-field span{color:var(--text-muted);font-size:10.5px;font-weight:600}.registry-submit{height:42px;padding:0 14px}.registry-list-header{justify-content:space-between;align-items:center;margin-top:6px;display:flex}.registry-list-header h4{color:var(--text-main);font-size:14px;font-weight:800}.registry-list-header span{background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-muted);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.registry-table-wrap{overflow-x:auto}.registry-table{border-collapse:collapse;width:100%;min-width:760px;font-size:12.5px}.registry-table th{color:var(--text-muted);text-transform:uppercase;font-size:10.5px;padding:7px 8px!important}.registry-table td{padding:8px!important}.registry-device-cards{display:none}.registry-device-card{border:1px solid var(--border-color);border-radius:var(--border-radius-lg);background:var(--bg-secondary);padding:12px}.registry-device-card-head,.registry-device-meta,.registry-device-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.registry-device-card-head h4{color:var(--text-main);font-size:14px;font-weight:800}.registry-device-card-head p{color:var(--text-muted);margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}.registry-status{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:900}.registry-status.online{color:var(--status-connected)}.registry-device-meta{border-top:1px solid var(--border-color);color:var(--text-muted);margin-top:9px;padding-top:9px;font-size:12px}.registry-device-meta strong{color:var(--text-main)}.registry-device-actions{margin-top:12px}.registry-device-actions .btn-card-action{flex:1}@media (width<=768px){.dashboard-layout{flex-direction:column;gap:10px;padding:10px}.sidebar-nav{flex-flow:wrap;gap:6px;width:100%}.sidebar-nav button{flex:46%;height:34px;font-size:11.5px;padding:8px!important}.monitor-details-grid{grid-template-columns:1fr;gap:10px}.status-row-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.session-data-group{grid-template-columns:1fr}.control-two-column-grid{grid-template-columns:1fr;gap:10px}.technician-command-stack,.main-content{gap:10px}.card,.control-panel-card,.history-card{margin-bottom:0;padding:12px}.telemetry-card{gap:8px;padding:10px}.telemetry-icon-wrapper{width:30px;height:30px}.telemetry-label{font-size:10px}.telemetry-value{font-size:14px}.form-group{margin-bottom:10px}.card-title{margin-bottom:10px;padding-bottom:6px;font-size:14px}.device-registry-panel{gap:10px}.registry-help{padding:8px 10px;font-size:11.5px}.registry-form-grid{grid-template-columns:1fr 1fr;gap:8px}.registry-field.mac,.registry-field.alias,.registry-submit{grid-column:1/-1}.registry-field span{font-size:10px}.registry-table-wrap{display:none}.registry-device-cards{gap:10px;display:grid}.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%}.direct-schedule-grid{grid-template-columns:1fr}header{text-align:center;flex-direction:column;gap:10px;padding:12px 16px}.header-actions{justify-content:space-between;width:100%}}