:root{--coral:#ff8a3d;--coral-deep:#e8731f;--coral-soft:#ffd9b8;--cream:#fff8f0;--ink:#3a2e2a;--ink-soft:#6b5d53;--muted:#a08d80;--green:#7bc953;--card:#fff;--border:#f0e2d4;--shadow:0 6px 18px #e8731f1a;--radius:18px;font-size:17px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:var(--ink);background:var(--cream);-webkit-tap-highlight-color:transparent;font-family:PingFang SC,Microsoft YaHei,system-ui,-apple-system,Segoe UI,sans-serif}#root,.app{min-height:100vh}.container{max-width:520px;padding:0 16px 120px;padding-top:max(12px, env(safe-area-inset-top));margin:0 auto}.btn{cursor:pointer;color:#fff;touch-action:manipulation;border:none;border-radius:999px;font-size:17px;font-weight:600;transition:transform 60ms,opacity .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.lg{padding:16px 20px;font-size:18px}.btn.sm{padding:7px 16px;font-size:14px}.btn.full{width:100%}.btn.primary{background:linear-gradient(135deg, var(--coral), #ffab5c)}.btn.secondary{color:var(--coral-deep);border:2px solid var(--coral-soft);background:#fff}.btn.ghost{color:var(--ink-soft);border:1.5px solid var(--border);background:0 0}.topbar{align-items:center;gap:8px;padding:10px 4px 14px;display:flex}.topbar-back{width:38px;height:38px;color:var(--coral-deep);box-shadow:var(--shadow);cursor:pointer;background:#fff;border:none;border-radius:50%;font-size:22px;line-height:1}.topbar-title{flex:1;font-size:18px;font-weight:700}.topbar-spacer{width:38px}.hero{text-align:center;padding:40px 16px 30px;position:relative}.hero-beads{pointer-events:none;position:absolute;inset:0}.bead{border-radius:50%;position:absolute;box-shadow:inset 0 -3px 4px #0000001f}.b1{background:#ff7849;width:54px;height:54px;top:22%;left:8%}.b2{background:#ffd34d;width:34px;height:34px;top:14%;right:12%}.b3{background:#7bc953;width:22px;height:22px;top:42%;right:22%}.b4{background:#ff9ebb;width:28px;height:28px;bottom:12%;left:18%}.b5{background:#b4a0e6;width:18px;height:18px;bottom:26%;right:8%}.hero-title{color:var(--coral-deep);letter-spacing:2px;margin:0;font-size:44px;font-weight:800}.hero-sub{color:var(--ink-soft);margin:10px 0 0;font-size:16px}.hero-steps{color:var(--muted);justify-content:center;gap:18px;margin:26px 0 0;padding:0;font-size:14px;list-style:none;display:flex}.home-actions{flex-direction:column;gap:12px;margin-top:8px;display:flex}.err-text{color:#d64545;text-align:center;margin:4px 0 0;font-size:14px}.muted{color:var(--muted);font-size:13px}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin:14px 0;padding:16px}.card-title{margin:0 0 12px;font-size:16px;font-weight:700}.continue-card{margin-top:24px}.continue-row{align-items:center;gap:14px;display:flex}.continue-thumb{object-fit:contain;border:1px solid var(--border);background:#fff;border-radius:12px;width:110px;height:92px}.continue-meta{flex:1}.continue-size{font-size:18px;font-weight:700}.continue-btns{gap:8px;margin-top:10px;display:flex}.teaser{text-align:center;color:var(--muted);border:1.5px dashed var(--coral-soft);border-radius:14px;margin-top:26px;padding:12px;font-size:13px}.source-row{align-items:center;gap:12px;padding:4px 2px;display:flex}.source-thumb{object-fit:cover;border:1px solid var(--border);border-radius:12px;width:62px;height:62px}.source-meta{flex:1}.source-name{word-break:break-all;font-size:15px;font-weight:600}.ctrl-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.size-badge{color:var(--coral-deep);background:var(--coral-soft);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.size-badge.loading{background:#fff2e0}.ctrl-block{margin-top:14px}.ctrl-label{color:var(--ink-soft);margin-bottom:8px;font-size:13px;display:block}.slider{grid-template-columns:1fr auto;align-items:center;gap:6px 12px;display:grid}.slider-label{color:var(--ink-soft);font-size:14px}.slider-badge{color:var(--coral-deep);font-size:14px;font-weight:700}.slider input[type=range]{appearance:none;background:linear-gradient(90deg, var(--coral-soft), var(--coral));border-radius:999px;grid-column:1/-1;width:100%;height:6px}.slider input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--coral);background:#fff;border-radius:50%;width:28px;height:28px;box-shadow:0 2px 6px #e8731f59}.segmented{background:#faf3ea;border-radius:999px;gap:8px;padding:5px;display:flex}.segmented-item{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:9px 0;font-size:15px;font-weight:600}.segmented-item.is-active{color:var(--coral-deep);background:#fff;box-shadow:0 2px 8px #e8731f2e}.palette-chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1.5px solid var(--border);color:var(--ink-soft);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex}.chip.is-active{border-color:var(--coral);color:var(--coral-deep);background:#fff7ef}.chip-swatches{display:inline-flex}.chip-swatches i{border:1px solid #0000001f;border-radius:50%;width:14px;height:14px;margin-left:-4px}.chip-swatches i:first-child{margin-left:0}.chip-new{color:var(--coral-deep);border-style:dashed}.swatch-strip{flex-wrap:wrap;gap:4px;margin-top:12px;display:flex}.swatch{border:1px solid #0000001a;border-radius:6px;width:18px;height:18px}.hint{color:var(--muted);margin:10px 0 0;font-size:12.5px;line-height:1.6}.preview-card{padding:14px}.preview-box{background:#fff;border-radius:12px;overflow-x:auto}.preview-canvas{display:block}.sticky-bar{width:100%;max-width:520px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg, #fff8f000, var(--cream) 40%);gap:10px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.sticky-bar .btn{flex:1}.empty-state{text-align:center;color:var(--ink-soft);padding:60px 0}.empty-emoji{font-size:46px}.empty-state .btn{margin-top:14px}.export-img{border-radius:var(--radius);width:100%;box-shadow:var(--shadow);background:#fff;margin:14px 0}.quantity-list{flex-direction:column;display:flex}.quantity-row{border-bottom:1px solid #f7efe6;align-items:center;gap:10px;padding:8px 0;display:flex}.quantity-row:last-child{border-bottom:none}.quantity-swatch{border:1px solid #0000001f;border-radius:50%;flex-shrink:0;width:22px;height:22px}.quantity-name{flex:1;font-size:15px}.quantity-count{color:var(--coral-deep);font-size:15px;font-weight:700}.modal-mask{z-index:50;background:#3a2e2a73;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-panel{width:100%;max-width:520px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));background:#fff;border-radius:20px 20px 0 0;max-height:84vh;overflow-y:auto}.modal-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.modal-title{font-size:18px;font-weight:700}.modal-close{cursor:pointer;background:#f7efe6;border:none;border-radius:50%;width:32px;height:32px;font-size:14px}.field{margin-bottom:14px;display:block}.field-label{color:var(--ink-soft);margin-bottom:6px;font-size:13px;display:block}.text-input{border:1.5px solid var(--border);width:100%;color:var(--ink);background:#fff;border-radius:12px;padding:10px 12px;font-size:15px}.text-input:focus{border-color:var(--coral);outline:none}.color-input{cursor:pointer;background:0 0;border:none;width:44px;height:44px;padding:0}.palette-editor-list{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.palette-editor-row{align-items:center;gap:8px;display:flex}.palette-editor-row .text-input{flex:1}.icon-btn{cursor:pointer;width:32px;height:32px;color:var(--ink-soft);background:#f7efe6;border:none;border-radius:50%}.editor-canvas-wrap{border-radius:var(--radius);height:clamp(320px,100dvh - 210px,620px);box-shadow:var(--shadow);background:#efe8dc;margin:4px 0 12px;position:relative;overflow:hidden}.editor-canvas{width:100%;height:100%;display:block}.editor-zoom{flex-direction:column;gap:8px;display:flex;position:absolute;bottom:12px;right:12px}.zoom-btn{width:40px;height:40px;color:var(--coral-deep);cursor:pointer;background:#ffffffeb;border:none;border-radius:50%;font-size:20px;font-weight:700;box-shadow:0 2px 8px #00000026}.editor-dock{width:100%;max-width:520px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));z-index:20;background:#fff;border-radius:20px 20px 0 0;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -6px 24px #e8731f1f}.dock-row{align-items:center;gap:10px;display:flex}.dock-tools{flex:1;min-width:0}.dock-replace{flex-shrink:0}.dock-actions .btn{padding:10px 16px}.dock-flex{flex:1}.palette-select-row{overflow:hidden}.palette-select{-webkit-overflow-scrolling:touch;gap:7px;padding:4px 2px;display:flex;overflow-x:auto}.pselect{cursor:pointer;border:2px solid #fff;border-radius:50%;flex-shrink:0;width:36px;height:36px;position:relative;box-shadow:0 0 0 1px #00000024}.pselect.is-active{box-shadow:0 0 0 3px var(--coral), 0 0 0 4px #fff}.pselect-ripe{color:#fff;text-shadow:0 1px 2px #0006;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;inset:0}.edit-note{color:#fff;z-index:40;background:#3a2e2aeb;border-radius:999px;padding:9px 18px;font-size:14px;animation:.18s note-in;position:fixed;bottom:168px;left:50%;transform:translate(-50%)}@keyframes note-in{0%{opacity:0;transform:translate(-50%)translateY(6px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.replace-row{align-items:stretch;gap:10px;margin:4px 0 14px;display:flex}.replace-side{text-align:left;cursor:pointer;background:#faf3ea;border:2px solid #0000;border-radius:14px;flex-direction:column;flex:1;gap:8px;padding:10px;display:flex}.replace-side.is-active{border-color:var(--coral)}.select-swatch{color:var(--ink);text-align:center;border:1px solid #00000014;border-radius:10px;padding:14px 6px;font-size:14px;font-weight:600}.replace-arrow{color:var(--muted);align-self:center;font-size:22px}.replace-picker{grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:16px;display:grid}.replace-opt{aspect-ratio:1;cursor:pointer;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0000001f}.replace-opt.is-from{box-shadow:0 0 0 3px var(--coral-deep), 0 0 0 4px #fff}.replace-opt.is-to{box-shadow:0 0 0 3px #2fa84f,0 0 0 4px #fff}.wallet-entry{cursor:pointer;justify-content:space-between;align-items:center;margin-top:22px;display:flex}.wallet-entry-name{margin-bottom:4px;font-size:16px;font-weight:700}.wallet-entry-btn{background:var(--coral-soft);color:var(--coral-deep);border-radius:999px;padding:8px 16px;font-weight:700}.wallet-hero{text-align:center;padding:22px 16px}.wallet-balance{justify-content:center;align-items:baseline;gap:8px;margin-bottom:8px;display:flex}.wallet-bean{font-size:30px}.wallet-num{color:var(--coral-deep);font-size:48px;font-weight:800;line-height:1}.wallet-unit{color:var(--ink-soft);font-size:18px;font-weight:700}.wallet-streak{color:var(--ink-soft);margin-bottom:14px;font-size:14px}.cycle-dots{justify-content:center;gap:6px;margin-bottom:16px;display:flex}.cycle-dot{width:34px;height:34px;color:var(--muted);background:#f3e9dd;border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.cycle-dot.is-filled{background:var(--coral);color:#fff}.cycle-dot.is-bonus{border:2px dashed var(--green)}.cycle-dot.is-bonus.is-filled{border:none}.ent-row{border-bottom:1px solid #f7efe6;align-items:center;gap:12px;padding:12px 0;display:flex}.ent-row:last-child{border-bottom:none}.ent-info{flex:1;min-width:0}.ent-name{font-size:15px;font-weight:600}.ent-tag{background:var(--coral-soft);color:var(--coral-deep);border-radius:6px;margin-right:6px;padding:1px 6px;font-size:11px;display:inline-block}.ent-desc{color:var(--muted);margin-top:3px;font-size:12.5px;line-height:1.5}.unlock-btn{background:linear-gradient(135deg, var(--coral), #ffab5c);color:#fff;white-space:nowrap;cursor:pointer;border:none;border-radius:999px;padding:10px 14px;font-size:14px;font-weight:700}.owned-tag{color:var(--green);white-space:nowrap;font-size:13px;font-weight:700}.record-list{flex-direction:column;display:flex}.record-row{border-bottom:1px solid #f7efe6;align-items:center;gap:10px;padding:7px 0;display:flex}.record-row:last-child{border-bottom:none}.record-note{flex:1;font-size:14px}.record-delta{text-align:right;min-width:40px;font-size:15px;font-weight:700}.record-delta.is-plus{color:var(--coral-deep)}.record-delta.is-minus{color:#6d7580}.record-time{color:var(--muted);text-align:right;min-width:74px;font-size:12px}.row-2{gap:10px;margin-top:12px;display:flex}.row-2 .btn{flex:1}.center-col{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.migrate-check{color:var(--ink-soft);align-items:center;gap:8px;font-size:15px;display:flex}.migrate-check input{width:20px;height:20px}.qr-canvas{width:320px;max-width:100%;height:auto;box-shadow:var(--shadow);background:#fff;border-radius:14px}.receive-emoji,.done-emoji{font-size:54px}.status-text{color:var(--ink);text-align:center;font-size:15px;line-height:1.6}.done-title{margin:0;font-size:20px;font-weight:800}.migrate-progress{color:var(--coral-deep);font-weight:700}.border-grid{flex-wrap:wrap;gap:8px;display:flex}.border-chip{border:1.5px solid var(--border);color:var(--ink-soft);cursor:pointer;background:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600}.border-chip.is-active{border-color:var(--coral);color:var(--coral-deep);background:#fff7ef}.border-price{color:var(--coral-deep);margin-left:6px;font-style:normal;font-weight:700}.tool-row{border-bottom:1px solid #f7efe6;align-items:center;gap:12px;padding:12px 0;display:flex}.tool-row:last-child{border-bottom:none}.tool-info{flex:1;min-width:0}.tool-info .ent-desc{margin-top:2px}.onboard-body{text-align:center;padding:6px 0 16px}.onboard-emoji{margin-bottom:10px;font-size:56px}.onboard-title{margin-bottom:8px;font-size:20px;font-weight:800}.center-text{text-align:center}.onboard-dots{justify-content:center;gap:8px;margin-top:16px;display:flex}.ob-dot{background:#eadfd2;border-radius:50%;width:8px;height:8px;transition:width .2s,background .2s}.ob-dot.is-active{background:var(--coral);border-radius:999px;width:22px}.reopen-onboard{color:var(--muted);cursor:pointer;background:0 0;border:none;margin:16px auto 0;font-size:12.5px;text-decoration:underline;display:block}