:root{color:#242837;background:#f4f6f9;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--coral: #f04464;--coral-soft: #fff1f4;--violet: #7657e8;--cyan: #28a9c7;--green: #29a968;--yellow: #f2a42b;--ink: #242837;--muted: #73798b;--line: #dfe3eb;--surface: #ffffff}*{box-sizing:border-box}html{background:#f4f6f9}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(40,169,199,.28);outline-offset:2px}.app-shell{min-height:100vh;padding:14px 16px 22px;background:#f4f6f9}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:20px;margin:0 auto 12px;max-width:1760px}.brand,.header-actions,.section-title,.canvas-header,.editor-toolbar,.tool-group,.zoom-control,.activation-state,.inventory-head,.swatch{display:flex;align-items:center}.brand{gap:10px;min-width:0}.brand-mark{display:grid;width:38px;height:38px;flex:0 0 auto;place-items:center;color:#fff;background:var(--coral);border:2px solid #fff;border-radius:8px;box-shadow:0 6px 18px #f0446438}.brand h1,.canvas-header h2,.inventory-head h2{margin:0;color:var(--ink);letter-spacing:0}.brand h1{font-size:21px;line-height:1.15}.brand p,.canvas-header p,.inventory-head p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.header-actions{gap:9px}.activation-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;color:#6f7587;background:#fff;border:1px solid var(--line);border-radius:17px;font-size:12px;font-weight:800}.activation-pill.active{color:#157c4c;background:#ebfaf2;border-color:#bce8ce}.primary-button,.ai-generate-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#fff;background:var(--coral);border-radius:7px;font-weight:850}.primary-button{min-height:40px;padding:0 16px}.header-export{min-width:112px}.workspace{display:grid;grid-template-columns:280px minmax(620px,1fr) 278px;gap:12px;align-items:start;max-width:1760px;margin:0 auto}.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 34px #2d34480e}.control-rail,.result-rail{padding:14px}.control-rail section+section,.result-rail section+section{margin-top:16px;padding-top:16px;border-top:1px solid #edf0f4}.section-title{gap:8px;margin-bottom:10px}.section-title>span{display:grid;width:24px;height:24px;place-items:center;color:#fff;background:var(--coral);border-radius:6px;font-size:12px;font-weight:900}.section-title strong{font-size:14px}.source-dropzone{padding:10px;background:#fbfcfe;border:1px dashed #cfd6e2;border-radius:7px;text-align:center}.source-dropzone img,.empty-source{width:100%;height:150px;margin-bottom:9px;border-radius:6px}.source-dropzone img{display:block;object-fit:contain;background:#eef2f6}.empty-source{display:grid;align-content:center;justify-items:center;gap:7px;color:var(--cyan);background-color:#f6f9fb;background-image:linear-gradient(45deg,#e9eef3 25%,transparent 25%),linear-gradient(-45deg,#e9eef3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9eef3 75%),linear-gradient(-45deg,transparent 75%,#e9eef3 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:11px;text-overflow:ellipsis;white-space:nowrap}.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;color:var(--coral);background:#fff;border:1px solid #f5afbd;border-radius:6px;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:50px;padding:7px 8px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:7px;text-align:left}.style-option.selected{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:9.5px}.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.size-grid button,.fit-grid button{color:#5b6275;background:#f7f8fa;border:1px solid var(--line);border-radius:6px}.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:#f294a7}.size-grid strong{font-size:11px}.size-grid small{font-size:8px}.setting-hint{margin:7px 0 9px;color:var(--cyan);font-size:10px;font-weight:800}.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:11px}.fit-grid button{min-height:44px;padding:6px 8px;text-align:left}.fit-grid button.selected{color:#4e37bd;background:#f1efff;border-color:#a895ee}.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:8px;color:#596073;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:34px;color:#596073;border-top:1px solid #edf0f4;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:14px}.rail-actions .primary-button{flex:1}.icon-button{display:inline-grid;width:40px;height:40px;place-items:center;color:#596073;background:#fff;border:1px solid var(--line);border-radius:7px}.canvas-panel{display:flex;min-width:0;height:calc(100vh - 84px);min-height:680px;max-height:1040px;flex-direction:column;padding:12px}.canvas-header{justify-content:space-between;gap:10px;min-height:42px;margin-bottom:8px}.canvas-header h2{font-size:17px}.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:#f5f7fa;border:1px solid var(--line);border-radius:5px}.view-tabs,.provider-tabs{display:grid;padding:3px;gap:3px;background:#f1f3f6;border-radius:7px}.view-tabs{grid-template-columns:1fr 1fr}.view-tabs button,.provider-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:31px;color:#606779;background:transparent;border-radius:5px;font-size:11px;font-weight:800}.view-tabs button{padding:0 10px}.view-tabs button.selected,.provider-tabs button.selected{color:#4f3ec1;background:#fff;box-shadow:0 1px 5px #262c3d1f}.editor-toolbar{gap:7px;min-height:42px;padding:5px 7px;margin-bottom:8px;background:#f8f9fb;border:1px solid var(--line);border-radius:7px}.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:#5e6577;background:#fff;border:1px solid var(--line);border-radius:5px}.tool-group button.selected{color:#fff;background:var(--violet);border-color:var(--violet)}.tool-group select{width:112px;height:31px;padding:0 7px 0 24px;color:#4d5468;background-color:#fff;background-image:radial-gradient(circle at 12px 50%,var(--selected-color) 0 6px,transparent 7px);border:1px solid var(--line);border-radius:5px;font-size:10px;font-weight:750}.zoom-control{gap:3px;margin-left:auto}.zoom-control span{min-width:42px;color:#5e6577;text-align:center;font-size:10px;font-weight:800}.canvas-viewport{display:grid;min-height:0;flex:1;align-items:center;overflow:auto;background:#f8fafc;border:1px solid var(--line);border-radius:7px;overscroll-behavior:contain}.pattern-canvas{display:block;height:auto;margin:auto;cursor:crosshair;image-rendering:auto}.status-line{min-height:27px;padding:9px 2px 0;color:#5d48c5;font-size:11px;font-weight:800}.result-rail{min-width:0}.provider-tabs{grid-template-columns:repeat(3,1fr);margin-bottom:8px}.ai-generate-button{width:100%;min-height:42px;padding:0 12px;background:var(--violet)}.warning-note,.model-note{margin:7px 0 0;font-size:10px;line-height:1.45}.warning-note{color:#a7640e}.model-note{overflow-wrap:anywhere;color:var(--muted)}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.metrics-grid div{min-height:56px;padding:9px;background:#f7f8fa;border:1px solid #e7eaf0;border-radius:7px}.metrics-grid span,.metrics-grid strong{display:block}.metrics-grid span{margin-bottom:5px;color:var(--muted);font-size:10px}.metrics-grid strong{font-size:16px}.activation-state{gap:7px;min-height:42px;padding:9px 10px;color:#8a5a11;background:#fff8e9;border:1px solid #f2d49b;border-radius:7px;font-size:11px;font-weight:800}.activation-state.success{color:#157c4c;background:#ebfaf2;border-color:#bce8ce}.activation-state>span{min-width:0}.activation-state strong,.activation-state small{display:block;letter-spacing:0}.activation-state small{margin-top:2px;color:#4f7864;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:36px;padding:0 9px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px}.activation-form button{height:36px;padding:0 11px;color:#fff;background:var(--violet);border-radius:6px;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:37px;padding:0 10px;color:#444b5f;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:11px;font-weight:800}.inventory-panel{grid-column:1 / -1;padding:13px}.inventory-head{justify-content:space-between;gap:14px;margin-bottom:9px}.inventory-head h2{font-size:16px}.inventory-head>strong{color:var(--coral);font-size:12px}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px}.swatch{gap:7px;min-width:0;min-height:38px;padding:6px 8px;background:color-mix(in srgb,var(--swatch) 13%,white);border:1px solid color-mix(in srgb,var(--swatch) 34%,white);border-radius:6px}.bead-swatch{width:20px;height:20px;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:#5f6678;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.swatch strong{font-size:11px}.mobile-generate{display:none}@media(max-width:1180px){.workspace{grid-template-columns:264px minmax(520px,1fr)}.result-rail{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr .8fr 1.2fr;gap:16px}.result-rail section+section{margin:0;padding:0 0 0 16px;border-top:0;border-left:1px solid #edf0f4}.inventory-panel{grid-column:1 / -1}}@media(max-width:800px){.app-shell{padding:10px}.topbar{min-height:52px;margin-bottom:9px}.brand-mark{width:34px;height:34px}.brand h1{font-size:18px}.brand p{font-size:10px}.header-export{display:none}.workspace{grid-template-columns:minmax(0,1fr);gap:9px}.control-rail,.canvas-panel,.result-rail,.inventory-panel{grid-column:1}.control-rail{order:1}.canvas-panel{order:2;height:680px;min-height:600px;max-height:none}.result-rail{order:3;display:block}.inventory-panel{order:4}.result-rail section+section{margin-top:16px;padding:16px 0 0;border-top:1px solid #edf0f4;border-left:0}.source-dropzone img,.empty-source{height:178px}.style-grid{grid-template-columns:1fr 1fr}.canvas-header{flex-wrap:wrap}.canvas-header>div:first-child{flex:1 1 160px}.draft-thumb{order:3;width:100%;margin:0}.editor-toolbar{flex-wrap:wrap}.zoom-control{margin-left:auto}.canvas-viewport{min-height:470px}}@media(max-width:430px){.control-rail,.result-rail{padding:12px}.canvas-panel{padding:10px}.source-dropzone img,.empty-source{height:158px}.size-grid{grid-template-columns:repeat(2,1fr)}.size-grid button{min-height:38px}.tool-group select{width:98px}.tool-group+.tool-group{padding-left:4px}.zoom-control{width:100%;justify-content:flex-end;padding-top:5px;border-top:1px solid var(--line)}.canvas-viewport{min-height:420px}.swatches{grid-template-columns:1fr 1fr}}@media print{.topbar,.control-rail,.result-rail,.inventory-panel,.editor-toolbar,.status-line,.mobile-generate{display:none!important}.app-shell{padding:0;background:#fff}.workspace{display:block}.canvas-panel{min-height:0;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}}