@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");:root{--color-bg-primary:#f7fafa;--color-bg-secondary:#ffffff;--color-bg-tertiary:#f0f6f8;--color-bg-card:#ffffff;--color-bg-card-hover:#f8fbfc;--color-bg-glass:rgba(255,255,255,0.8);--color-bg-input:#f0f6f8;--color-border:rgba(0,60,80,0.08);--color-border-hover:rgba(0,100,130,0.16);--color-border-focus:#0891b2;--color-text-primary:#0f2a3e;--color-text-secondary:#4a6f8a;--color-text-muted:#7d9aad;--color-text-inverse:#ffffff;--color-accent:#0891b2;--color-accent-primary:#0891b2;--color-accent-primary-hover:#0e7490;--color-accent-secondary:#06b6d4;--color-accent-teal:#14b8a6;--color-accent-gradient:linear-gradient(135deg,#0891b2,#06b6d4 50%,#14b8a6);--color-accent-gradient-subtle:linear-gradient(135deg,rgba(8,145,178,0.08),rgba(20,184,166,0.06));--color-success:#059669;--color-warning:#d97706;--color-error:#dc2626;--color-info:#0891b2;--font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.8125rem;--font-size-base:0.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:0.75rem;--spacing-base:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--border-radius-sm:8px;--border-radius-md:10px;--border-radius-lg:14px;--border-radius-xl:18px;--radius-lg:14px;--shadow-sm:0 1px 2px rgba(0,40,60,0.04),0 1px 3px rgba(0,40,60,0.06);--shadow-md:0 2px 8px rgba(0,40,60,0.06),0 4px 16px rgba(0,40,60,0.04);--shadow-lg:0 4px 12px rgba(0,40,60,0.06),0 12px 40px rgba(0,40,60,0.08);--shadow-glow:0 0 0 1px rgba(8,145,178,0.12),0 4px 16px rgba(8,145,178,0.06);--transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:400ms ease}.page-header{padding:var(--spacing-xl) var(--spacing-2xl);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary)}.page-header h1{font-size:var(--font-size-2xl);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--spacing-xs);color:var(--color-text-primary)}.page-header p{color:var(--color-text-secondary);font-size:var(--font-size-base)}.page-body{padding:var(--spacing-xl) var(--spacing-2xl)}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-base);overflow:hidden}.card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.card-header h2{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary)}.card-body{padding:var(--spacing-lg)}.glass-card{background:var(--color-bg-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.glass-card,.kpi-card{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm)}.kpi-card{background:var(--color-bg-card);padding:var(--spacing-lg);position:relative;overflow:hidden;transition:all var(--transition-base)}.kpi-card:hover{box-shadow:var(--shadow-md)}.kpi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent-gradient);border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0}.kpi-card-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500;margin-bottom:var(--spacing-sm)}.kpi-card-value{font-size:var(--font-size-3xl);font-weight:700;letter-spacing:-.02em;color:var(--color-text-primary)}.kpi-card-unit{font-size:var(--font-size-base);color:var(--color-text-muted);font-weight:400;margin-left:var(--spacing-sm)}.kpi-card-delta{font-size:var(--font-size-sm);margin-top:var(--spacing-sm);font-weight:500}.kpi-card-delta.positive{color:var(--color-success)}.kpi-card-delta.negative{color:var(--color-error)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:var(--spacing-lg);gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.data-table{width:100%;border-collapse:collapse}.data-table thead th{text-align:left;font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);border-bottom:2px solid var(--color-border);white-space:nowrap}.data-table tbody td,.data-table thead th{padding:var(--spacing-md) var(--spacing-base)}.data-table tbody td{border-bottom:1px solid var(--color-border);font-size:var(--font-size-base);color:var(--color-text-primary)}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:var(--color-bg-tertiary)}.btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-base);border-radius:var(--border-radius-md);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;cursor:pointer;border:1px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background:var(--color-accent-primary);color:white;box-shadow:0 1px 3px rgba(8,145,178,.2)}.btn-primary:hover{background:var(--color-accent-primary-hover);box-shadow:0 2px 8px rgba(8,145,178,.3);transform:translateY(-1px)}.btn-secondary{background:var(--color-bg-secondary);border-color:var(--color-border);color:var(--color-text-secondary)}.btn-secondary:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-border-hover)}.btn-danger{background:transparent;border-color:rgba(220,38,38,.2);color:var(--color-error)}.btn-danger:hover{background:rgba(220,38,38,.06);border-color:var(--color-error)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--border-radius-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(8,145,178,.1);background:var(--color-bg-secondary)}.form-input::placeholder{color:var(--color-text-muted)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:var(--font-size-xs);font-weight:600}.badge-success{background:rgba(5,150,105,.08);color:var(--color-success)}.badge-warning{background:rgba(217,119,6,.08);color:var(--color-warning)}.badge-info{background:rgba(8,145,178,.08);color:var(--color-info)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center;color:var(--color-text-muted)}.empty-state-icon{width:64px;height:64px;margin-bottom:var(--spacing-lg);opacity:.3}.empty-state h3{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}input[type=range]{accent-color:var(--color-accent-primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn var(--transition-base) ease forwards}.slide-in{animation:slideInRight var(--transition-base) ease forwards}.facility-slider-bar{display:flex;align-items:center;gap:var(--spacing-base);padding:var(--spacing-base) var(--spacing-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm)}.facility-slider-bar .play-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--color-accent-gradient);color:white;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.facility-slider-bar .play-btn:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(8,145,178,.3)}.facility-slider-bar input[type=range]{flex:1 1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-bg-tertiary);border-radius:3px;cursor:pointer}.facility-slider-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent-primary);box-shadow:0 1px 4px rgba(8,145,178,.3);cursor:-webkit-grab;cursor:grab}.facility-slider-bar .day-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);white-space:nowrap;min-width:160px;text-align:right}.hall-section{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition-base)}.hall-section:hover{box-shadow:var(--shadow-md)}.hall-header{padding:var(--spacing-base) var(--spacing-lg);background:var(--color-accent-gradient-subtle);border-bottom:1px solid var(--color-border);gap:var(--spacing-xl);flex-wrap:wrap}.hall-header,.hall-header h3{display:flex;align-items:center}.hall-header h3{font-size:var(--font-size-md);font-weight:700;color:var(--color-text-primary);margin-right:auto;gap:var(--spacing-sm)}.tank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:var(--spacing-base);gap:var(--spacing-base);padding:var(--spacing-lg)}.tank-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--spacing-base);transition:all var(--transition-fast);position:relative;overflow:hidden}.tank-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-sm)}.tank-card.empty{opacity:.5;background:var(--color-bg-tertiary)}.tank-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.tank-card-header .tank-name{font-size:var(--font-size-md);font-weight:700;color:var(--color-text-primary)}.tank-card-header .batch-badge{font-size:var(--font-size-xs);font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(8,145,178,.08);color:var(--color-accent-primary);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}.util-bar{display:flex;align-items:center;gap:var(--spacing-sm)}.util-bar .util-label{font-size:10px;font-weight:600;color:var(--color-text-muted);width:52px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}.util-bar .bar-track{flex:1 1;height:8px;background:var(--color-bg-tertiary);border-radius:4px;overflow:hidden;position:relative}.util-bar .bar-fill{height:100%;border-radius:4px;transition:width .3s ease,background .3s ease;min-width:0}.util-bar .bar-fill.level-ok{background:var(--color-success)}.util-bar .bar-fill.level-warn{background:var(--color-warning)}.util-bar .bar-fill.level-critical{background:var(--color-error)}.util-bar .util-pct{font-size:10px;font-weight:600;color:var(--color-text-secondary);width:34px;text-align:right;flex-shrink:0}