#app{display:flex;flex-direction:column;width:100%;height:100%}:root{--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-150: #efefef;--gray-200: #e5e5e5;--gray-300: #d4d4d4;--gray-400: #a3a3a3;--gray-500: #737373;--gray-600: #525252;--gray-700: #404040;--gray-800: #262626;--gray-900: #171717;--brand-primary: var(--gray-800);--brand-hover: var(--gray-900);--brand-active: var(--gray-900);--brand-subtle: var(--gray-50);--surface-base: #ffffff;--surface-raised: #ffffff;--surface-panel: #ffffff;--surface-dark: #ffffff;--text-primary: var(--gray-900);--text-secondary: var(--gray-500);--text-disabled: var(--gray-300);--text-on-brand: #ffffff;--border-light: var(--gray-200);--border-medium: var(--gray-300);--navbar-h: 56px;--left-panel-w: 280px;--right-panel-w: 270px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: none;--shadow-md: none;--shadow-lg: none;--font-sans: "Montserrat", system-ui, -apple-system, sans-serif;--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .35s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-sans);font-size:14px;color:var(--text-primary);background:var(--surface-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.w-full{width:100%}.h-full{height:100%}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.relative{position:relative}.absolute{position:absolute}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-sans);font-size:13px;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:active{transform:scale(.97)}.btn-primary{background:var(--brand-primary);color:var(--text-on-brand);padding:8px 18px}.btn-primary:hover{background:var(--brand-hover)}.btn-ghost{background:transparent;color:var(--text-secondary);padding:6px 12px}.btn-ghost:hover{background:var(--gray-100);color:var(--text-primary)}.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-sm);background:transparent;color:var(--gray-600)}.btn-icon:hover{background:var(--gray-100);color:var(--gray-900)}.btn-icon.active{background:var(--gray-100);color:var(--gray-800)}.panel{background:var(--surface-base);display:flex;flex-direction:column;height:100%;overflow:hidden}.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--gray-100);color:var(--gray-600);letter-spacing:.3px}.input{width:100%;padding:7px 10px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;color:var(--text-primary);background:var(--surface-base);outline:none;transition:border-color var(--transition-fast)}.input:focus{border-color:var(--gray-400)}.color-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--border-light);cursor:pointer;transition:transform var(--transition-fast)}.color-swatch:hover{transform:scale(1.1)}.divider{width:100%;height:1px;background:var(--border-light)}.label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(-4px);background:#0f0f0f;color:#fff;font-size:10px;font-weight:500;padding:4px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;z-index:10000;box-shadow:0 4px 12px #00000040;letter-spacing:.2px;opacity:0;transition:opacity .15s ease,transform .15s ease}[data-tooltip]:before{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%) translateY(3px);border:5px solid transparent;border-bottom-color:#0f0f0f;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:10000}[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;transform:translate(-50%) translateY(0)}