:root{--syn-primary: #3675F8;--syn-accent: #7C3AED;--syn-fg: #040E37;--syn-fg-muted: #4B5563;--syn-muted: #F3F4F6;--syn-muted-strong: #E5E7EB;--syn-bg: #FAFAFC;--syn-white: #FFFFFF;--syn-border: #D1D5DB;--syn-info-bg: #EFF5FF;--syn-success: #16A34A;--syn-destructive: #DC2626;--syn-shadow: #040E3708;--syn-primary-8: #3675F815;--syn-accent-8: #7C3AED15;--color-primary: var(--syn-primary);--color-accent: var(--syn-primary);--color-accent-muted: var(--syn-accent);--color-bg: var(--syn-bg);--color-bg-card: var(--syn-white);--color-border: var(--syn-border);--color-border-light: var(--syn-border);--color-text: var(--syn-fg);--color-text-muted: var(--syn-fg-muted);--color-text-light: var(--syn-fg-muted);--color-error: var(--syn-destructive);--color-error-bg: #FDE8E8;--space-3xs: 2px;--space-2xs: 6px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-card-compact: 14px;--space-section-compact: 18px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-pill: 999px;--border-subtle: 1px solid var(--syn-border);--border-strong: 1px solid var(--syn-fg-muted);--shadow-xs: 0 1px 1px rgba(4, 14, 55, .04);--shadow-sm: 0 1px 2px rgba(4, 14, 55, .05);--shadow-md: 0 4px 6px -1px rgba(4, 14, 55, .08);--shadow-lg: 0 10px 15px -3px rgba(4, 14, 55, .1);--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;--font-serif: "IBM Plex Sans", system-ui, -apple-system, sans-serif;--text-xs: .75rem;--text-sm: .85rem;--text-md: .95rem;font-family:var(--font-sans);line-height:1.5;font-weight:400;color:var(--syn-fg);background-color:var(--syn-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#app{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:68px;border-bottom:1px solid var(--syn-border);background:var(--syn-white);box-shadow:0 2px 8px var(--syn-shadow);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:38px;height:38px;display:block;object-fit:contain}.brand-title{font-family:var(--font-sans);font-size:24px;font-weight:700;color:var(--syn-fg);letter-spacing:-.3px}.nav{display:flex;gap:10px;align-items:center}.nav-pill{border:none;background:transparent;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1;min-height:38px;font-family:var(--font-sans);transition:background-color .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:4px}.nav-pill-active{background:var(--syn-primary);color:#fff}.nav-pill-inactive{background:#f4f4f5;color:var(--syn-fg-muted)}.nav-pill-link{background:transparent;color:var(--syn-fg-muted)}.nav-pill:hover{background:#e5e7eb;color:var(--syn-fg)}.nav-pill-active:hover{background:var(--syn-primary);color:#fff}.nav-pill-link:hover{background:transparent;color:var(--syn-fg)}.nav-pill-icon{width:16px;height:16px;flex:0 0 auto}.app[data-tab=explorer] .content,.content{padding:0;background:var(--syn-bg)}@media(max-width:860px){.header{height:auto;padding:12px 16px;flex-wrap:wrap;gap:12px}.nav{width:100%;flex-wrap:wrap}}