@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8f8f7;--surface: #ffffff;--border: #e5e5e3;--text-primary: #1a1a18;--text-secondary: #6b6b68;--text-muted: #9b9b97;--accent: #1a1a18;--radius: 6px;--font: "Inter", system-ui, sans-serif}html,body{height:100%;background:var(--bg);color:var(--text-primary);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}#root{height:100%}button{font-family:var(--font);cursor:pointer}input,select{font-family:var(--font)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;align-items:center;gap:16px;padding:0 16px;height:48px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}.header-logo{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);flex-shrink:0}.header-sep{width:1px;height:16px;background:var(--border);flex-shrink:0}.header-right{display:flex;align-items:center;gap:8px;margin-left:auto}.breadcrumb-inline{display:flex;align-items:center;gap:4px;font-size:12px;flex:1;min-width:0}.btn-ghost{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border);border-radius:var(--radius);transition:background .15s,color .15s;white-space:nowrap;cursor:pointer}.btn-ghost:hover{background:var(--border);color:var(--text-primary)}.btn-xs{padding:3px 8px;font-size:11px}.btn-upload{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:500;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);transition:opacity .15s;white-space:nowrap;cursor:pointer}.btn-upload:hover{opacity:.85}.btn-upload:disabled{opacity:.4;cursor:not-allowed}.export-wrap{position:relative}.export-backdrop{position:fixed;inset:0;z-index:99}.export-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px 12px;box-shadow:0 8px 24px #0000001f;min-width:240px;display:flex;flex-direction:column;gap:10px}.export-popover-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.export-size-row{display:flex;align-items:flex-end;gap:8px}.export-field{display:flex;flex-direction:column;gap:3px;flex:1}.export-field-label{font-size:10px;color:var(--text-muted)}.export-field-input{height:30px;padding:0 8px;font-size:13px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-primary);outline:none;width:100%;transition:border-color .15s}.export-field-input:focus{border-color:#aaa}.export-x{font-size:13px;color:var(--text-muted);padding-bottom:4px;flex-shrink:0}.export-px{font-size:12px;color:var(--text-muted);padding-bottom:5px;flex-shrink:0}.export-presets{display:flex;gap:6px}.export-preset{flex:1;padding:4px 0;font-size:11px;font-weight:500;color:var(--text-secondary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:background .15s,color .15s}.export-preset:hover{background:var(--border);color:var(--text-primary)}.export-download{width:100%;justify-content:center;padding:7px 0}.body{display:flex;flex:1;overflow:hidden}.left-panel{width:420px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;overflow:hidden}.resize-handle{width:4px;flex-shrink:0;background:var(--border);cursor:col-resize;transition:background .15s}.resize-handle:hover,.resize-handle:active{background:#bbb}.palette-swatches{display:flex;flex-wrap:wrap;gap:6px}.palette-swatch{display:flex;gap:2px;padding:2px 4px;border-radius:5px;border:2px solid transparent;cursor:pointer;transition:border-color .15s}.palette-swatch.active{border-color:var(--accent)}.palette-swatch span{display:block;width:10px;height:14px;border-radius:2px}.panel-section{display:flex;flex-direction:column;flex:1;overflow:hidden;border-bottom:1px solid var(--border)}.paste-inline-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0}.paste-inline-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.panel-textarea{display:block;width:100%;flex:1;padding:12px 14px;font-size:12.5px;font-family:SFMono-Regular,Menlo,monospace;border:none;outline:none;resize:none;background:var(--surface);color:var(--text-primary);line-height:1.7;min-height:0}.panel-textarea::placeholder{color:var(--text-muted)}.panel-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}.paste-hint{font-size:11px;color:var(--text-muted);min-width:40px}.drop-zone{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;flex-shrink:0}.drop-zone:hover,.drop-zone.drag-over{background:#00000005}.drop-icon{color:var(--text-muted);opacity:.45;flex-shrink:0}.drop-title{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-controls{padding:16px 14px;display:flex;flex-direction:column;gap:16px;border-bottom:none}.field-group{display:flex;flex-direction:column;gap:8px}.field-group.row{flex-direction:row;align-items:center;justify-content:space-between}.field-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;flex-shrink:0}.field-select{height:26px;padding:0 6px;font-size:11px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-primary);outline:none;cursor:pointer;flex:1;min-width:0;transition:border-color .15s}.field-select:focus{border-color:#aaa}.right-panel{flex:1;overflow:hidden;position:relative;background:var(--bg)}.treemap-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.placeholder-text{font-size:13px;color:var(--text-muted)}.panel-error{padding:8px 12px;font-size:11px;color:#c00;background:#fff0f0;border-bottom:1px solid #fcc}.treemap-tooltip{position:fixed;pointer-events:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;font-size:12px;box-shadow:0 4px 16px #00000014;z-index:1000;max-width:260px;opacity:0;transition:opacity .1s}.treemap-tooltip.visible{opacity:1}.tooltip-name{font-weight:600;color:var(--text-primary);margin-bottom:2px;font-size:12px}.tooltip-path{font-size:11px;color:var(--text-muted);margin-bottom:6px}.tooltip-rows{display:flex;flex-direction:column;gap:2px}.tooltip-row{display:flex;justify-content:space-between;gap:16px;font-size:11px}.tooltip-key{color:var(--text-muted)}.tooltip-val{color:var(--text-primary);font-weight:500}.breadcrumb-item{cursor:pointer;color:var(--text-secondary);transition:color .15s}.breadcrumb-item:hover{color:var(--text-primary)}.breadcrumb-sep{color:var(--border);margin:0 2px}.breadcrumb-current{color:var(--text-primary);font-weight:500;cursor:default}