*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f5f5f5;color:#333;min-height:100vh;display:flex;flex-direction:column}header{padding:12px 20px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center}header h1{font-size:16px;font-weight:600}.main{display:flex;flex:1;overflow:hidden}.panel{width:420px;min-width:420px;padding:16px;border-right:1px solid #e0e0e0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:#fff}.preview{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:24px;overflow:auto}#chart-wrapper{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 12px #00000014;min-width:640px;width:100%}#chart-svg{display:block;width:100%;height:auto}.section-label{font-size:12px;font-weight:600;color:#888;text-transform:uppercase;margin-bottom:6px}.title-row{display:flex;gap:8px;align-items:center}.title-row input[type=text]{flex:1;border:1px solid #ddd;border-radius:6px;padding:8px 10px;font-size:13px;outline:none}.title-row input[type=text]:focus{border-color:#999}#segments-list{display:flex;flex-direction:column;gap:6px}.segment-row{display:flex;gap:6px;align-items:center;background:#fafafa;border:1px solid #eee;border-radius:8px;padding:8px 10px}.seg-name{flex:2;min-width:0;border:1px solid #ddd;border-radius:5px;padding:6px 8px;font-size:13px;outline:none}.seg-value{flex:1;min-width:0;border:1px solid #ddd;border-radius:5px;padding:6px 8px;font-size:13px;outline:none}.segment-row input:focus{border-color:#999}.seg-fw{width:52px;flex-shrink:0;border:1px solid #ddd;border-radius:5px;padding:4px 2px;font-size:11px;outline:none;background:#fff;color:#555;cursor:pointer}.seg-fw:focus{border-color:#999}.btn-delete{background:none;border:none;color:#bbb;cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;flex-shrink:0}.btn-delete:hover{color:#f87171;background:#fef2f2}.btn-delete:disabled{opacity:.3;cursor:default}.btn-delete:disabled:hover{color:#bbb;background:none}.btn-add{background:none;border:1px dashed #ccc;border-radius:8px;padding:8px;color:#aaa;cursor:pointer;font-size:13px;text-align:center;width:100%}.btn-add:hover{border-color:#999;color:#555;background:#fafafa}.target-row{display:flex;gap:8px;align-items:center}.target-row input[type=number],.target-row input[type=text]{flex:1;border:1px solid #ddd;border-radius:6px;padding:8px 10px;font-size:13px;outline:none}.target-row input:focus{border-color:#999}.export-row{display:flex;gap:8px}.btn-export{flex:1;padding:9px 0;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer}.btn-svg{background:#e0e7ff;color:#4338ca}.btn-svg:hover{background:#c7d2fe}.btn-png{background:#dcfce7;color:#15803d}.btn-png:hover{background:#bbf7d0}