:root{--primary:#00355f;--primary-container:#0f4c81;--secondary:#5c5f61;--surface:#f9f9fe;--surface-container:#ededf3;--outline-variant:#c2c7d1;--success:#10b981;--error:#ba1a1a;--accent:#0f4c81}body{background-color:var(--surface);color:#191c1f;font-family:Inter,sans-serif;overflow:hidden}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--outline-variant);border-radius:3px}.silos-container{flex-wrap:wrap;justify-content:start;gap:12px;display:flex}.silo-wrapper{border:1px solid var(--outline-variant);text-align:center;background:#fff;border-radius:8px;flex-direction:column;align-items:center;width:124px;padding:8px 6px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 1px 3px #0000000d}.silo-wrapper:hover{border-color:var(--primary-container);transform:translateY(-2px);box-shadow:0 4px 12px #0f4c8114}.silo-tank-holder{justify-content:center;align-items:flex-end;width:100%;height:260px;margin-bottom:8px;display:flex}.silo{background:var(--surface-container);border:2px solid #a0c9ff;border-radius:4px 4px 12px 12px;width:50px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0000000d}.silo-fill{background:linear-gradient(#d2e4ff 0%,#0f4c81 100%);transition:height .8s ease-in-out;position:absolute;bottom:0;left:0;right:0}.silo-fill.filling{animation:2s ease-in-out infinite pulse-fill}.silo-fill.microfiltered{background:linear-gradient(#d1fae5 0%,#10b981 100%)}@keyframes pulse-fill{0%,to{opacity:.9}50%{opacity:.7}}.silo-info{width:100%}.silo-name{color:var(--primary);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;font-weight:700;overflow:hidden}.silo-volume{color:#191c1f;margin-top:2px;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:600}.lines-container{flex-direction:column;gap:12px;display:flex}.line{border:1px solid var(--outline-variant);background:#fff;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;transition:all .3s;display:flex}.line.preparing{border-left:4px solid #f59e0b}.line.active{border-left:4px solid var(--primary-container);box-shadow:0 2px 8px #0f4c810d}.line.cleaning{border-left:4px solid #3b82f6}.line.cooldown{border-left:4px solid #a855f7}.line-id{color:var(--primary);min-width:60px;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.truck-docked{flex-direction:column;flex-grow:1;gap:6px;display:flex}.truck-info{justify-content:space-between;align-items:center;display:flex}.truck-name{color:#191c1f;font-size:.85rem;font-weight:600}.truck-volume{color:var(--primary-container);font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:600}.progress-container{background:var(--surface-container);border-radius:3px;width:100%;height:6px;overflow:hidden}.progress-bar{background:var(--primary-container);height:100%;transition:width .5s ease-out}.line-empty{color:var(--secondary);font-size:.8rem;font-style:italic}.skimmers-container{flex-direction:column;gap:12px;display:flex}.skimmer{border:1px solid var(--outline-variant);background:#fff;border-radius:8px;padding:12px;transition:all .3s}.skimmer.active{border-color:var(--primary-container);box-shadow:0 2px 8px #0f4c810d}.skimmer-name{color:var(--primary);font-size:.85rem;font-weight:700}.skimmer-status{color:var(--secondary);margin-top:4px;font-size:.75rem}.skimmer.active .skimmer-status{color:var(--success);font-weight:600}.skimmer-connections{color:var(--secondary);border-top:1px solid var(--surface-container);margin-top:8px;padding-top:6px;font-size:.7rem}.machine-block.active{border-color:var(--primary-container);box-shadow:0 4px 12px #0f4c810d}.machine-icon.spinning{animation:3s linear infinite spin}.machine-icon.pulsing{animation:2s ease-in-out infinite pulse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.modal{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#191c1f80;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal.open{display:flex}.modal-content{border:1px solid var(--outline-variant);background-color:#fff;border-radius:12px;flex-direction:column;width:98vw;max-width:98vw;height:98vh;max-height:98vh;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.modal-content-dialog{border:1px solid var(--outline-variant);background-color:#fff;border-radius:16px;flex-direction:column;width:min(560px,92vw);max-height:90vh;animation:.25s cubic-bezier(.16,1,.3,1) dialogPopIn;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000059}@keyframes dialogPopIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{border-bottom:1px solid var(--outline-variant);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.modal-header h2{color:var(--primary);font-size:1.1rem;font-weight:700}.btn-close{color:var(--secondary);cursor:pointer;background:0 0;border:none;font-size:1.5rem;font-weight:700;transition:color .2s}.btn-close:hover{color:var(--error)}.modal-tabs{border-bottom:1px solid var(--outline-variant);background:var(--surface-container);padding:4px 4px 0;display:flex}.tab-btn{color:var(--secondary);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary-container);background:#fff;border-radius:6px 6px 0 0}.tab-content{flex-direction:column;gap:16px;padding:20px;display:flex}.chart-wrapper{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:8px;height:380px;position:relative;overflow:hidden}.chart-wrapper svg{width:100%;height:100%;display:block}.chart-tooltip{color:#fff;pointer-events:none;z-index:100;background:#191c1fe6;border-radius:6px;padding:8px 12px;font-size:.75rem;display:none;position:absolute;box-shadow:0 4px 6px #0000001a}.page-view{flex-direction:column;gap:24px;display:none}.page-view.active{display:flex}.flow-line{background:var(--outline-variant);position:relative}.flow-active:after{content:"";background:linear-gradient(90deg, transparent, var(--primary-container), transparent);background-size:200% 100%;animation:2.5s linear infinite flowMove;position:absolute;inset:0}@keyframes flowMove{0%{background-position:200% 0}to{background-position:-200% 0}}.planning-container,.logs-container{border:1px solid var(--outline-variant);background:var(--surface-container);border-radius:8px;padding:10px;overflow-y:auto}.logs-container{color:#2e3034;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.5}.log-entry{border-bottom:1px solid #0000000d;padding:4px 8px}.modal-content .tab-content,.modal-content .logs-modal-body,.modal-content .reports-container,.modal-content .planning-container,.modal-content .settings-body{flex-grow:1}.modal-content .tab-content{height:calc(100% - 110px)}.modal-content .chart-wrapper,.modal-content .logs-container{height:100%!important;max-height:none!important}