:root{color:#29272f;background:#fffaf8;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--coral: #ff3655;--coral-strong: #ef2948;--coral-soft: #fff2f4;--violet: #7657e8;--cyan: #2aa6c5;--green: #28b868;--yellow: #eaa22a;--ink: #29272f;--muted: #858189;--line: #f0ded9;--line-strong: #e9cbc4;--surface: #fffefd;--surface-muted: #fffaf9;--workbench-height: clamp(650px, calc(100vh - 246px) , 835px)}*{box-sizing:border-box}html{background:#fffaf8;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid rgba(255,54,85,.2);outline-offset:2px}.app-shell{min-height:100vh;padding:14px 18px 24px;background:#fffaf8}.topbar{display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr);align-items:center;min-height:62px;gap:22px;max-width:1760px;margin:0 auto 12px}.brand,.header-actions,.canvas-header,.editor-toolbar,.tool-group,.zoom-control,.activation-state,.inventory-head,.swatch{display:flex;align-items:center}.brand{gap:11px;min-width:0}.brand-mark{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;color:#fff;background:var(--coral);border:3px solid #fff;border-radius:50%;box-shadow:0 7px 20px #ff365538}.brand h1,.canvas-header h2,.inventory-head h2{margin:0;color:var(--ink);letter-spacing:0}.brand h1{color:var(--coral);font-size:21px;line-height:1.15}.brand p,.canvas-header p,.inventory-head p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.workspace-nav{display:grid;grid-template-columns:repeat(3,minmax(104px,1fr));gap:3px;padding:4px;background:#fff;border:1px solid #eee8e6;border-radius:10px;box-shadow:0 6px 22px #3726230d}.workspace-nav button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 15px;color:#615e65;background:transparent;border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:800;white-space:nowrap}.workspace-nav button.selected{color:var(--coral);background:var(--coral-soft);border-color:#ffc7d0}.header-actions{justify-content:flex-end;gap:10px;min-width:0}.activation-pill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;color:#77737b;background:#fff;border:1px solid var(--line);border-radius:18px;font-size:12px;font-weight:800;white-space:nowrap}.activation-pill.active{color:#157a49;background:#f0fbf5;border-color:#bee9cf}.primary-button,.ai-generate-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#fff;background:var(--coral);border-radius:8px;font-weight:850;box-shadow:0 7px 16px #ff365529}.primary-button:hover:not(:disabled),.ai-generate-button:hover:not(:disabled){background:var(--coral-strong)}.primary-button{min-height:40px;padding:0 16px}.header-export{min-width:126px}.workspace{display:grid;grid-template-columns:minmax(270px,292px) minmax(560px,1fr) minmax(260px,284px);grid-template-areas:"source canvas result" "inventory inventory inventory";gap:12px;align-items:start;max-width:1760px;margin:0 auto}.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #5e3a300e}.source-rail{grid-area:source}.canvas-panel{grid-area:canvas}.result-rail{grid-area:result}.inventory-panel{grid-area:inventory}.workflow-rail{height:var(--workbench-height);overflow:auto;padding:15px;scrollbar-color:#eacfc9 transparent;scrollbar-width:thin}.step-section+.step-section{margin-top:14px;padding-top:14px;border-top:1px solid #f3e7e4}.step-heading{display:flex;width:100%;align-items:center;gap:9px;padding:0;color:var(--ink);background:transparent;text-align:left}.step-heading strong{font-size:14px}.step-number{display:grid;width:24px;height:24px;flex:0 0 auto;place-items:center;color:#fff;background:var(--coral);border-radius:6px;box-shadow:0 3px 9px #ff36552e;font-size:12px;font-weight:900}.step-chevron{display:none;margin-left:auto;color:var(--muted);transition:transform .18s ease}.step-body{display:grid;grid-template-rows:1fr}.step-body-inner{min-height:0;padding-top:10px}.source-dropzone{padding:10px;background:snow;border:1px dashed #ffb9c2;border-radius:10px;text-align:center}.source-dropzone img,.empty-source{width:100%;height:138px;margin-bottom:9px;border-radius:8px}.source-dropzone img{display:block;object-fit:contain;background:#f8f2f0}.empty-source{display:grid;align-content:center;justify-items:center;gap:7px;color:var(--coral);background-color:#fff7f7;background-image:linear-gradient(45deg,#fae8e7 25%,transparent 25%),linear-gradient(-45deg,#fae8e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#fae8e7 75%),linear-gradient(-45deg,transparent 75%,#fae8e7 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;font-size:12px;font-weight:800}.source-dropzone input{display:none}.source-dropzone>small{display:block;overflow:hidden;margin-top:7px;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 14px;color:var(--coral);background:#fff;border:1px solid #ffafbb;border-radius:7px;font-size:12px;font-weight:800}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.style-option{display:grid;grid-template-columns:17px minmax(0,1fr);gap:7px;align-items:center;min-height:48px;padding:7px 8px;color:var(--ink);background:#fff;border:1px solid #eadfdd;border-radius:8px;text-align:left}.style-option.selected{background:snow;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.style-dot{width:13px;height:13px;background:var(--accent);border:3px solid color-mix(in srgb,var(--accent) 28%,white);border-radius:50%}.style-option strong,.style-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.style-option strong{font-size:12px}.style-option small{margin-top:2px;color:var(--muted);font-size:9px}.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.size-grid button,.fit-grid button{color:#5e5a63;background:#fff;border:1px solid #e9deda;border-radius:8px}.size-grid button{display:grid;min-height:43px;align-content:center;gap:2px;padding:4px 2px}.size-grid button.selected{color:var(--coral);background:var(--coral-soft);border-color:#ff8fa0}.size-grid strong{font-size:11px}.size-grid small{font-size:8px}.setting-hint{margin:7px 0 9px;color:#ca4c60;font-size:10px;font-weight:800}.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.fit-grid button{min-height:42px;padding:6px 8px;text-align:left}.fit-grid button.selected{color:#5a43c0;background:#f5f2ff;border-color:#a99aec}.fit-grid strong,.fit-grid small{display:block}.fit-grid strong{font-size:11px}.fit-grid small{margin-top:2px;color:var(--muted);font-size:9px}.range-control{display:grid;gap:5px;margin-bottom:7px;color:#5f5b64;font-size:11px;font-weight:750}.range-control span{display:flex;justify-content:space-between}.range-control input{width:100%;accent-color:var(--coral)}.toggle-row{display:flex;align-items:center;justify-content:space-between;min-height:33px;color:#5f5b64;border-top:1px solid #f2e7e4;font-size:11px;font-weight:750}.toggle-row input{width:34px;height:19px;accent-color:var(--green)}.rail-actions{display:flex;gap:7px;margin-top:12px}.rail-actions .primary-button{flex:1}.icon-button{display:inline-grid;width:40px;height:40px;place-items:center;color:#625e66;background:#fff;border:1px solid var(--line-strong);border-radius:8px}.canvas-panel{display:flex;min-width:0;height:var(--workbench-height);flex-direction:column;padding:12px}.canvas-header{justify-content:space-between;gap:10px;min-height:43px;margin-bottom:8px}.canvas-header h2{font-size:16px}.draft-thumb{display:flex;align-items:center;gap:6px;min-width:0;margin-left:auto;color:var(--muted);font-size:10px;font-weight:800}.draft-thumb img{width:36px;height:36px;object-fit:contain;background:#fff7f5;border:1px solid var(--line);border-radius:7px}.view-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:#f8f2f0;border-radius:8px}.view-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:31px;padding:0 10px;color:#67626b;background:transparent;border-radius:6px;font-size:11px;font-weight:800}.view-tabs button.selected{color:var(--coral);background:#fff;box-shadow:0 2px 7px #4429231a}.editor-toolbar{gap:7px;min-height:43px;padding:5px 7px;margin-bottom:8px;background:#fffaf9;border:1px solid var(--line);border-radius:8px}.tool-group{gap:4px}.tool-group+.tool-group{padding-left:7px;border-left:1px solid var(--line)}.tool-group button,.zoom-control button{display:grid;width:31px;height:31px;place-items:center;color:#625e66;background:#fff;border:1px solid var(--line-strong);border-radius:6px}.tool-group button.selected{color:#fff;background:var(--coral);border-color:var(--coral)}.tool-group select{width:104px;height:31px;padding:0 7px 0 24px;color:#514d56;background-color:#fff;background-image:radial-gradient(circle at 12px 50%,var(--selected-color) 0 6px,transparent 7px);border:1px solid var(--line-strong);border-radius:6px;font-size:10px;font-weight:750}.zoom-control{gap:3px;margin-left:auto}.zoom-control span{min-width:42px;color:#625e66;text-align:center;font-size:10px;font-weight:800}.canvas-viewport{display:flex;min-height:0;flex:1;align-items:center;justify-content:center;overflow:auto;background:#fffdfc;border:1px solid #ecdeda;border-radius:9px;overscroll-behavior:contain}.pattern-canvas{display:block;min-width:0;min-height:0;height:auto;margin:auto;cursor:crosshair;image-rendering:auto}.source-preview{display:grid;min-height:0;flex:1;place-items:center;overflow:hidden;padding:28px;background-color:#fffaf9;background-image:linear-gradient(45deg,#f6e9e6 25%,transparent 25%),linear-gradient(-45deg,#f6e9e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f6e9e6 75%),linear-gradient(-45deg,transparent 75%,#f6e9e6 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;border:1px solid var(--line);border-radius:9px}.source-preview-frame{position:relative;width:min(78%,720px);max-width:100%;max-height:100%;aspect-ratio:var(--source-ratio);overflow:hidden;background:#fff;border:1px solid #e2cfca;border-radius:9px;box-shadow:0 18px 46px #472b2421}.source-preview-frame img{display:block;width:100%;height:100%;object-fit:contain}.source-preview[data-fit=cover] .source-preview-frame img{object-fit:cover}.source-preview-state{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 11px;color:var(--coral);background:#fffffff2;border:1px solid #ffc6cf;border-radius:8px;box-shadow:0 6px 18px #472b241f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.source-preview-state span,.source-preview-state strong,.source-preview-state small{display:block;letter-spacing:0}.source-preview-state strong{font-size:12px}.source-preview-state small{margin-top:2px;color:var(--muted);font-size:9.5px}.status-line{display:flex;min-height:27px;align-items:center;gap:7px;padding:8px 2px 0;color:#9e3d4d;font-size:11px;font-weight:800}.status-dot{width:6px;height:6px;flex:0 0 auto;background:var(--coral);border-radius:50%;box-shadow:0 0 0 4px var(--coral-soft)}.ai-generate-button{width:100%;min-height:42px;padding:0 12px}.warning-note{margin:7px 0 0;color:#a7640e;font-size:10px;line-height:1.45}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.metrics-grid div{min-width:0;min-height:58px;padding:9px 7px;background:#fff9f8;border:1px solid #f1e2df;border-radius:8px}.metrics-grid span,.metrics-grid strong{display:block}.metrics-grid span{margin-bottom:5px;color:var(--muted);font-size:9px}.metrics-grid strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.palette-note{display:flex;align-items:center;gap:8px;margin-top:9px;padding:9px 10px;color:#9b3d4d;background:#fff5f6;border:1px solid #ffd2d8;border-radius:8px}.palette-note>span{min-width:0}.palette-note strong,.palette-note small{display:block}.palette-note strong{font-size:11px}.palette-note small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.35}.activation-state{gap:8px;min-height:46px;padding:10px;color:#8a5a11;background:#fff9ec;border:1px solid #f2d49b;border-radius:9px;font-size:11px;font-weight:800}.activation-state.success{color:#157a49;background:#eefbf4;border-color:#bee9cf}.activation-state>span{min-width:0}.activation-state strong,.activation-state small{display:block;letter-spacing:0}.activation-state small{margin-top:3px;color:#507963;font-size:9.5px;font-weight:700}.activation-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:8px}.activation-form input{min-width:0;height:37px;padding:0 9px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:7px;letter-spacing:.12em;text-transform:uppercase}.activation-form button{height:37px;padding:0 12px;color:#fff;background:var(--coral);border-radius:7px;font-size:11px;font-weight:800}.export-actions{display:grid;gap:6px;margin-top:9px}.export-actions button{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:38px;padding:0 10px;color:#504c55;background:#fff;border:1px solid var(--line-strong);border-radius:7px;font-size:11px;font-weight:800}.export-actions button:first-child:not(:disabled){color:#fff;background:var(--coral);border-color:var(--coral)}.inventory-panel{padding:13px 14px}.inventory-head{justify-content:space-between;gap:14px;margin-bottom:9px}.inventory-head h2{font-size:15px}.inventory-head>strong{color:var(--coral);font-size:12px}.swatches{display:flex;gap:7px;overflow:auto;padding-bottom:2px;scrollbar-color:#eacfc9 transparent;scrollbar-width:thin}.swatch{gap:7px;min-width:128px;min-height:42px;padding:7px 8px;background:color-mix(in srgb,var(--swatch) 13%,white);border:1px solid color-mix(in srgb,var(--swatch) 34%,white);border-radius:8px}.bead-swatch{width:21px;height:21px;flex:0 0 auto;background:radial-gradient(circle,transparent 0 24%,rgba(10,15,25,.22) 25% 39%,transparent 40%),var(--swatch);border-radius:50%;box-shadow:inset 0 1px #ffffffa6}.swatch b{font-size:11px}.swatch small{min-width:0;flex:1;overflow:hidden;color:#615c64;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.swatch strong{font-size:11px}.inventory-empty{display:grid;min-height:48px;place-items:center;color:var(--muted);background:snow;border:1px dashed #e4ccc6;border-radius:8px;font-size:11px;font-weight:750}@media(max-width:1280px){.topbar{grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);gap:14px}.workspace{grid-template-columns:minmax(250px,272px) minmax(460px,1fr) minmax(244px,264px)}.workspace-nav button{min-width:92px;padding:0 11px}.brand p{display:none}.activation-pill{max-width:170px;overflow:hidden;text-overflow:ellipsis}}@media(max-width:960px){:root{--workbench-height: 690px}.app-shell{padding:10px}.topbar{grid-template-columns:1fr auto;gap:10px;margin-bottom:10px}.workspace-nav{grid-column:1 / -1;grid-row:2;width:100%}.workspace-nav button{min-width:0}.workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"source" "result" "canvas" "inventory";gap:9px}.header-export{display:none}.workflow-rail{height:auto;overflow:visible;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.step-section,.step-section+.step-section{margin:0 0 8px;padding:0;background:#fffefd;border:1px solid var(--line);border-radius:10px;box-shadow:0 7px 22px #5e3a300b}.step-heading{min-height:46px;padding:0 12px}.step-chevron{display:block}.step-section.is-open .step-chevron{transform:rotate(180deg)}.step-body{grid-template-rows:0fr;transition:grid-template-rows .2s ease}.step-section.is-open .step-body{grid-template-rows:1fr}.step-body-inner{overflow:hidden;padding:0 12px}.step-section.is-open .step-body-inner{padding-bottom:12px}.canvas-panel{height:var(--workbench-height);min-height:590px}.source-dropzone img,.empty-source{height:190px}.source-preview-frame{width:min(90%,680px)}}@media(max-width:560px){:root{--workbench-height: 610px}.app-shell{padding:8px}.topbar{min-height:54px}.brand{gap:8px}.brand-mark{width:35px;height:35px}.brand h1{font-size:17px}.activation-pill{max-width:112px;min-height:32px;padding:0 10px;font-size:10px}.workspace-nav{gap:2px;padding:3px}.workspace-nav button{min-height:36px;padding:0 6px;font-size:11px}.step-heading{min-height:45px}.step-number{width:23px;height:23px}.source-dropzone img,.empty-source{height:172px}.canvas-panel{min-height:540px;padding:9px}.canvas-header{flex-wrap:wrap}.canvas-header>div:first-child{flex:1 1 150px}.draft-thumb{order:3;width:100%;margin:0}.editor-toolbar{flex-wrap:wrap}.history-tools{margin-left:auto}.zoom-control{width:100%;justify-content:flex-end;padding-top:5px;margin-left:0;border-top:1px solid var(--line)}.canvas-viewport,.source-preview{min-height:410px}.source-preview{padding:12px}.source-preview-frame{width:96%}.source-preview-state{right:8px;bottom:8px}.inventory-head{align-items:flex-start}.inventory-head p{max-width:245px}.swatches{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.swatch{min-width:0}}@media(max-width:380px){.brand h1{font-size:15px}.activation-pill{max-width:98px}.size-grid{grid-template-columns:repeat(2,1fr)}.tool-group select{width:91px}}@media print{.topbar,.source-rail,.result-rail,.inventory-panel,.editor-toolbar,.status-line{display:none!important}.app-shell{padding:0;background:#fff}.workspace{display:block}.canvas-panel{min-height:0;height:auto;padding:0;border:0;box-shadow:none}.canvas-header{margin-bottom:12px}.view-tabs,.draft-thumb{display:none}.canvas-viewport{overflow:visible;border:0}.pattern-canvas{width:100%!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}