*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #F3EEC9;--surface: #F0EDDA;--border: #D8D2B0;--accent: #5a48d4;--accent-hover: #7c6af7;--text: #1a1706;--text-muted: #6b6440;--radius: 10px;--toolbar-h: 56px}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.hidden{display:none!important}.toolbar{position:fixed;top:0;left:0;right:0;height:var(--toolbar-h);display:flex;align-items:center;padding:0 16px;gap:12px;background:#fbf9ead9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100}.photo-count{flex:1;font-size:14px;color:var(--text-muted);text-align:center}.btn-icon{width:40px;height:40px;border:none;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;position:relative}.btn-icon svg{width:20px;height:20px}.btn-icon:hover{background:var(--border);border-color:var(--accent)}.sync-status{font-size:12px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 12px;white-space:nowrap;transition:opacity .5s}.sync-status.sync-done{color:#3a8a4a;border-color:#b2d9bb;background:#edf7ef}.sync-status.sync-error{color:#b03030;border-color:#e8b4b4;background:#fdf0f0}.drag-hint{position:fixed;bottom:24px;left:50%;transform:translate(-50%);font-size:13px;color:var(--text-muted);background:#f0eddae6;border:1px solid var(--border);border-radius:20px;padding:6px 16px;pointer-events:none;transition:opacity .6s;white-space:nowrap}.drag-hint.fade-out{opacity:0}#upload-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 16px;overflow-y:auto;background:var(--bg)}.upload-hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:480px;width:100%;gap:16px}.upload-icon{width:72px;height:72px;color:var(--accent);opacity:.85}.upload-icon svg{width:100%;height:100%}.upload-hero h1{font-size:clamp(22px,5vw,32px);font-weight:700;letter-spacing:-.5px;color:var(--text)}.upload-hero>p{font-size:15px;color:var(--text-muted);line-height:1.5}.drop-zone{width:100%;min-height:160px;border:2px dashed var(--border);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative;padding:32px 24px;margin-top:8px}.drop-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;cursor:pointer}.drop-zone-text{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.drop-zone-text strong{font-size:16px;color:var(--text)}.drop-zone-text span{font-size:13px;color:var(--text-muted)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:#5a48d40f}.upload-hint{font-size:12px;color:var(--text-muted)}.upload-status{width:100%;padding:12px 16px;border-radius:var(--radius);font-size:14px;line-height:1.4;background:#5a48d414;border:1px solid rgba(90,72,212,.25);color:var(--accent);text-align:center}.upload-status.error{background:#c83c3c14;border-color:#c83c3c40;color:#c03c3c}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.scene{width:100%;flex:1;display:flex;align-items:center;justify-content:center;margin-top:var(--toolbar-h);perspective:1600px;perspective-origin:50% 45%;cursor:grab;user-select:none;-webkit-user-select:none;position:relative;z-index:1}.scene.dragging{cursor:grabbing}.scene-tilt{transform-style:preserve-3d;transform:rotateX(22deg)}.cylinder{position:relative;transform-style:preserve-3d;will-change:transform}.photo-face{position:absolute;top:0;left:0;transform-style:preserve-3d;cursor:pointer}.face-front{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-repeat:no-repeat;background-color:#f0edda}.face-front.loading{background-image:none!important;background:linear-gradient(90deg,#f0edda 25%,#e5e0c5,#f0edda 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.face-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);background:#f5e040}.sun-burst{position:absolute;top:50%;left:50%;width:620px;height:620px;pointer-events:none;z-index:0;background:repeating-conic-gradient(from 0deg,#ffffff 0deg 6deg,transparent 6deg 15deg);-webkit-mask-image:radial-gradient(circle at center,#000 0%,#000 18%,rgba(0,0,0,.45) 42%,transparent 70%);mask-image:radial-gradient(circle at center,#000 0%,#000 18%,rgba(0,0,0,.45) 42%,transparent 70%);transform:translate(-50%,-50%);animation:sun-pulse 6s ease-in-out infinite}.sun-burst:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at center,#ffffff 0%,#ffffff 14%,rgba(255,255,255,.85) 22%,transparent 45%)}@keyframes sun-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}#modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}#modal.active{opacity:1;pointer-events:all}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#1e1c0ae0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.modal-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;max-width:min(90vw,1000px);max-height:90dvh;transform:scale(.92);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}#modal.active .modal-content{transform:scale(1)}#modal-img{max-width:100%;max-height:calc(90dvh - 80px);border-radius:10px;object-fit:contain;box-shadow:0 24px 80px #000c;display:block}.modal-close{position:fixed;top:16px;right:16px;width:44px;height:44px;background:#1e1c0abf;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;z-index:2}.modal-close svg{width:20px;height:20px}.modal-close:hover{background:#1e1c0af2;transform:scale(1.1)}.modal-nav{display:flex;align-items:center;gap:16px}.modal-prev,.modal-next{width:44px;height:44px;background:#1e1c0abf;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}.modal-prev:hover,.modal-next:hover{background:#1e1c0af2}.modal-counter{font-size:14px;color:#ffffffb3;min-width:60px;text-align:center}.modal-delete{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#b4282826;border:1px solid rgba(220,80,80,.4);border-radius:8px;color:#f99;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}.modal-delete svg{width:15px;height:15px}.modal-delete:hover{background:#b4282859;border-color:#dc5050b3}