html,body,#root{height:100%;margin:0;padding:0}body{background:#f7f8fa;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif}:root{--bg:#f0f6f2;--surface:#fff;--canvas-bg:#e9f3ed;--border:#e0ebe3;--border-strong:#c6dbcf;--text:#38241a;--text-dim:#8d7868;--accent:#552f1c;--accent-dark:#3f2113;--accent-tint:#dcf0e6;--accent-tint-strong:#bfe4d3;--mint-strong:#79c3a6;--danger:#e5484d;--radius-panel:16px;--radius-ctl:12px;--shadow-soft:0 2px 10px #78543c0f, 0 8px 28px #78543c0d;--shadow-pop:0 8px 24px #78543c24, 0 2px 8px #78543c14;--ease:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}body{color:var(--text);margin:0;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif}.app{background:var(--bg);flex-direction:column;height:100vh;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:58px;padding:0 20px;display:flex}.logo{letter-spacing:.2px;align-items:center;gap:10px;font-size:16px;font-weight:800;display:flex}.logo-badge{background:var(--accent-tint);width:32px;height:32px;color:var(--accent);border-radius:10px;justify-content:center;align-items:center;display:flex}.topbar-right{align-items:center;gap:10px;display:flex}.user-email{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:13px;overflow:hidden}.main{flex:1;gap:14px;min-height:0;padding:14px;display:flex}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-panel);width:272px;box-shadow:var(--shadow-soft);flex-direction:column;flex-shrink:0;gap:24px;padding:18px;display:flex;overflow-y:auto}.panel section{flex-direction:column;display:flex}.panel h3{letter-spacing:.3px;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;font-weight:700;display:flex}.step-badge{background:var(--accent-tint);width:20px;height:20px;color:var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:800;display:inline-flex}.panel label{color:var(--text-dim);margin:12px 0 6px;font-size:12.5px;font-weight:500;display:block}.dropzone{border:1.5px dashed var(--border-strong);text-align:center;cursor:pointer;min-height:128px;color:var(--text-dim);background:var(--bg);transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;display:flex;overflow:hidden}.dropzone:hover{border-color:var(--accent);background:var(--accent-tint)}.dropzone:active{transform:scale(.99)}.dropzone .dz-icon{color:var(--accent);opacity:.85}.dropzone img{border-radius:10px;max-width:100%;max-height:160px}.dropzone p{margin:0;font-size:13px;line-height:1.5}.dropzone small{font-size:11.5px}.preset-row,.tool-row{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.chip{border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;color:var(--text);transition:all .18s var(--ease);border-radius:999px;align-items:center;gap:5px;padding:6px 13px;font-size:13px;display:inline-flex}.chip:hover{border-color:var(--accent);color:var(--accent)}.chip.active{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-dark);font-weight:700}.chip:active{transform:scale(.97)}.size-inputs{color:var(--text-dim);align-items:center;gap:8px;font-size:13px;display:flex}.size-inputs input{text-align:center;width:68px;margin-bottom:0}input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]){border:1px solid var(--border-strong);border-radius:var(--radius-ctl);background:var(--surface);width:100%;color:var(--text);transition:border-color .18s var(--ease), box-shadow .18s var(--ease);margin-bottom:10px;padding:9px 12px;font-size:14px}input::placeholder{color:#a8b8ae}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint-strong);outline:none}input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0 6px}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}select{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:10px;flex:1;padding:6px 8px;font-size:12.5px}button{border:1px solid var(--border-strong);border-radius:var(--radius-ctl);background:var(--surface);color:var(--text);cursor:pointer;transition:all .18s var(--ease);justify-content:center;align-items:center;gap:6px;padding:8px 15px;font-family:inherit;font-size:13.5px;font-weight:500;display:inline-flex}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;box-shadow:0 3px 12px #552f1c52}button.primary:hover:not(:disabled){background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}button.danger{color:var(--danger)}button.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:#fff2f2}button.block{width:100%;margin-top:8px}.current-color{color:var(--text-dim);align-items:center;gap:8px;margin-bottom:12px;font-size:12.5px;display:flex}.swatch{border:2px solid #fff;border-radius:50%;flex-shrink:0;width:20px;height:20px;display:inline-block;box-shadow:0 0 0 1px #0000001a}.check{color:var(--text);cursor:pointer;align-items:center;gap:7px;font-size:13px;display:flex}.canvas-wrap{background:var(--canvas-bg);border:1px solid var(--border);border-radius:var(--radius-panel);min-width:0;box-shadow:var(--shadow-soft);background-image:radial-gradient(circle,#cfe5d8 1.2px,#0000 1.2px);background-size:22px 22px;flex:1;position:relative;overflow:hidden}.bead-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.empty-hint{height:100%;color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}.empty-hint .empty-icon{color:var(--accent);opacity:.55}.empty-hint .empty-title{color:var(--text);font-size:16px;font-weight:600}.empty-hint .dim{font-size:13px}.usage-list{max-height:330px;margin:0;padding:0;list-style:none;overflow-y:auto}.usage-list li{cursor:pointer;transition:background .15s var(--ease);border-radius:10px;align-items:center;gap:9px;padding:6px 8px;font-size:13px;display:flex}.usage-list li:hover{background:var(--bg)}.usage-list li.highlighted{background:var(--accent-tint);outline:1.5px solid var(--accent)}.usage-list .code{font-variant-numeric:tabular-nums;font-weight:700}.usage-list .count{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:auto}.exclude-btn{color:var(--text-dim);visibility:hidden;background:0 0;border:none;border-radius:6px;padding:2px 6px;font-size:12px}.usage-list li:hover .exclude-btn{visibility:visible}.exclude-btn:hover{color:var(--danger);background:#fff2f2}.excluded-row{background:var(--bg);border-radius:10px;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;font-size:12px;display:flex}.excluded-row button{padding:4px 10px;font-size:12px}.dim{color:var(--text-dim);font-size:13px}.tiny{font-size:12px;line-height:1.5}.error{color:var(--danger);margin:2px 0 6px;font-size:13px}.modal-mask{z-index:100;animation:mask-in .2s var(--ease);background:#2c26206b;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface);width:350px;box-shadow:var(--shadow-pop);animation:pop-in .25s var(--ease);border-radius:18px;flex-direction:column;padding:26px;display:flex}.modal.wide{width:580px;max-height:72vh;overflow-y:auto}.modal h3{margin:0 0 16px;font-size:17px}.modal .switch{cursor:pointer;text-align:center;margin-top:6px}.modal .switch:hover{color:var(--accent)}.pattern-list{margin:0;padding:0;list-style:none}.pattern-list li{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:12px 6px;display:flex}.pattern-list li:last-child{border-bottom:none}.pattern-list img{object-fit:cover;border:1px solid var(--border);background:var(--canvas-bg);border-radius:12px;width:56px;height:56px}.pattern-list .meta{flex-direction:column;flex:1;gap:5px;font-size:14px;display:flex}.pattern-list .meta b{font-weight:700}.toast{background:var(--text);color:#fdfbf8;z-index:200;box-shadow:var(--shadow-pop);animation:toast-in .25s var(--ease);border-radius:999px;padding:11px 22px;font-size:13.5px;position:fixed;bottom:36px;left:50%;transform:translate(-50%)}@keyframes mask-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.94)translateY(8px)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(12px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.mobile-fab,.drawer-mask{display:none}@media (width<=900px){.main{gap:0;padding:0}.canvas-wrap{box-shadow:none;border:none;border-radius:0}.panel{z-index:60;width:300px;max-width:86vw;box-shadow:var(--shadow-pop);transition:transform .28s var(--ease);border:none;border-radius:0;gap:18px;padding:16px;position:fixed;top:58px;bottom:0}.panel.left{left:0;transform:translate(-102%)}.panel.right{right:0;transform:translate(102%)}.panel.left.open,.panel.right.open{transform:none}.drawer-mask{z-index:55;animation:mask-in .2s var(--ease);background:#38241a52;display:block;position:fixed;inset:58px 0 0}.mobile-fab{z-index:30;background:var(--surface);border:1px solid var(--border-strong);width:46px;height:46px;box-shadow:var(--shadow-pop);color:var(--accent);border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;bottom:18px}.mobile-fab:active{transform:scale(.94)}.fab-left{left:14px}.fab-right{right:14px}.topbar{padding:0 12px}.topbar button{padding:7px 10px;font-size:12.5px}.user-email{display:none}.modal{width:86vw;padding:20px}.modal.wide{width:92vw;max-height:78vh}}