@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--brand-blue:#2563eb;--brand-indigo:#6366f1;--brand-violet:#8b5cf6;--canvas:#f3f4f6;--surface:#fff;--surface-raised:#f8fafc;--border:#e5e7eb;--text-primary:#111827;--text-secondary:#6b7280;--text-muted:#9ca3af;--success:#059669;--success-bg:#ecfdf5;--warning:#d97706;--warning-bg:#fffbeb;--danger:#dc2626;--danger-bg:#fef2f2;--info:#2563eb;--info-bg:#eff6ff;--neutral-bg:var(--surface-raised);--shadow-overlay:0 8px 24px #00000080;--focus-ring:0 0 0 2px #2563eb80;--focus-border:var(--brand-blue);--radius-badge:4px;--radius-btn:8px;--radius-card:8px;--radius-stat:12px;--radius-avatar:50%;--radius-pill:100px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--gutter:24px;--gutter-mobile:12px;--type-page-title:20px;--type-section:15px;--type-card-title:14px;--type-body:13px;--type-label:11px;--type-caption:11px;--type-mono:13px;--lh-page-title:28px;--lh-section:22px;--lh-card-title:20px;--lh-body:20px;--lh-label:16px;--lh-caption:16px;--lh-mono:18px;--sidebar-w:240px;--sidebar-bg:var(--surface);--nav-item-h:34px;--table-header-h:34px;--table-row-h:36px;--motion-fast:.1s ease;--motion-base:.15s ease;--motion-slow:.16s ease;--bg-base:var(--canvas);--bg-surface:var(--surface);--bg-elevated:var(--surface);--bg-hover:var(--surface-raised);--text-tertiary:var(--text-muted);--accent-primary:var(--brand-blue);--accent-hover:#1d4ed8;--border-light:var(--border);--border-focus:var(--focus-border);--success-bg-color:var(--success-bg);--warning-bg-color:var(--warning-bg);--danger-bg-color:var(--danger-bg);--info-bg-color:var(--info-bg);--radius-sm:var(--radius-btn);--radius-md:var(--radius-btn);--radius-lg:var(--radius-stat);--radius-full:var(--radius-pill);--space-1:var(--sp-1);--space-2:var(--sp-2);--space-3:var(--sp-3);--space-4:var(--sp-4);--space-6:var(--sp-6);--space-8:var(--sp-8);--text-xs:11px;--text-sm:13px;--text-base:15px;--text-lg:15px;--text-xl:20px;--text-2xl:24px;--text-3xl:20px;--radius:var(--radius-btn);--accent:var(--brand-blue);--accent-light:#2563eb1a;--accent-mid:#6366f126;--accent-glow:#2563eb4d;--accent-gradient:var(--brand-blue);--shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-glow:var(--focus-ring);--transition:var(--motion-base);--bg-card:var(--surface-raised);--bg-secondary:var(--surface-raised);--border-color:var(--border)}[data-theme=dark]{--canvas:#0f0f0f;--surface:#1a1a1a;--surface-raised:#2a2a2a;--border:#333;--text-primary:#fafafa;--text-secondary:#a1a1a1;--text-muted:#737373;--brand-blue:#3b82f6;--info:#3b82f6;--info-bg:#3b82f61a;--success:#22c55e;--success-bg:#22c55e1a;--warning:#f59e0b;--warning-bg:#f59e0b1a;--danger:#ef4444;--danger-bg:#ef44441a;--focus-ring:0 0 0 2px #3b82f680;--focus-border:#3b82f6;--sidebar-bg:var(--surface);--bg-base:var(--canvas);--bg-surface:var(--surface);--bg-elevated:var(--surface);--bg-hover:var(--surface-raised);--text-tertiary:var(--text-muted);--accent-primary:var(--brand-blue);--accent-hover:#60a5fa;--border-light:var(--border);--border-focus:var(--focus-border);--success-bg-color:var(--success-bg);--warning-bg-color:var(--warning-bg);--danger-bg-color:var(--danger-bg);--info-bg-color:var(--info-bg);--accent-light:#3b82f61a;--accent-glow:#3b82f64d;--accent-gradient:var(--brand-blue);--bg-card:var(--surface-raised);--bg-secondary:var(--surface-raised);--border-color:var(--border)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{background-color:var(--canvas);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:var(--type-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--text-primary);letter-spacing:normal;font-weight:600}.page-title{font-size:var(--type-page-title);line-height:var(--lh-page-title);letter-spacing:-.02em;color:var(--text-primary);font-weight:600}.section-heading{font-size:var(--type-section);line-height:var(--lh-section);color:var(--text-primary);font-weight:600}.card-title{font-size:var(--type-card-title);line-height:var(--lh-card-title);color:var(--text-primary);font-weight:600}.body-text{font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-secondary);font-weight:400}.label-text{font-size:var(--type-label);line-height:var(--lh-label);letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);font-weight:500}.caption-text{font-size:var(--type-caption);line-height:var(--lh-caption);color:var(--text-muted);font-weight:400}.mono-text{font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--type-mono);line-height:var(--lh-mono);font-variant-numeric:tabular-nums;font-weight:500}.card-label{font-size:var(--type-label);line-height:var(--lh-label);letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);font-weight:500}p{color:var(--text-secondary);font-size:var(--type-body)}a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:2px solid var(--focus-border);outline-offset:2px;border-radius:2px}.app-container{min-height:100vh;display:flex;position:relative}.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);padding:var(--sp-4);z-index:40;height:100vh;transition:transform var(--motion-slow), width var(--motion-slow);flex-direction:column;display:flex;position:fixed;overflow:hidden auto}.main-content{margin-left:var(--sidebar-w);padding:var(--gutter);background:var(--canvas);flex:1;min-height:100vh}.mobile-header{padding:var(--sp-3) var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border);z-index:30;justify-content:space-between;align-items:center;display:none;position:sticky;top:0}.nav-group-label{font-size:var(--type-label);line-height:var(--lh-label);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:var(--sp-1) var(--sp-2);margin-top:var(--sp-3);margin-bottom:var(--sp-1);font-weight:500}.nav-item{align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);height:var(--nav-item-h);color:var(--text-secondary);border-radius:var(--radius-btn);font-weight:500;font-size:var(--type-body);transition:color var(--motion-fast), background-color var(--motion-fast);white-space:nowrap;cursor:pointer;background:0 0;border:none;width:100%;line-height:1;text-decoration:none;display:flex;position:relative;overflow:hidden}.nav-item:hover{color:var(--text-primary);background:var(--surface-raised)}.nav-item.active{color:var(--brand-blue);background:0 0;font-weight:600}.nav-item.active:before{content:"";background:var(--brand-blue);border-radius:0 var(--radius-badge) var(--radius-badge) 0;width:3px;position:absolute;top:25%;bottom:25%;left:0}.nav-item:focus-visible{outline:2px solid var(--focus-border);outline-offset:-2px}.nav-icon{opacity:.7;width:16px;height:16px;transition:opacity var(--motion-fast);flex-shrink:0}.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}.top-bar{margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.top-bar-title{font-size:var(--type-page-title);line-height:var(--lh-page-title);letter-spacing:-.02em;color:var(--text-primary);font-weight:600}.top-bar-actions{align-items:center;gap:var(--sp-2);display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--sp-4)}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-stat);padding:var(--sp-4)}.btn{justify-content:center;align-items:center;gap:var(--sp-2);font-family:Inter,sans-serif;font-size:var(--type-body);border-radius:var(--radius-btn);cursor:pointer;transition:background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);white-space:nowrap;height:32px;padding:0 var(--sp-3);border:1px solid #0000;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}.btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.btn-sm{height:28px;padding:0 var(--sp-2);font-size:var(--type-label)}.btn-md{height:32px;padding:0 var(--sp-3)}.btn-lg{height:36px;padding:0 var(--sp-4);font-size:var(--type-card-title)}.btn-primary{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}.btn-primary:hover:not(:disabled){background:var(--accent-hover,#1d4ed8);border-color:var(--accent-hover,#1d4ed8)}.btn-primary:active:not(:disabled){background:#1e40af}.btn-secondary{background:var(--surface-raised);color:var(--text-primary);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border);border-color:var(--border)}.btn-ghost{color:var(--text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--surface-raised);color:var(--text-primary)}.btn-destructive{color:var(--danger);border-color:var(--danger);background:0 0}.btn-destructive:hover:not(:disabled){background:var(--danger-bg)}.btn-danger{composes:btn-destructive}.input-group{gap:var(--sp-1);margin-bottom:var(--sp-4);flex-direction:column;display:flex}.input-label{font-size:var(--type-label);line-height:var(--lh-label);letter-spacing:.02em;color:var(--text-secondary);text-transform:uppercase;font-weight:500}.input-field{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-btn);padding:0 var(--sp-3);height:32px;color:var(--text-primary);font-family:Inter,sans-serif;font-size:var(--type-body);line-height:var(--lh-body);transition:border-color var(--motion-fast), box-shadow var(--motion-fast);outline:none;width:100%}.input-field::placeholder{color:var(--text-muted)}.input-field:focus{border-color:var(--focus-border);box-shadow:var(--focus-ring);background:var(--surface)}.input-field.error{border-color:var(--danger)}.input-field.error:focus{box-shadow:0 0 0 2px #dc26264d}.input-helper{font-size:var(--type-caption);color:var(--text-muted)}.input-helper.error{color:var(--danger)}textarea.input-field{height:auto;padding:var(--sp-2) var(--sp-3);resize:vertical;min-height:80px;line-height:var(--lh-body)}select.input-field{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-right:var(--sp-8)}.filter-bar{gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);margin-bottom:var(--sp-3);flex-wrap:wrap;align-items:center;display:flex}.filter-chip{align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);background:var(--brand-blue);color:#fff;border-radius:var(--radius-badge);font-size:var(--type-caption);font-weight:500;display:inline-flex}.filter-chip-close{cursor:pointer;color:#fffc;background:0 0;border:none;align-items:center;padding:0;display:flex}.badge{align-items:center;gap:var(--sp-1);padding:0 var(--sp-2);border-radius:var(--radius-badge);height:20px;font-size:var(--type-caption);white-space:nowrap;font-weight:500;line-height:1;display:inline-flex}.pill{align-items:center;gap:var(--sp-1);padding:0 var(--sp-2);border-radius:var(--radius-pill);height:20px;font-size:var(--type-caption);white-space:nowrap;font-weight:500;line-height:1;display:inline-flex}.badge-success,.pill-success{background:var(--success-bg);color:var(--success)}.badge-warning,.pill-warning{background:var(--warning-bg);color:var(--warning)}.badge-danger,.pill-danger{background:var(--danger-bg);color:var(--danger)}.badge-info,.pill-info{background:var(--info-bg);color:var(--info)}.badge-gray,.pill-gray{background:var(--surface-raised);color:var(--text-secondary);border:1px solid var(--border)}.table-shell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}.table-wrapper:after{content:"";display:none}.table{border-collapse:collapse;text-align:left;width:100%;font-size:var(--type-body)}.table thead{z-index:2;background:var(--surface);position:sticky;top:0}.table th{height:var(--table-header-h);padding:0 var(--sp-3);font-size:var(--type-label);line-height:var(--lh-label);letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface);font-weight:500}.table th[scope=col]{font-weight:500}.table td{height:var(--table-row-h);padding:0 var(--sp-3);border-bottom:1px solid var(--border);color:var(--text-primary);font-size:var(--type-body);vertical-align:middle;white-space:nowrap}.table tr:last-child td{border-bottom:none}.table tbody tr{transition:background-color var(--motion-fast)}.table tbody tr:hover td{background:var(--surface-raised)}.table tbody tr.selected td{background:var(--info-bg)}.table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table th.sortable:hover{color:var(--text-primary)}.table th.col-check,.table td.col-check{width:40px;padding:0 var(--sp-2)}.table td.tabular{font-family:JetBrains Mono,monospace;font-size:var(--type-mono);font-variant-numeric:tabular-nums}.bulk-action-bar{padding:var(--sp-2) var(--sp-4);background:var(--info-bg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:var(--sp-3);display:flex}.bulk-action-bar-count{font-size:var(--type-body);color:var(--info);font-weight:600}.pagination{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;display:flex}.pagination-info{font-size:var(--type-caption);color:var(--text-secondary);font-variant-numeric:tabular-nums}.pagination-controls{align-items:center;gap:var(--sp-1);display:flex}.page-btn{border-radius:var(--radius-badge);border:1px solid var(--border);background:var(--surface);width:28px;height:28px;color:var(--text-primary);font-size:var(--type-caption);cursor:pointer;transition:background-color var(--motion-fast), border-color var(--motion-fast);justify-content:center;align-items:center;font-weight:500;display:inline-flex}.page-btn:hover:not(:disabled){background:var(--surface-raised)}.page-btn.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.tabs{border-bottom:1px solid var(--border);-ms-overflow-style:none;scrollbar-width:none;gap:0;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);height:36px;font-size:var(--type-body);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--motion-fast), border-color var(--motion-fast);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;font-weight:500;display:inline-flex}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--brand-blue);border-bottom-color:var(--brand-blue);font-weight:600}.tab:focus-visible{outline:2px solid var(--focus-border);outline-offset:-2px}.toggle{flex-shrink:0;width:36px;height:20px;display:inline-block;position:relative}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{cursor:pointer;background:var(--border);border-radius:var(--radius-pill);transition:background-color var(--motion-fast);border:1px solid var(--border);position:absolute;inset:0}.toggle-slider:before{content:"";width:14px;height:14px;transition:transform var(--motion-fast);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000026}.toggle input:checked+.toggle-slider{background:var(--brand-blue);border-color:var(--brand-blue)}.toggle input:checked+.toggle-slider:before{transform:translate(16px)}.toggle input:focus-visible+.toggle-slider{box-shadow:var(--focus-ring)}.state-empty,.state-error{padding:var(--sp-10) var(--sp-6);justify-content:center;align-items:center;gap:var(--sp-3);text-align:center;color:var(--text-secondary);flex-direction:column;display:flex}.state-empty-icon,.state-error-icon{color:var(--text-muted);opacity:.6}.state-empty-title,.state-error-title{font-size:var(--type-section);color:var(--text-primary);font-weight:600}.state-empty-desc,.state-error-desc{font-size:var(--type-body);color:var(--text-secondary);max-width:320px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--surface-raised) 25%, var(--border) 50%, var(--surface-raised) 75%);border-radius:var(--radius-badge);background-size:200% 100%;animation:1.5s infinite shimmer}.stats-grid{gap:var(--sp-4);margin-bottom:var(--sp-6);grid-template-columns:repeat(4,1fr);display:grid}.stats-grid-3{gap:var(--sp-4);margin-bottom:var(--sp-6);grid-template-columns:repeat(3,1fr);display:grid}.stats-grid-2{gap:var(--sp-4);margin-bottom:var(--sp-6);grid-template-columns:repeat(2,1fr);display:grid}.responsive-grid-2{gap:var(--sp-4);grid-template-columns:repeat(2,1fr);display:grid}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.2s forwards fadeInUp}.delay-100{animation-delay:80ms}.delay-200{animation-delay:.12s}.delay-300{animation-delay:.16s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:.8s linear infinite spin}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:1024px) and (min-width:769px){.sidebar{width:56px;padding:var(--sp-3) var(--sp-2);overflow:visible}.sidebar-label,.nav-item span:not(.nav-icon-wrapper),.nav-group-label,.sidebar-footer-text{display:none}.nav-item{justify-content:center;width:36px;margin:0 auto;padding:0}.nav-item.active:before{display:none}.nav-item.active{background:var(--info-bg)}.sidebar-logo-text{display:none}.main-content{margin-left:56px}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.sidebar{transition:transform var(--motion-slow);width:var(--sidebar-w);padding:var(--sp-4);transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-label,.nav-item span,.nav-group-label{display:unset}.nav-item{padding:0 var(--sp-3);justify-content:flex-start;width:100%}.nav-item.active:before{display:block}.mobile-header{display:flex}.main-content{padding:var(--gutter-mobile);margin-left:0}.stats-grid,.stats-grid-3,.stats-grid-2{grid-template-columns:repeat(2,1fr)}.responsive-grid-2{grid-template-columns:1fr}.table-wrapper{position:relative}.table-wrapper:after{content:"→ scroll";text-align:right;font-size:var(--type-caption);color:var(--text-muted);padding:var(--sp-1) var(--sp-3);background:var(--surface);display:block}}@media (max-width:480px){.stats-grid,.stats-grid-3,.stats-grid-2{grid-template-columns:1fr}}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page-header{margin-bottom:var(--sp-6);justify-content:space-between;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;display:flex}.page-header-left{flex:1;min-width:0}.page-header-right{align-items:center;gap:var(--sp-2);flex-shrink:0;display:flex}.sidebar-overlay{z-index:35;background:#00000080;position:fixed;inset:0}.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}.settings-section-title{font-size:var(--type-label);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-3);font-weight:500}