:root{--bg-primary:#0a0f1a;--bg-secondary:#0d1424;--bg-card:#111827;--bg-card-hover:#162032;--bg-input:#1a2332;--bg-tertiary:#1f2937;--bg-overlay:#0a0f1ad9;--cyan:#06b6d4;--cyan-light:#22d3ee;--cyan-dim:#06b6d426;--green:#10b981;--green-light:#34d399;--green-dim:#10b98126;--yellow:#f59e0b;--yellow-light:#fbbf24;--yellow-dim:#f59e0b26;--red:#ef4444;--red-light:#f87171;--red-dim:#ef444426;--blue:#3b82f6;--blue-dim:#3b82f626;--purple:#8b5cf6;--purple-dim:#8b5cf626;--orange:#f97316;--orange-dim:#f9731626;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#4b5563;--text-link:#06b6d4;--border:#1e2d3d;--border-bright:#2d3f55;--border-accent:#06b6d44d;--sidebar-w:240px;--sidebar-bg:#080d18;--font-main:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 16px #00000080;--shadow-lg:0 8px 32px #0009;--shadow-cyan:0 0 20px #06b6d433;--shadow-green:0 0 20px #10b98133;--shadow-red:0 0 20px #ef444440;--transition:all .25s cubic-bezier(.4, 0, .2, 1);--transition-fast:all .15s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:14px}body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--cyan)}.app-layout{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-w);background:var(--bg-primary);flex-direction:column;flex:1;min-height:100vh;display:flex}.page-wrapper{flex:1;width:100%;max-width:1600px;padding:24px}.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);z-index:100;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-logo{border-bottom:1px solid var(--border);padding:20px 16px 16px}.sidebar-logo-mark{align-items:center;gap:10px;text-decoration:none;display:flex}.logo-icon{background:linear-gradient(135deg, var(--cyan), #0891b2);border-radius:var(--radius-md);width:36px;height:36px;box-shadow:var(--shadow-cyan);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex}.logo-text{flex-direction:column;line-height:1.2;display:flex}.logo-text span:first-child{color:var(--text-primary);letter-spacing:.5px;font-size:13px;font-weight:700}.logo-text span:last-child{color:var(--cyan);letter-spacing:.5px;font-size:10px;font-weight:400}.sidebar-section{padding:8px 0}.sidebar-section-label{letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase;padding:8px 16px 4px;font-size:10px;font-weight:600}.sidebar-item{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);transition:var(--transition-fast);align-items:center;gap:10px;margin:1px 8px;padding:9px 16px;font-size:13px;font-weight:500;text-decoration:none;display:flex;position:relative}.sidebar-item:hover{background:var(--bg-card);color:var(--text-primary)}.sidebar-item.active{background:var(--cyan-dim);color:var(--cyan)}.sidebar-item.active:before{content:"";background:var(--cyan);border-radius:0 3px 3px 0;width:3px;margin-left:-8px;position:absolute;top:20%;bottom:20%;left:0}.sidebar-item svg{flex-shrink:0;width:16px;height:16px}.sidebar-badge{background:var(--red);color:#fff;text-align:center;border-radius:999px;min-width:18px;margin-left:auto;padding:1px 6px;font-size:10px;font-weight:700}.sidebar-badge.warn{background:var(--yellow);color:#000}.sidebar-badge.ok{background:var(--green)}.sidebar-footer{border-top:1px solid var(--border);margin-top:auto;padding:12px}.sidebar-farm-status{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border);align-items:center;gap:8px;padding:10px 12px;display:flex}.status-dot{background:var(--green);width:8px;height:8px;box-shadow:0 0 8px var(--green);border-radius:50%;flex-shrink:0;animation:2s infinite pulse-dot}.status-dot.warn{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}.status-dot.danger{background:var(--red);box-shadow:0 0 8px var(--red)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.status-info{flex:1;min-width:0}.status-info span:first-child{color:var(--text-primary);font-size:11px;font-weight:600;display:block}.status-info span:last-child{color:var(--green);font-size:10px;display:block}.topbar{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:50;align-items:center;gap:12px;padding:12px 24px;display:flex;position:sticky;top:0}.topbar-breadcrumb{flex:1;align-items:center;gap:8px;font-size:13px;display:flex}.topbar-breadcrumb .page-title{color:var(--text-primary);font-size:15px;font-weight:700}.topbar-breadcrumb .sep{color:var(--text-muted)}.topbar-actions{align-items:center;gap:8px;display:flex}.topbar-time{font-family:var(--font-mono);color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;font-size:12px}.btn-icon{cursor:pointer;background:var(--bg-card);border:none;border:1px solid var(--border);border-radius:var(--radius-sm);width:34px;height:34px;color:var(--text-secondary);transition:var(--transition-fast);justify-content:center;align-items:center;display:flex}.btn-icon:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-bright)}.btn-icon svg{width:16px;height:16px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);padding:20px}.card:hover{border-color:var(--border-bright)}.card-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.card-title svg{width:14px;height:14px}.stat-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);cursor:default;padding:18px;position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--accent-color,var(--cyan));border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:2px;position:absolute;top:0;left:0;right:0}.stat-card:hover{border-color:var(--border-bright);transform:translateY(-1px)}.stat-label{letter-spacing:.5px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:600}.stat-value{color:var(--text-primary);font-size:28px;font-weight:800;line-height:1;font-family:var(--font-mono)}.stat-unit{color:var(--text-secondary);margin-left:3px;font-size:12px;font-weight:400}.stat-meta{align-items:center;gap:4px;margin-top:8px;font-size:11px;display:flex}.stat-badge{border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.stat-badge.ok{background:var(--green-dim);color:var(--green-light)}.stat-badge.warn{background:var(--yellow-dim);color:var(--yellow-light)}.stat-badge.danger{background:var(--red-dim);color:var(--red-light)}.stat-badge.info{background:var(--cyan-dim);color:var(--cyan-light)}.alert-bar{border-radius:var(--radius-md);border:1px solid;align-items:center;gap:10px;margin-bottom:14px;padding:10px 16px;font-size:13px;display:flex}.alert-bar.danger{background:var(--red-dim);color:var(--red-light);border-color:#ef44444d}.alert-bar.warn{background:var(--yellow-dim);color:var(--yellow-light);border-color:#f59e0b4d}.alert-bar.success{background:var(--green-dim);color:var(--green-light);border-color:#10b9814d}.alert-bar svg{flex-shrink:0;width:16px;height:16px}.tanks-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.tank-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);overflow:hidden}.tank-card:hover{border-color:var(--border-bright);box-shadow:var(--shadow-md)}.tank-header{background:var(--bg-input);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.tank-name{color:var(--text-primary);align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.tank-status{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600}.tank-status.running{background:var(--green-dim);color:var(--green)}.tank-status.warning{background:var(--yellow-dim);color:var(--yellow)}.tank-status.critical{background:var(--red-dim);color:var(--red)}.tank-status.idle{background:var(--bg-tertiary);color:var(--text-muted)}.tank-body{padding:14px 16px}.tank-params{grid-template-columns:1fr 1fr;gap:10px;display:grid}.tank-param{flex-direction:column;gap:2px;display:flex}.tank-param-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}.tank-param-value{font-size:18px;font-weight:700;font-family:var(--font-mono)}.tank-param-value.ok{color:var(--green)}.tank-param-value.warn{color:var(--yellow)}.tank-param-value.danger{color:var(--red)}.tank-param-value.normal{color:var(--text-primary)}.tank-footer{border-top:1px solid var(--border);background:#00000026;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.tank-meta{color:var(--text-muted);align-items:center;gap:4px;font-size:11px;display:flex}.tank-controls{gap:6px;display:flex}.ctrl-btn{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:500;display:flex}.ctrl-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.ctrl-btn.active{background:var(--cyan-dim);color:var(--cyan);border-color:var(--border-accent)}.ctrl-btn svg{width:12px;height:12px}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:9px 18px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--cyan), #0891b2);color:#fff;box-shadow:0 2px 12px #06b6d44d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #06b6d466}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-bright)}.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--cyan)}.btn-danger{background:var(--red-dim);color:var(--red-light);border:1px solid #ef44444d}.btn-sm{padding:6px 12px;font-size:12px}.btn svg{width:15px;height:15px}.chart-container{width:100%;height:200px;position:relative}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-title{color:var(--text-primary);align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.section-title svg{width:18px;height:18px;color:var(--cyan)}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-3-1{grid-template-columns:3fr 1fr;gap:16px;display:grid}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding:10px 14px;font-size:11px;font-weight:600}.data-table td{color:var(--text-primary);border-bottom:1px solid #1e2d3d80;padding:11px 14px}.data-table tr:hover td{background:var(--bg-input)}.data-table tr:last-child td{border-bottom:none}.badge{border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-green{background:var(--green-dim);color:var(--green-light)}.badge-yellow{background:var(--yellow-dim);color:var(--yellow-light)}.badge-red{background:var(--red-dim);color:var(--red-light)}.badge-blue{background:var(--blue-dim);color:#60a5fa}.badge-cyan{background:var(--cyan-dim);color:var(--cyan-light)}.badge-purple{background:var(--purple-dim);color:#a78bfa}.badge-gray{background:var(--bg-tertiary);color:var(--text-secondary)}.progress-bar{background:var(--bg-tertiary);border-radius:999px;height:6px;overflow:hidden}.progress-fill{border-radius:999px;height:100%;transition:width .5s}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);font-size:12px;font-weight:600}.form-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:var(--font-main);width:100%;transition:var(--transition-fast);padding:9px 12px}.form-input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-dim);outline:none}.form-input::placeholder{color:var(--text-muted)}.form-select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;width:100%;padding:9px 12px;font-size:13px}.form-select:focus{border-color:var(--cyan);outline:none}.divider{background:var(--border);height:1px;margin:20px 0}.empty-state{color:var(--text-muted);flex-direction:column;align-items:center;gap:12px;padding:48px 24px;display:flex}.empty-state svg{opacity:.3;width:48px;height:48px}.empty-state p{font-size:14px}@keyframes ping{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.spinner{border:2px solid var(--border);border-top-color:var(--cyan);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.3s forwards fadeIn}@media (width<=1024px){:root{--sidebar-w:60px}.sidebar-section-label,.logo-text,.sidebar-item span,.sidebar-badge,.status-info{display:none}.sidebar-item{justify-content:center;padding:10px}.sidebar-item svg{width:20px;height:20px}.sidebar-logo-mark{justify-content:center}.page-wrapper{padding:16px}.grid-2,.grid-3,.grid-3-1{grid-template-columns:1fr}}@media (width<=640px){:root{--sidebar-w:0px}.sidebar{display:none}.main-content{margin-left:0}.stat-grid{grid-template-columns:1fr 1fr}.tanks-grid{grid-template-columns:1fr}}