@import "https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Serif+TC:wght@400;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg-cream:#fbf7ef;--bg-warm-sun:#fdf3e3;--wood-dark:#5c3d2e;--wood-mid:#8d5b4c;--wood-light:#d4a373;--bread-golden:#e09f3e;--bread-crust:#b56576;--bread-warm:#f4a261;--leaf-green:#81b29a;--sky-soft:#e0efcb;--sun-gold:#f6bd60;--accent-terracotta:#e07a5f;--text-charcoal:#3d342f;--text-soft:#6d594b;--glow-warm:#f6bd6059}html,body{background-color:var(--bg-cream);width:100%;height:100%;color:var(--text-charcoal);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;background-image:radial-gradient(circle at 20% 20%,#fee3b973 0%,#0000 60%),radial-gradient(circle at 80% 80%,#e0efcb59 0%,#0000 50%),linear-gradient(170deg,#fbf7ef 0%,#f5eccf 50%,#efe3c3 100%);font-family:Zen Maru Gothic,Noto Serif TC,sans-serif;overflow:hidden}body:after{content:"";pointer-events:none;z-index:200;background:radial-gradient(at 50% 30%,#0000 40%,#5c3d2e14 100%);position:fixed;inset:0}#particle-canvas{pointer-events:none;z-index:150;width:100vw;height:100vh;position:fixed;top:0;left:0}#app{width:100vw;height:100vh;position:relative;overflow:hidden}.scene{opacity:0;visibility:hidden;z-index:1;transition:opacity .8s cubic-bezier(.34,1.2,.64,1),transform .8s cubic-bezier(.34,1.2,.64,1),visibility 0s .8s;position:fixed;inset:0}.scene.is-active{opacity:1;visibility:visible;z-index:10;transition:opacity .8s cubic-bezier(.34,1.2,.64,1),transform .8s cubic-bezier(.34,1.2,.64,1),visibility}.scene.is-entering{animation:.8s cubic-bezier(.22,1,.36,1) forwards anime-scene-enter}@keyframes anime-scene-enter{0%{opacity:0;transform:scale(1.05)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.scene.is-leaving{z-index:5;animation:.6s cubic-bezier(.4,0,1,1) forwards anime-scene-leave}@keyframes anime-scene-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}.scene-svg{width:100%;height:100%;position:absolute;inset:0}.scene-svg line,.scene-svg path,.scene-svg polyline,.scene-svg polygon{stroke-linecap:round;stroke-linejoin:round}.door-half{z-index:120;pointer-events:none;background-color:#faf2e4;background-image:linear-gradient(135deg,#f6bd6026 0%,#0000 60%),linear-gradient(170deg,#fbf7ef 0%,#efe3c3 100%);position:fixed;inset:0}.door-left{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.door-right{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}.scene-label{z-index:50;-webkit-backdrop-filter:blur(8px);pointer-events:none;background:#fffdf8e0;border:2px solid #e6ccb2;border-radius:30px;align-items:center;gap:10px;padding:8px 16px;display:flex;position:fixed;top:24px;right:28px;box-shadow:0 4px 15px #5c3d2e14}.scene-label-dot{background:var(--sun-gold);width:8px;height:8px;box-shadow:0 0 8px var(--sun-gold);border-radius:50%;animation:1.8s ease-in-out infinite anime-dot-pulse}@keyframes anime-dot-pulse{0%,to{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.3)}}.scene-label-text{letter-spacing:2px;color:var(--text-charcoal);font-family:Zen Maru Gothic,sans-serif;font-size:13px;font-weight:700}.scene-nav-dots{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#fffdf8d9;border:1.5px solid #e6ccb2;border-radius:20px;align-items:center;gap:12px;padding:8px 16px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #5c3d2e0f}.nav-dot{opacity:.35;background:#dda15e;border-radius:50%;width:8px;height:8px;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.nav-dot.is-active{opacity:1;background:var(--accent-terracotta);transform:scale(1.4);box-shadow:0 0 8px #e07a5f80}.back-btn{z-index:50;cursor:pointer;letter-spacing:1px;color:var(--text-charcoal);background:#fffdf9;border:2px solid #d4a373;border-radius:25px;align-items:center;gap:8px;padding:9px 20px 9px 14px;font-family:Zen Maru Gothic,sans-serif;font-size:13px;font-weight:700;transition:all .25s cubic-bezier(.34,1.56,.64,1);display:flex;position:fixed;top:24px;left:28px;box-shadow:0 4px 12px #5c3d2e1f,inset 0 1px #fffc}.back-btn:hover{border-color:var(--accent-terracotta);color:var(--accent-terracotta);background:#fef9ef;transform:translateY(-2px)scale(1.03);box-shadow:0 6px 18px #e07a5f33}.back-btn:active{transform:translateY(1px)scale(.98);box-shadow:0 2px 6px #5c3d2e1a}.back-btn svg{stroke:currentColor;transition:transform .25s}.back-btn:hover svg{transform:translate(-3px)}[data-interact]{position:relative}[data-interact]:after{content:attr(data-tip);color:#fffdf9;letter-spacing:1px;white-space:nowrap;pointer-events:none;opacity:0;background:#5c3d2e;border-radius:12px;padding:5px 12px;font-family:Zen Maru Gothic,sans-serif;font-size:11px;font-weight:500;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)translateY(6px);box-shadow:0 4px 12px #5c3d2e40}[data-interact]:hover:after{opacity:1;transform:translate(-50%)translateY(0)}.cloud-1{animation:30s ease-in-out infinite cloud-drift-1}.cloud-2{animation:38s ease-in-out infinite cloud-drift-2}.cloud-3{animation:24s ease-in-out infinite cloud-drift-3}@keyframes cloud-drift-1{0%,to{transform:translate(0)translateY(0)}50%{transform:translate(40px)translateY(-6px)}}@keyframes cloud-drift-2{0%,to{transform:translate(0)}50%{transform:translate(-50px)translateY(4px)}}@keyframes cloud-drift-3{0%,to{transform:translate(0)}50%{transform:translate(30px)translateY(-4px)}}.chimney-smoke{animation:4.5s ease-in-out infinite anime-smoke-rise}@keyframes anime-smoke-rise{0%{opacity:.6;transform:translateY(0)scaleX(1)}50%{opacity:.3;transform:translateY(-22px)scaleX(1.3)}to{opacity:.6;transform:translateY(0)scaleX(1)}}.baker-left-arm{transform-origin:-35px 110px;animation:2s ease-in-out infinite knead-left}.baker-right-arm{transform-origin:35px 110px;animation:2s ease-in-out .5s infinite knead-right}@keyframes knead-left{0%,to{transform:rotate(0)}50%{transform:rotate(-12deg)}}@keyframes knead-right{0%,to{transform:rotate(0)}50%{transform:rotate(10deg)}}.baker-wave-arm{transform-origin:35px 90px;animation:2.2s ease-in-out infinite wave-hand}@keyframes wave-hand{0%,to{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(16deg)}}.baker-rolling{animation:9s ease-in-out infinite rolling-walk}@keyframes rolling-walk{0%{transform:translate(450px,340px)scaleX(1)}25%{transform:translate(450px,340px)scaleX(1)}30%{transform:translate(450px,340px)scaleX(-1)}40%{transform:translate(380px,340px)scaleX(-1)}50%{transform:translate(380px,340px)scaleX(1)}60%{transform:translate(520px,340px)scaleX(1)}75%{transform:translate(520px,340px)scaleX(1)}80%{transform:translate(520px,340px)scaleX(-1)}90%{transform:translate(450px,340px)scaleX(-1)}95%{transform:translate(450px,340px)scaleX(1)}to{transform:translate(450px,340px)scaleX(1)}}.baker-rolling-legs{animation:.5s ease-in-out infinite legs-step}.busy-helper{animation:6.5s ease-in-out infinite helper-walk}@keyframes helper-walk{0%{transform:translate(1200px,380px)scaleX(1)}25%{transform:translate(1050px,380px)scaleX(1)}30%{transform:translate(1050px,380px)scaleX(-1)}50%{transform:translate(1200px,380px)scaleX(-1)}70%{transform:translate(1350px,380px)scaleX(-1)}75%{transform:translate(1350px,380px)scaleX(1)}to{transform:translate(1200px,380px)scaleX(1)}}.helper-legs{animation:.5s ease-in-out infinite legs-step}@keyframes legs-step{0%,to{transform:skew(0)}25%{transform:skew(6deg)}75%{transform:skew(-6deg)}}.character-bird,.character-bird-display{animation:3.5s ease-in-out infinite bird-hop}@keyframes bird-hop{0%,80%,to{transform:translateY(0)}85%{transform:translateY(-5px)}92%{transform:translateY(0)}96%{transform:translateY(-3px)}}.character-cat{animation:3.5s ease-in-out infinite cat-idle}@keyframes cat-idle{0%,to{transform:translate(0)}50%{transform:translate(3px)}}.scene-hint text{animation:2.8s ease-in-out infinite hint-pulse}@keyframes hint-pulse{0%,to{opacity:.45}50%{opacity:.9}}.oven-mount{z-index:15;pointer-events:auto;filter:drop-shadow(0 8px 20px #5c3d2e26);position:fixed;top:36%;left:56%;transform:translate(-50%,-50%)}.sketch-oven{cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s}.sketch-oven:hover{filter:drop-shadow(0 12px 25px #5c3d2e38);transform:translateY(-5px)scale(1.02)}.bread-mount{z-index:15;pointer-events:auto;position:fixed;bottom:20%;left:50%;transform:translate(-50%)}.bread-overlay{-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;z-index:500;background:#3d342fa6;justify-content:center;align-items:center;transition:opacity .45s;display:flex;position:fixed;inset:0}.bread-overlay.is-active{opacity:1;pointer-events:auto}.bread-card{cursor:pointer;background:#fffdf8;border:3px solid #d4a373;border-radius:12px;width:200px;height:130px;transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;box-shadow:0 10px 25px #5c3d2e2e}.bread-card:hover:not(.is-expanded){border-color:var(--bread-golden);transform:translateY(-6px)rotate(-1deg);box-shadow:0 14px 30px #e09f3e4d}.bread-card-label{color:#fffdf8;letter-spacing:1.5px;text-align:center;pointer-events:none;background:linear-gradient(#0000,#3d342fb8);padding:6px 8px 7px;font-family:Zen Maru Gothic,sans-serif;font-size:.72rem;font-weight:700;position:absolute;bottom:0;left:0;right:0}.bread-card.is-expanded{z-index:600;cursor:default;border:3px solid #d4a373;border-radius:16px;width:480px;height:320px;position:fixed;top:calc(50% - 180px);left:calc(50% - 240px);overflow:hidden;box-shadow:0 25px 60px #3d342f59}.bread-card.is-expanded .bread-card-label{display:none}.bread-photo-wrapper{width:100%;height:100%;position:relative;overflow:hidden}.bread-plate{object-fit:cover;width:100%;height:100%;display:block}.bread-photo-cutout{object-fit:contain;filter:drop-shadow(4px 15px 12px #5c3d2e73);max-width:85%;max-height:85%;transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bread-info-card{opacity:0;text-align:center;pointer-events:none;background:linear-gradient(#0000 0%,#2a1f1ae0 40%);border-radius:0 0 16px 16px;padding:1.4rem 1.4rem 1.2rem;font-family:Zen Maru Gothic,sans-serif;position:absolute;bottom:0;left:0;right:0;transform:translateY(12px)}.info-tag{letter-spacing:2px;color:#f6bd60;margin-bottom:.35rem;font-size:.82rem;font-weight:700}.info-text{color:#fdf3e3;font-size:.9rem;line-height:1.55}.scene-svg text{font-family:Zen Maru Gothic,sans-serif!important}.anime-glow{filter:drop-shadow(0 0 12px #f6bd6080)}.bread-selector{z-index:20;pointer-events:auto;gap:16px;display:flex;position:fixed;bottom:12%;left:50%;transform:translate(-50%)}.bread-option{text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fffdf8;border:2.5px solid #d4a373;border-radius:14px;width:96px;padding:10px 6px 8px;font-family:Zen Maru Gothic,sans-serif;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s;box-shadow:0 6px 18px #5c3d2e24}.bread-option:hover{border-color:#e09f3e;transform:translateY(-6px)scale(1.06);box-shadow:0 12px 28px #e09f3e47}.bread-option.selected{background:#fef3e8;border-color:#e07a5f;transform:translateY(-4px)scale(1.04);box-shadow:0 10px 24px #e07a5f4d}.bread-option-emoji{margin-bottom:4px;font-size:2rem;line-height:1;display:block}.cutout-bread-item{transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s}.cutout-bread-item:hover{filter:drop-shadow(0 15px 25px #5c3d2e66);transform:translateY(-8px)scale(1.05)!important}.cutout-bread-item image{transition:opacity .3s}.cutout-bread-item:hover image{opacity:.95}.bread-option-name{color:#5c3d2e;letter-spacing:1px;font-size:.72rem;font-weight:700}.bread-selector-hint{z-index:20;color:#8d5b4c;letter-spacing:2px;opacity:.85;pointer-events:none;white-space:nowrap;font-family:Zen Maru Gothic,sans-serif;font-size:.82rem;font-weight:700;position:fixed;bottom:calc(12% + 118px);left:50%;transform:translate(-50%)}.workshop-warm-overlay{pointer-events:none;opacity:0;z-index:5;border-radius:inherit;background:radial-gradient(60% 50% at 58% 42%,#f6bd6061 0%,#e07a5f2e 45%,#0000 80%);position:absolute;inset:0}.scene-flash{opacity:0;pointer-events:none;z-index:900;background:#fff8ee;position:fixed;inset:0}.aroma-bubble{color:#e09f3e;pointer-events:none;z-index:200;white-space:nowrap;background:#fffdf8eb;border:2px solid #d4a373;border-radius:20px;padding:5px 14px;font-family:Zen Maru Gothic,sans-serif;font-size:.88rem;font-weight:700;position:fixed;box-shadow:0 4px 12px #5c3d2e1f}.baker-character{z-index:16;pointer-events:none;opacity:0;position:fixed;bottom:15%}@keyframes tempPulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.temp-pulse{animation:.4s ease-in-out tempPulse}@keyframes flickerGlow{0%,to{opacity:.55}25%{opacity:.75}50%{opacity:.45}75%{opacity:.8}}.flicker-active{animation:.6s ease-in-out infinite flickerGlow}.baked-photo-card{z-index:22;pointer-events:none;opacity:0;background:#fffdf8;border:3px solid #d4a373;border-radius:16px;width:190px;position:fixed;top:36%;left:42.2%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 12px 40px #5c3d2e38,0 2px 8px #5c3d2e1a}.baked-photo-card img{object-fit:cover;border-bottom:2px solid #e6ccb2;width:100%;height:155px;display:block}.baked-photo-card-body{text-align:center;padding:10px 14px 12px;font-family:Zen Maru Gothic,sans-serif}.baked-photo-card-name{color:#5c3d2e;letter-spacing:2px;margin-bottom:3px;font-size:1.1rem;font-weight:800}.baked-photo-card-tag{color:#e09f3e;letter-spacing:1px;font-size:.72rem;font-weight:600}.admin-toggle-btn{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#222;cursor:pointer;background:#fffffff2;border:2px solid #222;border-radius:20px;align-items:center;gap:8px;padding:8px 18px;font-family:Zen Maru Gothic,sans-serif;font-size:13px;font-weight:700;transition:all .2s;display:flex;position:fixed;top:24px;left:170px;box-shadow:3px 3px #222}.admin-toggle-btn:hover{background:#ffe89c;transform:translate(-2px,-2px);box-shadow:5px 5px #222}.admin-toggle-btn:active{transform:translate(1px,1px);box-shadow:1px 1px #222}.admin-dashboard-overlay{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:2000;background:#fdf3e3f2;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.admin-dashboard-overlay.is-active{display:flex}.admin-dashboard-window{background:#fffdf8;border:3.5px solid #222;border-radius:16px;flex-direction:column;width:100%;max-width:1200px;height:90vh;padding:30px;display:flex;position:relative;overflow:hidden;box-shadow:10px 10px #222}.admin-close-btn{cursor:pointer;color:#555;background:0 0;border:none;font-size:24px;font-weight:700;transition:color .2s;position:absolute;top:20px;right:20px}.admin-close-btn:hover{color:#ff4d4f}.admin-title{color:#222;border-bottom:3.5px solid #222;margin-bottom:20px;padding-bottom:12px;font-family:Zen Maru Gothic,sans-serif;font-size:24px;font-weight:800}.admin-layout{flex:1;gap:30px;display:flex;overflow:hidden}.admin-section{flex-direction:column;flex:1;display:flex;overflow:hidden}.admin-left-panel{border-right:2px dashed #ccc;padding-right:20px}.section-title{color:#5c3d2e;margin-bottom:15px;font-family:Zen Maru Gothic,sans-serif;font-size:18px;font-weight:700}.cabinet-visualizer{gap:15px;margin-bottom:20px;display:flex}.visual-cabinet{background:#f4ead4;border:2px solid #5c3d2e;border-radius:8px;flex-direction:column;flex:1;gap:8px;padding:10px;display:flex}.cabinet-name{text-align:center;color:#5c3d2e;font-size:12px;font-weight:700}.visual-shelf{background:#8d5b4c;border-radius:4px;gap:6px;padding:4px;display:flex}.visual-slot{cursor:pointer;-webkit-user-select:none;user-select:none;color:#333;background:#fff9;border:1px solid #777;border-radius:4px;flex:1;justify-content:center;align-items:center;height:36px;font-size:10px;font-weight:700;transition:all .2s;display:flex}.visual-slot.is-occupied{color:#ff4d4f;background:#ffccc7;border-color:#ff4d4f}.visual-slot.is-selected{color:#1890ff;background:#bae7ff;border-color:#1890ff;transform:scale(1.05)}.product-list-container{background:#fffdf8;border:2px solid #222;border-radius:8px;flex:1;overflow-y:auto}.product-table{border-collapse:collapse;text-align:left;width:100%}.product-table th,.product-table td{border-bottom:1.5px solid #222;padding:10px 12px;font-size:13px}.product-table th{background:#ffe89c;font-weight:700;position:sticky;top:0}.product-table tr:hover{background:#faf5e6}.product-table tr.is-selected-row{font-weight:700;background:#e8d3c3!important}.delete-btn{color:#fff;cursor:pointer;background:#ff4d4f;border:1.5px solid #222;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:700;transition:all .1s;box-shadow:1.5px 1.5px #222}.delete-btn:hover{transform:translate(-1px,-1px);box-shadow:2.5px 2.5px #222}.delete-btn:active{transform:translate(1px,1px);box-shadow:.5px .5px #222}.admin-right-panel form{flex-direction:column;gap:12px;padding-right:10px;display:flex;overflow-y:auto}.form-group{flex-direction:column;gap:5px;display:flex}.form-group label{color:#5c3d2e;font-size:13px;font-weight:700}.form-group input,.form-group select,.form-group textarea{background:#fffdf8;border:2px solid #222;border-radius:6px;outline:none;padding:8px 12px;font-family:inherit;font-size:13px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--bread-golden);background:#fffdf0}.form-row{gap:15px;display:flex}.form-row .form-group{flex:1}.upload-area{cursor:pointer;background:#faf8f2;border:2px dashed #222;border-radius:8px;justify-content:center;align-items:center;min-height:120px;transition:background .2s;display:flex;position:relative;overflow:hidden}.upload-area:hover{background:#faf2e4}.upload-placeholder{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:20px;display:flex}.upload-placeholder p{color:#222;font-size:13px;font-weight:700}.upload-placeholder span{color:#777;font-size:11px}.upload-progress-container{flex-direction:column;align-items:center;gap:10px;padding:20px;display:flex}.spinner{border:3.5px solid #ccc;border-top-color:#222;border-radius:50%;width:28px;height:28px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.upload-progress-container p{color:#222;font-size:12px;font-weight:700}.upload-preview-container{align-items:center;gap:20px;width:100%;padding:15px 30px;display:flex}.upload-preview-container img{object-fit:contain;filter:drop-shadow(2px 5px 4px #00000026);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='4' height='4' fill='%23eee'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23eee'/%3E%3C/svg%3E");border:1px solid #ccc;border-radius:4px;width:90px;height:70px}.re-upload-btn{cursor:pointer;background:#fff;border:1.5px solid #222;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:700;transition:all .1s;box-shadow:1.5px 1.5px #222}.re-upload-btn:hover{background:#f0f0f0}.admin-submit-btn{color:#222;cursor:pointer;background:#ffe89c;border:3px solid #222;border-radius:8px;margin-top:10px;padding:12px;font-size:14px;font-weight:700;transition:all .2s;box-shadow:4px 4px #222}.admin-submit-btn:hover{background:#ffd966;transform:translate(-2px,-2px);box-shadow:6px 6px #222}.admin-submit-btn:active{transform:translate(1px,1px);box-shadow:1.5px 1.5px #222}
