:root{--primary: #3755c3;--primary-dim: #2848b7;--primary-container: #dde1ff;--on-primary: #f8f7ff;--background: #f7f9fb;--surface-lowest: #ffffff;--surface-low: #f0f4f7;--surface: #e8eff3;--surface-high: #e1e9ee;--on-surface: #2a3439;--on-surface-variant: #566166;--outline-variant: #a9b4b9;--danger: #b42318;--danger-bg: #fee4e2;--success: #067647;--success-bg: #dcfae6;--warning: #b54708;--warning-bg: #fef0c7;--info: #175cd3;--info-bg: #d1e9ff;--muted-bg: #e2e8f0;--radius: 8px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow-lg: 0 24px 60px rgba(15, 23, 42, .18)}*{box-sizing:border-box}html,body,#root{height:100%;width:100%}body{margin:0;background:var(--background);color:var(--on-surface);font-family:Inter,Arial,sans-serif;font-size:14px;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.56}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2,.brand-copy strong{font-family:Manrope,Arial,sans-serif}code{background:#111827;border-radius:6px;color:#f8fafc;display:block;font-family:Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.45;margin-top:6px;overflow-wrap:anywhere;padding:8px 10px}.app-shell{display:flex;height:100vh;width:100vw}.sidebar{background:#f1f5f9;border-right:1px solid rgba(169,180,185,.25);display:flex;flex-direction:column;flex-shrink:0;height:100vh;width:256px}.brand-block{align-items:center;display:flex;gap:10px;min-height:64px;padding:14px}.brand-mark,.status-icon{align-items:center;display:inline-flex;justify-content:center}.brand-mark{background:var(--primary);border-radius:var(--radius);color:var(--on-primary);height:38px;width:38px}.brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.brand-copy strong{color:#111827;font-size:14px;font-weight:800}.brand-copy span,.settings-field span,.nav-label{color:var(--on-surface-variant);font-size:10px;font-weight:800;letter-spacing:0;text-transform:uppercase}.nav-section{display:flex;flex:1;flex-direction:column;gap:10px;overflow:auto;padding:8px 12px 14px}.nav-label{padding:8px 2px 0}.status-box{align-items:center;background:#ffffffad;border:1px solid rgba(169,180,185,.35);border-radius:var(--radius);display:grid;gap:10px;grid-template-columns:34px minmax(0,1fr);min-height:56px;padding:10px}.status-box strong,.status-box span,.settings-field span{display:block}.status-box strong{color:#111827;font-size:12px;font-weight:800}.status-box div>span{color:#64748b;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-icon{background:var(--muted-bg);border-radius:var(--radius);color:#475569;height:34px;width:34px}.tone-success .status-icon,.tone-success.status-box .status-icon{background:var(--success-bg);color:var(--success)}.tone-danger .status-icon,.tone-danger.status-box .status-icon{background:var(--danger-bg);color:var(--danger)}.tone-warning .status-icon,.tone-warning.status-box .status-icon{background:var(--warning-bg);color:var(--warning)}.tone-info .status-icon,.tone-info.status-box .status-icon{background:var(--info-bg);color:var(--info)}.settings-field{display:flex;flex-direction:column;gap:5px}.settings-field input,.filter-field input,.filter-field select{background:var(--surface-low);border:1px solid #d8e1e8;border-radius:var(--radius);color:var(--on-surface);min-height:34px;outline:0;padding:7px 10px;width:100%}.settings-field input{font-size:12px}.settings-field input:focus,.filter-field input:focus,.filter-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3755c324}.main-shell{display:flex;flex:1;flex-direction:column;height:100vh;min-width:0}.topbar{align-items:center;background:#f8fafceb;border-bottom:1px solid rgba(169,180,185,.22);display:flex;flex-shrink:0;height:56px;justify-content:space-between;padding:0 24px}.topbar-title{display:flex;flex-direction:column;gap:2px}.topbar-title span{color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase}.topbar-title strong{color:#111827;font-size:13px}.topbar-actions,.page-actions,.action-group{align-items:center;display:flex;gap:8px}.page{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;padding:24px}.page-header{align-items:flex-start;display:flex;flex-shrink:0;gap:16px;justify-content:space-between;margin-bottom:16px}.page-header h1{color:#111827;font-size:24px;font-weight:800;line-height:1.2}.page-header p,.panel-header p{color:var(--on-surface-variant);font-size:13px;line-height:1.5;margin-top:4px}.btn,.icon-button{align-items:center;border:1px solid transparent;border-radius:var(--radius);display:inline-flex;font-size:12px;font-weight:800;gap:6px;justify-content:center;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;white-space:nowrap}.btn{min-height:36px;padding:8px 12px}.btn.compact{min-height:32px;padding:6px 10px}.btn.full{width:100%}.btn:active,.icon-button:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{background:var(--primary-dim)}.btn-secondary{background:#fff;border-color:#cbd5e1;color:#334155}.btn-secondary:hover{background:#f1f5f9}.btn-warning{background:#f59e0b;color:#111827}.btn-warning:hover{background:#d97706;color:#fff}.icon-button{background:#fff;border-color:#dbe3ea;color:#475569;height:34px;padding:0;width:34px}.icon-button:hover,.icon-button.subtle:hover{background:#eef2ff;color:var(--primary)}.icon-button.subtle{background:transparent;border-color:transparent;color:#64748b}.icon-button.danger{background:transparent;border-color:transparent;color:#ef4444}.icon-button.danger:hover{background:var(--danger-bg);color:var(--danger)}.dashboard-stats{display:grid;flex-shrink:0;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.metric-card,.panel,.table-panel,.offline-banner{background:var(--surface-lowest);border:1px solid rgba(169,180,185,.4);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.metric-card{display:flex;flex-direction:column;min-height:88px;padding:14px}.metric-card>span,.filter-field span,.detail-list dt,.component-list-title{color:var(--on-surface-variant);font-size:10px;font-weight:800;letter-spacing:0;text-transform:uppercase}.metric-card div{align-items:baseline;display:flex;justify-content:space-between;margin-top:auto}.metric-card strong{color:#111827;font-family:Manrope,Arial,sans-serif;font-size:27px;font-weight:800}.metric-card small{color:var(--on-surface-variant);font-size:11px;font-weight:700}.metric-card.tone-warning{border-color:#b547084d}.metric-card.tone-success{border-color:#06764747}.offline-banner{align-items:center;display:grid;flex-shrink:0;gap:12px;grid-template-columns:auto minmax(0,1fr) auto;margin-bottom:14px;padding:12px 14px}.offline-banner>svg{color:var(--warning)}.agent-update-banner{border-color:#b5470859}.offline-banner strong{color:#111827;display:block;font-size:13px}.workbench-grid{display:grid;flex:1;gap:16px;grid-template-columns:minmax(0,1fr) minmax(340px,420px);min-height:0}.table-panel,.panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}.side-stack{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto}.side-stack>.panel:not(.app-detail-panel){flex-shrink:0}.app-detail-panel{flex:1 1 360px;overflow:auto}.app-detail-panel .component-list{flex:0 0 auto;overflow:visible}.page-filters{align-items:center;display:flex;flex-shrink:0;gap:12px;margin-bottom:14px}.page-filters.inline{margin:0;padding:14px 16px}.filter-field{display:flex;flex-direction:column;gap:5px}.filter-field.wide{flex:1}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon svg{color:#64748b;left:10px;position:absolute}.input-with-icon input{padding-left:32px}.table-wrap{flex:1;min-height:0;overflow:auto}table{border-collapse:collapse;min-width:860px;text-align:left;width:100%}thead{background:#f8fafc;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:5}th{color:#64748b;font-size:10px;font-weight:800;letter-spacing:0;padding:10px 16px;text-transform:uppercase;white-space:nowrap}td{color:#475569;font-size:13px;padding:12px 16px;vertical-align:middle}tbody tr{border-bottom:1px solid #f1f5f9;transition:background .16s ease}tbody tr:hover,tbody tr.selected-row{background:#f8fafc}.table-title{color:#172033;display:block;font-weight:800;line-height:1.35}.table-title.as-button{background:transparent;border:0;padding:0;text-align:left}.table-title:hover{color:var(--primary)}.table-subtitle{color:#64748b;display:block;font-size:11px;line-height:1.45;margin-top:2px}.table-empty{color:#64748b;font-size:13px;font-weight:700;padding:22px 16px;text-align:center}.compact-empty{padding:16px}.danger-text{color:var(--danger)}.action-col{position:sticky;right:0;text-align:right;white-space:nowrap}td.action-col{background:#fff;box-shadow:-10px 0 12px -14px #0f172a73}tbody tr:hover td.action-col,tbody tr.selected-row td.action-col{background:#f8fafc}.badge{border-radius:6px;display:inline-flex;font-size:11px;font-weight:800;line-height:1;padding:6px 8px;white-space:nowrap}.badge-primary,.badge-info{background:var(--info-bg);color:var(--info)}.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-muted{background:var(--muted-bg);color:#475569}.status-inline{align-items:center;display:inline-flex;gap:7px}.status-inline small{color:#64748b;font-size:11px;font-weight:700}.page-pager{align-items:center;background:#f8fafc;border-top:1px solid #e2e8f0;color:#64748b;display:flex;flex-shrink:0;font-size:12px;justify-content:space-between;padding:10px 14px}.panel-header{align-items:flex-start;border-bottom:1px solid #eef2f7;display:flex;flex-shrink:0;gap:14px;justify-content:space-between;padding:15px 16px}.panel-header h2{color:#111827;font-size:15px;font-weight:800}.panel-state{color:#64748b;flex-shrink:0}.panel-state.success{color:var(--success)}.panel-state.danger{color:var(--danger)}.panel-state.warning{color:var(--warning)}.panel-actions{align-items:center;display:inline-flex;flex-shrink:0;gap:7px}.detail-list{display:flex;flex-direction:column;gap:0;margin:0;padding:4px 16px 12px}.detail-list div{border-bottom:1px solid #eef2f7;display:grid;gap:10px;grid-template-columns:92px minmax(0,1fr);padding:10px 0}.detail-list div:last-child{border-bottom:0}.detail-list dd{color:#172033;margin:0;min-width:0;overflow-wrap:anywhere}.detail-list dt{margin:0}.agent-metrics{border-top:1px solid #eef2f7;display:grid;gap:8px;grid-template-columns:1fr 1fr;padding:12px 16px 14px}.agent-metrics span{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:7px;color:#64748b;display:inline-flex;font-size:11px;font-weight:700;gap:6px;min-width:0;overflow:hidden;padding:8px;text-overflow:ellipsis;white-space:nowrap}.agent-update-action{border-top:1px solid #eef2f7;display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 14px}.agent-update-action .btn{flex:1 1 150px}.component-list{border-top:1px solid #eef2f7;display:flex;flex-direction:column;gap:8px;padding:12px 16px 14px}.component-list-title{align-items:center;display:inline-flex;gap:6px}.component-item{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:var(--radius);display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.component-item strong,.component-item span{display:block}.component-item strong{color:#172033;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-item div>span{color:#64748b;font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-panel{flex:0 0 auto}.task-progress{background:#e2e8f0;border-radius:999px;height:8px;margin:12px 16px 0;overflow:hidden}.task-progress-bar{background:var(--primary);height:100%;transition:width .22s ease,background .16s ease}.task-progress-bar.tone-success{background:var(--success)}.task-progress-bar.tone-danger{background:var(--danger)}.task-progress-bar.tone-warning{background:var(--warning)}.task-components{padding-top:10px}.task-component-item .badge{min-width:44px;justify-content:center}.task-log-list{border-top:1px solid #eef2f7;display:flex;flex-direction:column;gap:0;max-height:190px;overflow:auto;padding:4px 16px 12px}.task-log-line{border-bottom:1px solid #eef2f7;display:grid;gap:8px;grid-template-columns:64px 46px minmax(0,1fr);padding:8px 0}.task-log-line:last-child{border-bottom:0}.task-log-line span,.task-log-line strong{color:#64748b;font-size:10px;font-weight:800;line-height:1.4;text-transform:uppercase}.task-log-line p{color:#172033;font-size:11px;line-height:1.45;margin:0;overflow-wrap:anywhere}.toast{align-items:center;background:#111827;border-radius:var(--radius);bottom:20px;box-shadow:var(--shadow-lg);color:#fff;display:inline-flex;font-size:13px;font-weight:700;gap:8px;max-width:min(420px,calc(100vw - 32px));padding:12px 14px;position:fixed;right:20px;z-index:120}.toast.tone-success{background:var(--success)}.toast.tone-danger{background:var(--danger)}.toast.tone-warning{background:var(--warning)}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1180px){.workbench-grid{grid-template-columns:1fr;overflow:auto}.side-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}@media(max-width:980px){body{overflow:auto}.app-shell{display:block;height:auto;min-height:100vh}.sidebar{border-bottom:1px solid rgba(169,180,185,.25);border-right:0;height:auto;width:100%}.nav-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.nav-label{grid-column:1 / -1}.main-shell{height:auto;min-height:0}.page{overflow:visible}.dashboard-stats,.side-stack{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.topbar,.page-header,.page-filters,.offline-banner{align-items:stretch;flex-direction:column}.topbar{height:auto;gap:12px;padding:12px 16px}.topbar-actions,.page-actions{flex-wrap:wrap}.topbar-actions .btn,.page-actions .btn,.page-actions a{flex:1}.page{padding:16px}.dashboard-stats,.side-stack,.nav-section{grid-template-columns:1fr}.offline-banner{display:flex}table{min-width:760px}.page-pager{align-items:flex-start;flex-direction:column;gap:6px}}