@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=JetBrains+Mono&display=swap";
.react-grid-layout{transition:height .2s;position:relative}.react-grid-item{transition:left .2s,top .2s,width .2s,height .2s}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{z-index:1;will-change:width, height;transition:none}.react-grid-item.react-draggable-dragging{z-index:3;will-change:transform;transition:none}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{opacity:.2;z-index:2;-webkit-user-select:none;user-select:none;background:red;transition-duration:.1s}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{opacity:0;width:20px;height:20px;position:absolute}.react-grid-item:hover>.react-resizable-handle{opacity:1}.react-grid-item>.react-resizable-handle:after{content:"";border-bottom:2px solid #0006;border-right:2px solid #0006;width:5px;height:5px;position:absolute;bottom:3px;right:3px}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{cursor:sw-resize;bottom:0;left:0;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{cursor:se-resize;bottom:0;right:0}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{cursor:nw-resize;top:0;left:0;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{cursor:ne-resize;top:0;right:0;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{cursor:ew-resize;margin-top:-10px;top:50%}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{cursor:ns-resize;margin-left:-10px;left:50%}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
:root{--color-bg:#f0efeb;--color-surface:#f7f6f3;--color-surface-2:#eceae5;--color-text:#0a0a0a;--color-text-2:#767676;--color-text-3:#ababab;--color-accent:#f5c518;--color-border:#00000012;--color-border-hover:#00000029;--radius-card:16px;--radius-button:24px;--radius-input:12px;--radius-pill:99px;--radius-alert:12px;--shadow-card:0 1px 3px #0000000f, 0 4px 12px #0000000a;--shadow-hover:0 2px 8px #0000001a, 0 8px 24px #0000000f;--font-primary:"DM Sans", sans-serif;--font-mono:"JetBrains Mono", monospace;--sidebar-width:220px;--sidebar-col:52px;--topbar-height:56px;--footer-height:36px}[data-theme=dark]{--color-bg:#1c1c1e;--color-surface:#2c2c2e;--color-surface-2:#3a3a3c;--color-text:#f5f5f0;--color-text-2:#8e8e93;--color-text-3:#48484a;--color-border:#ffffff14;--color-border-hover:#ffffff2e;--shadow-card:0 1px 3px #0000004d, 0 4px 12px #0003;--shadow-hover:0 2px 8px #0006, 0 8px 24px #0000004d}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);height:100%;font-family:var(--font-primary);color:var(--color-text);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}.app-shell{height:100vh;display:flex;overflow:hidden}.sb{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);z-index:50;flex-direction:column;flex-shrink:0;transition:width .25s,background .2s;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}.sb.collapsed{width:var(--sidebar-col)}.sb-top{border-bottom:1px solid var(--color-border);flex-direction:column;flex-shrink:0;gap:6px;padding:10px 10px 8px;display:flex}.sb-top-row{align-items:center;gap:6px;display:flex}.logo-box{background:var(--color-text);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.logo-box span{color:var(--color-bg);font-size:10px;font-weight:700}.sb-brand{white-space:nowrap;flex:1;transition:opacity .2s;overflow:hidden}.sb.collapsed .sb-brand{opacity:0;pointer-events:none}.sname{color:var(--color-text);font-size:11px;font-weight:600}.ssub{color:var(--color-text-3);text-transform:uppercase;letter-spacing:.06em;font-size:8px}.toggle-btn{background:var(--color-surface-2);border:1px solid var(--color-border);cursor:pointer;width:100%;height:26px;color:var(--color-text-2);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;transition:background .15s,color .15s;display:flex}.toggle-btn:hover{background:var(--color-border-hover);color:var(--color-text)}.sb.collapsed .toggle-btn{width:32px;margin:0 auto;font-size:14px}.sb-nav{flex-direction:column;flex:1;gap:1px;padding:8px 6px;display:flex;overflow:hidden auto}.nl{color:var(--color-text-3);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:8px 6px 3px;font-size:8px;font-weight:600;transition:opacity .2s;overflow:hidden}.sb.collapsed .nl{opacity:0;height:0;margin:0;padding:0}.ni{cursor:pointer;color:var(--color-text-2);white-space:nowrap;border-radius:8px;align-items:center;gap:8px;padding:7px 8px;font-size:11px;text-decoration:none;transition:all .15s;display:flex;position:relative}.ni:hover{background:var(--color-surface-2);color:var(--color-text)}.ni.active{background:var(--color-surface-2);color:var(--color-text);font-weight:500}.ni-icon{flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;font-size:14px;display:flex}.ni-label{white-space:nowrap;transition:opacity .2s;overflow:hidden}.sb.collapsed .ni-label{opacity:0;width:0}.nbadge{color:#fff;background:#e03e3e;border-radius:99px;margin-left:auto;padding:1px 5px;font-size:8px;font-weight:700;transition:opacity .2s}.sb.collapsed .nbadge{opacity:0;width:0;margin:0;padding:0;overflow:hidden}.ni-dot{background:#e03e3e;border-radius:50%;width:6px;height:6px;display:none;position:absolute;top:6px;right:6px}.sb.collapsed .ni-dot{display:block}.sb-foot{border-top:1px solid var(--color-border);flex-direction:column;flex-shrink:0;gap:2px;padding:8px 6px;display:flex}.frow{align-items:center;gap:8px;padding:5px 2px;display:flex}.fav{background:var(--color-text);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.fav span{color:var(--color-bg);font-size:8px;font-weight:700}.f-info{white-space:nowrap;transition:opacity .2s;overflow:hidden}.sb.collapsed .f-info{opacity:0;width:0}.fname{color:var(--color-text);font-size:11px;font-weight:500}.frole{color:var(--color-text-3);font-size:9px}.theme-btn{cursor:pointer;color:var(--color-text-2);white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:7px 8px;font-size:11px;display:flex}.theme-btn:hover{background:var(--color-surface-2);color:var(--color-text)}.theme-btn-label{transition:opacity .2s;overflow:hidden}.sb.collapsed .theme-btn-label{opacity:0;width:0}.sb.collapsed .ni:hover:after{content:attr(data-label);left:calc(var(--sidebar-col) - 2px);background:var(--color-text);color:var(--color-bg);white-space:nowrap;z-index:999;pointer-events:none;border-radius:6px;padding:4px 8px;font-size:10px;position:absolute}.main-area{margin-left:var(--sidebar-current,var(--sidebar-width));flex-direction:column;flex:1;height:100vh;transition:margin-left .25s;display:flex;overflow:hidden}.topbar{height:var(--topbar-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 24px;transition:background .2s;display:flex}.topbar-left{align-items:center;display:flex}.topbar-center{flex:1;justify-content:center;align-items:center;display:flex}.topbar-stat{align-items:center;gap:6px;padding:0 16px;display:flex}.topbar-stat-val{color:var(--color-text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.topbar-stat-lbl{color:var(--color-text-3);text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:400}.topbar-divider{background:var(--color-border);flex-shrink:0;width:1px;height:14px;margin-left:16px}.topbar-title{color:var(--color-text);font-size:13px;font-weight:600}.topbar-right{align-items:center;gap:8px;display:flex}.badge{background:var(--color-surface-2);color:var(--color-text-2);border:1px solid var(--color-border);border-radius:99px;padding:4px 10px;font-size:10px;font-weight:500}.badge.live{background:var(--color-text);color:var(--color-bg)}.theme-toggle{background:var(--color-surface-2);border:1px solid var(--color-border);cursor:pointer;border-radius:99px;flex-shrink:0;width:36px;height:20px;transition:background .2s;position:relative}.theme-toggle:after{content:"";background:var(--color-text);border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px}[data-theme=dark] .theme-toggle:after{transform:translate(16px)}.theme-icon{color:var(--color-text-2);font-size:11px}.content-area{background:var(--color-bg);flex:1;padding:16px;overflow-y:auto}.widget-grid{grid-template-columns:repeat(12,1fr);align-items:start;gap:12px;display:grid}.widget{background:var(--color-surface);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:var(--shadow-card);min-width:120px;min-height:80px;padding:16px;transition:box-shadow .15s,border-color .15s,background .2s;position:relative;overflow:hidden}.widget:hover{box-shadow:var(--shadow-hover);border-color:var(--color-border-hover)}.widget-label{color:var(--color-text-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-size:9px;font-weight:600}.drag-handle{cursor:grab;opacity:.3;grid-template-columns:repeat(2,4px);gap:3px;display:grid;position:absolute;top:10px;right:10px}.drag-handle span{background:var(--color-text-2);border-radius:50%;width:4px;height:4px;display:block}.widget:hover .drag-handle{opacity:.6}.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-7{grid-column:span 7}.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}.stats-row{gap:0;display:flex}.stat-col{border-right:1px solid var(--color-border);flex:1;margin-right:20px;padding:0 20px 0 0}.stat-col:last-child{border-right:none;margin-right:0}.stat-val{color:var(--color-text);letter-spacing:-.02em;font-size:36px;font-weight:700;line-height:1}.stat-lbl{color:var(--color-text-3);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;font-size:9px}.agent-row{border-bottom:1px solid var(--color-border);align-items:center;gap:10px;padding:6px 0;display:flex}.agent-row:last-child{border-bottom:none}.agent-avatar{background:var(--color-surface-2);border-radius:8px;flex-shrink:0;width:28px;height:28px;overflow:hidden}.agent-avatar img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.agent-name{color:var(--color-text);flex:1;font-size:12px;font-weight:500}.agent-role{color:var(--color-text-2);font-size:10px}.agent-status-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.pipeline-steps{align-items:center;margin-top:8px;display:flex}.p-step{flex-direction:column;align-items:center;gap:4px;display:flex}.p-dot{border-radius:50%;width:10px;height:10px}.p-dot.done{background:var(--color-text-3)}.p-dot.active{background:var(--color-text)}.p-dot.pending{border:1px solid var(--color-border-hover);background:0 0}.p-line{background:var(--color-border);flex:1;height:1px;margin-bottom:14px}.p-name{color:var(--color-text-3);text-align:center;font-size:8px}.p-name.active{color:var(--color-text);font-weight:600}.alert-item{border-left:3px solid;border-radius:10px;align-items:flex-start;gap:8px;margin-bottom:6px;padding:8px 10px;display:flex}.alert-item:last-child{margin-bottom:0}.alert-item.warn{background:#f5c5180f;border-color:#f5c518}.alert-item.critical{background:#e03e3e0f;border-color:#e03e3e;animation:2s ease-in-out infinite pulse-border}.alert-item.info{border-color:var(--color-text-3);background:var(--color-surface-2)}@keyframes pulse-border{0%,to{opacity:1}50%{opacity:.5}}.alert-type{letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-2);flex-shrink:0;padding-top:1px;font-size:8px;font-weight:700}.alert-msg{color:var(--color-text);font-size:11px;line-height:1.4}.act-row{border-bottom:1px solid var(--color-border);border-radius:6px;align-items:center;gap:12px;padding:5px 6px;transition:background .15s;display:flex}.act-row:last-child{border-bottom:none}.act-row:hover{background:var(--color-surface-2)}.act-time{font-family:var(--font-mono);color:var(--color-text-3);flex-shrink:0;width:38px;font-size:10px}.act-agent{color:var(--color-text);flex-shrink:0;width:80px;font-size:11px;font-weight:600}.act-action{color:var(--color-text-2);flex:1;font-size:11px}.task-row{border-bottom:1px solid var(--color-border);align-items:center;gap:8px;padding:5px 0;display:flex}.task-row:last-child{border-bottom:none}.task-check{border:1px solid var(--color-border-hover);cursor:pointer;border-radius:4px;flex-shrink:0;width:14px;height:14px;transition:all .15s}.task-check.done{background:var(--color-text);border-color:var(--color-text)}.task-text{color:var(--color-text);font-size:12px}.task-text.done{color:var(--color-text-3);text-decoration:line-through}.weather-temp{color:var(--color-text);letter-spacing:-.03em;font-size:42px;font-weight:700;line-height:1}.weather-desc{color:var(--color-text-2);margin-top:4px;font-size:11px}.clock-time{color:var(--color-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:32px;font-weight:700;line-height:1}.clock-date{color:var(--color-text-2);margin-top:4px;font-size:11px}.footer{height:var(--footer-height);background:var(--color-surface);border-top:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 24px;transition:background .2s;display:flex}.footer-left{color:var(--color-text-3);font-size:10px}.footer-right{gap:16px;display:flex}.footer-link{color:var(--color-text-3);cursor:pointer;font-size:10px;text-decoration:none;transition:color .15s}.footer-link:hover{color:var(--color-text)}.btn-primary{background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-button);cursor:pointer;border:none;padding:8px 20px;font-size:12px;font-weight:500;transition:opacity .15s}.btn-primary:hover{opacity:.85}.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border-radius:var(--radius-button);border:1px solid var(--color-border);cursor:pointer;padding:8px 20px;font-size:12px;font-weight:500;transition:background .15s}.btn-secondary:hover{background:var(--color-border-hover)}@media (max-width:768px){.sidebar{transform:translate(-100%)}.main-area{margin-left:0}.col-4,.col-3,.col-2{grid-column:span 6}.col-6,.col-7,.col-8{grid-column:span 12}}.react-grid-item{transition:none!important}.react-grid-item.react-grid-placeholder{background:var(--color-accent)!important;opacity:.12!important;border-radius:var(--radius-card)!important}.react-resizable-handle{opacity:0!important;transition:opacity .15s!important}.react-grid-item:hover .react-resizable-handle{opacity:.4!important}.react-resizable-handle:after{border-color:var(--color-text)!important;border-width:0 2px 2px 0!important;border-radius:1px!important;width:8px!important;height:8px!important}.react-grid-item.react-draggable-dragging{box-shadow:var(--shadow-hover)!important;border-color:var(--color-border-hover)!important;z-index:100!important;cursor:grabbing!important}.drag-handle{cursor:grab!important}.react-grid-item.react-draggable-dragging .drag-handle{cursor:grabbing!important}