:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.agent-grid-container{width:100%;height:100%;overflow-y:auto;padding:0;background:#f5f5f7}.agent-grid-container::-webkit-scrollbar{width:0;height:0}.grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;animation:fadeInUp .5s cubic-bezier(.4,0,.2,1)}.grid-header h2{font-size:32px;color:#1d1d1f;margin:0;font-weight:600;letter-spacing:-.8px}.team-stats{display:flex;gap:12px}.stat-badge{display:flex;align-items:center;gap:8px;background:#0000000a;padding:8px 16px;border-radius:20px}.stat-label{font-size:12px;color:#86868b;font-weight:500}.stat-value{font-size:16px;color:#1d1d1f;font-weight:600}.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.agent-card{background:#ffffffb8;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000000a;border:.5px solid rgba(0,0,0,.04);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;animation:fadeInUp .5s cubic-bezier(.4,0,.2,1) backwards}.agent-card:nth-child(1){animation-delay:0ms}.agent-card:nth-child(2){animation-delay:60ms}.agent-card:nth-child(3){animation-delay:.12s}.agent-card:nth-child(4){animation-delay:.18s}.agent-card:nth-child(5){animation-delay:.24s}.agent-card:nth-child(6){animation-delay:.3s}.agent-card:nth-child(7){animation-delay:.36s}.agent-card:nth-child(8){animation-delay:.42s}.agent-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #0000001f}.agent-card:active{transform:translateY(-2px) scale(1.01)}.agent-avatar-container{position:relative;display:flex;justify-content:center;margin-bottom:16px}.agent-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.agent-card:hover .agent-avatar{transform:scale(1.1)}.avatar-emoji{position:relative;z-index:1}.status-indicator{position:absolute;bottom:4px;right:calc(50% - 44px);width:16px;height:16px;border-radius:50%;border:3px solid rgba(255,255,255,.9);z-index:2}.agent-card.status-working .status-indicator{animation:pulse-working 1.5s ease-in-out infinite}@keyframes pulse-working{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}.agent-card.status-thinking .status-indicator{animation:pulse-thinking 2s ease-in-out infinite}@keyframes pulse-thinking{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.6}}.agent-info{text-align:center}.agent-name{font-size:20px;font-weight:600;color:#1d1d1f;margin:0 0 4px;letter-spacing:-.4px}.agent-role{font-size:14px;color:#86868b;margin:0 0 12px;font-weight:500}.agent-status-badge{display:inline-block;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;margin-bottom:16px}.current-task{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;background:#00000005;border-radius:8px;margin-bottom:16px}.task-icon{font-size:14px}.task-text{font-size:13px;color:#1d1d1f;font-weight:500}.agent-metrics{display:flex;gap:16px;padding-top:16px;border-top:.5px solid rgba(0,0,0,.1)}.metric-item{flex:1;display:flex;flex-direction:column;gap:4px}.metric-label{font-size:11px;color:#86868b;font-weight:500}.metric-value{font-size:16px;color:#1d1d1f;font-weight:600;letter-spacing:-.3px}@media(max-width:768px){.grid-header{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}.grid-header h2{font-size:24px}.agent-grid{grid-template-columns:1fr;gap:16px}.agent-card{padding:20px}.agent-avatar{width:64px;height:64px;font-size:32px}.status-indicator{width:14px;height:14px;right:calc(50% - 36px)}.agent-name{font-size:18px}.agent-role{font-size:13px}}@media(max-width:480px){.team-stats{width:100%;justify-content:space-between}.stat-badge{flex:1;justify-content:center}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;color:#1d1d1f}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:100;background:#fffc;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.05);padding:0 max(20px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;height:52px}.header-left h1{font-size:17px;font-weight:600;letter-spacing:-.022em;color:#1d1d1f}.tab-navigation{display:flex;gap:8px;position:absolute;left:50%;transform:translate(-50%)}.tab-button{padding:6px 16px;border:none;background:transparent;color:#86868b;font-size:14px;font-weight:400;cursor:pointer;border-radius:12px;transition:all .2s ease}.tab-button:hover{background:#0000000a;color:#1d1d1f}.tab-button.active{background:#0000000f;color:#1d1d1f;font-weight:500}.header-right{display:flex;align-items:center;gap:12px}.settings-button,.user-avatar{width:32px;height:32px;border-radius:50%;border:none;background:#0000000a;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .2s ease}.settings-button:hover,.user-avatar:hover{background:#00000014}.app-content{flex:1;padding:40px max(20px,env(safe-area-inset-left));max-width:1400px;margin:0 auto;width:100%;animation:fadeInUp .4s cubic-bezier(.4,0,.2,1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-container,.error-container{display:flex;align-items:center;justify-content:center;min-height:400px}.loading-spinner{font-size:17px;color:#86868b;font-weight:400}.monitor-panel{display:flex;flex-direction:column;gap:48px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.metric-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;animation:fadeInUp .5s cubic-bezier(.4,0,.2,1) backwards}.metric-card:nth-child(1){animation-delay:0ms}.metric-card:nth-child(2){animation-delay:60ms}.metric-card:nth-child(3){animation-delay:.12s}.metric-card:nth-child(4){animation-delay:.18s}.metric-card:nth-child(5){animation-delay:.24s}.metric-card:nth-child(6){animation-delay:.3s}.metric-card:hover{border-color:#0000001a;box-shadow:0 4px 16px #0000000a;transform:translateY(-2px)}.metric-card.expanded{grid-column:span 2;background:#f9f9f9cc;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}.metric-main{padding:32px;display:flex;gap:20px}.metric-icon{font-size:32px;line-height:1;opacity:.9}.metric-content{flex:1;display:flex;flex-direction:column;gap:8px}.metric-header{display:flex;justify-content:space-between;align-items:center}.metric-label{font-size:13px;font-weight:400;color:#86868b;letter-spacing:-.008em}.time-range-selector{display:flex;gap:4px;background:#0000000a;padding:2px;border-radius:8px}.time-range-selector button{padding:4px 10px;border:none;background:transparent;color:#86868b;font-size:11px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s ease}.time-range-selector button:hover{background:#0000000f}.time-range-selector button.active{background:#fff;color:#1d1d1f;box-shadow:0 1px 3px #0000001a}.metric-value{font-size:48px;font-weight:300;letter-spacing:-.022em;color:#1d1d1f;line-height:1}.metric-details{display:flex;flex-direction:column;gap:4px;margin-top:8px}.metric-details span{font-size:13px;color:#86868b;font-weight:400}.metric-expanded{background:#ffffffb8;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(255,255,255,.18);padding:24px 32px 32px;display:flex;flex-direction:column;gap:24px;animation:expandIn .3s cubic-bezier(.4,0,.2,1);position:relative}.metric-expanded:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);pointer-events:none;z-index:-1}@keyframes expandIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.expanded-section{display:flex;flex-direction:column;gap:12px}.expanded-section h4{font-size:15px;font-weight:600;color:#1d1d1f;letter-spacing:-.022em}.mini-chart{height:80px;width:100%}.mini-trend-svg{width:100%;height:100%;color:#1d1d1f}.model-breakdown,.cost-breakdown,.error-types{display:flex;flex-direction:column;gap:8px}.breakdown-item,.error-item{display:flex;align-items:center;gap:12px;padding:8px 0}.breakdown-label,.error-label{flex:1;font-size:13px;color:#1d1d1f;font-weight:400}.breakdown-value,.error-value{font-size:15px;font-weight:500;color:#1d1d1f}.breakdown-percent,.error-percent{font-size:13px;color:#86868b;min-width:40px;text-align:right}.stat-large{font-size:32px;font-weight:300;color:#1d1d1f;letter-spacing:-.022em}.response-distribution{display:flex;flex-direction:column;gap:12px}.distribution-bar{height:8px;background:#0000000a;border-radius:4px;display:flex;overflow:hidden}.bar-segment{height:100%;transition:width .3s ease}.distribution-labels{display:flex;flex-direction:column;gap:4px}.distribution-labels span{font-size:12px;color:#86868b}.agent-tasks{display:flex;flex-direction:column;gap:12px}.task-item{display:flex;align-items:center;gap:12px}.task-agent{min-width:80px;font-size:13px;font-weight:500;color:#1d1d1f}.task-bar{flex:1;height:6px;background:#0000000a;border-radius:3px;overflow:hidden}.task-progress{height:100%;background:#1d1d1f;border-radius:3px;transition:width .3s ease}.task-count{min-width:30px;text-align:right;font-size:13px;font-weight:500;color:#1d1d1f}.efficiency-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.efficiency-item{display:flex;flex-direction:column;gap:4px}.efficiency-label{font-size:12px;color:#86868b;font-weight:400}.efficiency-value{font-size:21px;font-weight:500;color:#1d1d1f;letter-spacing:-.022em}.message-types{display:flex;gap:16px}.type-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#00000005;border-radius:12px}.type-icon{font-size:24px}.type-label{font-size:12px;color:#86868b;font-weight:400}.type-value{font-size:17px;font-weight:600;color:#1d1d1f}.activity-chart{display:flex;flex-direction:column;gap:8px}.activity-bars{display:flex;align-items:flex-end;gap:4px;height:60px}.activity-bar{flex:1;height:100%;display:flex;align-items:flex-end}.bar-fill{width:100%;background:#1d1d1f;border-radius:2px 2px 0 0;transition:height .3s ease}.activity-labels{display:flex;justify-content:space-between;font-size:11px;color:#86868b}.trend-section{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:32px}.trend-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.trend-header h3{font-size:21px;font-weight:600;letter-spacing:-.022em;color:#1d1d1f}.trend-controls{display:flex;gap:8px}.trend-controls button{padding:6px 16px;border:1px solid rgba(0,0,0,.1);background:transparent;color:#86868b;font-size:13px;font-weight:400;cursor:pointer;border-radius:12px;transition:all .2s ease}.trend-controls button:hover{background:#0000000a;border-color:#00000026}.trend-controls button.active{background:#1d1d1f;color:#fff;border-color:#1d1d1f}.trend-chart{height:240px;margin-bottom:24px}.simple-chart{width:100%;height:100%;position:relative}.simple-chart svg{width:100%;height:100%;color:#1d1d1f}.chart-labels{position:absolute;bottom:0;left:0;font-size:13px;color:#86868b;font-weight:400}.chart-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#86868b;font-size:15px}.trend-stats{display:flex;gap:32px;padding-top:24px;border-top:1px solid rgba(0,0,0,.06)}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:13px;color:#86868b;font-weight:400}.stat-value{font-size:21px;font-weight:500;color:#1d1d1f;letter-spacing:-.022em}.services-section{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:32px}.services-section h3{font-size:21px;font-weight:600;letter-spacing:-.022em;color:#1d1d1f;margin-bottom:24px}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.service-card{padding:20px;border:1px solid rgba(0,0,0,.06);border-radius:12px;display:flex;flex-direction:column;gap:12px;transition:all .2s ease}.service-card:hover{border-color:#0000001a;background:#00000005}.service-header{display:flex;justify-content:space-between;align-items:center}.service-name{font-size:15px;font-weight:500;color:#1d1d1f}.service-status{font-size:13px;font-weight:400;display:flex;align-items:center;gap:4px}.service-status.status-healthy{color:#34c759}.service-status.status-warning{color:#ff9500}.service-status.status-error{color:#ff3b30}.service-details{display:flex;flex-direction:column;gap:4px}.service-details span{font-size:13px;color:#86868b;font-weight:400}.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:20px 0}.agent-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.agent-card:hover{border-color:#0000001a;box-shadow:0 4px 16px #0000000a;transform:translateY(-2px)}.agent-header{display:flex;justify-content:space-between;align-items:flex-start}.agent-info h3{font-size:17px;font-weight:600;color:#1d1d1f;margin-bottom:4px}.agent-role{font-size:13px;color:#86868b;font-weight:400}.agent-status{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:4px 12px;border-radius:12px}.agent-status.status-working{background:#34c7591a;color:#34c759}.agent-status.status-thinking{background:#ff95001a;color:#ff9500}.agent-status.status-idle{background:#86868b1a;color:#86868b}.status-indicator{width:6px;height:6px;border-radius:50%;background:currentColor}.status-working .status-indicator,.status-thinking .status-indicator{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.agent-task{font-size:15px;color:#1d1d1f;font-weight:400;min-height:40px}.agent-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.06)}.metric-item{display:flex;flex-direction:column;gap:4px}.metric-item-label{font-size:11px;color:#86868b;font-weight:400;text-transform:uppercase;letter-spacing:.06em}.metric-item-value{font-size:15px;font-weight:500;color:#1d1d1f}@media(max-width:768px){.app-content{padding:24px 16px}.metrics-grid{grid-template-columns:1fr}.metric-card.expanded{grid-column:span 1}.metric-main{padding:24px}.metric-expanded{padding:20px 24px 24px}.metric-value{font-size:40px}.time-range-selector button{padding:6px 12px;font-size:12px}.message-types{flex-direction:column}.efficiency-stats{grid-template-columns:1fr}.activity-bars{height:50px}.tab-navigation{position:static;transform:none}.header-left h1{display:none}.services-grid,.agent-grid{grid-template-columns:1fr}}