:root{--canvas: #0A0B0D;--surface-1: #101216;--surface-2: #16191E;--surface-3: #1D2128;--border: #292E36;--border-strong: #3A414C;--text-primary: #F4F6F8;--text-secondary: #A5ADB8;--text-muted: #6E7783;--accent: #3B82F6;--accent-ink: #FFFFFF;--accent-glow: rgba(59, 130, 246, .35);--brand-blue: #3B82F6;--brand-indigo: #6366F1;--brand-purple: #8B5CF6;--brand-cyan: #06B6D4;--brand-amber: #F59E0B;--brand-emerald: #10B981;--success: #34D399;--warning: #FBBF24;--error: #FB7185;--info: #60A5FA;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--r-sm: 6px;--r-md: 8px;--r-lg: 10px;--r-pill: 999px;--t-fast: .12s cubic-bezier(.16, 1, .3, 1);--t-base: .18s cubic-bezier(.16, 1, .3, 1);--t-slow: .24s cubic-bezier(.16, 1, .3, 1);--sidebar-collapsed: 64px;--sidebar-expanded: 220px;--topbar-h: 52px;--status-h: 30px;--source-w: 280px;--inspector-w: 360px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;background-color:var(--canvas);color:var(--text-primary);font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv02","cv03","cv04","cv11"}#root{height:100vh;width:100vw;overflow:hidden;display:flex;flex-direction:column}.mono,.tabular-nums,[data-mono=true]{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.text-display{font-size:28px;font-weight:600;line-height:36px;letter-spacing:-.02em}.text-h1{font-size:22px;font-weight:600;line-height:30px;letter-spacing:-.015em}.text-h2{font-size:16px;font-weight:600;line-height:24px;letter-spacing:-.01em}.text-body{font-size:14px;font-weight:400;line-height:21px}.text-label{font-size:12px;font-weight:500;line-height:18px}.text-micro{font-size:11px;font-weight:500;line-height:16px;letter-spacing:.02em}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-app-shell{display:flex;flex-direction:column;height:100vh;width:100vw;background:radial-gradient(1200px circle at 50% -10%,rgba(37,99,235,.08),transparent 60%),var(--canvas);overflow:hidden;position:relative}.sf-main-container{display:flex;flex:1;overflow:hidden;position:relative}.sf-workspace{flex:1;display:flex;overflow:hidden;background:var(--canvas);position:relative}.sf-topbar{height:var(--topbar-h);background:var(--surface-1);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:30}.sf-topbar-left{display:flex;align-items:center;gap:12px;min-width:0}.sf-topbar-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px}.sf-topbar-title{font-weight:600;color:var(--text-primary);font-size:14px;letter-spacing:-.01em}.sf-topbar-file{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--surface-2);padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--border);max-width:320px}.sf-topbar-right{display:flex;align-items:center;gap:8px}.sf-sidebar{background:var(--surface-1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .48s cubic-bezier(.2,.8,.25,1),box-shadow .48s cubic-bezier(.2,.8,.25,1);overflow:hidden;z-index:25;-webkit-user-select:none;user-select:none;position:relative}.sf-sidebar-logo{height:var(--topbar-h);display:flex;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0;cursor:pointer;transition:background var(--t-fast)}.sf-sidebar-logo:hover{background:var(--surface-2)}.sf-monogram{width:34px;height:34px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:13px;flex-shrink:0;box-shadow:0 0 16px #3b82f659;border:1px solid rgba(255,255,255,.3)}.sf-sidebar-section-title{padding:12px 20px 4px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}.sf-nav-item{width:100%;height:40px;display:flex;align-items:center;gap:12px;padding:0 18px;background:transparent;border:none;border-left:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--font-ui);font-size:13px;font-weight:500;transition:all var(--t-fast);text-align:left;outline:none;position:relative}.sf-nav-item:hover{background:var(--surface-2);color:var(--text-primary)}.sf-nav-item.active{background:#2563eb1f;border-left-color:#3b82f6;color:#60a5fa;font-weight:600}.sf-nav-item.collapsed{justify-content:center;padding:0;border-left:none}.sf-nav-item.collapsed.active{background:#2563eb26;color:#60a5fa}.sf-nav-item.collapsed.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2.5px;background:#3b82f6;border-radius:0 2px 2px 0;box-shadow:0 0 8px #3b82f699}.sf-nav-icon-box{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);flex-shrink:0;transition:all var(--t-fast)}.sf-nav-item:hover .sf-nav-icon-box{background:#ffffff08}.sf-nav-item.active .sf-nav-icon-box{color:var(--accent)}.sf-status-strip{height:var(--status-h);background:var(--surface-1);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:24px;flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);z-index:20;-webkit-user-select:none;user-select:none}.sf-status-item{display:flex;align-items:center;gap:6px}.sf-status-item-label{color:var(--text-muted);text-transform:uppercase;font-size:9px;letter-spacing:.05em}.sf-status-item-val{color:var(--text-secondary);font-weight:500}.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);font-family:var(--font-ui);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all var(--t-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}.sf-btn:active:not(:disabled){transform:translateY(1px)}.sf-btn:disabled{opacity:.45;cursor:not-allowed}.sf-btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-weight:600;box-shadow:0 2px 8px #2563eb59;border:1px solid rgba(255,255,255,.15)}.sf-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#3b82f6,#6366f1);box-shadow:0 0 16px #3b82f673}.sf-btn-secondary{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-primary)}.sf-btn-secondary:hover:not(:disabled){background:var(--surface-3);border-color:var(--text-muted)}.sf-btn-ghost{background:transparent;border-color:var(--border);color:var(--text-secondary)}.sf-btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text-primary);border-color:var(--border-strong)}.sf-btn-danger{background:transparent;border-color:#ff6b724d;color:var(--error)}.sf-btn-danger:hover:not(:disabled){background:#ff6b721a;border-color:var(--error)}.sf-btn-sm{height:32px;padding:0 10px;font-size:12px}.sf-btn-md{height:36px;padding:0 14px;font-size:13px}.sf-btn-lg{height:44px;padding:0 20px;font-size:14px}.sf-dropzone-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;max-width:780px;margin:0 auto;width:100%}.sf-dropzone-box{width:100%;border:1.5px dashed var(--border-strong);background:var(--surface-1);border-radius:var(--r-lg);padding:40px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;transition:all var(--t-base);position:relative;box-shadow:0 8px 32px #0006}.sf-dropzone-box:hover{border-color:#3b82f673;background:#16191ed9;box-shadow:0 8px 32px #2563eb1f}.sf-dropzone-box.dragging{border-color:#3b82f6;background:#2563f60f;box-shadow:0 0 32px #3b82f640}.sf-source-pane{width:var(--source-w);min-width:var(--source-w);height:100%;background:var(--surface-1);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;-webkit-user-select:none;user-select:none}.sf-pane-section{padding:14px 16px;border-bottom:1px solid var(--border)}.sf-pane-section-header{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}.sf-metric-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px}.sf-metric-label{color:var(--text-muted)}.sf-metric-val{color:var(--text-secondary);font-weight:500}.sf-cue-workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--canvas);position:relative}.sf-cue-toolbar{height:48px;background:var(--surface-1);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;flex-shrink:0}.sf-cue-table-header{height:36px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.sf-cue-row{display:flex;align-items:stretch;min-height:44px;border-bottom:1px solid var(--border);background:transparent;cursor:pointer;transition:background var(--t-fast);border-left:2px solid transparent}.sf-cue-row:hover{background:#ffffff05}.sf-cue-row.selected{background:var(--surface-3);border-left-color:var(--accent)}.sf-cue-row.has-error{border-left-color:var(--error)}.sf-cue-row.has-warning{border-left-color:var(--warning)}.sf-export-inspector{width:var(--inspector-w);min-width:var(--inspector-w);height:100%;background:var(--surface-1);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sf-format-card{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),background var(--t-fast)}.sf-format-card:hover{background:var(--surface-2);transform:translateY(-1px)}.sf-format-card.selected{background:#3b82f60f}.sf-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:500;white-space:nowrap}.sf-badge-exact{background:#56d58a1f;color:var(--success);border:1px solid rgba(86,213,138,.3)}.sf-badge-adjusted{background:#71a7ff1f;color:var(--info);border:1px solid rgba(113,167,255,.3)}.sf-badge-setup{background:#f5bc5a1f;color:var(--warning);border:1px solid rgba(245,188,90,.3)}.sf-badge-lossy{background:#ff6b721f;color:var(--error);border:1px solid rgba(255,107,114,.3)}.sf-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0b0dbf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--t-base)}.sf-modal-content{background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:0 24px 64px #000c;max-width:900px;width:90%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;animation:modalIn var(--t-base)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastIn{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 16px #3b82f666}50%{box-shadow:0 0 24px #3b82f6b3}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.sf-simple-grid{display:grid;grid-template-columns:minmax(320px,380px) 1fr;gap:20px;align-items:start}@media (max-width: 1024px){.sf-simple-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}