:root{--candy: #ff7eb6;--candy-deep: #ff5fa2;--peach: #ffb07c;--mint: #5fd6c4;--lavender: #b3a4f7;--lemon: #ffe08a;--bg: #fff6fa;--bg-tint: #fff0f6;--card: #ffffff;--ink: #6a6275;--ink-strong: #4a4356;--ink-soft: #b0a6bb;--line: #ffe1ee;--line-soft: #f2ecf5;--radius: 18px;--radius-lg: 26px;--radius-pill: 999px;--shadow-sm: 0 2px 10px rgba(255, 126, 182, .1);--shadow: 0 8px 24px rgba(255, 126, 182, .14);--shadow-pop: 0 10px 26px rgba(255, 95, 162, .3);--grad-candy: linear-gradient(135deg, #ff8fbf 0%, #ff9a76 100%);--grad-cool: linear-gradient(135deg, #8fb8ff 0%, #b3a4f7 100%);--font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);color:var(--ink);line-height:1.55;min-height:100vh;background:radial-gradient(1200px 600px at 12% -8%,#ffe6f2 0%,transparent 55%),radial-gradient(900px 500px at 108% 6%,#e7f0ff 0%,transparent 50%),var(--bg);background-attachment:fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased}.app{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}.app-header{background:#ffffffc7;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid var(--line);padding:14px 24px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.header-content{max-width:1440px;margin:0 auto}.header-top{margin-bottom:12px}.app-title{font-size:24px;font-weight:800;letter-spacing:-.3px;background:linear-gradient(120deg,var(--candy-deep),var(--lavender));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-flex;align-items:center;gap:8px}.app-title:before{content:"🧶";-webkit-text-fill-color:initial}.app-subtitle{font-size:13px;color:var(--ink-soft);margin-top:3px}.tab-nav{display:flex;gap:5px;background:#ffeaf3;border-radius:var(--radius-pill);padding:5px;max-width:440px;border:1.5px solid var(--line)}.tab-btn{flex:1;padding:10px 20px;border:none;border-radius:var(--radius-pill);background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:all .25s ease;min-height:40px}.tab-btn:hover{color:var(--candy-deep)}.tab-btn.active{background:var(--card);color:var(--candy-deep);box-shadow:0 4px 12px #ff5fa238}.app-main{display:flex;flex:1;width:100%;max-width:1440px;margin:0 auto;padding:22px;gap:22px;overflow:hidden}.sidebar{width:330px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:calc(100svh - 116px);padding-right:4px}.main-area{flex:1;min-width:0;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:2px solid var(--line);display:flex;align-items:stretch;justify-content:stretch;position:relative;overflow:hidden}.uploader-card,.control-panel,.color-palette{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:2px solid var(--line)}.uploader-card{padding:16px}.upload-zone{border:2.5px dashed #ffc3dd;border-radius:var(--radius);padding:28px 16px;text-align:center;cursor:pointer;background:#fff8fb;transition:border-color .25s,background .25s,transform .15s}.upload-zone:hover,.upload-zone.dragging{border-color:var(--candy);background:#fff0f7;transform:translateY(-1px)}.upload-zone.has-preview{padding:12px}.upload-icon{color:var(--candy);margin-bottom:10px}.upload-text{font-size:15px;color:var(--ink-strong);font-weight:700}.upload-formats{font-size:12px;color:var(--ink-soft);margin-top:6px}.preview-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.preview-img{max-width:100%;max-height:170px;border-radius:14px;object-fit:contain;box-shadow:var(--shadow-sm)}.preview-hint{font-size:12px;color:var(--ink-soft)}.control-panel{padding:20px;display:flex;flex-direction:column;gap:18px}.control-group{display:flex;flex-direction:column;gap:9px}.control-label{font-size:13px;font-weight:800;color:var(--ink-strong)}.control-label strong{color:var(--candy-deep)}.control-select{width:100%;padding:11px 14px;border:2px solid var(--line);border-radius:14px;font-family:inherit;font-size:14px;color:var(--ink-strong);background:#fff8fb;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}.control-select:focus{border-color:var(--candy);box-shadow:0 0 0 4px #ff7eb626}.custom-size-inputs{display:flex;align-items:flex-end;gap:8px;margin-top:4px}.size-input-group{flex:1;display:flex;flex-direction:column;gap:4px}.size-input-group label{font-size:12px;color:var(--ink-soft)}.size-input-group input{width:100%;padding:9px 12px;border:2px solid var(--line);border-radius:12px;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}.size-input-group input:focus{border-color:var(--candy);box-shadow:0 0 0 4px #ff7eb626}.control-hint{font-size:12px;color:var(--ink-soft);margin:2px 0 0;line-height:1.5}.control-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--radius-pill);background:linear-gradient(90deg,#ffd6e8,#d9e5ff);outline:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--card);border:4px solid var(--candy);cursor:pointer;box-shadow:0 2px 8px #ff5fa266;transition:transform .15s}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.18)}.control-slider::-moz-range-thumb{width:22px;height:22px;border:4px solid var(--candy);border-radius:50%;background:var(--card);cursor:pointer}.slider-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft)}.generate-btn,.export-btn{width:100%;padding:13px;font-family:inherit;font-size:15px;font-weight:800;color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden;isolation:isolate;transition:transform .12s,box-shadow .2s,filter .2s}.generate-btn{background:var(--grad-candy);box-shadow:var(--shadow-pop)}.export-btn{background:var(--grad-cool);box-shadow:0 10px 26px #8c82f552}.generate-btn:hover:not(:disabled),.export-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.01);filter:brightness(1.04)}.generate-btn:active:not(:disabled),.export-btn:active:not(:disabled){transform:translateY(0) scale(.99)}.generate-btn:disabled,.export-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.color-palette{padding:16px}.palette-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.palette-header h3{font-size:15px;font-weight:800;color:var(--ink-strong)}.palette-header h3:before{content:"🎨 "}.palette-count{font-size:12px;font-weight:700;color:var(--candy-deep);background:#fff0f6;padding:3px 10px;border-radius:var(--radius-pill);border:1.5px solid var(--line)}.palette-list{max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.palette-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:12px;font-size:13px;transition:background .15s}.palette-item:hover{background:#fff5f9}.color-swatch{width:26px;height:26px;border-radius:8px;flex-shrink:0;border:2px solid rgba(0,0,0,.06);box-shadow:inset 0 0 0 1px #ffffff80}.color-code{font-weight:800;color:var(--ink-strong);min-width:42px}.color-name{color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-count{color:var(--ink-soft);font-size:12px;white-space:nowrap}.palette-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.canvas-scroll-area::-webkit-scrollbar{width:8px;height:8px}.palette-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.canvas-scroll-area::-webkit-scrollbar-thumb{background:#ffc3dd;border-radius:var(--radius-pill)}.palette-list::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover,.canvas-scroll-area::-webkit-scrollbar-thumb:hover{background:var(--candy)}.bead-grid-container{width:100%;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column}.bead-grid-container canvas{display:block}.zoom-controls{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#fff6fa;border-bottom:2px solid var(--line);flex-shrink:0}.zoom-controls button{min-width:34px;height:32px;border:2px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--candy-deep);transition:background .15s,border-color .15s}.zoom-controls button:hover{background:#fff0f6;border-color:var(--candy)}.zoom-text-btn{font-size:12px!important}.zoom-label{min-width:46px;text-align:center;font-size:12px;color:var(--ink);font-weight:700}.canvas-scroll-area{flex:1;overflow:auto;background:#fff}.grid-tooltip{position:absolute;background:var(--card);color:var(--ink-strong);font-size:13px;padding:8px 14px;border-radius:14px;white-space:nowrap;pointer-events:none;z-index:10;box-shadow:var(--shadow);border:2px solid var(--line);font-weight:600}.empty-state{text-align:center;color:var(--ink-soft);padding:40px;margin:auto}.empty-state svg{margin-bottom:16px;stroke:var(--candy);opacity:.7}.empty-state p{font-size:15px}.empty-state:after{content:"✨";display:block;font-size:22px;margin-top:10px}.error-state{text-align:center;color:#e0577f;padding:40px;margin:auto;font-size:15px;line-height:1.6;font-weight:600}.loading-state{text-align:center;color:var(--ink);padding:40px;margin:auto}.bead-loader{display:flex;gap:10px;justify-content:center;margin:0 auto 18px}.bead-loader span{width:16px;height:16px;border-radius:50%;animation:beadBounce .7s ease-in-out infinite;box-shadow:0 3px 8px #ff5fa259}.bead-loader span:nth-child(1){background:var(--candy);animation-delay:0s}.bead-loader span:nth-child(2){background:var(--peach);animation-delay:.12s}.bead-loader span:nth-child(3){background:var(--lavender);animation-delay:.24s}@keyframes beadBounce{0%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(1.12)}}.loading-state p{font-size:15px;font-weight:600}@media (max-width: 1024px){.app-main{padding:18px;gap:18px}.sidebar{width:300px}}@media (max-width: 900px){.app-main{flex-direction:column;padding:16px;gap:16px;overflow:visible}.sidebar{width:100%;max-height:none;overflow-y:visible;padding-right:0}.main-area{min-height:60vh;overflow:auto}}@media (max-width: 768px){.app-header{padding:12px 16px}.app-title{font-size:20px}.app-main{padding:14px;gap:14px}.tab-nav{max-width:100%}.control-panel{padding:18px}.palette-list{max-height:320px}}@media (max-width: 600px){.app-header{padding:10px 14px}.app-title{font-size:18px}.app-subtitle{display:none}.header-top{margin-bottom:8px}.tab-nav{padding:4px;gap:3px}.tab-btn{padding:9px 12px;font-size:13px}.app-main{padding:12px;gap:12px}.uploader-card{padding:12px}.upload-zone{padding:20px 12px}.control-panel{padding:16px;gap:14px}.main-area{min-height:56vh}.palette-list{max-height:50vh}}@media (max-width: 480px){.app-header{padding:9px 12px}.app-title{font-size:17px}.tab-btn{padding:8px;font-size:12px}.app-main{padding:10px;gap:10px}.upload-zone{padding:16px 10px}.upload-icon svg{width:38px;height:38px}.upload-text{font-size:14px}.preview-img{max-height:120px}.control-panel{padding:14px;gap:12px}.control-select{padding:10px 12px}.color-swatch{width:22px;height:22px}.color-code{min-width:34px}.generate-btn,.export-btn{min-height:50px}.zoom-controls button{min-width:40px;height:38px}.control-slider::-webkit-slider-thumb{width:28px;height:28px}.grid-tooltip{font-size:12px;padding:6px 10px}}@media (hover: none) and (pointer: coarse){.zoom-controls button{min-width:40px;height:40px}}.sparkle-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0}.uploader-card,.control-panel,.color-palette{animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}.control-panel{animation-delay:.06s}.color-palette{animation-delay:.12s}@keyframes cardIn{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.generate-btn:after,.export-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translate(-120%);z-index:-1}.generate-btn:hover:not(:disabled):after,.export-btn:hover:not(:disabled):after{animation:shine .75s ease}@keyframes shine{to{transform:translate(120%)}}.generate-btn:before{content:"✨";font-size:14px}.bead-grid-container{animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both}@keyframes popIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.empty-state svg{animation:floatY 3s ease-in-out infinite}.empty-state:after{animation:twinkle 2s ease-in-out infinite}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes twinkle{0%,to{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}.color-swatch{transition:transform .18s ease}.palette-item:hover{transform:translate(2px)}.palette-item:hover .color-swatch{transform:scale(1.12) rotate(-4deg)}.tab-btn:hover:not(.active){transform:translateY(-1px)}.upload-zone:hover .upload-icon{animation:floatY 1.6s ease-in-out infinite}.control-slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px #ff7eb629,0 2px 8px #ff5fa273}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}