@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--sidebar-bg: #ffffff;--sidebar-bg-hover: #f4f5f0;--sidebar-bg-active: #e9f5e9;--sidebar-text: #6b7280;--sidebar-text-hover: #1f2937;--sidebar-text-active: #16803c;--sidebar-border: #f0f0ec;--sidebar-width: 252px;--body-bg: #f7f7f3;--surface: #ffffff;--surface-hover: #fafaf7;--surface-border: #eeefe9;--text-primary: #1a1d1a;--text-secondary: #4b5548;--text-tertiary: #8c9488;--text-on-accent: #ffffff;--accent: #16a34a;--accent-hover: #15803d;--accent-light: #dcfce7;--accent-subtle: rgba(22, 163, 74, .06);--coral: #f97066;--coral-bg: #fff1f0;--yellow: #f5b731;--yellow-bg: #fef9ec;--pink: #ec73a8;--pink-bg: #fdf2f7;--teal: #2d8c7f;--teal-bg: #ecfdf5;--success: #16a34a;--success-bg: #dcfce7;--success-text: #14532d;--warning: #d97706;--warning-bg: #fef3c7;--warning-text: #78350f;--danger: #dc2626;--danger-bg: #fee2e2;--danger-text: #7f1d1d;--info: #2563eb;--info-bg: #dbeafe;--info-text: #1e3a8a;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--space-4xl: 40px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 1px 4px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .05);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .06);--shadow-card: 0 1px 3px rgba(0, 0, 0, .03), 0 0 0 1px rgba(0, 0, 0, .02);--ease: cubic-bezier(.4, 0, .2, 1);--duration: .16s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{height:100%;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary);background:var(--body-bg)}#root{height:100%}a{color:inherit;text-decoration:none}.shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;padding:var(--space-2xl) var(--space-lg);position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto}.sidebar .brand{font-size:19px;font-weight:700;color:var(--text-primary);letter-spacing:-.4px;padding:0 var(--space-md);margin-bottom:var(--space-2xl);display:flex;align-items:center;gap:10px}.sidebar .brand-icon{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar .brand-icon svg{color:#fff}.sidebar .admin-profile{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);margin-bottom:var(--space-xl);border-radius:var(--radius-md);background:var(--body-bg)}.sidebar .admin-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sidebar .admin-info{overflow:hidden}.sidebar .admin-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar .admin-role{font-size:11px;color:var(--text-tertiary);text-transform:capitalize}.sidebar .nav-section-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-tertiary);padding:var(--space-lg) var(--space-md) var(--space-sm)}.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1}.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px var(--space-md);border-radius:var(--radius-md);color:var(--sidebar-text);font-size:13.5px;font-weight:500;transition:all var(--duration) var(--ease)}.sidebar nav a .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar nav a:hover{background:var(--sidebar-bg-hover);color:var(--sidebar-text-hover)}.sidebar nav a.active{background:var(--sidebar-bg-active);color:var(--sidebar-text-active);font-weight:600}.sidebar .logout{display:flex;align-items:center;gap:var(--space-sm);background:transparent;color:var(--sidebar-text);border:1px solid var(--sidebar-border);padding:10px var(--space-lg);border-radius:var(--radius-md);cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all var(--duration) var(--ease);margin-top:var(--space-lg)}.sidebar .logout:hover{background:var(--sidebar-bg-hover);color:var(--text-primary);border-color:#ddd}.content-wrapper{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-4xl);background:var(--body-bg);border-bottom:1px solid var(--surface-border);position:sticky;top:0;z-index:50}.topbar-search{display:flex;align-items:center;gap:var(--space-sm);padding:9px 16px;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-full);color:var(--text-tertiary);font-size:13px;min-width:220px;cursor:text;transition:border-color var(--duration) var(--ease)}.topbar-search:hover{border-color:#d1d5db}.topbar-search svg{flex-shrink:0;opacity:.5}.topbar-user{display:flex;align-items:center;gap:var(--space-md)}.topbar-user-info{text-align:right}.topbar-user-name{display:block;font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.3}.topbar-user-role{display:block;font-size:11px;color:var(--text-tertiary);text-transform:capitalize}.topbar-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;border:2px solid var(--surface);box-shadow:var(--shadow-xs)}.content{flex:1;min-height:0;padding:var(--space-3xl) var(--space-4xl);overflow-y:auto;display:flex;flex-direction:column}.content:has(.page-fullheight){overflow:hidden}.page{max-width:1100px}.page-header{margin-bottom:var(--space-3xl)}.page h1{font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--text-primary);margin:0}.page .page-subtitle{font-size:14px;color:var(--text-tertiary);margin-top:var(--space-xs);font-weight:400}.card{background:var(--surface);border-radius:var(--radius-xl);padding:var(--space-2xl);border:1px solid var(--surface-border);margin-bottom:var(--space-xl);box-shadow:var(--shadow-card);transition:box-shadow var(--duration) var(--ease)}.card:hover{box-shadow:var(--shadow-sm)}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.section-head h2{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px}.muted{color:var(--text-tertiary);font-size:13px;line-height:1.6}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);font-size:11.5px;font-weight:600;letter-spacing:.1px;text-transform:capitalize;white-space:nowrap}.pill:before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}.pill-healthy,.pill-balanced,.pill-completed{background:var(--success-bg);color:var(--success-text)}.pill-healthy:before,.pill-balanced:before,.pill-completed:before{background:var(--success)}.pill-warning,.pill-processing{background:var(--warning-bg);color:var(--warning-text)}.pill-warning:before,.pill-processing:before{background:var(--warning)}.pill-danger,.pill-critical,.pill-failed{background:var(--danger-bg);color:var(--danger-text)}.pill-danger:before,.pill-critical:before,.pill-failed:before{background:var(--danger)}.pill-pending{background:var(--info-bg);color:var(--info-text)}.pill-pending:before{background:var(--info)}.pill-unknown{background:#f3f4f6;color:#6b7280}.pill-unknown:before{background:#9ca3af}.pill-auto{background:var(--success-bg);color:var(--success-text)}.pill-auto:before{background:var(--success)}.pill-manual{background:var(--warning-bg);color:var(--warning-text)}.pill-manual:before{background:var(--warning)}.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg)}.health-card{background:var(--body-bg);border-radius:var(--radius-lg);padding:var(--space-xl);position:relative;overflow:hidden;border:1px solid transparent;transition:border-color var(--duration) var(--ease)}.health-card:hover{border-color:var(--surface-border)}.health-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px}.health-card.status-healthy:before{background:var(--success)}.health-card.status-warning:before{background:var(--warning)}.health-card.status-critical:before{background:var(--danger)}.health-label{font-size:11.5px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-sm)}.health-value{font-size:28px;font-weight:700;letter-spacing:-.5px;color:var(--text-primary);margin-bottom:var(--space-sm);line-height:1.2}.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-md)}.kv{background:var(--body-bg);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);transition:all var(--duration) var(--ease);border:1px solid transparent}.kv:hover{border-color:var(--surface-border);background:#f2f2ec}.kv-label{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.kv-value{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.kv-danger .kv-value{color:var(--danger)}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}.data-table th{padding:var(--space-md) var(--space-lg);text-align:left;font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--surface-border);background:var(--body-bg);position:sticky;top:0;white-space:nowrap}.data-table th:first-child{border-radius:var(--radius-md) 0 0 0;padding-left:var(--space-2xl)}.data-table th:last-child{border-radius:0 var(--radius-md) 0 0;padding-right:var(--space-2xl)}.data-table td{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--surface-border);color:var(--text-secondary);vertical-align:middle}.data-table td:first-child{padding-left:var(--space-2xl)}.data-table td:last-child{padding-right:var(--space-2xl)}.data-table tbody tr{transition:background var(--duration) var(--ease)}.data-table tbody tr:hover{background:var(--accent-subtle)}.data-table tbody tr:last-child td{border-bottom:none}.data-table .empty{text-align:center;padding:var(--space-4xl);color:var(--text-tertiary);font-size:14px}.monospace{font-family:JetBrains Mono,SF Mono,Menlo,monospace;font-size:12px;color:var(--text-secondary);font-weight:500}button{font-family:Outfit,sans-serif;background:var(--accent);color:var(--text-on-accent);border:none;padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:13px;transition:all var(--duration) var(--ease);display:inline-flex;align-items:center;gap:var(--space-sm)}button:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 2px 8px #16a34a33}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.4;cursor:not-allowed}button.secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--surface-border)}button.secondary:hover:not(:disabled){background:var(--body-bg);box-shadow:var(--shadow-xs);border-color:#ddd}button.danger{background:var(--danger)}button.danger:hover:not(:disabled){background:#b91c1c;box-shadow:0 2px 8px #dc262633}button.ghost{background:transparent;color:var(--text-secondary);padding:8px 14px}button.ghost:hover:not(:disabled){background:var(--body-bg);color:var(--text-primary);box-shadow:none}button.sm{padding:6px 14px;font-size:12px;border-radius:var(--radius-sm)}.action-row{display:flex;gap:var(--space-md);align-items:center}.action-row.full{grid-column:1 / -1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}.form-grid .full{grid-column:1 / -1}.form-grid label,.login-card label{display:flex;flex-direction:column;font-size:12.5px;color:var(--text-secondary);font-weight:600;gap:var(--space-sm)}input,select{font-family:Outfit,sans-serif;padding:10px 14px;border:1px solid var(--surface-border);border-radius:var(--radius-md);font-size:14px;color:var(--text-primary);background:var(--surface);transition:all var(--duration) var(--ease)}input:hover,select:hover{border-color:#d1d5db}input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}input::placeholder{color:var(--text-tertiary);font-weight:400}.toolbar{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);align-items:center}.toolbar select{min-width:160px}.error{background:var(--danger-bg);color:var(--danger-text);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);margin-bottom:var(--space-xl);font-size:13px;font-weight:500;border-left:3px solid var(--danger)}.success{background:var(--success-bg);color:var(--success-text);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);margin-bottom:var(--space-xl);font-size:13px;font-weight:500;border-left:3px solid var(--success)}.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#e8eae2;position:relative;overflow:hidden}.login-wrapper:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.08) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none}.login-wrapper:after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(245,183,49,.06) 0%,transparent 70%);bottom:-150px;left:-100px;pointer-events:none}.login-card{background:var(--surface);padding:40px 36px;border-radius:var(--radius-2xl);width:100%;max-width:400px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--space-xl);position:relative;z-index:1;animation:loginFade .5s var(--ease) both}@keyframes loginFade{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.login-card .login-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-xs)}.login-card .login-brand-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--accent);display:flex;align-items:center;justify-content:center}.login-card h1{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text-primary)}.login-card p{margin:0}.login-card button[type=submit]{width:100%;padding:12px;font-size:14px;justify-content:center;margin-top:var(--space-sm);border-radius:var(--radius-md)}.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-xl)}.kpi-card{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);position:relative;overflow:hidden;box-shadow:var(--shadow-card)}.kpi-indicator{position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0}.kpi-label{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}.kpi-value{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text-primary);line-height:1.3}.kpi-sub{font-size:11.5px;color:var(--text-tertiary);margin-top:1px}.card-compact{padding:var(--space-xl)}.card-compact .section-head{margin-bottom:var(--space-lg)}.chart-row{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-xl)}.chart-stack{display:flex;flex-direction:column;gap:var(--space-xl)}.chart-current-value{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.chart-svg{width:100%;height:auto;display:block}.chart-label{font-size:9px;fill:var(--text-tertiary);font-family:Outfit,sans-serif}.chart-overlay-label{position:absolute;bottom:32px;left:50%;transform:translate(-50%);font-size:11px;color:var(--text-tertiary);background:#f7f7f3cc;padding:3px 12px;border-radius:var(--radius-full)}.chart-metrics{display:flex;gap:var(--space-lg);padding-top:var(--space-lg);margin-top:var(--space-lg);border-top:1px solid var(--surface-border);flex-wrap:wrap}.chart-metric{display:flex;flex-direction:column;gap:1px;min-width:70px}.chart-metric-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-tertiary)}.chart-metric-value{font-size:14px;font-weight:700;color:var(--text-primary);text-transform:uppercase}.chart-metric-danger{color:var(--danger)}.vol-compact{display:flex;align-items:center;gap:var(--space-xl)}.vol-donut-wrap{position:relative;flex-shrink:0;width:80px;height:80px}.vol-donut-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.vol-ratio-val{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.1}.vol-ratio-lbl{font-size:9px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.vol-legend{flex:1;display:flex;flex-direction:column;gap:6px}.vol-row{display:flex;align-items:center;gap:6px;font-size:12.5px}.vol-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.vol-name{flex:1;color:var(--text-secondary);font-weight:500}.vol-amt{font-weight:700;color:var(--text-primary)}.vol-bar-track{height:6px;background:var(--body-bg);border-radius:var(--radius-full);overflow:hidden}.vol-bar-fill{height:100%;border-radius:var(--radius-full);transition:width .5s var(--ease);min-width:2px}.rev-chart{display:flex;flex-direction:column;gap:10px}.rev-row{display:grid;grid-template-columns:90px 1fr 60px;gap:var(--space-md);align-items:center}.rev-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-secondary)}.rev-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.rev-bar-track{height:7px;background:var(--body-bg);border-radius:var(--radius-full);overflow:hidden}.rev-bar-fill{height:100%;border-radius:var(--radius-full);transition:width .5s var(--ease);min-width:2px}.rev-val{font-size:12px;font-weight:700;color:var(--text-primary);text-align:right}.page-fullheight{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.page-fullheight .kpi-strip,.page-fullheight .toolbar,.page-fullheight .error,.page-fullheight .page-header{flex-shrink:0}.table-scroll-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:0!important;overflow:hidden;margin-bottom:0}.table-scroll-wrap{flex:1;min-height:0;overflow-y:auto;overflow-x:auto}.table-scroll-wrap .data-table thead{position:sticky;top:0;z-index:2}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.page{animation:fadeIn .3s var(--ease) both}.card{animation:fadeIn .35s var(--ease) both}.card:nth-child(2){animation-delay:50ms}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.page-loading{display:flex;flex-direction:column;gap:var(--space-xl)}.skeleton{background:linear-gradient(90deg,#edeee8 25%,#e3e4de,#edeee8 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-xl)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width: 1024px){:root{--sidebar-width: 220px}.content{padding:var(--space-2xl)}.topbar{padding:var(--space-lg) var(--space-2xl)}}@media (max-width: 768px){.sidebar{display:none}.content-wrapper{margin-left:0}.content{padding:var(--space-xl)}.topbar{padding:var(--space-md) var(--space-xl)}.topbar-search{min-width:auto;flex:1}.form-grid{grid-template-columns:1fr}.kv-grid,.health-grid,.kpi-strip{grid-template-columns:1fr 1fr}.chart-row{grid-template-columns:1fr}.vol-compact{flex-direction:column}.rev-row{grid-template-columns:80px 1fr 50px}}.confirm-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-card{background:#fff;border-radius:10px;padding:20px 22px;width:min(440px,90vw);box-shadow:0 12px 40px #0000002e}.confirm-card h3{margin:0 0 8px}.confirm-card .countdown{color:#888;font-size:13px;margin-top:8px}.confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.confirm-actions .primary{background:#c0392b;color:#fff;border:0;padding:8px 14px;border-radius:6px}.confirm-actions .primary:disabled{background:#c0392b88}.confirm-actions button{padding:8px 14px;border-radius:6px;border:1px solid #ccc;background:#f7f7f7}
