.license-info-row[data-v-bd5c49a6]{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;background:#fafafa;margin-bottom:8px;font-size:13px}.license-info-row span[data-v-bd5c49a6]:first-child{color:#71717a}.license-info-row span[data-v-bd5c49a6]:last-child{font-weight:500;color:#18181b}.license-active[data-v-bd5c49a6]{color:#16a34a!important}:root{--bead-primary: #165dff;--bead-bg: #f2f3f5;--bead-border: #e5e6eb;--bead-text: #1d2129;--bead-text-2: #4e5969;--bead-text-3: #86909c}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.bead-app{display:flex;flex-direction:column;height:100%;background:var(--bead-bg)}.app-header{min-height:56px;background:#fff;border-bottom:1px solid var(--bead-border);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;flex-shrink:0;z-index:10}.app-header h1{margin:0;font-size:17px;font-weight:600;color:var(--bead-text)}.header-actions{display:flex;align-items:center;gap:8px}.app-main{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}@media(min-width:768px){.app-main{flex-direction:row}}.canvas-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#e8e9ec;order:1}@media(min-width:768px){.canvas-wrap{order:0}}.canvas-wrap canvas{display:block;touch-action:none;width:100%;height:100%}.canvas-status{position:absolute;top:16px;left:16px;right:16px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.canvas-size-badge{background:#ffffffeb;border:1px solid var(--bead-border);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:500;color:var(--bead-text-2);box-shadow:0 1px 3px #00000014}.canvas-actions{display:flex;gap:4px;pointer-events:auto}.icon-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--bead-border);border-radius:8px;background:#ffffffeb;color:var(--bead-text-2);font-size:15px;cursor:pointer;box-shadow:0 1px 3px #00000014;transition:transform .1s,color .15s}.icon-btn:hover:not(:disabled){color:var(--bead-primary)}.icon-btn:active:not(:disabled){transform:scale(.94)}.icon-btn:disabled{color:#c9cdd4;cursor:not-allowed}.right-panel{position:absolute;inset-inline:12px;bottom:4.75rem;z-index:30;display:flex;flex-direction:column;overflow:hidden;height:0;transform:translateY(12px);opacity:0;pointer-events:none;border:1px solid var(--bead-border);border-bottom:none;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -12px 36px #0f172a29;transition:height .3s ease,transform .3s ease,opacity .2s ease}.right-panel.mobile-sheet-open{height:54dvh;max-height:28rem;transform:translateY(0);opacity:1;pointer-events:auto}.right-panel.mobile-sheet-open.mobile-panel-config{height:auto;max-height:23rem}.right-panel.mobile-sheet-open.mobile-panel-image,.right-panel.mobile-sheet-open.mobile-panel-tools{height:auto;max-height:54dvh}@media(min-width:768px){.right-panel{position:static;width:var(--right-panel-width, 360px);height:auto;max-height:none;transform:none;opacity:1;pointer-events:auto;border-radius:0;border:none;border-left:1px solid var(--bead-border);box-shadow:none;flex-shrink:0}.right-panel.panel-collapsed{width:0;overflow:hidden}}.right-panel-inner{flex:1;min-height:0;overflow-y:auto}.panel-section{border-bottom:1px solid #f2f3f5;padding:12px 16px}.panel-section:last-child{border-bottom:none}.panel-resize-handle{display:none}@media(min-width:768px){.panel-resize-handle{display:block;position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:20}.panel-resize-handle:hover{background:#165dff1a}}.panel-collapse-btn{display:none}@media(min-width:768px){.panel-collapse-btn{display:grid;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:20;width:24px;height:48px;place-items:center;background:#fff;border:1px solid var(--bead-border);border-right:none;border-radius:8px 0 0 8px;cursor:pointer;color:var(--bead-text-2);box-shadow:0 1px 4px #00000014}}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.panel-title-row h4{margin:0;font-size:14px;font-weight:600;color:var(--bead-text)}.chip{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--bead-border);background:#fff;font-size:13px;font-weight:500;color:var(--bead-text-2);cursor:pointer;transition:all .15s;white-space:nowrap}.chip:hover{border-color:var(--bead-primary);color:var(--bead-primary)}.chip.active{background:var(--bead-primary);border-color:var(--bead-primary);color:#fff}.chip:disabled{opacity:.45;cursor:not-allowed}.upload-area{border:2px dashed #d5d9e0;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .2s}.upload-area:hover:not(.disabled){border-color:var(--bead-primary);background:#165dff0a}.upload-area.disabled{opacity:.6;cursor:not-allowed}.upload-preview{position:relative;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--bead-border);background:#f7f8fa;cursor:pointer}.upload-preview img{width:100%;height:100%;object-fit:contain}.upload-preview .upload-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;color:#fff;font-size:13px;font-weight:500}.upload-preview:hover .upload-overlay{opacity:1}.upload-hint-text{font-size:12px;color:var(--bead-text-3);text-align:center;margin-top:8px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tool-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border:1px solid var(--bead-border);border-radius:10px;background:#fff;font-size:13px;font-weight:500;color:var(--bead-text-2);cursor:pointer;transition:all .15s}.tool-btn:hover{border-color:var(--bead-primary);color:var(--bead-primary)}.tool-btn.active{background:var(--bead-primary);border-color:var(--bead-primary);color:#fff}.config-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#f2f3f5;border-radius:10px;padding:4px;margin-bottom:14px}.config-tab{height:34px;border:none;border-radius:8px;background:transparent;font-size:13px;font-weight:600;color:var(--bead-text-2);cursor:pointer}.config-tab.active{background:var(--bead-primary);color:#fff}.config-value-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.config-value-row .big-value{font-size:22px;font-weight:600;line-height:1;color:var(--bead-text)}.config-value-row .sub-value{font-size:12px;color:var(--bead-text-3);margin-top:4px}.range-input{width:100%;height:32px;margin:12px 0 8px;accent-color:var(--bead-primary)}.nudge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.nudge-btn{height:36px;border:none;border-radius:10px;background:#f7f8fa;font-size:13px;font-weight:600;color:var(--bead-text-2);cursor:pointer}.nudge-btn:hover{background:#eef1f6}.style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px}.style-btn{height:36px;border:none;border-radius:10px;background:#f7f8fa;font-size:12px;font-weight:600;color:var(--bead-text-2);cursor:pointer}.style-btn.active{background:var(--bead-primary);color:#fff}.color-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-toolbar .full{grid-column:1 / -1}.color-search-result-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:12px 0 6px;color:var(--bead-text-2)}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}.swatch{position:relative;min-width:0;aspect-ratio:1;border-radius:8px;border:1px solid var(--bead-border);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;color:#000;text-shadow:0 1px 2px rgba(255,255,255,.4)}.swatch:hover{border-color:var(--bead-primary)}.swatch.selected,.swatch.highlighted{border-color:var(--bead-primary);box-shadow:0 0 0 2px #165dff59}.swatch.target{border-color:#1d2129;box-shadow:0 0 0 2px #1d212940}.swatch.transparent{background-image:linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;color:#4b5563;text-shadow:none}.swatch .count-badge{position:absolute;left:4px;top:4px;background:#00000080;color:#fff;font-size:10px;line-height:16px;padding:0 5px;border-radius:4px}.swatch .selected-dot{position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--bead-primary)}.family-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;margin-top:14px}.family-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border:1px solid var(--bead-border);border-radius:8px;background:#fff;font-size:12px;font-weight:600;color:var(--bead-text-2);cursor:pointer}.family-btn.active{border-color:var(--bead-primary);background:#165dff0f;color:var(--bead-primary)}.family-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}.replace-row{display:flex;align-items:stretch;gap:8px;margin-top:12px}.replace-block{flex:1;min-width:0;border:1px solid var(--bead-border);border-radius:10px;background:#f7f8fa;padding:10px 12px}.replace-block.pick{border-color:var(--bead-primary);background:#165dff0d;cursor:pointer}.replace-arrow{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#c9cdd4}.replace-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.tutorial-dialog-body{max-height:72dvh;overflow-y:auto;padding:8px 4px 8px 0}.tutorial-loading{padding:48px 0;text-align:center;color:#a1a1aa;font-size:14px}.tutorial-article{display:flex;flex-direction:column;gap:20px;color:#3f3f46;font-size:14px;line-height:1.5rem}.tutorial-article .tutorial-updated{margin:0;font-size:12px;color:#a1a1aa}.tutorial-blocks{display:flex;flex-direction:column;gap:16px}.tutorial-markdown{display:flex;flex-direction:column;gap:12px;color:#3f3f46;font-size:14px;line-height:1.5rem}.tutorial-markdown p{margin:0}.tutorial-blank{height:8px}.tutorial-h1,.tutorial-h2,.tutorial-h3{margin:0;color:#18181b;font-weight:600}.tutorial-h1{padding-top:8px;font-size:20px}.tutorial-h2{padding-top:8px;font-size:18px}.tutorial-h3{padding-top:4px;font-size:16px}.tutorial-ul,.tutorial-ol{margin:0;padding-left:20px}.tutorial-ul li,.tutorial-ol li{margin-bottom:4px}.tutorial-pre{overflow-x:auto;margin:0;border-radius:8px;background:#09090b;padding:16px;font-size:12px;line-height:1.25rem;color:#f4f4f5}.tutorial-pre-lang{margin-bottom:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:10px;letter-spacing:.025em;text-transform:uppercase;color:#71717a}.tutorial-hr{margin:0;border:none;border-top:1px solid #e4e4e7}.tutorial-quote{margin:0;border-left:4px solid #d4d4d8;background:#fafafa;padding:12px 16px;color:#52525b}.tutorial-quote p{margin:0 0 8px}.tutorial-quote p:last-child{margin-bottom:0}.tutorial-table-wrap{overflow-x:auto;border:1px solid #e4e4e7;border-radius:8px}.tutorial-table{width:100%;border-collapse:collapse;font-size:14px}.tutorial-th,.tutorial-td{padding:8px 12px;text-align:left}.tutorial-th{border-bottom:1px solid #e4e4e7;background:#fafafa;font-size:12px;font-weight:600;color:#71717a}.tutorial-td{border-top:1px solid #f4f4f5;color:#3f3f46}.tutorial-link{color:#2563eb;font-weight:500;text-decoration:underline;text-underline-offset:2px}.tutorial-code{border-radius:4px;background:#f4f4f5;padding:2px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.92em;color:#27272a}.tutorial-strong{color:#18181b;font-weight:600}.tutorial-del{color:#71717a}.tutorial-tag{border-radius:4px;background:#f4f4f5;padding:2px 6px;font-size:12px;font-weight:500;color:#52525b}.tutorial-inline-img{display:block;max-width:100%;max-height:320px;margin:12px 0;border:1px solid #e4e4e7;border-radius:8px;object-fit:contain}.tutorial-figure{overflow:hidden;margin:0;border:1px solid #e4e4e7;border-radius:8px;background:#fafafa}.tutorial-media-img{display:block;margin:0 auto;max-width:100%;max-height:56dvh;object-fit:contain}.tutorial-media-video{display:block;width:100%;max-height:56dvh;background:#000;object-fit:contain}.tutorial-figcaption{border-top:1px solid #e4e4e7;background:#fff;padding:8px 12px;font-size:12px;color:#71717a}.tutorial-empty{border:1px dashed #e4e4e7;border-radius:8px;background:#fafafa;padding:32px 16px;text-align:center;font-size:14px;color:#a1a1aa}.mobile-dock{position:absolute;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:block}@media(min-width:768px){.mobile-dock{display:none}}.dock-pop{margin-bottom:8px;border:1px solid var(--bead-border);border-radius:16px;background:#fffffff5;box-shadow:0 -10px 28px #0f172a24;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px}.dock-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border:1px solid var(--bead-border);border-radius:16px;background:#fffffff5;box-shadow:0 -12px 36px #0f172a29;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px}.dock-tab{display:flex;align-items:center;justify-content:center;height:44px;border:none;border-radius:12px;background:#f7f8fa;font-size:13px;font-weight:600;color:var(--bead-text-2);cursor:pointer}.dock-tab.active{background:var(--bead-primary);color:#fff}.dock-chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.dock-color-chip{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border:1px solid var(--bead-border);border-radius:12px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:var(--bead-text);flex-shrink:0}.dock-color-chip .color-square{width:22px;height:22px;border-radius:7px;border:1px solid rgba(0,0,0,.15)}.export-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.export-option{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:1px solid var(--bead-border);border-radius:12px;background:#f7f8fa;font-size:13px;font-weight:600;color:var(--bead-text-2);cursor:pointer}.export-option.active{background:var(--bead-primary);border-color:var(--bead-primary);color:#fff}.export-check{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;border:1px solid currentColor;font-size:11px}.mobile-section{display:none}@media(min-width:768px){.mobile-section{display:block}}.mobile-section.visible{display:block}.empty-tip{text-align:center;padding:20px 0;color:#a1a1aa;font-size:13px}@media(max-width:767px){.canvas-wrap{padding-bottom:5rem}.app-header{padding-top:max(8px,env(safe-area-inset-top))}.app-header h1{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arco-modal{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.arco-modal-body{overflow-y:auto}}