*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f3f4f6;color:#1f2937;height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{height:48px;display:flex;align-items:center;gap:16px;padding:0 20px;background:#fff;border-bottom:1px solid #E5E7EB;flex-shrink:0}.back-link{font-size:13px;color:#6b7280;text-decoration:none}.back-link:hover{color:#374151}.app-title{font-size:15px;font-weight:600}.app-body{display:flex;flex:1;overflow:hidden}.left-panel{width:320px;min-width:320px;background:#fff;border-right:1px solid #E5E7EB;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}.section{display:flex;flex-direction:column;gap:8px}.section-header{display:flex;justify-content:space-between;align-items:center}.label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.input{width:100%;padding:6px 10px;font-size:13px;border:1.5px solid #E5E7EB;border-radius:7px;outline:none;transition:border-color .15s}.input:focus{border-color:#3b82f6}.series-names{display:flex;flex-direction:column;gap:6px}.group-row{background:#f9fafb;border:1px solid #E5E7EB;border-radius:8px;padding:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px}.group-row-header{display:flex;gap:6px;align-items:center}.group-name-input{flex:1}.btn-delete-group{width:28px;height:28px;border:none;background:#fee2e2;color:#dc2626;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-delete-group:hover{background:#fecaca}.group-values{display:grid;grid-template-columns:1fr 1fr;gap:6px}.group-value-item{display:flex;flex-direction:column;gap:2px}.group-value-label{font-size:10px;color:#9ca3af}.btn-add{font-size:12px;font-weight:500;color:#3b82f6;background:#eff6ff;border:1px solid #BFDBFE;border-radius:6px;padding:4px 10px;cursor:pointer}.btn-add:hover{background:#dbeafe}.export-row{flex-direction:row;gap:8px;padding-top:4px}.btn-export{flex:1;padding:8px;font-size:13px;font-weight:500;background:#1f2937;color:#fff;border:none;border-radius:8px;cursor:pointer}.btn-export:hover{background:#374151}.chart-area{flex:1;position:relative;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.chart-area.dragging{cursor:grabbing}.chart-hint{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:10;pointer-events:none;font-size:12px;color:#9ca3af;display:flex;align-items:center;gap:6px;white-space:nowrap}.chart-hint:before{content:"💡"}.chart-wrapper{position:absolute;top:0;left:0;transform-origin:0 0;background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;padding:24px}#chart-svg{display:block}.drawer{position:fixed;top:0;right:0;bottom:0;width:300px;background:#fff;border-left:1px solid #E5E7EB;box-shadow:-4px 0 24px #0000001a;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:500;display:flex;flex-direction:column}.drawer.open{transform:translate(0)}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #F3F4F6;flex-shrink:0}.drawer-title{font-size:14px;font-weight:600}.drawer-close{width:28px;height:28px;border:none;background:#f3f4f6;border-radius:6px;cursor:pointer;font-size:14px;color:#6b7280}.drawer-close:hover{background:#e5e7eb}.drawer-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}.dc-row{display:flex;flex-direction:column;gap:6px}.dc-label{font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.04em}.dc-input{width:100%;padding:6px 10px;font-size:13px;border:1.5px solid #E5E7EB;border-radius:7px;outline:none}.dc-input:focus{border-color:#3b82f6}.dc-select{width:100%;padding:6px 10px;font-size:13px;border:1.5px solid #E5E7EB;border-radius:7px;outline:none;background:#fff}.dc-color-row{display:flex;align-items:center;gap:8px}.dc-toggle-row{display:flex;align-items:center;justify-content:space-between}.dc-toggle{width:40px;height:22px;border-radius:11px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}.dc-toggle.on{background:#3b82f6}.dc-toggle.off{background:#d1d5db}.dc-toggle:after{content:"";position:absolute;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .2s}.dc-toggle.on:after{left:21px}.dc-toggle.off:after{left:3px}.drawer-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:499}.drawer-backdrop.active{display:block}[data-key]:not([data-key=bg]){cursor:pointer}rect[data-key]:not([data-key=bg]):hover{filter:brightness(.82);transition:filter .1s}text[data-key]:not([data-key=bg]):hover{opacity:.6;transition:opacity .1s}.sel-outline{fill:#3b82f614;stroke:#3b82f6;stroke-width:2;stroke-dasharray:5 3;pointer-events:none}