:root{color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f6f9fe;color:#17243a}button,input,select,textarea{font:inherit}button{appearance:none;-webkit-appearance:none}
.flamo-svg-tool{--bg:#f6f9fe;--panel:#fff;--soft:#eef7ff;--line:#d8e8f8;--text:#17243a;--muted:#8291a6;--accent:#0091ff;--accent2:#087dd4;font-weight:500;min-height:100vh;background:var(--bg);color:var(--text);display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:12px;padding:14px 14px 160px}
.flamo-svg-tool[data-theme=dark]{color-scheme:dark;--bg:#07111f;--panel:#0d1b2d;--soft:#10243a;--line:#244765;--text:#e7f4ff;--muted:#91a7bd;--accent:#0091ff;--accent2:#087dd4}
.flamo-svg-controls{min-width:0}.flamo-svg-workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(310px,48vh) auto auto auto;gap:12px;min-width:0}
.svg-card{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:12px;overflow:auto}
.tool-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.tool-head h1{font-size:20px;line-height:1.1;margin:0}.tool-head p{margin:6px 0 0;color:var(--muted);font-size:12px}
.help-button{width:38px;height:38px;min-width:38px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.svg-mask-icon{width:20px;height:20px;display:inline-block;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;flex:0 0 auto}.svg-mask-question{--icon:url("../../assets/icons/question.svg")}.svg-mask-close{--icon:url("../../assets/icons/bootstrap-x.svg")}.svg-mask-palette{--icon:url("../../assets/icons/palette.svg");width:16px;height:16px}
.panel{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px;min-width:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:13px;font-weight:800}.panel-title>span:last-child{color:var(--muted);font-size:11px;font-weight:650}
.svg-section+.svg-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.svg-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;color:var(--muted);font-size:13px;font-weight:600}.svg-section-title span:last-child{font-weight:500;font-size:11px}
label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:500;margin-top:10px}input[type=text],input[type=number],select,textarea{width:100%;min-height:40px;border:1px solid var(--line);border-radius:11px;background:var(--soft);color:var(--text);padding:9px 11px;outline:0}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.dropzone{margin:0;min-height:112px;border:1px dashed var(--accent);border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--panel));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--text)}.dropzone small{color:var(--muted);font-weight:500}.upload-icon{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}.dropzone.is-drag{background:color-mix(in srgb,var(--accent) 15%,var(--panel))}
.primary,.secondary,.text-button,.preset-row button,.zoom-actions button,.file-chip{border:1px solid var(--line);cursor:pointer}.primary,.secondary{min-height:44px;border-radius:12px;font-weight:800}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover{background:var(--accent2)}.secondary{background:var(--soft);color:var(--text)}.upload-panel>.secondary{width:100%;margin-top:10px}.paste-input{width:100%;min-height:160px;font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.upload-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.upload-switch-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border:1px solid var(--line);border-radius:11px;background:var(--soft);color:var(--muted);font-weight:750;font-size:12px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}.upload-switch-btn svg{width:16px;height:16px;flex:0 0 auto}.upload-switch-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.upload-mode-panel{display:grid;gap:8px}.upload-mode-panel[hidden]{display:none}
.file-chip{margin-top:8px;border-radius:999px;padding:7px 10px;background:var(--soft);color:var(--text);font-size:11px}.info-badge{display:inline-block;margin-top:7px;color:var(--muted);font-size:11px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.toggle-row{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--text);font-size:12px}.toggle-row label{margin:0;color:var(--text);display:block}.custom-dims,.conditional{display:none;padding-top:8px}.custom-dims.show{display:block}.conditional.is-open{display:block}.preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.preset-row button,.zoom-actions button,.text-button{min-height:28px;border-radius:8px;background:var(--soft);color:var(--text);font-size:10px;font-weight:750}.preset-row button.active{background:var(--accent);border-color:var(--accent);color:#fff}.size-info,.hint{color:var(--muted);font-size:10px;margin:6px 0}.color-line{grid-template-columns:1fr 42px 18px;align-items:center}.color-line input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.preview-card{padding:14px;overflow:hidden}.zoom-actions{display:flex;align-items:center;gap:5px}.zoom-actions span{width:34px;text-align:center;color:var(--muted);font-size:10px}.zoom-actions button{padding:0 9px}.text-button{padding:0 9px;margin-left:5px}
#previewArea{height:calc(100% - 34px);min-height:260px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;background-color:var(--soft);background-image:radial-gradient(circle,color-mix(in srgb,var(--muted) 25%,transparent) 1px,transparent 1px);background-size:18px 18px;cursor:grab}#previewArea.dragging{cursor:grabbing}#previewPlaceholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}#svgViewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-origin:center center}#svgViewport svg{max-width:82%;max-height:82%;overflow:visible}#pvBar{display:none}
.flamo-preview-shape{cursor:pointer;transition:filter .12s ease}.flamo-preview-shape:hover{filter:drop-shadow(0 0 0 2px var(--accent)) brightness(1.15)}
.preview-shape-menu{position:fixed;z-index:200;display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translate(-50%,-110%)}.preview-shape-menu button{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}.preview-shape-menu button:hover{border-color:var(--accent);color:var(--accent)}
.layer-card{max-height:330px;overflow:auto}.empty{color:var(--muted);font-size:11px;text-align:center;padding:24px}.layer-item,.layer-group-head{display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 7px;border-radius:9px;color:var(--text);font-size:11px}.layer-item:hover,.layer-group-head:hover{background:var(--soft)}.layer-group-wrap{border-left:1px solid var(--line);margin-left:8px}.layer-group-head{cursor:pointer}.layer-group-chevron{display:inline-block;flex:0 0 auto;transition:transform .22s cubic-bezier(.4,0,.2,1)}.layer-group-head.collapsed .layer-group-chevron{transform:rotate(-90deg)}.layer-group-children{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .22s ease}.layer-group-children.is-collapsed{grid-template-rows:0fr;opacity:0}.layer-group-children-inner{min-height:0;overflow:hidden;padding-left:12px}.layer-group-label,.layer-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.layer-group-count,.layer-tag{flex:0 0 auto;border-radius:999px;background:var(--soft);padding:2px 6px;color:var(--muted);font-size:9px}
.layer-ungroup-btn{flex:0 0 auto;margin-right:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:9px;font-weight:700;padding:2px 8px;cursor:pointer;opacity:0;transition:opacity .15s ease}.layer-group-head:hover .layer-ungroup-btn{opacity:1}.layer-ungroup-btn:hover{border-color:var(--accent);color:var(--accent)}
.layer-text-tag{flex:0 0 auto;font-size:9px;font-weight:700}.layer-text-tag-stroke{color:var(--accent)}.layer-text-tag-compound{color:#e08a1e}
input.layer-swatch{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);flex:0 0 16px;padding:0;cursor:pointer;background:none;-webkit-appearance:none;appearance:none}input.layer-swatch::-webkit-color-swatch-wrapper{padding:0;border-radius:4px}input.layer-swatch::-webkit-color-swatch{border:none;border-radius:4px}input.layer-swatch::-moz-color-swatch{border:none;border-radius:4px}
.layer-drag-handle{flex:0 0 auto;cursor:grab;color:var(--muted);font-size:13px;line-height:1;letter-spacing:-1px;touch-action:none}.layer-item.is-dragging{opacity:.4}.layer-item.drag-over{outline:2px solid var(--accent);outline-offset:-2px}.layer-item{cursor:default}
.empty-hint{color:var(--muted);font-size:11px;text-align:center;padding:14px 0}
.color-swatch-list{display:grid;gap:6px;max-height:180px;overflow:auto}.color-swatch-row{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 7px;border-radius:9px;background:var(--soft)}.color-swatch-row input[type=color]{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);padding:0;cursor:pointer;background:none;-webkit-appearance:none;appearance:none;flex:0 0 22px}.color-swatch-row input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:6px}.color-swatch-row input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.color-swatch-hex{flex:1;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}.color-swatch-count{flex:0 0 auto;border-radius:999px;background:var(--panel);padding:2px 7px;color:var(--muted);font-size:9px;font-weight:700}
.svg-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.svg-switch-row p{margin:0;color:var(--text);font-size:12px;font-weight:700}
.svg-switch{width:44px;height:26px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);cursor:pointer;flex:0 0 auto}.svg-switch span{width:18px;height:18px;display:block;border-radius:50%;background:var(--muted);transition:transform .22s ease,background .22s ease}.svg-switch.is-on span{transform:translateX(18px);background:var(--accent)}
.svg-color-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;margin-bottom:8px}.svg-color-head label{margin:0}
.svg-palette-backdrop{position:fixed;inset:0;z-index:118;background:rgba(5,18,32,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease}.svg-palette-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
.svg-palette-modal{position:fixed;left:50%;top:50%;z-index:120;width:min(560px,calc(100vw - 56px));max-height:min(74vh,640px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 18px 60px rgba(0,0,0,.25);overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-46%) scale(.98);transition:.2s ease}.svg-palette-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.svg-palette-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--line)}.svg-palette-title{font-size:16px;color:var(--text);margin:0}.svg-palette-subtitle{margin-top:3px;color:var(--muted);font-size:12px}
.svg-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;overflow:auto}.svg-palette-card{display:grid;gap:7px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);font:600 12px/1.2 inherit;text-align:left;cursor:pointer}.svg-palette-card:hover{border-color:var(--accent)}.svg-palette-card.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}.svg-palette-swatches{display:flex;height:22px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}.svg-palette-swatches i{flex:1;display:block}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stats>div{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px;display:grid;gap:3px}.stats b{font-size:18px;color:var(--accent)}.stats span{font-size:10px;color:var(--muted)}.output-card{min-height:220px}.output-card pre{white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto;background:var(--soft);border:1px dashed var(--line);border-radius:12px;padding:12px;font:500 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.xml-placeholder{color:var(--muted);font-size:11px;padding:20px;text-align:center}.xml-placeholder.hidden{display:none}
.action-bar{position:fixed;left:calc(360px + 26px);right:14px;bottom:12px;z-index:8;display:grid;grid-template-columns:110px minmax(220px,520px);justify-content:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(18px)}
.flamo-svg-tool.is-embedded{padding-bottom:14px}.flamo-svg-tool.is-embedded .action-bar{display:none}
#svgHintBox .info-badge{display:block;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.help-modal-backdrop{position:fixed;inset:0;background:rgba(5,18,32,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;z-index:80;transition:.18s ease}.help-modal-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
.help-modal{position:fixed;left:50%;top:50%;width:min(620px,calc(100vw - 56px));max-height:min(78vh,680px);transform:translate(-50%,-46%) scale(.98);opacity:0;visibility:hidden;pointer-events:none;z-index:90;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 18px 60px rgba(0,0,0,.18);overflow:hidden;transition:.2s ease}.help-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.help-modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--line)}.help-modal-title{font-size:16px;color:var(--text);margin:0}.help-modal-subtitle{margin-top:3px;color:var(--muted);font-size:12px}
.help-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 14px 0}.help-tabs button{min-height:36px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);font:inherit;cursor:pointer}.help-tabs button.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent)}
.help-tab-panel{display:none;overflow:auto;padding:14px}.help-tab-panel.is-active{display:grid;gap:10px}
.help-step{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:12px}.help-step b{display:block;margin-bottom:4px;font-size:13px}.help-step p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.help-faq{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:12px}.help-faq button{display:block;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;margin:0 0 4px;color:var(--text);font:inherit;font-size:13px;font-weight:600}.help-faq p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:760px){.help-modal{width:min(94vw,420px)}}
@media(max-width:760px){.flamo-svg-tool{display:flex;flex-direction:column;padding:10px 10px 150px}.flamo-svg-workspace{display:flex;flex-direction:column}.preview-card{height:310px}.action-bar{left:10px;right:10px;grid-template-columns:90px 1fr}.grid-2{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}}