*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:Segoe UI,Inter,system-ui,sans-serif;background:#070c18;color:#dbe5f5}#app{display:grid;grid-template-rows:64px 1fr 72px;height:100vh}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 20px;background:linear-gradient(180deg,#0f1829,#0b1322);border-bottom:1px solid #1c2a44}.brand{display:flex;align-items:center;gap:12px}.logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#04121f;background:linear-gradient(135deg,#38bdf8,#22c55e)}.brand h1{font-size:17px;font-weight:700;letter-spacing:.2px}.brand p{font-size:12px;color:#7f93b5}.pipeline{display:flex;align-items:center;gap:8px}.pipeline .node{font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid #22324f;background:#0e1830;color:#9fb2d3;transition:all .25s;white-space:nowrap}.pipeline .node span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1b2a47;font-size:11px;margin-right:4px}.pipeline .node.on{border-color:#22c55e;color:#eafff1;background:#0f3a25;box-shadow:0 0 18px #22c55e66}.pipeline .node.err{border-color:#ef4444;color:#fff0f0;background:#45151a;box-shadow:0 0 18px #ef444466}.pipeline .arrow{color:#3c5378;font-size:18px}.header-right{display:flex;align-items:center;gap:14px}.pill{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.4px}.pill.run{background:#0f3a25;color:#4ade80;border:1px solid #166534}.pill.pause{background:#3d2f08;color:#facc15;border:1px solid #854d0e}.clock{font-variant-numeric:tabular-nums;color:#8ea3c6;font-size:14px}main{display:flex;min-height:0}#viewport{position:relative;flex:1;min-width:0;overflow:hidden}#viewport canvas{display:block}.label-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.legend{position:absolute;left:14px;bottom:14px;z-index:5;font-size:12px;color:#a9bad6;background:#0b1322cc;border:1px solid #1c2a44;border-radius:10px;padding:10px 12px;display:grid;gap:5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.dot.g{background:#22c55e;box-shadow:0 0 8px #22c55e}.dot.y{background:#facc15;box-shadow:0 0 8px #facc15}.dot.r{background:#ef4444;box-shadow:0 0 8px #ef4444}.station-label{font-size:11.5px;font-weight:600;color:#cfe3ff;padding:4px 9px;border-radius:6px;background:#0b1424d9;border:1px solid #2a4170;white-space:nowrap}.crm-label{font-size:13px;font-weight:700;color:#e0f2fe;padding:6px 12px;border-radius:8px;background:#0c2a44e6;border:1px solid #38bdf8;box-shadow:0 0 20px #38bdf855}.box-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;font-family:Consolas,monospace;transform-origin:bottom center;animation:pop .35s ease-out}.box-tag.ok{background:#14532dee;color:#bbf7d0;border:1px solid #22c55e}.box-tag.bad{background:#7f1d1dee;color:#fecaca;border:1px solid #ef4444}.hide-labels .station-label,.hide-labels .box-tag{display:none}@keyframes pop{0%{opacity:0}to{opacity:1}}#toasts{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:10;display:grid;gap:8px}.toast{display:flex;align-items:center;gap:10px;min-width:360px;padding:11px 16px;border-radius:10px;background:#3b0d12f2;border:1px solid #ef4444;color:#fee2e2;font-size:13.5px;box-shadow:0 8px 30px #ef444440;animation:slideIn .3s ease-out}.toast b{color:#fff}.toast .ic{font-size:20px;animation:blink .6s infinite alternate}.toast.out{opacity:0;transform:translateY(-8px);transition:all .4s}@keyframes slideIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@keyframes blink{0%{opacity:1}to{opacity:.35}}#crm{width:390px;display:flex;flex-direction:column;gap:12px;padding:14px;background:#0b1322;border-left:1px solid #1c2a44;min-height:0}.crm-head{display:flex;align-items:center;justify-content:space-between}.crm-head h2{font-size:16px}.crm-head small{font-size:12px;color:#7f93b5;font-weight:500;margin-left:4px}.live{font-size:11px;font-weight:700;color:#f87171;display:flex;align-items:center;gap:6px}.live i{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:blink .8s infinite alternate}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{background:#0f1a2f;border:1px solid #1c2a44;border-radius:10px;padding:9px 12px}.stat label{display:block;font-size:11px;color:#7f93b5;margin-bottom:2px}.stat b{font-size:22px;font-variant-numeric:tabular-nums}.stat.ok b{color:#4ade80}.stat.bad b{color:#f87171}.table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #1c2a44;border-radius:10px}table{width:100%;border-collapse:collapse;font-size:12.5px}thead th{position:sticky;top:0;background:#111d33;text-align:left;padding:9px 10px;color:#8ea3c6;font-weight:600;font-size:11.5px}tbody td{padding:8px 10px;border-top:1px solid #16233b;white-space:nowrap}tbody td.code{font-family:Consolas,monospace;color:#e2ecfb}tbody tr.new{animation:rowIn 1.4s ease-out}@keyframes rowIn{0%{background:#22c55e33}to{background:transparent}}tbody tr.new.bad{animation:rowInBad 1.4s ease-out}@keyframes rowInBad{0%{background:#ef444433}to{background:transparent}}.st{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}.st.ok{background:#0f3a25;color:#4ade80}.st.bad{background:#45151a;color:#f87171}footer{display:flex;align-items:center;gap:22px;padding:0 20px;background:#0b1322;border-top:1px solid #1c2a44}.btn{font:inherit;font-size:13px;cursor:pointer;border-radius:8px;padding:8px 14px;border:1px solid #22324f;background:#101b31;color:#c7d5ec;transition:all .2s}.btn:hover{border-color:#38bdf8}.btn.primary{background:#0c4a6e;border-color:#0ea5e9;color:#e0f2fe;font-weight:600;min-width:120px}.btn.view.active{background:#0e3a5a;border-color:#38bdf8;color:#fff}.views{display:flex;gap:6px}.ctl{display:grid;gap:4px;min-width:170px}.ctl label{font-size:11.5px;color:#8ea3c6;display:flex;justify-content:space-between}.ctl output{color:#e2ecfb;font-weight:600}input[type=range]{accent-color:#38bdf8;width:100%}.chk{font-size:12.5px;color:#a9bad6;display:flex;align-items:center;gap:6px;cursor:pointer}.chk input{accent-color:#38bdf8}@media (max-width: 1500px){.pipeline .node{padding:6px 9px;font-size:11.5px}footer{gap:14px}#crm{width:340px}}.tabs{display:flex;gap:4px;background:#0a1220;border:1px solid #1c2a44;border-radius:10px;padding:3px}.tabs a{font-size:12.5px;font-weight:600;color:#8ea3c6;text-decoration:none;padding:7px 12px;border-radius:7px;white-space:nowrap;transition:all .2s}.tabs a:hover{color:#e2ecfb}.tabs a.active{background:#0e3a5a;color:#fff;box-shadow:inset 0 0 0 1px #38bdf8}@media (max-width: 1650px){.pipeline{display:none}}.logo.wood{background:linear-gradient(135deg,#d6a565,#7c4a1e);color:#2a1606;font-size:22px}#crm.wide{width:450px;overflow-y:auto}.log-card{background:#0f1a2f;border:1px solid #1c2a44;border-radius:12px;padding:12px;display:grid;gap:10px}.lc-top{display:flex;justify-content:space-between;align-items:center}.lc-id{font-family:Consolas,monospace;font-size:17px;font-weight:700;color:#f1f5fb}.lc-sub{font-size:12px;color:#8ea3c6;margin-top:2px}.cls-badge{min-width:54px;height:54px;border-radius:12px;display:grid;place-items:center;font-size:26px;font-weight:800;background:#16233b;color:#5b6f92;border:1px solid #22324f;transition:all .3s}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.metrics div{background:#0b1424;border:1px solid #172540;border-radius:8px;padding:6px 8px}.metrics label{display:block;font-size:10px;color:#7f93b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metrics b{font-size:14.5px;font-variant-numeric:tabular-nums;color:#e9f1fc;white-space:nowrap}.metrics b.warn{color:#fbbf24}.charts{display:grid;grid-template-columns:1fr 118px;gap:8px}.chart-box{background:#0b1424;border:1px solid #172540;border-radius:8px;padding:6px;position:relative}.chart-box span{position:absolute;top:5px;left:8px;font-size:10px;color:#7f93b5}.chart-box canvas{width:100%;height:auto;display:block}.stats.four{grid-template-columns:repeat(4,1fr)}.stats.four .stat b{font-size:16px}.cls-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cls-bar{background:#0f1a2f;border:1px solid #1c2a44;border-radius:8px;padding:7px 9px}.cls-bar .h{display:flex;justify-content:space-between;font-size:11px;color:#a9bad6}.cls-bar .h b{font-size:14px;color:#fff}.cls-bar .track{height:5px;border-radius:3px;background:#16233b;margin-top:6px;overflow:hidden}.cls-bar .fill{height:100%;border-radius:3px;transition:width .4s}.cls-pill{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;color:#08111f}.toast.info{background:#0d3322f2;border-color:#22c55e;color:#dcfce7;box-shadow:0 8px 30px #22c55e40}.toast.info .ic{animation:none}.display-3d{font-family:Consolas,monospace;background:#050a12f2;border:1px solid #2b4166;border-radius:8px;padding:6px 10px;text-align:center;min-width:120px;box-shadow:0 0 18px #000a}.display-3d small{display:block;font-size:10px;color:#7f93b5;font-family:Segoe UI,sans-serif}.display-3d b{font-size:20px;color:#4ade80;text-shadow:0 0 8px #22c55e88}.display-3d b.red{color:#f87171;text-shadow:0 0 8px #ef444488}.display-3d em{display:block;font-style:normal;font-size:10px;color:#facc15;letter-spacing:.5px}.hide-labels .display-3d{display:none}