:root{--bg-main: #0b0f19;--bg-card: #111827;--bg-card-hover: #162032;--border-color: #1f293d;--border-highlight: #3b82f6;--text-main: #f3f4f6;--text-muted: #9ca3af;--text-dim: #6b7280;--accent: #3b82f6;--accent-glow: rgba(59, 130, 246, .25);--success: #10b981;--success-glow: rgba(16, 185, 129, .3);--warning: #f59e0b;--warning-glow: rgba(245, 158, 11, .3);--danger: #ef4444}[data-theme=light]{--bg-main: #f8fafc;--bg-card: #ffffff;--bg-card-hover: #f8fafc;--border-color: #e2e8f0;--border-highlight: #2563eb;--text-main: #0f172a;--text-muted: #475569;--text-dim: #64748b;--accent: #2563eb;--accent-glow: rgba(37, 99, 235, .15);--success: #059669;--success-glow: rgba(5, 150, 105, .2);--warning: #d97706;--warning-glow: rgba(217, 119, 6, .2);--danger: #dc2626}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-main);color:var(--text-main);min-height:100vh;line-height:1.5}.container{max-width:1400px;margin:0 auto;padding:1.5rem 1rem 3rem}.header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border-color)}.brand{display:flex;align-items:center;gap:.75rem}.brand-icon{font-size:1.85rem;line-height:1}.brand-title{font-size:1.4rem;font-weight:700;letter-spacing:-.025em;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-badge{font-size:.75rem;padding:.15rem .5rem;border-radius:9999px;background:#3b82f626;color:#60a5fa;border:1px solid rgba(59,130,246,.3);font-weight:500}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem}.filter-tabs{display:flex;background:#111827cc;border:1px solid var(--border-color);border-radius:8px;padding:.2rem;gap:.2rem}.tab-btn{background:transparent;border:none;color:var(--text-muted);font-size:.825rem;font-weight:500;padding:.35rem .75rem;border-radius:6px;cursor:pointer;transition:all .15s ease}.tab-btn:hover{color:var(--text-main);background:#ffffff0d}.tab-btn.active{background:#1f293d;color:#60a5fa;font-weight:600}.search-input{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);font-size:.85rem;padding:.45rem .85rem;border-radius:8px;outline:none;min-width:240px;transition:border-color .15s ease}.search-input:focus{border-color:var(--border-highlight)}.layout-toggle-group{display:inline-flex;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:.2rem;gap:.2rem}.layout-toggle-btn{background:transparent;border:none;color:var(--text-muted);font-size:.8rem;font-weight:500;padding:.35rem .65rem;border-radius:6px;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}.layout-toggle-btn:hover{color:var(--text-main);background:#ffffff0d}.layout-toggle-btn.active{background:var(--accent);color:#fff;font-weight:600}[data-theme=light] .layout-toggle-btn.active{background:#3b82f6;color:#fff}.card-origin-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--text-muted);background:#ffffff0a;border:1px solid var(--border-color);padding:.2rem .5rem;border-radius:6px;width:fit-content;max-width:100%}[data-theme=light] .card-origin-pill{background:#f1f5f9;border-color:#cbd5e1;color:#475569}.origin-sep{opacity:.4}.origin-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);font-size:.825rem;font-weight:500;padding:.45rem .85rem;border-radius:8px;cursor:pointer;transition:all .15s ease}.btn:hover{background:#1f293d;border-color:#374151}.btn-danger{color:#f87171}.btn-danger:hover{background:#ef444426;border-color:#ef444466}.stats-bar{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.stat-item{display:flex;align-items:center;gap:.5rem;background:var(--bg-card);border:1px solid var(--border-color);padding:.4rem .85rem;border-radius:8px;font-size:.825rem}.stat-num{font-weight:700;font-size:.95rem}@keyframes pulse-ring{0%{transform:scale(.95);opacity:.8}50%{transform:scale(1.4);opacity:0}to{transform:scale(.95);opacity:0}}.pulse-dot{position:relative;width:9px;height:9px;border-radius:50%;display:inline-block}.pulse-dot.busy{background-color:#f59e0b}.pulse-dot.busy:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:#f59e0b;animation:pulse-ring 1.8s cubic-bezier(.24,0,.38,1) infinite}.pulse-dot.idle{background-color:#10b981}.pulse-dot.offline{background-color:#6b7280}.host-group{margin-bottom:2.5rem}.host-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .25rem;margin-bottom:1.25rem;border-bottom:2px solid var(--border-color)}.host-title{font-size:1.15rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:.5rem;letter-spacing:-.01em}.host-badges{display:flex;align-items:center;gap:.5rem}.host-badge{font-size:.75rem;font-weight:500;padding:.15rem .55rem;border-radius:9999px;background:#3b82f61a;color:#60a5fa;border:1px solid rgba(59,130,246,.25)}[data-theme=light] .host-badge{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}.project-group{margin-bottom:1.75rem;margin-left:.25rem}.project-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;padding:.35rem .75rem;background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;width:fit-content}[data-theme=light] .project-header{background:#f8fafc;border-color:#e2e8f0}.project-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.825rem;font-weight:600;color:var(--text-main)}.project-badge{font-size:.7rem;padding:.1rem .45rem;border-radius:6px;background:#1f293d;color:var(--text-muted)}[data-theme=light] .project-badge{background:#e2e8f0;color:#475569}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.25rem}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;transition:all .2s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.card:hover{background:var(--bg-card-hover);border-color:#2e3d5b;transform:translateY(-2px);box-shadow:0 10px 25px -5px #00000080}.card.status-busy{border-left:4px solid var(--warning)}.card.status-idle{border-left:4px solid var(--success)}.card.status-offline{border-left:4px solid #4b5563;opacity:.75}.card-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-width:0}.card-title-wrap{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1 1 0%}.card-title{font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-main);min-width:0;flex:1 1 0%}.status-badge{font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;white-space:nowrap}.status-badge.busy{background:#f59e0b26;color:#fbbf24;border:1px solid rgba(245,158,11,.3)}.status-badge.idle{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.status-badge.offline{background:#6b728026;color:#9ca3af;border:1px solid rgba(107,114,128,.3)}.meta-pills{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.75rem}.pill{background:#1f293d;color:#cbd5e1;padding:.18rem .5rem;border-radius:6px;display:inline-flex;align-items:center;gap:.3rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.pill-model{background:#a855f726;color:#c084fc;border:1px solid rgba(168,85,247,.3)}.activity-box{background:#0000004d;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:.65rem .85rem;font-size:.8rem;color:#e2e8f0;display:flex;flex-direction:column;gap:.35rem;transition:all .2s ease}.activity-busy{border-color:#f59e0b66;background:#f59e0b14}.activity-busy-tag{font-size:.65rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;background:#f59e0b40;color:#fbbf24;letter-spacing:.05em}.activity-label{font-size:.68rem;text-transform:uppercase;color:var(--text-dim);font-weight:600;letter-spacing:.05em}.activity-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;white-space:pre-wrap;line-height:1.4}.recent-steps{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}.step-chip{font-size:.7rem;padding:.1rem .4rem;border-radius:4px;background:#1e293b;color:#94a3b8;font-family:monospace}.card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.05)}.card-stat{display:flex;flex-direction:column}.stat-key{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;font-weight:500}.stat-val{font-size:.85rem;font-weight:600;color:var(--text-main);font-family:monospace}.card-footer{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--text-dim);padding-top:.25rem}.empty-state{text-align:center;padding:5rem 1rem;background:var(--bg-card);border:1px dashed var(--border-color);border-radius:16px;color:var(--text-muted)}.empty-icon{font-size:3rem;margin-bottom:.75rem}[data-theme=light] .card{box-shadow:0 1px 3px #0000000d,0 1px 2px #0000000a}[data-theme=light] .card:hover{box-shadow:0 10px 15px -3px #00000014,0 4px 6px -4px #0000000a;border-color:#cbd5e1}[data-theme=light] .activity-box{background:#f1f5f9;border-color:#e2e8f0;color:#1e293b}[data-theme=light] .activity-busy{border-color:#d9770666;background:#fef3c7;color:#78350f}[data-theme=light] .activity-busy-tag{background:#d9770633;color:#b45309}[data-theme=light] .pill{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}[data-theme=light] .step-chip{background:#e2e8f0;color:#334155}[data-theme=light] .filter-tabs{background:#fff}[data-theme=light] .tab-btn.active{background:#e2e8f0;color:#1d4ed8}[data-theme=light] .search-input{background:#fff;color:#0f172a}[data-theme=light] .brand-title{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.6rem;pointer-events:none}.toast{pointer-events:auto;background:var(--bg-card);border:1px solid rgba(16,185,129,.4);border-left:4px solid var(--success);box-shadow:0 10px 25px -5px #00000080;border-radius:8px;padding:.75rem 1rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;min-width:300px;max-width:420px;animation:toast-slide .25s cubic-bezier(.16,1,.3,1)}[data-theme=light] .toast{background:#fff;border-color:#10b9814d;border-left:4px solid var(--success);box-shadow:0 10px 20px -3px #0000001a}.toast-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:.1rem}.toast-close:hover{color:var(--text-main)}@keyframes toast-slide{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.drawer-backdrop{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(2px);z-index:1000;animation:fade-in .15s ease-out}.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:90vw;background:var(--bg-card);border-left:1px solid var(--border-color);box-shadow:-10px 0 30px #00000080;z-index:1001;display:flex;flex-direction:column;animation:slide-left .25s cubic-bezier(.16,1,.3,1)}[data-theme=light] .drawer{background:#fff;border-left-color:#e2e8f0;box-shadow:-10px 0 25px #0000001a}.drawer-header{padding:1.25rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:1rem}.drawer-title{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.drawer-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.notif-card{background:#ffffff05;border:1px solid var(--border-color);border-left:3px solid var(--success);border-radius:8px;padding:.75rem .85rem;display:flex;flex-direction:column;gap:.35rem;transition:background .15s ease}.notif-card:hover{background:#ffffff0a}[data-theme=light] .notif-card{background:#f8fafc;border-color:#e2e8f0;border-left-color:var(--success)}[data-theme=light] .notif-card:hover{background:#f1f5f9}.notif-header{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--text-dim)}.notif-title{font-size:.85rem;font-weight:600;color:var(--text-main)}.notif-detail{font-size:.75rem;color:var(--text-muted);line-height:1.4}@keyframes slide-left{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.login-card{width:100%;max-width:420px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:2.25rem 2rem;box-shadow:0 10px 25px -5px #0000004d,0 8px 10px -6px #0000004d}.login-header{text-align:center;margin-bottom:2rem}.login-logo{font-size:2.5rem;margin-bottom:.5rem}.login-title{font-size:1.5rem;font-weight:700;color:var(--text-main);margin-bottom:.25rem}.login-subtitle{font-size:.875rem;color:var(--text-muted)}.login-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.375rem}.form-label{font-size:.8125rem;font-weight:500;color:var(--text-muted)}.form-input{background-color:var(--bg-main);border:1px solid var(--border-color);color:var(--text-main);padding:.625rem .875rem;border-radius:6px;font-size:.875rem;transition:all .2s ease;outline:none}.form-input:focus{border-color:var(--border-highlight);box-shadow:0 0 0 2px var(--accent-glow)}.btn-primary{background-color:var(--accent);color:#fff;border:none;border-radius:6px;padding:.6875rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.login-error{background-color:#ef444426;border:1px solid var(--danger);color:var(--danger);padding:.625rem .875rem;border-radius:6px;font-size:.8125rem;line-height:1.4}.login-footer{margin-top:1.5rem;text-align:center;font-size:.8125rem;color:var(--text-muted)}.login-toggle-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.8125rem;font-weight:500;text-decoration:underline;padding:0;margin-left:.25rem}.user-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-muted);background-color:var(--bg-card);border:1px solid var(--border-color);padding:.25rem .625rem;border-radius:6px}.btn-logout{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.75rem;padding:.125rem .375rem;border-radius:4px}.btn-logout:hover{background-color:#ef444426}.compact-mode .host-group{margin-bottom:1.5rem}.compact-mode .host-header{padding:.35rem .2rem;margin-bottom:.75rem}.compact-mode .host-title{font-size:1rem}.compact-mode .project-group{margin-bottom:1rem}.compact-mode .project-header{padding:.2rem .55rem;margin-bottom:.55rem;font-size:.78rem}.compact-mode .project-path{font-size:.78rem}.compact-mode .cards-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.75rem}.compact-mode .card{padding:.75rem .9rem;gap:.55rem;border-radius:8px}.compact-mode .card-title{font-size:.875rem}.compact-mode .status-badge{font-size:.65rem;padding:.1rem .4rem}.compact-mode .meta-pills{gap:.25rem}.compact-mode .pill{font-size:.7rem;padding:.1rem .35rem}.compact-mode .activity-box{padding:.4rem .6rem;gap:.25rem;border-radius:6px}.compact-mode .activity-label{font-size:.62rem}.compact-mode .activity-text{font-size:.75rem;line-height:1.3;max-height:2.6em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.compact-mode .recent-steps{gap:.25rem;margin-top:.15rem}.compact-mode .step-chip{font-size:.65rem;padding:.05rem .3rem}.compact-mode .card-stats{padding-top:.35rem;gap:.35rem}.compact-mode .stat-key{font-size:.62rem}.compact-mode .stat-val{font-size:.78rem}.compact-mode .card-footer{font-size:.68rem;padding-top:.15rem}.compact-mode .card-origin-pill{font-size:.68rem;padding:.1rem .4rem}