:root{--twin-bg: #0a0e17;--twin-surface: #111827;--twin-surface-2: #1f2937;--twin-border: rgba(75, 85, 99, .4);--twin-text: #f8fafc;--twin-text-dim: #94a3b8;--twin-accent: #3b82f6;--twin-accent-glow: rgba(59, 130, 246, .3);--twin-success: #22c55e;--twin-warning: #eab308;--twin-danger: #ef4444;--twin-purple: #a855f7}.twin-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--twin-bg) 0%,#1e1b4b 100%);padding:20px}.twin-login-card{background:var(--twin-surface);border:1px solid var(--twin-border);border-radius:16px;padding:48px;width:100%;max-width:420px;box-shadow:0 25px 50px -12px #00000080}.twin-login-logo{text-align:center;margin-bottom:32px}.twin-login-logo h1{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--twin-accent) 0%,var(--twin-purple) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 8px}.twin-login-logo p{color:var(--twin-text-dim);font-size:14px;margin:0}.twin-particle-logo-container{width:320px;height:260px;margin:0 auto 16px;position:relative}.twin-particle-logo{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(59,130,246,.8)) drop-shadow(0 0 20px rgba(59,130,246,.5)) drop-shadow(0 0 40px rgba(168,85,247,.4))}.twin-login-form{display:flex;flex-direction:column;gap:20px}.twin-input-group{display:flex;flex-direction:column;gap:8px}.twin-input-group label{font-size:13px;font-weight:600;color:var(--twin-text-dim);text-transform:uppercase;letter-spacing:.5px}.twin-input{background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:8px;padding:12px 16px;font-size:15px;color:var(--twin-text);transition:all .2s}.twin-input:focus{outline:none;border-color:var(--twin-accent);box-shadow:0 0 0 3px var(--twin-accent-glow)}.twin-btn{background:linear-gradient(135deg,var(--twin-accent) 0%,#2563eb 100%);border:none;border-radius:8px;padding:14px 24px;font-size:15px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.twin-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px #3b82f680}.twin-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.twin-login-error{background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:12px 16px;color:var(--twin-danger);font-size:14px;display:flex;align-items:center;gap:8px}.twin-app{display:flex;height:100vh;background:var(--twin-bg);color:var(--twin-text)}.twin-sidebar{width:240px;background:var(--twin-surface);border-right:1px solid var(--twin-border);display:flex;flex-direction:column;flex-shrink:0}.twin-sidebar-logo{padding:20px 24px;border-bottom:1px solid var(--twin-border)}.twin-sidebar-logo h2{font-size:18px;font-weight:700;background:linear-gradient(135deg,var(--twin-accent) 0%,var(--twin-purple) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.twin-sidebar-logo span{font-size:11px;color:var(--twin-text-dim);text-transform:uppercase;letter-spacing:1px}.twin-sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}.twin-nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;color:var(--twin-text-dim);text-decoration:none;font-size:14px;font-weight:500;transition:all .2s}.twin-nav-item:hover{background:#3b82f61a;color:var(--twin-text)}.twin-nav-item.active{background:#3b82f626;color:var(--twin-accent)}.twin-nav-item svg{width:18px;height:18px}.twin-sidebar-footer{padding:16px;border-top:1px solid var(--twin-border)}.twin-logout-btn{width:100%;background:transparent;border:1px solid var(--twin-border);border-radius:8px;padding:10px;color:var(--twin-text-dim);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.twin-logout-btn:hover{background:#ef44441a;border-color:var(--twin-danger);color:var(--twin-danger)}.twin-topbar{height:56px;background:var(--twin-surface);border-bottom:1px solid var(--twin-border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.twin-topbar-left{display:flex;align-items:center;gap:16px}.twin-line-selector{background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:8px;padding:8px 16px;color:var(--twin-text);font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}.twin-env-badge{background:#22c55e26;color:var(--twin-success);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase}.twin-topbar-actions{display:flex;gap:12px}.twin-topbar-btn{background:transparent;border:1px solid var(--twin-border);border-radius:8px;padding:8px 16px;color:var(--twin-text-dim);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.twin-topbar-btn:hover{background:var(--twin-surface-2);color:var(--twin-text)}.twin-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.twin-content{flex:1;overflow-y:auto;padding:24px}.twin-ai-panel{width:320px;background:var(--twin-surface);border-left:1px solid var(--twin-border);display:flex;flex-direction:column;flex-shrink:0}.twin-ai-header{padding:16px 20px;border-bottom:1px solid var(--twin-border);display:flex;align-items:center;justify-content:space-between}.twin-ai-header h3{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px}.twin-ai-header svg{color:var(--twin-purple)}.twin-ai-body{flex:1;overflow-y:auto;padding:16px}.twin-ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.twin-ai-chip{background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:20px;padding:6px 12px;font-size:12px;color:var(--twin-text-dim);cursor:pointer;transition:all .2s}.twin-ai-chip:hover{background:#3b82f61a;border-color:var(--twin-accent);color:var(--twin-accent)}.twin-ai-input-wrap{padding:16px;border-top:1px solid var(--twin-border)}.twin-ai-input{width:100%;background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:8px;padding:12px 16px;color:var(--twin-text);font-size:14px;resize:none}.twin-ai-input:focus{outline:none;border-color:var(--twin-accent)}.twin-patch-preview{background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:8px;margin:16px 0;overflow:hidden}.twin-patch-header{padding:10px 14px;background:var(--twin-surface-2);border-bottom:1px solid var(--twin-border);font-size:12px;font-weight:600;color:var(--twin-text-dim)}.twin-patch-body{padding:12px 14px;font-family:JetBrains Mono,monospace;font-size:12px}.twin-patch-line{display:flex;gap:8px;padding:2px 0}.twin-patch-add{color:var(--twin-success)}.twin-patch-remove{color:var(--twin-danger)}.twin-patch-actions{display:flex;gap:8px;margin-top:12px}.twin-patch-btn{flex:1;padding:10px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.twin-patch-btn-primary{background:var(--twin-accent);border:none;color:#fff}.twin-patch-btn-secondary{background:transparent;border:1px solid var(--twin-border);color:var(--twin-text-dim)}.twin-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}.twin-kpi-card{background:var(--twin-surface);border:1px solid var(--twin-border);border-radius:12px;padding:20px}.twin-kpi-label{font-size:12px;color:var(--twin-text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.twin-kpi-value{font-size:28px;font-weight:700;color:var(--twin-text)}.twin-kpi-unit{font-size:14px;color:var(--twin-text-dim);margin-left:4px}.twin-kpi-delta{font-size:13px;margin-top:6px;display:flex;align-items:center;gap:4px}.twin-kpi-delta.positive{color:var(--twin-success)}.twin-kpi-delta.negative{color:var(--twin-danger)}.twin-section{background:var(--twin-surface);border:1px solid var(--twin-border);border-radius:12px;margin-bottom:20px}.twin-section-header{padding:16px 20px;border-bottom:1px solid var(--twin-border);display:flex;align-items:center;justify-content:space-between}.twin-section-header h3{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}.twin-section-body{padding:20px}.twin-knobs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.twin-knob-group{display:flex;flex-direction:column;gap:12px}.twin-knob-label{font-size:13px;font-weight:600;color:var(--twin-text-dim)}.twin-knob-control{display:flex;align-items:center;gap:12px}.twin-stepper{display:flex;align-items:center;gap:8px;background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:8px;padding:4px}.twin-stepper-btn{width:32px;height:32px;background:var(--twin-surface-2);border:none;border-radius:6px;color:var(--twin-text);font-size:18px;cursor:pointer;transition:all .2s}.twin-stepper-btn:hover{background:var(--twin-accent)}.twin-stepper-value{min-width:40px;text-align:center;font-size:16px;font-weight:600}.twin-slider-wrap{flex:1;display:flex;align-items:center;gap:12px}.twin-slider{flex:1;-webkit-appearance:none;height:6px;background:var(--twin-border);border-radius:3px;outline:none}.twin-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--twin-accent);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #3b82f666}.twin-slider-value{min-width:50px;text-align:right;font-size:14px;font-weight:600;color:var(--twin-accent)}.twin-run-btn{background:linear-gradient(135deg,var(--twin-success) 0%,#16a34a 100%);border:none;border-radius:10px;padding:16px 32px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;box-shadow:0 4px 14px #22c55e4d}.twin-run-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #22c55e66}.twin-queue{margin-top:20px}.twin-queue-table{width:100%;border-collapse:collapse}.twin-queue-table th,.twin-queue-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--twin-border)}.twin-queue-table th{font-size:11px;font-weight:600;color:var(--twin-text-dim);text-transform:uppercase;letter-spacing:.5px}.twin-queue-table td{font-size:13px}.twin-status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase}.twin-status-running{background:#3b82f626;color:var(--twin-accent)}.twin-status-done{background:#22c55e26;color:var(--twin-success)}.twin-status-failed{background:#ef444426;color:var(--twin-danger)}.twin-charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.twin-chart-card{background:var(--twin-surface);border:1px solid var(--twin-border);border-radius:12px;padding:20px}.twin-chart-card h4{font-size:14px;font-weight:600;margin:0 0 16px;color:var(--twin-text-dim)}.twin-bottleneck-table{width:100%;border-collapse:collapse;margin-top:16px}.twin-bottleneck-table th,.twin-bottleneck-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--twin-border);font-size:13px}.twin-bottleneck-table th{font-size:11px;font-weight:600;color:var(--twin-text-dim);text-transform:uppercase}.twin-bottleneck-highlight{background:#ef44441a}.twin-compare-header{display:flex;gap:20px;margin-bottom:24px}.twin-run-selector{flex:1;background:var(--twin-surface);border:1px solid var(--twin-border);border-radius:12px;padding:20px}.twin-run-selector h4{font-size:12px;color:var(--twin-text-dim);text-transform:uppercase;margin:0 0 12px}.twin-run-selector select{width:100%;background:var(--twin-bg);border:1px solid var(--twin-border);border-radius:8px;padding:12px 16px;color:var(--twin-text);font-size:14px}.twin-history-filters{display:flex;gap:16px;margin-bottom:20px}.twin-search{flex:1;background:var(--twin-surface);border:1px solid var(--twin-border);border-radius:8px;padding:12px 16px;color:var(--twin-text);font-size:14px}@media (max-width: 1400px){.twin-kpi-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 1200px){.twin-ai-panel{display:none}.twin-knobs-grid{grid-template-columns:1fr}}@media (max-width: 768px){.twin-sidebar{display:none}.twin-kpi-row{grid-template-columns:repeat(2,1fr)}.twin-charts-grid{grid-template-columns:1fr}}html,body,#root{height:100%}