:root{--color-darkroom-black:#1a1614;--color-film-gray:#2d2925;--color-paper-warm:#f9f6f1;--color-sepia-tone:#d4c5b0;--color-amber-safe:#ff9f1c;--color-red-light:#ff6b6b;--color-cyan-process:#4ecdc4;--color-silver-halide:#a8a39d;--color-negative-blue:#0f4c81;--gradient-darkroom:linear-gradient(135deg,#1a1614,#2d2925);--gradient-paper:linear-gradient(135deg,#fefdfb,#f9f6f1);--gradient-film:radial-gradient(circle at 30% 20%,rgba(255,159,28,.08) 0%,transparent 50%);--shadow-sm:0 1px 2px rgba(26,22,20,.08);--shadow-md:0 4px 12px rgba(26,22,20,.12);--shadow-lg:0 12px 32px rgba(26,22,20,.16);--shadow-xl:0 20px 48px rgba(26,22,20,.24);--font-display:"DM Serif Display","Playfair Display",Georgia,serif;--font-body:"Instrument Sans",-apple-system,sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace}*{box-sizing:border-box}body,html{margin:0;padding:0;font-family:var(--font-body);background:var(--color-paper-warm);background-image:var(--gradient-film),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(26,22,20,.015) 2px,rgba(26,22,20,.015) 4px);color:var(--color-darkroom-black);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1400px;margin:0 auto;padding:40px 24px}.header{text-align:center;margin-bottom:56px;position:relative;animation:fadeSlideDown .8s cubic-bezier(.16,1,.3,1)}@keyframes fadeSlideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.header h1{margin:0 0 16px;font-family:var(--font-display);font-size:clamp(32px,5vw,52px);font-weight:400;color:var(--color-darkroom-black);letter-spacing:-.02em;line-height:1.1;position:relative;display:inline-block}.header h1:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:60px;height:2px;background:linear-gradient(90deg,transparent 0,var(--color-amber-safe) 50%,transparent 100%);opacity:.6}.header p{margin:0;font-size:clamp(15px,2vw,18px);color:var(--color-silver-halide);font-weight:450;letter-spacing:.01em}.main-content{display:grid;grid-template-columns:1fr;grid-gap:32px;gap:32px}@media (max-width:767px){.container{padding:12px 0 80px}.header{margin-bottom:20px;padding:0 16px}.header h1{font-size:24px;font-weight:700;margin-bottom:6px}.header p{font-size:14px;color:#6b7280}.main-content{display:flex;flex-direction:column;gap:12px;padding:0 16px}.main-content .preview-section{order:-1}.main-content .sidebar-left{order:0}.main-content .sidebar-right{order:1}.preview-section,.sidebar{gap:12px}.preview-wrapper{min-height:200px}.preview-wrapper canvas{border-radius:8px}.exif-info{padding:16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}.exif-info h3{font-size:13px;margin-bottom:12px;font-weight:600;color:#1f2937;text-transform:none}.exif-grid{gap:12px}.exif-label{font-size:11px;color:#6b7280}.exif-value{font-size:14px;font-weight:500}.location-section{margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}.location-input{padding:12px;font-size:14px;border-radius:10px;border-width:1.5px}.btn{padding:14px 20px;font-size:15px;font-weight:600;border-radius:12px;min-height:48px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.btn-primary{box-shadow:0 4px 12px rgba(37,99,235,.3)}.actions{gap:10px;flex-wrap:wrap;padding:0 16px}.main-content.has-image .actions{position:-webkit-sticky;position:sticky;bottom:0;left:0;right:0;background:#fff;padding:12px 16px;margin:0 -16px;border-top:1px solid #e5e7eb;box-shadow:0 -4px 12px rgba(0,0,0,.05);z-index:10}.main-content.has-image .actions:before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;background:linear-gradient(0deg,hsla(0,0%,100%,.95),transparent);pointer-events:none}.thumbnails-grid{padding:10px;gap:6px;margin-bottom:12px}.thumbnail-add,.thumbnail-item{width:56px;height:56px}.sidebar-placeholder{padding:32px 20px;border-radius:12px}.placeholder-icon{width:56px;height:56px}.placeholder-text{font-size:14px}.footer,.placeholder-hint{font-size:12px}.footer{margin-top:32px;padding:20px 16px}}@media (min-width:1024px){.main-content.has-image{grid-template-columns:280px 1fr 300px}.main-content.has-image .sidebar-left{grid-column:1}.main-content.has-image .preview-section{grid-column:2}.main-content.has-image .sidebar-right{grid-column:3}}@media (min-width:768px) and (max-width:1023px){.main-content.has-image{grid-template-columns:1fr 1fr}.main-content.has-image .preview-section{grid-column:1/-1;order:-1}}.sidebar{display:flex;flex-direction:column;gap:12px}.sidebar-left{gap:0}.preview-section{display:flex;flex-direction:column;align-items:center;gap:24px}.preview-wrapper{display:flex;justify-content:center;align-items:center;width:100%;min-height:300px}.preview-wrapper canvas{max-width:100%;height:auto;box-shadow:0 1px 2px rgba(26,22,20,.06),0 8px 24px rgba(26,22,20,.12),0 24px 48px rgba(26,22,20,.18);border-radius:0;transition:transform .4s cubic-bezier(.16,1,.3,1);animation:photoReveal .8s cubic-bezier(.16,1,.3,1);animation-delay:.3s;animation-fill-mode:both}@keyframes photoReveal{0%{opacity:0;transform:scale(.95) rotateX(5deg);filter:blur(4px)}to{opacity:1;transform:scale(1) rotateX(0deg);filter:blur(0)}}.preview-wrapper canvas:hover{transform:scale(1.01)}.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;border-radius:2px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-sm)}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:var(--color-amber-safe);color:var(--color-darkroom-black);box-shadow:var(--shadow-md),inset 0 1px 0 hsla(0,0%,100%,.2)}.btn-primary:hover{background:#ffb347;transform:translateY(-2px);box-shadow:var(--shadow-lg),inset 0 1px 0 hsla(0,0%,100%,.3)}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-secondary{background:var(--color-paper-warm);color:var(--color-film-gray);border:1.5px solid var(--color-sepia-tone)}.btn-secondary:hover{background:#fff;border-color:var(--color-silver-halide);transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:var(--shadow-sm)!important}.btn:disabled:before{display:none}.exif-info{background:#fff;background-image:linear-gradient(180deg,rgba(255,159,28,.02),transparent);border-radius:0;border:1px solid var(--color-sepia-tone);border-left:3px solid var(--color-amber-safe);padding:24px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;animation:cardSlideIn .5s cubic-bezier(.16,1,.3,1);animation-delay:.2s;animation-fill-mode:both}@keyframes cardSlideIn{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.exif-info:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--color-amber-safe),transparent);opacity:.3}.exif-info h3{margin:0 0 16px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--color-film-gray);text-transform:uppercase;letter-spacing:.12em;position:relative;padding-bottom:12px}.exif-info h3:after{content:"";position:absolute;bottom:0;left:0;width:32px;height:2px;background:var(--color-amber-safe)}.exif-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}.exif-item{display:flex;flex-direction:column;gap:2px}.exif-item.full-width{grid-column:1/-1}.exif-label{font-family:var(--font-mono);font-size:10px;color:var(--color-silver-halide);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.exif-value{font-size:15px;color:var(--color-darkroom-black);font-weight:500;font-family:var(--font-body);letter-spacing:-.01em}.exif-value.empty{color:var(--color-sepia-tone);font-weight:400;font-style:italic}.caption-generator{background:#fff;background-image:linear-gradient(180deg,rgba(255,159,28,.02),transparent);border-radius:0;border:1px solid var(--color-sepia-tone);border-left:3px solid var(--color-amber-safe);padding:24px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;animation:cardSlideIn .5s cubic-bezier(.16,1,.3,1);animation-delay:.4s;animation-fill-mode:both}.caption-generator:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--color-amber-safe),transparent);opacity:.3}.caption-generator h3{margin:0 0 16px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--color-film-gray);text-transform:uppercase;letter-spacing:.12em;position:relative;padding-bottom:12px}.caption-generator h3:after{content:"";position:absolute;bottom:0;left:0;width:32px;height:2px;background:var(--color-amber-safe)}.card-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-bottom:14px}.card-header h3{margin-bottom:0;padding-bottom:12px}.collapse-chevron{color:var(--color-silver-halide);transition:transform .3s cubic-bezier(.16,1,.3,1);flex-shrink:0;margin-left:8px}.collapse-chevron.collapsed{transform:rotate(-90deg)}.card-content{animation:expandCard .3s cubic-bezier(.16,1,.3,1)}@keyframes expandCard{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.location-section{margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}.location-value{display:block;margin-top:4px}.location-input{width:100%;margin-top:6px;padding:12px 14px;font-size:14px;font-family:var(--font-body);border:2px solid var(--color-sepia-tone);border-radius:0;background:#fff;color:var(--color-darkroom-black);transition:all .2s ease;box-shadow:inset 0 1px 3px rgba(26,22,20,.05)}.location-input:focus{outline:none;border-color:var(--color-amber-safe);box-shadow:inset 0 1px 3px rgba(26,22,20,.05),0 0 0 3px rgba(255,159,28,.15)}.location-input::placeholder{color:#9ca3af}.location-input-row{display:flex;flex-direction:column;gap:8px}.location-input-row .location-input{margin-top:0}.btn-apply-all{padding:8px 12px;font-size:12px;font-weight:500;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn-apply-all:hover{background:#dbeafe;border-color:#93c5fd}.loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#6b7280}.spinner{width:40px;height:40px;border-left:4px solid hsla(33,6%,64%,.2);border-bottom:4px solid hsla(33,6%,64%,.2);border-top:4px solid hsla(33,6%,64%,.2);border-top-color:var(--color-amber-safe);border-right:4px solid hsla(33,6%,64%,.2);border-right-color:var(--color-amber-safe);border-radius:50%;animation:spin 1.2s cubic-bezier(.5,0,.5,1) infinite;box-shadow:inset 0 0 8px rgba(255,159,28,.1),0 0 12px rgba(255,159,28,.2)}@keyframes spin{to{transform:rotate(1turn)}}.footer{margin-top:80px;text-align:center;padding:32px 24px;border-top:2px solid var(--color-sepia-tone);background:linear-gradient(180deg,transparent,rgba(255,159,28,.03));color:var(--color-silver-halide);font-size:13px;font-family:var(--font-mono);letter-spacing:.02em;position:relative}.footer:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:2px;background:var(--color-amber-safe);opacity:.5}.footer a{color:var(--color-film-gray);text-decoration:none;transition:color .2s ease;font-weight:600}.footer a:hover{color:var(--color-amber-safe);text-decoration:none}.thumbnails-grid{display:flex;flex-wrap:wrap;gap:10px;width:100%;padding:16px;background:var(--color-film-gray);background-image:repeating-linear-gradient(90deg,transparent,transparent 8px,hsla(0,0%,100%,.03) 0,hsla(0,0%,100%,.03) 16px);border-radius:0;border-top:2px solid var(--color-darkroom-black);border-bottom:2px solid var(--color-darkroom-black);margin-bottom:12px;box-shadow:inset 0 2px 4px rgba(0,0,0,.2),var(--shadow-sm);position:relative;overflow:hidden}.thumbnails-grid:after,.thumbnails-grid:before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:6px;height:80%;background:repeating-linear-gradient(0deg,var(--color-darkroom-black) 0,var(--color-darkroom-black) 4px,transparent 4px,transparent 8px)}.thumbnails-grid:before{left:4px}.thumbnails-grid:after{right:4px}.thumbnail-item{position:relative;width:68px;height:68px;border-radius:0;overflow:hidden;cursor:pointer;border:3px solid hsla(0,0%,100%,.15);box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.16,1,.3,1);transform-origin:center;background:var(--color-darkroom-black)}.thumbnail-item:hover{transform:scale(1.08) translateY(-2px);z-index:10}.thumbnail-item img{width:100%;height:100%;object-fit:cover}.thumbnail-item.selected{border-color:var(--color-amber-safe);box-shadow:0 0 0 2px var(--color-amber-safe),var(--shadow-lg);transform:scale(1.12) translateY(-4px);z-index:20}.thumbnail-item.selected:after{content:"";position:absolute;inset:0;border:2px solid var(--color-amber-safe);pointer-events:none;animation:pulseFrame 2s ease-in-out infinite}@keyframes pulseFrame{0%,to{opacity:.6}50%{opacity:1}}.thumbnail-item.error img,.thumbnail-item.loading img{opacity:.5}.thumbnail-error,.thumbnail-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.7)}.thumbnail-error{color:#ef4444;font-weight:700;font-size:18px}.spinner-small{border:2px solid #e5e7eb;border-top-color:#2563eb;animation:spin .8s linear infinite}.spinner-small,.thumbnail-remove{width:20px;height:20px;border-radius:50%}.thumbnail-remove{position:absolute;top:2px;right:2px;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease;display:flex;align-items:center;justify-content:center}.thumbnail-item:hover .thumbnail-remove{opacity:1}.thumbnail-remove:hover{background:rgba(239,68,68,.9)}.thumbnail-add{width:64px;height:64px;border:2px dashed #d1d5db;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;color:#9ca3af;font-size:24px}.thumbnail-add:hover{border-color:#9ca3af;color:#6b7280;background:#f3f4f6}.thumbnail-add input{display:none}.thumbnail-number{position:absolute;bottom:2px;left:2px;width:18px;height:18px;border-radius:4px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;z-index:1}.thumbnail-item.dragging{opacity:.5;transform:scale(.95);border-color:#2563eb}.thumbnail-item[draggable=true]{cursor:-webkit-grab;cursor:grab}.thumbnail-item[draggable=true]:active{cursor:-webkit-grabbing;cursor:grabbing}.preview-wrapper.pannable{cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.preview-wrapper.pannable:active,.preview-wrapper.panning{cursor:-webkit-grabbing;cursor:grabbing}.photo-placement-controls{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;padding:16px;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.photo-placement-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}.pan-controls-wrapper{width:100%;display:flex;justify-content:center}.pan-controls{gap:12px;padding:12px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.pan-buttons,.pan-controls{display:flex;flex-direction:column;align-items:center}.pan-buttons{gap:4px}.pan-buttons-horizontal{display:flex;gap:4px;align-items:center}.pan-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:#f9fafb;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .15s ease;color:#374151;flex-shrink:0}.pan-btn:hover{background:#f3f4f6;border-color:#d1d5db;transform:scale(1.05)}.pan-btn:active{transform:scale(.95);background:#e5e7eb}.pan-btn-center{background:#eff6ff;border-color:#bfdbfe;color:#2563eb}.pan-btn-center:hover{background:#dbeafe;border-color:#93c5fd}.pan-hint-wrapper{text-align:center}.pan-hint{font-size:12px;color:#6b7280;font-weight:500}@media (max-width:767px){.photo-placement-controls{margin-top:12px;padding:12px;border-radius:10px;gap:6px}.photo-placement-label{font-size:11px;margin-bottom:2px}.pan-controls{padding:10px;border-radius:10px;gap:10px}.pan-btn{width:40px;height:40px;border-radius:8px}.pan-hint{font-size:11px}}.sidebar-placeholder{background:#fff;background-image:radial-gradient(circle at 30% 20%,rgba(255,159,28,.04) 0,transparent 60%);border-radius:0;border:1px solid var(--color-sepia-tone);padding:48px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.sidebar-placeholder:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0,var(--color-amber-safe) 50%,transparent 100%);opacity:.4}.placeholder-icon{width:72px;height:72px;border-radius:0;background:var(--color-paper-warm);border:2px solid var(--color-sepia-tone);display:flex;align-items:center;justify-content:center;color:var(--color-silver-halide);position:relative;animation:iconFloat 3s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.placeholder-icon:after{content:"";position:absolute;inset:4px;border:1px dashed var(--color-sepia-tone);opacity:.4}.placeholder-text{margin:0;font-size:16px;font-weight:600;font-family:var(--font-body);color:var(--color-film-gray);letter-spacing:-.01em}.placeholder-hint{margin:0;font-size:12px;font-family:var(--font-mono);color:var(--color-silver-halide);letter-spacing:.02em;text-transform:uppercase}