:root{--primary-color: #007AFF;--bg-color: #F2F2F7;--toolbar-bg: rgba(255, 255, 255, .9);--text-color: #000000;--border-color: #C6C6C8;--cell-size: 20px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 12px rgba(0,0,0,.1);--left-island-top: 16px;--left-island-gap: 8px;--minimap-height-expanded: 140px;--minimap-height-collapsed: 52px;--view-height-expanded: 86px;--view-height-collapsed: 52px;--island-toggle-size: 22px;--island-toggle-top: 8px;--island-toggle-top-collapsed: 15px;--island-toggle-right: 28px;--island-toggle-right-collapsed: 30px;--island-bg-rgb: 255, 255, 255;--island-alpha: .85;--island-alpha-collapsed: .92;--island-blur: 14px;--app-bg: #f2f2f7;--ui-strong: #1c1c1e;--ui-muted: #8e8e93;--surface-1: #f2f2f7;--surface-2: #e5e5ea;--surface-3: #d1d1d6;--divider-color: rgba(0,0,0,.14);--control-border: rgba(0,0,0,.1)}body.theme-dark{--app-bg: #1c1c1e;--ui-strong: #f2f2f7;--ui-muted: #aeaeb2;--surface-1: #2c2c2e;--surface-2: #3a3a3c;--surface-3: #48484a;--island-bg-rgb: 44, 44, 46;--divider-color: rgba(255,255,255,.18);--control-border: rgba(255,255,255,.18)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Arial,sans-serif;background-color:var(--app-bg);color:var(--ui-strong);height:100vh;overflow:hidden;display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;height:100%;width:100%;position:relative}.app-container{width:100vw;height:100vh;position:relative;background-color:var(--app-bg);overflow:hidden;display:flex;justify-content:center;align-items:center}.canvas-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;z-index:1}canvas{image-rendering:pixelated}#bead-canvas{position:absolute;top:0;left:0;background-color:#fff;box-shadow:0 0 40px #00000014}#dynamic-canvas{position:absolute;top:0;left:0;background:transparent;box-shadow:none;pointer-events:none}.floating-top-bar{position:fixed;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));padding:8px 12px;border-radius:100px;box-shadow:0 4px 20px #00000014;z-index:100;gap:16px;height:52px}.brand-capsule{display:flex;align-items:center;gap:8px;padding-left:4px}.brand-logo-small{width:32px;height:32px}.brand-logo-small svg{width:100%;height:100%}.brand-name{font-size:16px;font-weight:700;color:var(--ui-strong);letter-spacing:-.5px;white-space:nowrap}.separator{width:1px;height:24px;background:var(--divider-color)}.top-actions{display:flex;gap:4px}.top-actions .icon-btn{width:40px;height:40px;border-radius:12px;color:var(--ui-muted);background:var(--surface-1);border:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;cursor:pointer;transition:background .2s,color .2s,height .25s cubic-bezier(.25,.46,.45,.94),width .25s cubic-bezier(.25,.46,.45,.94),transform .1s cubic-bezier(.25,.46,.45,.94)}.top-actions .icon-btn:hover{background:var(--surface-2);color:var(--ui-strong)}.top-actions .icon-btn:active{transform:scale(.92);background:var(--surface-3)}.top-actions .icon-btn svg{width:20px;height:20px;flex-shrink:0;stroke-width:2}.icon-label{font-size:10px;font-weight:600;color:inherit;white-space:nowrap;line-height:1;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94)}body.topbar-labels .floating-top-bar{height:68px}body.topbar-labels .top-actions .icon-btn{height:auto;width:auto;padding:0 4px 2px;background:transparent;border-radius:0;gap:4px}body.topbar-labels .top-actions .icon-btn svg{width:40px;height:40px;padding:10px;box-sizing:border-box;background:var(--surface-1);border-radius:12px;transition:background .2s,color .2s;flex-shrink:0}body.topbar-labels .top-actions .icon-btn:hover{background:transparent}body.topbar-labels .top-actions .icon-btn:hover svg{background:var(--surface-2)}body.topbar-labels .top-actions .icon-btn:active{background:transparent;transform:none}body.topbar-labels .top-actions .icon-btn:active svg{background:var(--surface-3);transform:scale(.92)}body.topbar-labels .icon-label{max-height:14px;opacity:1}.minimap-panel{position:fixed;top:var(--left-island-top);left:16px;width:180px;height:140px;border-radius:14px;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));box-shadow:0 6px 24px #0000001f;overflow:visible;z-index:95;border:1px solid rgba(255,255,255,.6);pointer-events:auto;transition:width .2s ease,height .2s ease,border-radius .2s ease,background .2s ease}#minimap-canvas{width:100%;height:100%;display:block;border-radius:14px}#minimap-viewport{position:absolute;border:2px solid rgba(0,122,255,.95);background:#007aff1f;border-radius:4px;box-shadow:0 0 0 1px #ffffffa6;cursor:grab;min-width:10px;min-height:10px}#minimap-viewport:active{cursor:grabbing}.minimap-toggle-btn{position:absolute;top:var(--island-toggle-top);right:calc(-1 * var(--island-toggle-right));width:var(--island-toggle-size);height:var(--island-toggle-size);border:none;border-radius:7px;background:rgba(var(--island-bg-rgb),var(--island-alpha));color:var(--ui-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:0 1px 6px #00000026}.minimap-toggle-btn svg{width:14px;height:14px}.collapsed-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;flex-direction:column;color:var(--ui-strong);gap:4px;pointer-events:none}.collapsed-badge svg{width:15px;height:15px;stroke-width:2}.collapsed-badge span{font-size:10px;font-weight:600;line-height:1.1;letter-spacing:.2px}.minimap-panel.collapsed{width:52px;height:52px;border-radius:14px;background:rgba(var(--island-bg-rgb),var(--island-alpha-collapsed))}.minimap-panel.collapsed #minimap-canvas,.minimap-panel.collapsed #minimap-viewport{opacity:0;pointer-events:none}.minimap-panel.collapsed .minimap-toggle-btn{top:var(--island-toggle-top-collapsed);right:calc(-1 * var(--island-toggle-right-collapsed))}.minimap-panel.collapsed .minimap-toggle-btn svg{transform:rotate(180deg)}.minimap-panel.collapsed .minimap-badge{display:flex}.view-control-panel{position:fixed;top:calc(var(--left-island-top) + var(--minimap-height-expanded) + var(--left-island-gap));left:16px;width:180px;height:86px;border-radius:14px;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));box-shadow:0 6px 24px #0000001f;border:1px solid rgba(255,255,255,.6);padding:8px;z-index:95;transition:width .2s ease,height .2s ease,border-radius .2s ease,background .2s ease}.minimap-panel.collapsed+.view-control-panel{top:calc(var(--left-island-top) + var(--minimap-height-collapsed) + var(--left-island-gap))}.view-control-row{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px}.view-btn{border:none;background:var(--surface-1);color:var(--ui-strong);width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.view-btn:hover{background:var(--surface-2);color:var(--ui-strong)}.view-btn:active{transform:scale(.94)}.view-btn svg{width:16px;height:16px;stroke-width:2}.view-toggle-btn{position:absolute;top:var(--island-toggle-top);right:calc(-1 * var(--island-toggle-right));width:var(--island-toggle-size);height:var(--island-toggle-size);border:none;border-radius:7px;background:rgba(var(--island-bg-rgb),var(--island-alpha));color:var(--ui-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 6px #00000026}.view-toggle-btn svg{width:14px;height:14px}.view-control-panel.collapsed{width:52px;height:52px;border-radius:14px;padding:0;background:rgba(var(--island-bg-rgb),var(--island-alpha-collapsed))}.view-control-panel.collapsed .view-control-row{opacity:0;pointer-events:none}.view-control-panel.collapsed .view-toggle-btn{top:var(--island-toggle-top-collapsed);right:calc(-1 * var(--island-toggle-right-collapsed))}.view-control-panel.collapsed .view-toggle-btn svg{transform:rotate(180deg)}.view-control-panel.collapsed .view-badge{display:flex}.info-panel{position:fixed;top:calc(var(--left-island-top) + var(--minimap-height-expanded) + var(--left-island-gap) + var(--view-height-expanded) + var(--left-island-gap));left:16px;width:180px;border-radius:14px;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));box-shadow:0 6px 24px #0000001f;border:1px solid rgba(255,255,255,.6);padding:9px 10px;z-index:95;overflow:visible;transition:width .2s ease,height .2s ease,border-radius .2s ease,background .2s ease}.info-title{font-size:11px;font-weight:700;color:var(--ui-muted);margin-bottom:8px}.info-grid{display:grid;grid-template-columns:1fr;gap:5px}.info-item{display:flex;justify-content:space-between;align-items:center;gap:8px}.info-item span{font-size:11px;color:var(--ui-muted)}.info-item strong{font-size:11px;color:var(--ui-strong);font-weight:600}.info-color-value{display:inline-flex;align-items:center;gap:5px;font-style:normal}#info-color-chip{width:10px;height:10px;border-radius:4px;background:#000;border:1px solid rgba(0,0,0,.1);display:inline-block}#info-color-text{font-style:normal}.info-toggle-btn{position:absolute;top:var(--island-toggle-top);right:calc(-1 * var(--island-toggle-right));width:var(--island-toggle-size);height:var(--island-toggle-size);border:none;border-radius:7px;background:rgba(var(--island-bg-rgb),var(--island-alpha));color:var(--ui-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 6px #00000026}.info-toggle-btn svg{width:14px;height:14px}.minimap-panel.collapsed+.view-control-panel+.info-panel{top:calc(var(--left-island-top) + var(--minimap-height-collapsed) + var(--left-island-gap) + var(--view-height-expanded) + var(--left-island-gap))}.view-control-panel.collapsed+.info-panel{top:calc(var(--left-island-top) + var(--minimap-height-expanded) + var(--left-island-gap) + var(--view-height-collapsed) + var(--left-island-gap))}.minimap-panel.collapsed+.view-control-panel.collapsed+.info-panel{top:calc(var(--left-island-top) + var(--minimap-height-collapsed) + var(--left-island-gap) + var(--view-height-collapsed) + var(--left-island-gap))}.info-panel.collapsed{width:52px;height:52px;border-radius:14px;padding:0;background:rgba(var(--island-bg-rgb),var(--island-alpha-collapsed))}.info-panel.collapsed .info-title,.info-panel.collapsed .info-grid{opacity:0;pointer-events:none}.info-panel.collapsed .info-badge{display:flex}.info-panel.collapsed .info-toggle-btn{top:var(--island-toggle-top-collapsed);right:calc(-1 * var(--island-toggle-right-collapsed))}.info-panel.collapsed .info-toggle-btn svg{transform:rotate(180deg)}.floating-dock-container{position:absolute;bottom:34px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:100;pointer-events:none}.floating-dock{display:flex;align-items:center;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));padding:10px;border-radius:24px;box-shadow:0 10px 40px #0000001f;gap:8px;pointer-events:auto}.dock-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:transparent;border:none;cursor:pointer;width:56px;height:66px;position:relative;transition:transform .1s cubic-bezier(.34,1.56,.64,1)}.dock-btn:active{transform:scale(.92)}.dock-icon{width:44px;height:44px;background:var(--surface-1);border-radius:14px;display:flex;justify-content:center;align-items:center;color:var(--ui-muted);transition:transform .3s cubic-bezier(.25,.46,.45,.94),background-color .3s cubic-bezier(.25,.46,.45,.94),color .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s cubic-bezier(.25,.46,.45,.94);position:absolute;top:10px;z-index:2}.dock-btn.active .dock-icon{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #007aff4d;transform:translateY(-12px)}.dock-btn svg{width:24px;height:24px}.dock-label{font-size:10px;font-weight:600;color:var(--primary-color);opacity:0;position:absolute;bottom:4px;transform:translateY(4px);transition:opacity .2s cubic-bezier(.25,.46,.45,.94),transform .3s cubic-bezier(.25,.46,.45,.94);z-index:1;pointer-events:none}.dock-btn.active .dock-label{opacity:1;transform:translateY(0);transition-delay:.05s}.dock-separator{width:1px;height:32px;background:var(--divider-color);margin:0 8px}.dock-quick-btn{width:44px;height:44px;border-radius:14px;background:var(--surface-1);border:none;color:var(--ui-muted);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .2s cubic-bezier(.25,.46,.45,.94),color .2s cubic-bezier(.25,.46,.45,.94),transform .1s cubic-bezier(.34,1.56,.64,1)}.dock-quick-btn:hover{background:var(--surface-2);color:var(--ui-strong)}.dock-quick-btn:active{transform:scale(.92)}.dock-quick-btn svg{width:22px;height:22px}.dock-color-trigger{width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid white;box-shadow:0 2px 8px #00000026;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .2s;overflow:hidden;pointer-events:auto;position:relative;z-index:101}.dock-color-trigger:active{transform:scale(.9)}.current-color-dot{width:100%;height:100%;background-color:#000}.dock-material-trigger{height:44px;padding:0 12px;border-radius:22px;background:var(--surface-1, #f2f2f7);border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 8px #0000001a;cursor:pointer;display:flex;align-items:center;gap:6px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;position:relative;z-index:101}.dock-material-trigger:active{transform:scale(.92)}.current-material-dot{width:16px;height:16px;border-radius:50%;background:var(--primary-color);flex-shrink:0}.current-material-label{font-size:12px;font-weight:600;color:var(--ui-strong);white-space:nowrap;max-width:48px;overflow:hidden;text-overflow:ellipsis}.panel-title-group{display:flex;flex-direction:column;gap:2px}.panel-subtitle{font-size:11px;color:var(--ui-muted);font-weight:500}.mat-param-row{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.05)}.mat-param-row:last-child{border-bottom:none}.mat-param-label{font-size:11px;font-weight:600;color:var(--ui-muted)}.mat-param-control{display:flex;align-items:center;gap:8px}.mat-param-control input[type=range]{flex:1;accent-color:var(--primary-color);height:3px;cursor:pointer}.mat-param-value{font-style:normal;font-size:11px;font-weight:600;color:var(--primary-color);min-width:32px;text-align:right}.mat-param-btn-group{display:flex;gap:4px;flex-wrap:wrap}.mat-param-opt-btn{padding:3px 10px;border:none;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;background:#0000000f;color:var(--ui-muted);transition:all .15s cubic-bezier(.34,1.56,.64,1)}.mat-param-opt-btn:hover{background:#0000001a;color:var(--ui-strong)}.mat-param-opt-btn.active{background:var(--primary-color);color:#fff}.mat-param-opt-btn:active{transform:scale(.92)}.mat-colorlist{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%}.mat-color-swatch{width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,.7);box-shadow:0 1px 4px #00000026;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1);position:relative;flex-shrink:0}.mat-color-swatch:hover{transform:scale(1.15)}.mat-color-swatch:hover:after{content:"×";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000073;border-radius:6px;color:#fff;font-size:14px;font-weight:700}.mat-color-add{width:28px;height:28px;border-radius:8px;border:2px dashed rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ui-muted);transition:all .15s;flex-shrink:0}.mat-color-add:hover{border-color:var(--primary-color);color:var(--primary-color);background:#007aff0f}.mat-color-add svg{width:14px;height:14px}.mat-colorlist-hint{width:100%;font-size:10px;color:var(--ui-muted);margin-top:2px}.dock-color-trigger.dock-trigger-disabled{opacity:.35;cursor:not-allowed;pointer-events:auto}.dock-color-trigger.dock-trigger-disabled:active{transform:none}.dock-params-btn{width:44px;height:44px;border-radius:50%;background:var(--surface-1, #f2f2f7);border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 8px #0000001a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;pointer-events:auto;position:relative;z-index:101;flex-shrink:0}.dock-params-btn svg{width:18px;height:18px;color:var(--ui-muted)}.dock-params-btn:active{transform:scale(.92)}.dock-params-btn.active{background:#007aff1f;border-color:#007aff4d}.dock-params-btn.active svg{color:var(--primary-color)}.dock-params-btn.hidden{display:none!important}.dock-shape-trigger{height:44px;padding:0 12px;border-radius:22px;background:var(--surface-1, #f2f2f7);border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 8px #0000001a;cursor:pointer;display:flex;align-items:center;gap:6px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;position:relative;z-index:101}.dock-shape-trigger:active{transform:scale(.92)}.dock-shape-trigger svg{width:16px;height:16px;color:var(--primary-color);flex-shrink:0}.current-shape-label{font-size:12px;font-weight:600;color:var(--ui-strong);white-space:nowrap;max-width:48px;overflow:hidden;text-overflow:ellipsis}#shape-container{display:flex;flex-wrap:nowrap;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px;padding:4px 2px;scrollbar-width:none}#shape-container::-webkit-scrollbar{display:none}.shape-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:12px;border:none;background:transparent;cursor:pointer;transition:background .15s;flex-shrink:0}.shape-btn:hover{background:#0000000d}.shape-btn.active{background:#007aff1a}.shape-btn svg{width:28px;height:28px;color:var(--ui-muted);fill:none;stroke:currentColor;stroke-width:2}.shape-btn.active svg{color:var(--primary-color)}.shape-btn-label{font-size:10px;font-weight:600;color:var(--ui-muted)}.shape-btn.active .shape-btn-label{color:var(--primary-color)}.shape-btn:active{transform:scale(.9)}#material-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:4px;padding:4px 2px;scrollbar-width:none}#material-container::-webkit-scrollbar{display:none}.material-drawer-content{display:flex;align-items:center;gap:4px;padding:0}.material-scroll-btn{width:28px;height:28px;border-radius:50%;border:none;background:#0000000f;color:var(--ui-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s cubic-bezier(.34,1.56,.64,1)}.material-scroll-btn:hover{background:#0000001f;color:var(--ui-strong)}.material-scroll-btn:active{transform:scale(.88)}.material-scroll-btn svg{width:14px;height:14px}.material-scroll-btn:disabled{opacity:.25;pointer-events:none}.material-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;border-radius:12px;border:none;background:transparent;cursor:pointer;transition:background .15s;flex-shrink:0}.material-btn:hover{background:#0000000d}.material-btn.active{background:#007aff1a}.material-btn canvas{border-radius:50%;display:block}.material-btn-label{font-size:10px;font-weight:600;color:var(--ui-muted)}.material-btn.active .material-btn-label{color:var(--primary-color)}.tool-settings-bubble{background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));padding:6px 8px;border-radius:100px;box-shadow:0 10px 30px #0000001a;margin-bottom:16px;display:flex;gap:12px;align-items:center;opacity:1;transform:translateY(0);transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;border:.5px solid rgba(255,255,255,.5)}.tool-settings-bubble.hidden{opacity:0;transform:translateY(10px) scale(.95);pointer-events:none;display:none}.bubble-group{display:flex;align-items:center;gap:4px}.bubble-divider{width:1px;height:16px;background:#0000001a}.bubble-btn,.bubble-icon-btn{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;justify-content:center;align-items:center;color:#8e8e93;transition:all .2s;padding:0}.bubble-btn:hover,.bubble-icon-btn:hover{background:#0000000d;color:#1c1c1e}.bubble-btn.active,.bubble-icon-btn.active{background:#fff;color:var(--primary-color);box-shadow:0 2px 8px #0000001a}.size-dot{background:currentColor;border-radius:50%}.size-dot.s1{width:4px;height:4px}.size-dot.s3{width:8px;height:8px}.size-dot.s5{width:12px;height:12px}.bubble-icon-btn svg{width:18px;height:18px;stroke-width:2.5}.bubble-mat-group{display:flex;gap:4px;flex-wrap:wrap;max-width:200px;padding:2px 0}.bubble-mat-btn{padding:4px 10px;border:none;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;background:#0000000f;color:var(--ui-muted);transition:all .15s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}.bubble-mat-btn:hover{background:#0000001a;color:var(--ui-strong)}.bubble-mat-btn.active{background:var(--primary-color);color:#fff}.bubble-mat-btn:active{transform:scale(.92)}.palette-drawer{position:fixed;width:min(380px,calc(100vw - 24px));max-height:none;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));border-radius:100px;box-shadow:0 10px 30px #0000001f;border:.5px solid rgba(255,255,255,.55);z-index:9999;transition:none;padding:10px 12px;display:block;visibility:hidden;pointer-events:none}.palette-drawer.visible{visibility:visible;pointer-events:auto}.palette-drawer.hidden{visibility:hidden;pointer-events:none}.palette-handle{display:none}.palette-content{padding:0}.palette-scroll{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:4px;max-height:none;overflow:visible;align-items:center}.palette-btn{width:44px;height:44px}.color-picker-container{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.cp-saturation{width:100%;height:200px;background-color:red;background-image:linear-gradient(to right,#fff,#fff0);position:relative;border-radius:12px;overflow:hidden;cursor:crosshair;-webkit-user-select:none;user-select:none}.cp-black{width:100%;height:100%;background-image:linear-gradient(to top,#000,#0000);position:absolute;top:0;left:0}.cp-cursor{width:16px;height:16px;border:2px solid white;border-radius:50%;box-shadow:0 0 2px #00000080;position:absolute;top:0;left:100%;transform:translate(-50%,-50%);pointer-events:none}.cp-hue-rail{width:100%;height:20px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);border-radius:10px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.cp-hue-slider{width:20px;height:20px;background:#fff;border:2px solid rgba(0,0,0,.1);box-shadow:0 2px 4px #0003;border-radius:50%;position:absolute;top:0;left:0;transform:translate(-50%);pointer-events:none}.cp-controls{display:flex;align-items:center;gap:12px}.cp-preview{width:44px;height:44px;border-radius:12px;background-color:red;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px #0000000d}.cp-inputs{flex:1;display:flex;align-items:center;background:#f5f5f7;border-radius:10px;padding:0 12px;height:44px}.cp-inputs label{font-size:13px;font-weight:600;color:#86868b;margin-right:8px}#cp-hex-input{border:none;background:transparent;font-family:monospace;font-size:16px;color:#1c1c1e;width:100%;text-transform:uppercase;outline:none;letter-spacing:1px}.palette-btn.add-btn{position:relative;background:#f5f5f7;color:#007aff;display:flex;align-items:center;justify-content:center;border:1px dashed #c7c7cc}.palette-btn.add-btn svg{width:20px;height:20px;stroke-width:2.5}.palette-btn.add-btn:hover{background:#e5e5ea;border-color:#007aff}.palette-scroll{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;overflow:visible;padding:4px;align-items:center}.palette-btn{width:40px;height:40px;border-radius:50%;border:2px solid white;box-shadow:0 2px 5px #0000001a;cursor:pointer;flex-shrink:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.palette-btn.active{transform:scale(1.15);box-shadow:0 4px 12px #0003;border-color:#fff;z-index:1}.current-color-preview{width:32px;height:32px;border-radius:50%;border:2px solid white;box-shadow:0 2px 8px #00000026;flex-shrink:0;background-color:#000;margin-left:12px;display:none}.modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;justify-content:center;align-items:center;z-index:9999;opacity:0;transition:opacity .3s cubic-bezier(.25,.46,.45,.94);margin:0;padding:0}.modal.visible{opacity:1}.modal-content{background:#fff;padding:24px;border-radius:20px;width:300px;max-width:90%;box-shadow:0 10px 40px #00000026;transform:scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.modal.visible .modal-content{transform:scale(1)}.modal h2{margin-top:0;margin-bottom:12px;font-size:18px;font-weight:600;color:#1c1c1e;text-align:center}.modal p{font-size:15px;color:#3a3a3c;text-align:center;margin-bottom:24px;line-height:1.5}.settings-panel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s cubic-bezier(.25,.46,.45,.94)}.settings-panel-overlay.hidden{display:none}.settings-panel-overlay.visible{opacity:1}.settings-panel{width:520px;max-width:calc(100vw - 32px);height:75vh;min-height:480px;max-height:calc(100vh - 80px);background:#ffffffeb;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:28px;border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 60px #0000002e,0 4px 16px #00000014;display:flex;flex-direction:column;overflow:hidden;transform:scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.settings-panel-overlay.visible .settings-panel{transform:scale(1)}.settings-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px;flex-shrink:0}.settings-panel-title{font-size:18px;font-weight:700;color:var(--ui-strong);margin:0}.settings-tabs{display:flex;gap:0;padding:4px;flex-shrink:0;background:var(--surface-1, #f2f2f7);margin:0 24px 16px;border-radius:14px;position:relative}.settings-tab-indicator{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:10px;background:#fff;box-shadow:0 1px 4px #0000001f;transition:transform .3s cubic-bezier(.34,1.2,.64,1),width .3s cubic-bezier(.34,1.2,.64,1);pointer-events:none;z-index:0}.settings-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border:none;border-radius:10px;background:transparent;font-size:13px;font-weight:500;color:var(--ui-muted);cursor:pointer;transition:color .2s,transform .15s cubic-bezier(.34,1.56,.64,1);flex:1;justify-content:center;position:relative;z-index:1}.settings-tab svg{width:15px;height:15px;flex-shrink:0}.settings-tab:hover{color:var(--ui-strong)}.settings-tab:active{transform:scale(.92)}.settings-tab.active{color:var(--primary-color);font-weight:600;background:transparent;box-shadow:none}.settings-panel-body{flex:1;overflow-y:auto;padding:20px 24px;overscroll-behavior:contain}.settings-tab-pane{display:none;flex-direction:column;gap:24px;animation:pane-in .2s ease}.settings-tab-pane.active{display:flex}@keyframes pane-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.settings-section{display:flex;flex-direction:column;gap:4px}.settings-section .section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-muted);margin:0 0 8px 4px}.section-hint{font-size:11px;color:var(--ui-muted);margin:-4px 0 8px 4px}.material-manage-list{display:flex;flex-direction:column;gap:2px}.mat-manage-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;background:var(--surface-1, #f2f2f7);transition:background .15s;cursor:default}.mat-manage-item.dragging{opacity:.4}.mat-manage-item[draggable=true]{cursor:grab}.mat-manage-item[draggable=true]:active{cursor:grabbing}.mat-manage-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mat-manage-name{font-size:13px;font-weight:600;color:var(--ui-strong)}.mat-manage-tags{font-size:11px;color:var(--ui-muted)}.mat-manage-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.mat-manage-handle{width:20px;height:20px;color:var(--ui-muted);opacity:.4;display:flex;align-items:center;justify-content:center}.mat-manage-handle svg{width:16px;height:16px}.mat-manage-lock-btn{width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--ui-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.mat-manage-lock-btn:hover{background:#ff3b301a;color:#ff3b30}.mat-manage-lock-btn:active{transform:scale(.88)}.mat-manage-lock-btn svg{width:15px;height:15px}.mat-manage-builtin{font-size:10px;font-weight:600;color:var(--ui-muted);padding:2px 8px;border-radius:20px;background:#0000000f}.settings-rows{background:var(--surface-1, #f2f2f7);border-radius:16px;overflow:hidden}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid rgba(0,0,0,.05)}.settings-row:last-child{border-bottom:none}.settings-row-label{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.settings-row-label span{font-size:14px;font-weight:500;color:var(--ui-strong)}.settings-row-label small{font-size:11px;color:var(--ui-muted);font-weight:400}.settings-row-control{display:flex;align-items:center;gap:10px;flex-shrink:0}.settings-row.range-row{flex-wrap:wrap;gap:8px}.settings-row.range-row .settings-row-label{flex:1 1 auto}.settings-row.range-row .settings-row-control{width:100%;padding:0 0 4px}.settings-row.range-row input[type=range]{flex:1;accent-color:var(--primary-color);height:4px;cursor:pointer}.settings-row.range-row em{font-style:normal;font-size:12px;font-weight:600;color:var(--primary-color);min-width:52px;text-align:right}.theme-picker{display:flex;gap:10px}.theme-option{cursor:pointer}.theme-option input[type=radio]{display:none}.theme-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:12px;border:2px solid transparent;transition:all .2s}.theme-card span{font-size:12px;font-weight:500;color:var(--ui-muted)}.theme-option input[type=radio]:checked+.theme-card{border-color:var(--primary-color);background:#007aff0f}.theme-option input[type=radio]:checked+.theme-card span{color:var(--primary-color);font-weight:600}.theme-preview{width:72px;height:48px;border-radius:8px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.08)}.light-preview{background:#f2f2f7}.dark-preview{background:#1c1c1e}.theme-preview .tp-bar{height:12px;border-radius:4px;margin:6px 6px 4px}.light-preview .tp-bar{background:#ffffffe6}.dark-preview .tp-bar{background:#ffffff26}.theme-preview .tp-grid{margin:0 6px;height:22px;border-radius:4px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.theme-preview .tp-grid:before,.theme-preview .tp-grid:after{content:"";border-radius:2px;grid-column:span 2}.light-preview .tp-grid:before{background:#00000014}.light-preview .tp-grid:after{background:#007aff26}.dark-preview .tp-grid:before{background:#ffffff1a}.dark-preview .tp-grid:after{background:#007aff4d}.settings-panel-footer{padding:16px 24px 20px;flex-shrink:0}.btn.full-width{width:100%;text-align:center}body.theme-dark .settings-panel{background:#1c1c1ef0;border-color:#ffffff1a}body.theme-dark .settings-tab.active{color:var(--primary-color)}body.theme-dark .settings-tab-indicator{background:#3a3a3c;box-shadow:0 1px 4px #0006}body.theme-dark .settings-tabs{background:#ffffff0f}body.theme-dark .settings-row{border-bottom-color:#ffffff0f}body.theme-dark .theme-preview{border-color:#ffffff1a}.settings-panel input[type=range],.toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}.toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.toggle-track{width:51px;height:31px;background:#e5e5ea;border-radius:100px;position:relative;transition:background .22s cubic-bezier(.25,.46,.45,.94);flex-shrink:0}.toggle-thumb{position:absolute;top:2px;left:2px;width:27px;height:27px;background:#fff;border-radius:50%;box-shadow:0 2px 6px #00000038,0 1px 2px #0000001a;transition:transform .25s cubic-bezier(.34,1.4,.64,1)}.toggle-switch input:checked~.toggle-track{background:var(--primary-color)}.toggle-switch input:checked~.toggle-track .toggle-thumb{transform:translate(20px)}body.theme-dark .toggle-track{background:#3a3a3c}body.theme-dark .toggle-switch input:checked~.toggle-track{background:var(--primary-color)}.floating-panel.right-panel{position:fixed;top:16px;bottom:34px;right:24px;width:340px;height:auto;max-height:none;background:#ffffffd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;box-shadow:0 10px 40px #0000001f;z-index:999;display:flex;flex-direction:column;transform:translate(120%);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;opacity:0;pointer-events:none;border:.5px solid rgba(255,255,255,.5)}.floating-panel.right-panel.visible{transform:translate(0);opacity:1;pointer-events:auto}.floating-panel.right-panel.hidden{transform:translate(120%);opacity:0;pointer-events:none}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 12px;flex-shrink:0}.panel-title{font-size:18px;font-weight:700;margin:0;color:#1c1c1e}.icon-btn-small{width:28px;height:28px;border-radius:50%;background:#f2f2f7;border:none;display:flex;justify-content:center;align-items:center;color:#8e8e93;cursor:pointer;transition:all .2s}.icon-btn-small:hover{background:#e5e5ea;color:#1c1c1e}.icon-btn-small svg{width:16px;height:16px}.panel-body{flex:1;overflow-y:auto;padding:0 24px 16px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:10px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.panel-body::-webkit-scrollbar{width:6px}.panel-body::-webkit-scrollbar-track{background:transparent;margin:4px 0}.panel-body::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:10px;border:2px solid transparent;background-clip:content-box}.panel-body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.panel-actions{padding:16px 24px 24px;flex-shrink:0;border-top:1px solid rgba(0,0,0,.05)}.btn.full-width{width:100%}.history-panel{width:300px}.works-panel{width:320px}.history-body{padding-right:16px}.history-list{display:flex;flex-direction:column;gap:8px;padding:4px 0}.history-item{border:none;background:#f5f5f7;border-radius:12px;padding:10px 12px;text-align:left;color:#3a3a3c;cursor:pointer;transition:background-color .2s ease,color .2s ease}.history-item-main{display:flex;align-items:center;gap:10px}.history-thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);flex-shrink:0}.history-thumb img{width:100%;height:100%;object-fit:cover;display:block}.history-item-content{min-width:0;flex:1}.history-list.is-editing .history-item{opacity:.45}.history-list.is-editing .history-item.editing{opacity:1}.history-item:hover{background:#e9e9ee}.history-item.active{background:#007aff1f;color:#007aff}.history-item-title{font-size:13px;font-weight:600;line-height:1.2}.history-item-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.history-rename-btn{width:24px;height:24px;border:none;border-radius:8px;background:transparent;color:#8e8e93;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.history-rename-btn:hover{background:#0000000f;color:#1c1c1e}.history-rename-btn svg{width:14px;height:14px}.history-inline-edit-wrap{display:flex;align-items:center;gap:6px;width:100%}.history-inline-input{flex:1;min-width:0;height:28px;border:none;border-radius:8px;background:#fff;padding:0 10px;font-size:12px;color:#1c1c1e;outline:none;box-shadow:inset 0 0 0 1px #007aff33}.history-inline-input:focus{box-shadow:inset 0 0 0 1px #007aff73}.history-inline-btn{width:22px;height:22px;border:none;border-radius:6px;background:#0000000f;color:#3a3a3c;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:0}.history-inline-btn:hover{background:#0000001f}.history-item-time{font-size:11px;opacity:.65;margin-top:4px}.history-group-header{border:none;background:#0000000a;color:#636366;border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:6px}.history-group-header.active{background:#007aff1a;color:#007aff}.history-group-arrow{width:12px;display:inline-flex;justify-content:center;font-size:11px}.history-group-title{font-size:12px;font-weight:600}.history-group-child{margin-left:14px}.works-body{display:flex;flex-direction:column;gap:12px}.works-save-row{display:flex;gap:8px;align-items:center}.works-save-row .btn{height:36px;padding:0 10px;border-radius:10px;font-size:12px}.works-name-input{flex:1;min-width:0;height:36px;border:none;border-radius:10px;background:#f5f5f7;padding:0 10px;font-size:13px;color:#1c1c1e;outline:none}.works-name-input:focus{box-shadow:0 0 0 2px #007aff38;background:#fff}.works-list{display:flex;flex-direction:column;gap:10px}.work-card{border:none;background:#f5f5f7;border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center}.work-card.active{box-shadow:inset 0 0 0 1px #007aff59;background:#007aff14}.work-thumb{width:50px;height:50px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);flex-shrink:0}.work-thumb img{width:100%;height:100%;object-fit:cover;display:block}.work-meta{min-width:0;flex:1}.work-name{font-size:13px;font-weight:600;color:#1c1c1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.work-time{font-size:11px;color:#8e8e93;margin-top:3px}.work-actions{display:flex;gap:6px}.work-action-btn{border:none;border-radius:8px;background:#0000000f;color:#3a3a3c;font-size:11px;height:24px;padding:0 8px;cursor:pointer}.work-action-btn:hover{background:#0000001f}body.theme-dark .floating-panel.right-panel{background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur))}body.theme-dark .panel-title{color:var(--ui-strong)}body.theme-dark .icon-btn-small{background:var(--surface-1);color:var(--ui-muted)}body.theme-dark .icon-btn-small:hover{background:var(--surface-2);color:var(--ui-strong)}body.theme-dark .history-item{background:var(--surface-1);color:var(--ui-strong)}body.theme-dark .history-item:hover{background:var(--surface-2)}body.theme-dark .history-thumb{background:#1f1f21;border-color:var(--control-border)}body.theme-dark .history-rename-btn{color:var(--ui-muted)}body.theme-dark .history-rename-btn:hover{background:#ffffff14;color:var(--ui-strong)}body.theme-dark .history-inline-input{background:#1f1f21;color:var(--ui-strong)}body.theme-dark .history-inline-btn{background:#ffffff1a;color:var(--ui-strong)}body.theme-dark .history-inline-btn:hover{background:#ffffff2e}body.theme-dark .history-group-header{background:#ffffff14;color:var(--ui-muted)}body.theme-dark .work-card{background:var(--surface-1)}body.theme-dark .work-thumb{background:#1f1f21;border-color:var(--control-border)}body.theme-dark .work-name{color:var(--ui-strong)}body.theme-dark .work-time{color:var(--ui-muted)}body.theme-dark .work-action-btn{background:#ffffff1a;color:var(--ui-strong)}body.theme-dark .work-action-btn:hover{background:#ffffff2e}body.theme-dark #right-settings-panel .section-title,body.theme-dark #right-settings-panel .input-group label,body.theme-dark #right-settings-panel .preset-dim{color:var(--ui-muted)}body.theme-dark #right-settings-panel .ratio-btn{background:var(--surface-1);color:var(--ui-muted)}body.theme-dark #right-settings-panel .ratio-btn:hover{background:var(--surface-2);color:var(--ui-strong)}body.theme-dark #right-settings-panel .ratio-btn.selected{background:#007aff1f;color:var(--primary-color)}body.theme-dark #right-settings-panel .preset-card{background:var(--surface-1)}body.theme-dark #right-settings-panel .preset-card:hover{background:var(--surface-2)}body.theme-dark #right-settings-panel .preset-icon{background:#1f1f21}body.theme-dark #right-settings-panel .preset-name{color:var(--ui-strong)}body.theme-dark #right-settings-panel .input-group input[type=number]{background:#1f1f21;color:var(--ui-strong)}body.theme-dark #right-settings-panel .input-group input[type=number]:focus{background:#262628}body.theme-dark #right-settings-panel .bg-custom-input{background:var(--surface-1)}body.theme-dark #right-settings-panel #bg-hex-input{color:var(--ui-strong)}body.theme-dark #right-settings-panel .slider{background-color:var(--surface-2)}body.theme-dark #right-settings-panel .slider:before{background-color:#f2f2f7}body.theme-dark #right-settings-panel .panel-actions{border-top-color:#ffffff14}body.theme-dark .modal-content{background:#2c2c2e;box-shadow:0 10px 40px #00000080}body.theme-dark .modal h2{color:var(--ui-strong)}body.theme-dark .modal p{color:var(--ui-muted)}body.theme-dark .modal .btn:not(.primary){background:#3a3a3c;color:var(--primary-color)}body.theme-dark .modal .btn:not(.primary):active{background:#48484a}body.theme-dark #save-work-modal .modal-content{background:#2c2c2e}body.theme-dark #save-work-modal h2{color:var(--ui-strong)}body.theme-dark .works-name-input{background:#1f1f21;color:var(--ui-strong)}body.theme-dark .works-name-input:focus{background:#262628}.preset-grid{grid-template-columns:repeat(2,1fr);gap:10px}.preset-card{padding:12px}.preset-icon{width:32px;height:32px}.preset-icon:before{transform:scale(.8)}.section-title{font-size:13px;text-transform:uppercase;color:#86868b;letter-spacing:.5px;margin-bottom:12px;font-weight:600;margin-top:12px}.section-title:first-child{margin-top:0}.settings-section{margin-bottom:28px}.ratio-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px}.ratio-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 7px;background:#f5f5f7;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .18s cubic-bezier(.25,.46,.45,.94);font-size:10px;font-weight:600;color:#86868b;letter-spacing:.2px}.ratio-btn:hover{background:#e5e5ea;color:#1c1c1e}.ratio-btn.selected{border-color:var(--primary-color);background:#007aff12;color:var(--primary-color)}.ratio-preview{width:32px;height:28px;display:flex;align-items:center;justify-content:center}.ratio-preview:before{content:"";border:2px solid currentColor;border-radius:2px;opacity:.7;transition:opacity .18s}.ratio-btn.selected .ratio-preview:before{opacity:1}.ratio-preview.sq:before{width:18px;height:18px}.ratio-preview.land:before{width:26px;height:13px}.ratio-preview.port:before{width:13px;height:26px}.ratio-preview.w169:before{width:26px;height:15px}.ratio-preview.w43:before{width:22px;height:17px}.size-group--hidden{display:none}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.preset-card{background:#f5f5f7;border:2px solid transparent;border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s cubic-bezier(.25,.46,.45,.94);text-align:left}.preset-card:hover{background:#e5e5ea}.preset-card.selected{border-color:var(--primary-color);background:#007aff0d}.preset-icon{width:40px;height:40px;background:#fff;border-radius:8px;box-shadow:0 2px 6px #0000000d;display:flex;justify-content:center;align-items:center;position:relative}.preset-icon:before{content:"";position:absolute;background:currentColor;opacity:.2}.size-group[data-ratio="1:1"] .preset-icon{color:#007aff}.size-group[data-ratio="2:1"] .preset-icon{color:#ff9500}.size-group[data-ratio="1:2"] .preset-icon{color:#af52de}.size-group[data-ratio="16:9"] .preset-icon{color:#30b0c7}.size-group[data-ratio="4:3"] .preset-icon{color:#ff6b35}.preset-icon.sq-s:before{width:12px;height:12px;border:1.5px solid}.preset-icon.sq-m:before{width:18px;height:18px;border:1.5px solid}.preset-icon.sq-l:before{width:24px;height:24px;border:1.5px solid}.preset-icon.sq-xl:before{width:30px;height:30px;border:1.5px solid}.preset-icon.land-s:before{width:22px;height:11px;border:1.5px solid}.preset-icon.land-m:before{width:28px;height:14px;border:1.5px solid}.preset-icon.land-l:before{width:34px;height:17px;border:1.5px solid}.preset-icon.land-xl:before{width:38px;height:19px;border:1.5px solid}.preset-icon.port-s:before{width:11px;height:22px;border:1.5px solid}.preset-icon.port-m:before{width:14px;height:28px;border:1.5px solid}.preset-icon.port-l:before{width:17px;height:34px;border:1.5px solid}.preset-icon.port-xl:before{width:19px;height:38px;border:1.5px solid}.preset-icon.wide-s:before{width:18px;height:10px;border:1.5px solid}.preset-icon.wide-m:before{width:25px;height:14px;border:1.5px solid}.preset-icon.wide-l:before{width:32px;height:18px;border:1.5px solid}.preset-icon.wide-xl:before{width:36px;height:20px;border:1.5px solid}.preset-icon.card43-s:before{width:20px;height:15px;border:1.5px solid}.preset-icon.card43-m:before{width:26px;height:20px;border:1.5px solid}.preset-icon.card43-l:before{width:32px;height:24px;border:1.5px solid}.preset-icon.card43-xl:before{width:36px;height:27px;border:1.5px solid}.preset-info{display:flex;flex-direction:column}.preset-name{font-size:15px;font-weight:600;color:#1c1c1e;margin-bottom:2px}.preset-dim{font-size:13px;color:#86868b}.custom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}.input-group label{font-size:12px;color:#86868b;margin-bottom:6px;display:block}.input-group input[type=number]{width:100%;height:44px;background:#f5f5f7;border:none;border-radius:10px;padding:0 12px;font-size:16px;font-weight:500;color:#1c1c1e;text-align:center;transition:box-shadow .2s}.input-group input[type=number]:focus{box-shadow:0 0 0 2px var(--primary-color) inset;background:#fff}.bg-palette{display:flex;flex-direction:column;gap:16px}.bg-presets{display:flex;flex-wrap:wrap;gap:10px}.bg-swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,.1);transition:transform .2s,border-color .2s;position:relative}.bg-swatch:hover{transform:scale(1.1)}.bg-swatch.selected{border-color:var(--primary-color);box-shadow:0 0 0 2px #007aff33;transform:scale(1.1)}.bg-swatch.selected:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:.5}.bg-swatch.dark-check.selected:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");opacity:1}.bg-custom-input{display:flex;align-items:center;gap:12px;background:#f5f5f7;padding:8px 12px;border-radius:10px}.color-preview-circle{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer}#bg-hex-input{border:none;background:transparent;font-family:monospace;font-size:14px;color:#333;width:80px;text-transform:uppercase;outline:none}.hidden-color-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.toggle-group-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:66px}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.btn{padding:10px 20px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;background:#f2f2f7;color:#007aff;transition:all .2s;flex:1}.btn:active{background:#e5e5ea;transform:scale(.96)}.btn.primary{background:var(--primary-color);color:#fff}.btn.primary:active{background:#0066d6}body.drag-mode #bead-canvas,body.drag-mode #dynamic-canvas{cursor:grab!important}body.drag-mode.is-panning #bead-canvas,body.drag-mode.is-panning #dynamic-canvas{cursor:grabbing!important}#btn-drag-mode.active .dock-icon{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #007aff59;transform:translateY(-12px)}body.dock-labels .dock-btn{height:74px;padding-top:8px;justify-content:flex-start;gap:3px}body.dock-labels .dock-icon{position:relative!important;top:auto!important;flex-shrink:0}body.dock-labels .dock-btn.active .dock-icon,body.dock-labels #btn-drag-mode.active .dock-icon,body.dock-labels #btn-animation-mode.active .dock-icon,body.dock-labels #btn-mirror.active .dock-icon{transform:translateY(0)!important}body.dock-labels .dock-btn .dock-label{position:relative!important;bottom:auto!important;opacity:1!important;transform:translateY(0)!important;transition-delay:0s!important;color:var(--ui-muted)}body.dock-labels .dock-btn.active .dock-label{color:var(--primary-color)}@keyframes islandSlideIn{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes islandSlideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.97)}}.animation-panel{display:none;flex-direction:column;gap:8px;background:rgba(var(--island-bg-rgb),var(--island-alpha));backdrop-filter:blur(var(--island-blur));-webkit-backdrop-filter:blur(var(--island-blur));border-radius:18px;padding:10px 12px;pointer-events:all;box-shadow:0 4px 20px #0000001f;max-width:min(90vw,680px)}.animation-panel.panel-entering{display:flex;animation:islandSlideIn .22s cubic-bezier(.34,1.4,.64,1) forwards}.animation-panel.panel-visible{display:flex}.animation-panel.panel-leaving{display:flex;animation:islandSlideOut .16s ease forwards}.floating-dock.dock-hidden{display:none}body.quick-playing .floating-dock .dock-btn:not(#btn-quick-play),body.quick-playing .floating-dock .dock-quick-btn,body.quick-playing .floating-dock .dock-color-trigger,body.quick-playing .floating-dock .dock-material-trigger,body.quick-playing .floating-dock .dock-shape-trigger,body.quick-playing .floating-dock .dock-params-btn,body.quick-playing .floating-dock .dock-separator{opacity:.3;pointer-events:none;transition:opacity .2s}body.quick-playing #btn-quick-play{pointer-events:auto;opacity:1}.floating-dock.dock-leaving{animation:islandSlideOut .16s ease forwards;pointer-events:none}.floating-dock.dock-entering{animation:islandSlideIn .22s cubic-bezier(.34,1.4,.64,1) forwards}.anim-controls{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}.anim-ctrl-btn{width:30px;height:30px;border:none;background:transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ui-muted);transition:background .15s,color .15s;flex-shrink:0}.anim-ctrl-btn svg{width:16px;height:16px}.anim-ctrl-btn:hover{background:var(--surface-2);color:var(--ui-strong)}.anim-ctrl-btn.active{background:var(--primary-color);color:#fff}.anim-divider{width:1px;height:18px;background:var(--divider-color);margin:0 4px;flex-shrink:0}.anim-counter{font-size:11px;font-weight:600;color:var(--ui-muted);min-width:36px;text-align:center;flex-shrink:0}.anim-fps-btn{width:22px;height:22px;border:none;background:var(--surface-2);border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:var(--ui-strong);display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}.anim-fps-btn:hover{background:var(--surface-3)}.anim-fps-num{font-size:13px;font-weight:700;color:var(--ui-strong);min-width:18px;text-align:center}.anim-fps-label{font-size:10px;color:var(--ui-muted);margin-left:1px}.anim-frames{display:flex;flex-direction:row;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.anim-frames::-webkit-scrollbar{height:4px}.anim-frames::-webkit-scrollbar-track{background:transparent}.anim-frames::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}.anim-frame-item{position:relative;flex-shrink:0;cursor:pointer;border-radius:8px;border:2px solid transparent;overflow:hidden;scroll-snap-align:start;transition:border-color .15s,box-shadow .15s}.anim-frame-item:hover{border-color:var(--surface-3)}.anim-frame-item.active{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color)}.anim-thumb{display:block;border-radius:6px;image-rendering:pixelated;image-rendering:crisp-edges}.anim-frame-num{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:9px;font-weight:700;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}.anim-frame-del{position:absolute;top:2px;right:2px;width:16px;height:16px;background:#0000008c;color:#fff;border:none;border-radius:4px;font-size:11px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}.anim-frame-item:hover .anim-frame-del{display:flex}.anim-add-btn{flex-shrink:0;width:54px;height:54px;border:2px dashed var(--surface-3);border-radius:8px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ui-muted);transition:border-color .15s,color .15s}.anim-add-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.anim-add-btn svg{width:20px;height:20px}.anim-exit-btn{color:#ff3b30}.anim-exit-btn:hover{background:#ff3b301f!important;color:#ff3b30!important}#btn-animation-mode.active .dock-icon{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #007aff59;transform:translateY(-12px)}body.theme-dark .animation-panel{box-shadow:0 4px 20px #0006}.bead-shop-panel{width:min(90vw,900px);height:min(90vh,800px)}.template-category-chips{display:flex;gap:8px;padding:0 24px 14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-shrink:0}.template-category-chips::-webkit-scrollbar{display:none}.template-chip{flex-shrink:0;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:500;background:var(--surface-1);color:var(--ui-muted);border:none;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.template-chip:hover{background:var(--surface-2);color:var(--ui-strong)}.template-chip.active{background:var(--primary-color);color:#fff}body.theme-dark .template-chip{background:var(--surface-2)}body.theme-dark .template-chip.active{background:var(--primary-color)}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.shop-card{background:var(--surface-1, #f2f2f7);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;cursor:default;position:relative;overflow:hidden}.shop-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.shop-card-preview{border-radius:12px;overflow:hidden;background:transparent;width:100%}.shop-card-preview canvas{width:100%;height:auto;display:block}.shop-card-preview canvas{border-radius:8px}.shop-card-info{display:flex;flex-direction:column;gap:3px}.shop-card-name{font-size:15px;font-weight:600;color:var(--ui-strong)}.shop-card-desc{font-size:12px;color:var(--ui-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}.shop-card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;min-height:20px}.shop-tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:#007aff1a;color:var(--primary-color)}.shop-tag-anim{background:#ff3b301a;color:#ff3b30}.template-grid .shop-card-footer{display:flex;gap:8px;margin-top:auto}.template-grid .shop-card-footer .shop-btn{flex:1;font-size:12px;padding:7px 8px}.shop-card-footer .shop-btn{flex:1;padding:8px 12px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s cubic-bezier(.34,1.56,.64,1)}.shop-btn:active{transform:scale(.94)}.shop-btn.get{background:var(--primary-color);color:#fff}.shop-btn.unlocked{background:#34c7591f;color:#34c759;cursor:default}.shop-btn.unlocked:before{content:"✓ "}body.theme-dark .shop-card{background:#ffffff0f}body.theme-dark .shop-card-preview{background:#ffffff14}body.perf-mode .floating-top-bar,body.perf-mode .floating-dock,body.perf-mode .floating-dock-container .tool-settings-bubble,body.perf-mode .palette-drawer,body.perf-mode .minimap-panel,body.perf-mode .view-control-panel,body.perf-mode .info-panel,body.perf-mode .floating-panel,body.perf-mode .modal,body.perf-mode .modal-content,body.perf-mode .settings-panel-overlay,body.perf-mode .settings-panel,body.perf-mode .toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}body.perf-mode .floating-top-bar,body.perf-mode .floating-dock,body.perf-mode .minimap-panel,body.perf-mode .view-control-panel,body.perf-mode .info-panel,body.perf-mode .palette-drawer,body.perf-mode .floating-dock-container .tool-settings-bubble{background:rgba(var(--island-bg-rgb),.96)!important}body.perf-mode .floating-panel,body.perf-mode .settings-panel{background:rgba(var(--island-bg-rgb),.97)!important}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 12px #00000026;z-index:100;pointer-events:none;opacity:1;transition:opacity .3s,transform .3s}.toast.hidden{opacity:0;transform:translate(-50%,10px)}