@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
:root{--bg-pink:#ffd1dc;--bg-lavender:#fff0f5;--primary-rose:#c2185b;--secondary-blue:#b3e5fc;--white:#fff;--text-dark:#424242;--border-color:#000}*{box-sizing:border-box}.pixel-app-body{min-height:100vh;color:var(--text-dark);cursor:crosshair;background-color:#0000;background-image:radial-gradient(circle,#0000 20%,#fefcfb 20% 80%,#0000 80%,#0000),radial-gradient(circle,#0000 20%,#fefcfb 20% 80%,#0000 80%,#0000),linear-gradient(135deg,#ff9a9e 0%,#fecfef 99% 100%);background-position:0 0,25px 25px,0 0;background-repeat:repeat,repeat,repeat;background-size:50px 50px,50px 50px,100% 100%;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;padding:20px;font-family:"Press Start 2P",Microsoft YaHei,sans-serif}.pixel-app-body button,.pixel-app-body input,.pixel-app-body a,.screen-container{cursor:pointer}.pixel-text{color:var(--primary-rose);font-family:"Press Start 2P",Microsoft YaHei,sans-serif}.pixel-box{border:4px solid var(--border-color);background:var(--white);box-shadow:6px 6px 0 var(--border-color);padding:20px;position:relative}.pixel-header{border:4px solid var(--border-color);background:var(--white);box-shadow:4px 4px 0 var(--border-color);justify-content:space-between;align-items:center;gap:18px;margin-bottom:30px;padding:15px 30px;display:flex}.header-left,.header-right{align-items:center;min-width:190px;display:flex}.header-right{justify-content:flex-end}.header-logo{object-fit:contain;width:44px;height:44px;image-rendering:pixelated;margin-right:10px;display:block}.header-title{font-size:1.2rem}.header-center{text-align:center;flex:1}.header-center p{color:var(--primary-rose);margin:0;font-family:"Press Start 2P",Microsoft YaHei,sans-serif;font-size:.88rem;font-weight:700;line-height:2}.pixel-login-link{min-width:116px;text-decoration:none}.pixel-user-menu{display:inline-flex;position:relative}.pixel-user-trigger{appearance:none;background:0 0;border:0;outline:none;justify-content:center;align-items:center;width:58px;height:58px;padding:0;list-style:none;display:inline-flex}.pixel-user-trigger:focus-visible .pixel-user-avatar{box-shadow:inset -4px -4px 0 #0000003d,inset 4px 4px 0 #ffffff8c,4px 4px 0 #000,0 0 0 4px var(--secondary-blue)}.pixel-user-menu.is-open .pixel-user-avatar{transform:translate(3px,3px);box-shadow:inset -2px -2px #00000047,inset 2px 2px #ffffff80,1px 1px #000}.pixel-user-avatar{background:var(--secondary-blue);width:50px;height:50px;color:var(--primary-rose);image-rendering:pixelated;border:4px solid #000;border-radius:0;justify-content:center;align-items:center;font-family:"Press Start 2P",Microsoft YaHei,sans-serif;font-size:1rem;line-height:1;transition:transform .1s,box-shadow .1s,opacity .1s;display:inline-flex;overflow:hidden;box-shadow:inset -4px -4px #0000003d,inset 4px 4px #ffffff8c,4px 4px #000}.pixel-user-avatar-loading{opacity:.72;animation:.9s steps(2,end) infinite pixelPulse}.pixel-user-avatar-img{object-fit:cover;width:100%;height:100%}.pixel-user-avatar-fallback{background:linear-gradient(135deg,var(--secondary-blue),var(--bg-lavender));justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex}.pixel-user-popover{z-index:40;background:var(--white);border:4px solid #000;gap:10px;width:min(270px,100vw - 32px);padding:14px;display:grid;position:absolute;top:calc(100% + 12px);right:0;box-shadow:6px 6px #000}.pixel-user-popover:before{background:var(--white);content:"";border-top:4px solid #000;border-left:4px solid #000;width:18px;height:18px;position:absolute;top:-12px;right:18px;transform:rotate(45deg)}.pixel-user-card{background:var(--bg-lavender);border:3px solid #000;gap:7px;min-width:0;padding:10px;display:grid}.pixel-user-name,.pixel-user-email{text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block;overflow:hidden}.pixel-user-name{color:var(--primary-rose);font-family:"Press Start 2P",Microsoft YaHei,sans-serif;font-size:.72rem;line-height:1.65}.pixel-user-email{color:var(--text-dark);font-family:Microsoft YaHei,sans-serif;font-size:.82rem;font-weight:700;line-height:1.3}.pixel-user-menu-link,.pixel-user-menu-button{background:var(--secondary-blue);width:100%;min-height:42px;color:var(--text-dark);text-align:center;border:3px solid #000;border-radius:0;justify-content:center;align-items:center;padding:9px 12px;font-family:"Press Start 2P",Microsoft YaHei,sans-serif;font-size:.68rem;font-weight:700;line-height:1.5;text-decoration:none;transition:transform .1s,box-shadow .1s,opacity .1s;display:inline-flex;box-shadow:3px 3px #000}.pixel-user-menu-button{background:var(--primary-rose);color:var(--white)}.pixel-user-menu-link:hover,.pixel-user-menu-button:hover{transform:translate(2px,2px);box-shadow:1px 1px #000}.pixel-user-menu-button:disabled{opacity:.55}@keyframes pixelPulse{50%{opacity:.35}}.pixel-btn-3d{background:var(--primary-rose);color:#fff;text-align:center;border:4px solid #000;border-radius:0;justify-content:center;align-items:center;min-height:50px;padding:13px 20px;font-family:"Press Start 2P",Microsoft YaHei,sans-serif;font-size:.88rem;font-weight:700;line-height:1.45;transition:transform .1s,box-shadow .1s,opacity .1s;display:inline-flex;box-shadow:inset -4px -4px #0000004d,inset 4px 4px #fff6,4px 4px #000}.pixel-btn-3d:active{transform:translate(4px,4px);box-shadow:inset -2px -2px #0000004d,inset 2px 2px #fff6,0 0 #000}.pixel-btn-3d:disabled{opacity:.45}.workbench-layout{gap:30px;max-width:1500px;height:clamp(620px,100vh - 190px,820px);min-height:0;margin:0 auto;display:flex}.main-canvas-area{flex-direction:column;flex:7;min-width:0;display:flex}.side-panel{flex-direction:column;flex:3;min-width:320px;display:flex}.tv-frame{background:#555;border:6px solid #333;border-radius:10px;flex:1;min-height:0;padding:20px;display:flex;box-shadow:inset 0 0 20px #000c}.dual-screen{background:#111;border:4px solid #000}.screen-container{background:#222;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.result-screen{border-left:4px solid #333}.upload-prompt{text-align:center;color:#fff}.upload-prompt h1{margin:0;font-size:4rem}.upload-prompt p{font-size:1rem}.blink-slow{animation:1.5s infinite blink}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.pixel-file-input,.hidden{display:none!important}.preview-canvas,.result-canvas{object-fit:contain;max-width:100%;max-height:100%;image-rendering:pixelated;display:block}.zoomable-canvas{cursor:zoom-in}.pixel-zoom-overlay{z-index:1000;background:#000000c7;justify-content:center;align-items:center;padding:36px;display:flex;position:fixed;inset:0}.pixel-zoom-panel{width:calc(100vw - 72px);height:calc(100vh - 96px);box-shadow:8px 8px 0 var(--primary-rose);background:#fff;border:4px solid #000;padding:18px;position:relative}.pixel-zoom-close{z-index:2;background:var(--primary-rose);color:#fff;border:4px solid #000;border-radius:0;width:42px;height:42px;font-family:"Press Start 2P",cursive;font-size:1rem;line-height:1;position:absolute;top:-18px;right:-18px}.pixel-zoom-scroll{background:#f7f7f7;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:auto}.pixel-zoom-canvas{image-rendering:pixelated;display:block}.loading-overlay{z-index:10;background:#000000d1;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading-bar-container{border:4px solid #fff;width:60%;height:20px;margin-bottom:10px;padding:2px}.loading-bar-progress{background:var(--primary-rose);width:0%;height:100%;animation:.65s steps(10,end) forwards loadProgress}.loading-text{color:var(--secondary-blue)}@keyframes loadProgress{to{width:100%}}.control-panel{background:#e0e0e0;border:4px solid #000;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;gap:14px;margin-top:20px;padding:15px;display:grid;box-shadow:inset 4px 4px #fff,inset -4px -4px #999}.apply-btn{min-width:136px;min-height:58px;font-size:.92rem}.knob-group{grid-template-columns:auto 90px auto;align-items:center;gap:10px;min-width:0;display:grid}.knob-group input{width:100%}.pixel-number-input{height:34px;color:var(--primary-rose);text-align:center;background:#fff;border:3px solid #000;border-radius:0;outline:none;padding:0 8px;font-family:"Press Start 2P",cursive;font-size:.72rem}.pixel-number-input:focus{border-color:var(--primary-rose);box-shadow:3px 3px #000}.knob-group span,.knob-group b{min-height:34px;color:var(--primary-rose);white-space:nowrap;background:0 0;border:0;align-items:center;padding:0;font-family:"Press Start 2P",cursive;font-size:1rem;font-weight:700;line-height:1;display:inline-flex}.loot-list-panel{flex-direction:column;flex:1;min-height:0;display:flex}.loot-heading,.palette-selector{display:none}.palette-title,.task-title{margin:0 0 10px;font-size:.6rem}.task-summary{border-bottom:4px solid #000;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:12px;display:flex}.task-title{margin:0;font-size:.95rem;line-height:1.3}.total-beads{color:var(--primary-rose);white-space:nowrap;margin:0;font-size:.72rem;line-height:1.3}.color-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;max-height:146px;padding-right:4px;display:grid;overflow-y:auto}.palette-swatch{color:#000000b8;border:2px solid #000;justify-content:center;align-items:center;min-height:34px;font-family:"Press Start 2P",cursive;font-size:.6rem;display:flex}.palette-swatch.active{outline:4px solid var(--primary-rose);transform:scale(1.04)}.stats-container{flex:1;min-height:0;overflow-y:auto}.empty-stats{opacity:.55;margin:0;font-size:.85rem}.stat-item{text-align:left;background:0 0;border:0;border-bottom:2px dashed #ddd;grid-template-columns:22px 54px minmax(0,1fr) 74px;align-items:center;gap:10px;width:100%;padding:8px 0;display:grid}.stat-item.active{background:var(--bg-lavender)}.color-dot{border:2px solid #000;width:20px;height:20px;box-shadow:2px 2px #0003}.stat-code,.stat-count{color:var(--primary-rose);font-family:"Press Start 2P",cursive;font-size:.6rem}.stat-name{color:#666;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.save-wrap{margin-top:auto;padding-top:20px}.save-btn{width:100%;min-height:58px;font-size:.92rem}.pixel-footer{display:none}.marquee{white-space:nowrap;will-change:transform;animation:15s linear infinite marquee}.marquee p{margin:0}@keyframes marquee{0%{transform:translate(100vw)}to{transform:translate(-100%)}}@media (max-width:1100px){.pixel-header,.workbench-layout{flex-direction:column;height:auto}.header-left,.header-right{min-width:0}.header-right{justify-content:center}.main-canvas-area,.side-panel{width:100%}.tv-frame{min-height:520px}.control-panel{grid-template-columns:1fr}}@media (max-width:700px){.pixel-app-body{padding:12px 12px 56px}.tv-frame{flex-direction:column;min-height:720px;padding:12px}.result-screen{border-top:4px solid #333;border-left:0}}.cloud-bg{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.pixel-star{opacity:.8;background:#ffd1dc;width:6px;height:6px;animation:4s infinite alternate twinkleStar,20s linear infinite floatUp;position:absolute;box-shadow:0 -6px #ffd1dc,0 6px #ffd1dc,-6px 0 #ffd1dc,6px 0 #ffd1dc}.star-1{animation-duration:2s,15s;bottom:-20px;left:10%}.star-2{background:#b3e5fc;animation-duration:3s,22s;animation-delay:1s,5s;bottom:-20px;left:45%;box-shadow:0 -6px #b3e5fc,0 6px #b3e5fc,-6px 0 #b3e5fc,6px 0 #b3e5fc}.star-3{background:#fff9c4;animation-duration:2.5s,18s;animation-delay:2s,10s;bottom:-20px;left:80%;box-shadow:0 -6px #fff9c4,0 6px #fff9c4,-6px 0 #fff9c4,6px 0 #fff9c4}.star-4{--scale-factor:.7;animation-duration:2.2s,20s;animation-delay:.5s,3s;bottom:-20px;left:25%}.star-5{--scale-factor:1.2;background:#b3e5fc;animation-duration:2.8s,25s;animation-delay:1.5s,8s;bottom:-20px;left:35%;box-shadow:0 -6px #b3e5fc,0 6px #b3e5fc,-6px 0 #b3e5fc,6px 0 #b3e5fc}.star-6{--scale-factor:.8;background:#fff9c4;animation-duration:1.8s,17s;animation-delay:.2s,1s;bottom:-20px;left:60%;box-shadow:0 -6px #fff9c4,0 6px #fff9c4,-6px 0 #fff9c4,6px 0 #fff9c4}.star-7{--scale-factor:1.5;opacity:.6;animation-duration:3.1s,28s;animation-delay:.9s,12s;bottom:-20px;left:70%}.star-8{--scale-factor:.9;background:#b3e5fc;animation-duration:2.4s,19s;animation-delay:.7s,6s;bottom:-20px;left:90%;box-shadow:0 -6px #b3e5fc,0 6px #b3e5fc,-6px 0 #b3e5fc,6px 0 #b3e5fc}.star-9{--scale-factor:1.1;background:#fff9c4;animation-duration:2.9s,23s;animation-delay:1.1s,4s;bottom:-20px;left:5%;box-shadow:0 -6px #fff9c4,0 6px #fff9c4,-6px 0 #fff9c4,6px 0 #fff9c4}.star-10{--scale-factor:.6;animation-duration:1.5s,16s;animation-delay:.3s,9s;bottom:-20px;left:55%}@keyframes floatUp{0%{transform:translateY(100vh)rotate(0deg)scale(var(--scale-factor,1))}to{transform:translateY(-100vh)rotate(180deg)scale(var(--scale-factor,1))}}@keyframes twinkleStar{0%{opacity:.2;filter:brightness(.8)}to{opacity:1;filter:brightness(1.5)}}.pixel-cloud{opacity:.6;background:#fff;width:20px;height:20px;animation:30s linear infinite floatCloud;position:absolute;box-shadow:20px 20px #fff,40px 20px #fff,60px 20px #fff,10px 40px #fff,30px 40px #fff,50px 40px #fff,70px 40px #fff,20px 60px #fff,40px 60px #fff,60px 60px #fff}.cloud-1{animation-duration:35s;top:5%;left:-20%}.cloud-2{--scale-factor:.8;animation-duration:25s;animation-delay:5s;top:25%;left:-20%}.cloud-3{--scale-factor:1.2;animation-duration:40s;animation-delay:10s;top:65%;left:-20%}.cloud-4{--scale-factor:.6;opacity:.6;animation-duration:30s;animation-delay:15s;top:15%;left:-20%}.cloud-5{--scale-factor:1.5;opacity:.5;animation-duration:45s;animation-delay:2s;top:45%;left:-20%}.cloud-6{--scale-factor:.9;opacity:.7;animation-duration:22s;animation-delay:8s;top:85%;left:-20%}@keyframes floatCloud{0%{transform:translateX(0)scale(var(--scale-factor,1))}to{transform:translateX(120vw)scale(var(--scale-factor,1))}}.gallery-section{z-index:2;background-color:#0000;margin-top:40px;padding:60px 20px;position:relative}.gallery-header{margin-bottom:40px}.category-tabs{flex-wrap:wrap;justify-content:center;gap:15px;margin-top:20px;display:flex}.tab-btn{color:#333;background:#fff;border-color:#000;padding:8px 16px;font-size:.8rem}.tab-btn.active{color:#fff;background:#e91e63}.tab-btn:hover{transform:translateY(-2px);box-shadow:4px 4px #0003}.masonry-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;max-width:1200px;margin:0 auto;display:grid}.masonry-item{break-inside:avoid}.pixel-polaroid{background:#fff;border:4px solid #000;padding:15px 15px 70px;transition:transform .2s;position:relative;box-shadow:6px 6px #0003}.masonry-item:nth-child(2n) .pixel-polaroid{transform:rotate(2deg)}.masonry-item:nth-child(odd) .pixel-polaroid{transform:rotate(-1deg)}.masonry-item:hover .pixel-polaroid{z-index:10;transform:translateY(-5px)scale(1.02)}.polaroid-flipper{aspect-ratio:1;width:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.pixel-polaroid:hover .polaroid-flipper{transform:rotateY(180deg)}.front,.back{backface-visibility:hidden;background:#222;border:4px solid #000;width:100%;height:100%;position:absolute}.back{transform:rotateY(180deg)}.img-wrapper{width:100%;height:100%;position:relative;overflow:hidden}.img-wrapper img{object-fit:cover;width:100%;height:100%}.flip-hint{color:#fff;opacity:.7;background:#000;padding:2px 5px;font-family:"Press Start 2P",monospace;font-size:.5rem;position:absolute;bottom:5px;right:5px}.polaroid-info{justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:10px;left:15px;right:15px}.use-this-btn{color:#000;z-index:5;background:#81d4fa;padding:8px 12px;font-size:.8rem;transition:all .2s;position:absolute;bottom:-15px;right:-15px;box-shadow:4px 4px #000}.use-this-btn:hover{background:#29b6f6;transform:translateY(-2px);box-shadow:6px 6px #000}.tape{z-index:10;background:#ffffffb3;border:2px solid #ccc;width:80px;height:25px;position:absolute;top:-10px;left:50%;transform:translate(-50%)rotate(-3deg);box-shadow:2px 2px #0000001a}.tape:after{content:"★";color:#ff69b4;font-size:1.2rem;position:absolute;top:-1px;right:5px}.blind-box-trigger{cursor:pointer;z-index:100;background:#fff;border:4px solid #000;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:24px;display:flex;position:fixed;bottom:60px;right:30px;box-shadow:4px 4px #e91e63}.tooltip{color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#000;padding:4px 8px;font-family:"Press Start 2P",monospace;font-size:10px;transition:opacity .2s;position:absolute;top:-30px}.blind-box-trigger:hover .tooltip{opacity:1}