: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{align-items:center;gap:16px}.preview-card,.preview-section{display:flex;flex-direction:column}.preview-card{width:100%;background:#f8f8f8;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:16px;gap:12px}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#6b7280;font-size:12px}.preview-toolbar-actions{display:flex;align-items:center;gap:8px}.toolbar-btn{height:32px;padding:0 12px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;cursor:pointer;font-weight:600;color:#374151;transition:all .15s ease}.toolbar-btn:hover:not(:disabled){border-color:var(--color-amber-safe);color:var(--color-darkroom-black);transform:translateY(-1px)}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.zoom-label{min-width:46px;text-align:center;font-weight:600;color:#374151}.preview-hint{font-family:var(--font-mono);font-size:11px;color:#9ca3af}.preview-wrapper{display:flex;justify-content:center;align-items:center;width:100%;min-height:320px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px}.preview-wrapper canvas{max-width:min(100%,840px);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;padding-top:20px;margin-top:20px;border-top:1px solid var(--color-sepia-tone)}.btn{gap:10px;padding:14px 28px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;text-transform:uppercase;border-radius:2px;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;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{margin-top:6px;padding:12px 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{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}.custom-text-input{width:100%;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)}.custom-text-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)}.custom-text-input:disabled{opacity:.5;cursor:not-allowed;background:#f5f5f5}.custom-text-input::placeholder{color:#9ca3af}.input-hint{margin:8px 0 0;font-size:11px;color:var(--color-silver-halide);font-family:var(--font-mono);letter-spacing:.02em}.custom-text-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--color-sepia-tone)}.toggle-slider{top:0;left:0;right:0;bottom:0;background-color:var(--color-sepia-tone);transition:all .3s ease}.toggle-slider:before{transition:all .3s ease;box-shadow:0 2px 4px rgba(0,0,0,.2)}.toggle-switch input:checked+.toggle-slider{background-color:var(--color-cyan-process)}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 0 3px rgba(78,205,196,.2)}.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{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);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)}.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:72px;height:72px;border-radius:2px;overflow:hidden;cursor:pointer;border:2px solid var(--color-sepia-tone);box-shadow:0 2px 8px rgba(26,22,20,.1),inset 0 0 0 1px hsla(0,0%,100%,.5);transition:all .3s cubic-bezier(.16,1,.3,1);transform-origin:center;background:#fff;flex-shrink:0}.thumbnail-item:hover{transform:scale(1.05) translateY(-2px);z-index:10;box-shadow:0 4px 12px rgba(26,22,20,.15),inset 0 0 0 1px hsla(0,0%,100%,.7);border-color:var(--color-amber-safe)}.thumbnail-item img{width:100%;height:100%;object-fit:cover}.thumbnail-item.selected{border-color:var(--color-cyan-process);border-width:3px;box-shadow:0 0 0 2px var(--color-cyan-process),0 6px 16px rgba(78,205,196,.25),inset 0 0 0 1px hsla(0,0%,100%,.8);transform:scale(1.08) translateY(-3px);z-index:20}.thumbnail-item.selected:after{content:"";position:absolute;inset:-3px;border:2px solid var(--color-cyan-process);border-radius:2px;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{width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#2563eb}.thumbnail-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;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:72px;height:72px;border:2px dashed var(--color-sepia-tone);border-radius:2px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);color:var(--color-silver-halide);font-size:28px;font-weight:300;background:hsla(0,0%,100%,.5);flex-shrink:0}.thumbnail-add:hover{border-color:var(--color-amber-safe);border-style:solid;color:var(--color-amber-safe);background:rgba(255,159,28,.08);transform:scale(1.05) translateY(-2px);box-shadow:0 4px 12px rgba(255,159,28,.15)}.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{flex-direction:column}.pan-buttons,.pan-buttons-horizontal{display:flex;align-items:center;gap:4px}.pan-btn{width:44px;height:44px;padding:0;background:#f9fafb;border:2px solid #e5e7eb;border-radius:10px;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}.split-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:20px;gap:20px;margin-bottom:32px}.left-panel{flex-direction:column;gap:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);min-height:500px;overflow:hidden}.left-panel,.thumbnails-strip{display:flex;padding:12px;position:relative}.thumbnails-strip{gap:10px;overflow-x:auto;margin:-12px -12px 16px;background:linear-gradient(135deg,rgba(26,22,20,.03),rgba(26,22,20,.01));border-bottom:2px solid var(--color-sepia-tone);scrollbar-width:thin;scrollbar-color:var(--color-amber-safe) rgba(0,0,0,.05)}.thumbnails-strip:before{content:"";position:absolute;bottom:-2px;left:0;width:60px;height:2px;background:var(--color-amber-safe);z-index:1}.thumbnails-strip::-webkit-scrollbar{height:8px}.thumbnails-strip::-webkit-scrollbar-track{background:rgba(0,0,0,.05);border-radius:4px}.thumbnails-strip::-webkit-scrollbar-thumb{background:var(--color-amber-safe);border-radius:4px;-webkit-transition:background .2s ease;transition:background .2s ease}.thumbnails-strip::-webkit-scrollbar-thumb:hover{background:var(--color-cyan-process)}.preview-navigation{gap:16px;margin:20px 0;padding:16px 0;border-top:1px solid var(--color-sepia-tone);border-bottom:1px solid var(--color-sepia-tone)}.nav-btn,.preview-navigation{display:flex;align-items:center;justify-content:center}.nav-btn{width:40px;height:40px;border:1px solid var(--color-sepia-tone);background:#fff;color:var(--color-darkroom-black);border-radius:0;cursor:pointer;transition:all .2s ease;font-size:18px}.nav-btn:hover:not(:disabled){background:var(--color-amber-safe);border-color:var(--color-amber-safe);color:#fff}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.nav-counter{font-size:14px;color:var(--color-film-gray);min-width:60px}.nav-counter,.pan-hint{font-family:var(--font-mono);text-align:center}.pan-hint{font-size:11px;color:var(--color-silver-halide);letter-spacing:.02em;margin:16px 0 0;text-transform:uppercase}.right-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;height:-moz-fit-content;height:fit-content;overflow:hidden}.controls-panel,.right-panel{display:flex;flex-direction:column;gap:0}.controls-panel{overflow-y:auto;flex:1 1}.collapsible-card{border-top:1px solid var(--color-sepia-tone);margin-top:0}.collapsible-card .card-header{padding:12px 16px;margin-bottom:0}.collapsible-card .card-header h3{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--color-silver-halide);text-transform:uppercase;letter-spacing:.1em;margin:0;padding:0}.collapsible-card .card-header h3:after{display:none}.collapsible-card .card-content{padding:0 16px 16px}@media (max-width:1024px){.split-layout{grid-template-columns:1fr}.left-panel{min-height:500px}.right-panel{position:-webkit-sticky;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}}@media (max-width:768px){.tabs{overflow-x:auto;scrollbar-width:thin}.tab{flex:none;min-width:80px;font-size:13px;padding:10px 12px}}.beta-shell{max-width:1400px;margin:0 auto;padding:32px 20px 80px;color:#0f172a}.beta-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.beta-hero__eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:#64748b;margin:0 0 4px}.beta-hero h1{margin:0;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em}.beta-hero__sub{margin:6px 0 0;color:#475569;max-width:720px}.beta-hero__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hero-format{min-width:160px}.beta-hero__actions>*,.hero-format{display:flex;align-items:center}.beta-hero__actions .btn{padding:9px 12px;border-radius:10px;font-size:13px}.beta-hero__actions .btn.ghost,.beta-hero__actions .btn.primary{min-width:auto}.hero-format .format-dropdown__trigger{min-height:46px;padding:10px 12px;border-radius:10px}.hero-select{min-height:44px}.hero-actions-row{display:flex;gap:8px;flex-wrap:wrap}.format-dropdown.is-compact .format-dropdown__trigger{min-height:40px;padding:8px 10px}.beta-grid{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(340px,.8fr);grid-gap:14px;gap:14px}.beta-column{display:flex;flex-direction:column;gap:12px}.beta-column.preview{min-height:70vh}.beta-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.beta-card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.beta-card__header h3{margin:0;font-size:18px}.beta-card__eyebrow{margin:0;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.16em}.beta-card__actions{display:flex;gap:8px}.collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;border-radius:8px;padding:0;font-size:14px;cursor:pointer;line-height:1}.collapse-toggle:hover{background:#f1f5f9;border-color:#cbd5e1}.beta-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#1e293b}.beta-field.inline{flex:1 1}.beta-field input[type=password],.beta-field input[type=text],.beta-field select,.beta-field textarea,.beta-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc;font-size:14px;font-family:inherit}.beta-field textarea{resize:vertical}.beta-field__meta{display:flex;align-items:center;justify-content:space-between}.beta-field__value{color:#475569;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.beta-inline{display:grid;grid-gap:12px;gap:12px}.beta-stack{display:flex;flex-direction:column;gap:12px}.beta-grid-2{display:grid;grid-gap:10px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.beta-row{display:flex;gap:10px;align-items:center}.export-row{display:grid;grid-template-columns:1fr;grid-row-gap:12px;row-gap:12px;align-items:end}.format-dropdown{position:relative;width:100%}.format-dropdown__trigger{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.format-dropdown__trigger:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.12);border-color:#cbd5e1}.format-dropdown__trigger:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}.format-dropdown__label{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.format-dropdown__value{display:inline-flex;align-items:baseline;gap:6px;font-size:15px;font-weight:600;color:#0f172a}.format-dropdown__meta{font-size:12px;color:#475569}.format-dropdown__chevron{font-size:14px;color:#94a3b8}.format-dropdown__menu{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.14);z-index:2}.format-dropdown__option{width:100%;text-align:left;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc;padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .12s ease,background .12s ease,color .12s ease}.format-dropdown__option:hover{border-color:#cbd5e1;background:#fff}.format-dropdown__option.is-active{border-color:#0f172a;background:linear-gradient(135deg,#0f172a,#111827);color:#f8fafc}.format-dropdown__option.is-active .format-dropdown__hint,.format-dropdown__option.is-active .format-dropdown__meta{color:#e2e8f0}.format-dropdown__option-head{display:inline-flex;align-items:baseline;gap:6px;font-weight:600}.format-dropdown__hint{font-size:12px;color:#475569}.background-dropdown,.theme-dropdown{position:relative;width:100%}.background-dropdown__trigger,.theme-dropdown__trigger{width:100%;min-height:52px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;grid-gap:12px;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;cursor:pointer;text-align:left;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.background-dropdown__trigger:hover,.theme-dropdown__trigger:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.12);border-color:#cbd5e1}.background-dropdown__trigger:focus-visible,.theme-dropdown__trigger:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}.theme-dropdown__preview{width:56px;height:44px;border-radius:12px;border:1px solid #e2e8f0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px}.theme-dropdown__text{font-weight:600;font-size:14px}.theme-dropdown__meta{font-size:11px}.background-dropdown__content,.theme-dropdown__content{display:flex;flex-direction:column;gap:4px}.background-dropdown__label,.theme-dropdown__label{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.background-dropdown__value,.theme-dropdown__value{font-weight:600;color:#0f172a}.background-dropdown__value:before{content:attr(data-prefix)}.background-dropdown__chevron,.theme-dropdown__chevron{font-size:14px;color:#94a3b8}.format-select{position:relative}.format-select select{width:100%;min-height:46px;padding:12px 14px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;font-size:14px;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.format-select:after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}.background-dropdown__menu,.theme-dropdown__menu{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.14);z-index:2}.background-dropdown__option,.theme-dropdown__option{width:100%;text-align:left;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .12s ease,background .12s ease,color .12s ease}.background-dropdown__option:hover,.theme-dropdown__option:hover{border-color:#cbd5e1;background:#fff}.background-dropdown__option.is-active,.theme-dropdown__option.is-active{border-color:#0f172a;background:linear-gradient(135deg,#0f172a,#111827);color:#f8fafc}.theme-dropdown__option.is-active .theme-dropdown__meta,.theme-dropdown__option.is-active .theme-dropdown__value{color:#e2e8f0}.theme-dropdown__option-preview{flex-direction:column;gap:2px;padding:6px}.background-dropdown__option-preview,.background-dropdown__preview,.theme-dropdown__option-preview{width:48px;height:40px;border-radius:10px;border:1px solid #e2e8f0;display:flex;justify-content:center}.background-dropdown__option-preview,.background-dropdown__preview{align-items:center}.background-dropdown__hint{font-size:12px;color:#475569}.background-dropdown__option-copy{display:flex;flex-direction:column;gap:2px}.background-dropdown__option .background-dropdown__hint,.background-dropdown__option .background-dropdown__value{color:inherit}.aspect-swatch{background:#e2e8f0;border-radius:6px;border:1px solid #d7deeb}.info-grid{gap:10px}.info-card,.info-grid{display:flex;flex-direction:column}.info-card{border:1px solid #e2e8f0;border-radius:12px;padding:8px 10px;background:#f8fafc;gap:4px}.info-card.is-disabled{opacity:.6}.info-card__row{display:flex;align-items:center;justify-content:space-between;gap:8px}.info-card__label span{font-weight:600;color:#0f172a;font-size:13px}.info-card__hint{margin:2px 0 0;font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info-card__input{display:flex;gap:6px}.frame-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:14px;gap:14px;align-items:stretch}.frame-row>*{min-width:0}.beta-brand-preview{display:flex;align-items:center;gap:8px}.beta-brand-preview img{width:48px;height:48px;object-fit:contain;border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:4px}.beta-dropzone{border:1px dashed #cbd5e1;border-radius:14px;padding:18px;text-align:center;background:#f8fafc;color:#475569}.beta-dropzone p{margin:0 0 8px}.beta-dropzone.preview-drop{background:#0f172a;color:#e2e8f0;border-color:#334155;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.06)}.beta-dropzone.preview-drop .btn.ghost{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.btn{border:1px solid #0f172a;background:#0f172a;color:#fff;border-radius:12px;padding:10px 14px;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.12)}.btn:disabled{opacity:.6;box-shadow:none;transform:none}.btn.ghost{background:#fff;color:#0f172a;border-color:#e2e8f0}.btn.primary{background:linear-gradient(135deg,#0f172a,#1f2937);color:#f8fafc}.btn.small{padding:8px 12px;font-size:13px}.btn.small.ghost{border-color:#e2e8f0}.beta-actions-row{display:flex;gap:8px;flex-wrap:wrap}.export-actions{margin-top:10px;gap:10px}.export-card{padding:18px}.export-card .beta-card__header{margin-bottom:12px;align-items:center}.export-card .beta-card__actions{gap:10px}.export-row .beta-field input[type=text],.export-row .beta-field select{min-height:52px}.export-actions .btn{flex:1 1;min-height:52px}.pill-toggle{display:flex;flex-wrap:wrap;gap:10px}.pill-toggle__item{border:1px solid #e2e8f0;background:linear-gradient(180deg,#fff,#f8fafc);color:#0f172a;border-radius:999px;padding:9px 16px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;font-weight:600;min-width:120px;justify-content:center;display:inline-flex;align-items:center}.pill-toggle__item.is-active{background:linear-gradient(135deg,#0f172a,#111827);color:#fff;border-color:#0f172a;box-shadow:0 10px 24px rgba(15,23,42,.16);transform:translateY(-1px)}.pill-toggle__item:hover:not(.is-active){border-color:#cbd5e1;box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-1px)}.beta-preview-card{background:#0b1020;color:#e2e8f0;border-radius:18px;padding:14px;border:1px solid #1f2937;box-shadow:0 20px 50px rgba(0,0,0,.25);min-height:440px}.beta-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.beta-preview{background:#0f172a;border-radius:12px;border:1px solid #1e293b;min-height:340px;display:grid;place-items:center;overflow:hidden}.beta-preview canvas{max-width:100%;max-height:70vh;height:auto;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.3)}.beta-preview__empty{color:#94a3b8}.beta-preview__state{color:#94a3b8;text-align:center;display:grid;grid-gap:8px;gap:8px;justify-items:center}.beta-strip{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.beta-thumb{position:relative;border:1px solid #e2e8f0;border-radius:10px;padding:4px;background:#fff;cursor:pointer;transition:border-color .12s ease,transform .12s ease}.beta-thumb img{width:82px;height:82px;object-fit:cover;border-radius:8px;display:block}.beta-thumb .beta-tag{position:absolute;bottom:4px;left:6px;background:#0f172a;color:#fff;padding:2px 6px;border-radius:6px;font-size:11px}.beta-thumb.is-active{border-color:#0f172a;transform:translateY(-2px)}.beta-history{display:grid;grid-gap:10px;gap:10px}.beta-history__item{border:1px solid #e2e8f0;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:space-between}.beta-history__actions{display:flex;gap:8px}.beta-toast{position:fixed;bottom:16px;right:16px;background:#0f172a;color:#f8fafc;padding:12px 14px;border-radius:10px;box-shadow:0 14px 32px rgba(0,0,0,.25)}.beta-hint{color:#64748b;font-size:13px}.beta-tag{background:#e2e8f0;border-radius:6px;padding:4px 6px;font-size:12px;display:inline-block}@media (max-width:1024px){.beta-grid{grid-template-columns:1fr}.beta-hero{flex-direction:column;align-items:flex-start}.beta-hero__actions{width:100%}}.studio{max-width:1600px;margin:0 auto;height:100vh;padding:0;background:var(--color-bg);display:flex;flex-direction:column;overflow:hidden}.studio__header{margin-bottom:12px}.studio__title{font-size:18px;letter-spacing:-.01em}.studio__subtitle{display:none}.studio__header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}.studio__title{margin:0;font-size:clamp(28px,4vw,40px);font-weight:700;color:var(--color-text);letter-spacing:-.02em}.studio__subtitle{margin:6px 0 0;font-size:14px;color:var(--color-text-muted)}.studio__empty{display:flex;justify-content:center;align-items:center;min-height:50vh;padding:32px}.studio__workspace{flex:1 1;display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;min-height:0;overflow:hidden}.studio__preview-section{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0}.studio__preview-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:4px}.studio__preview-label{font-size:14px;font-weight:600;color:var(--color-text)}.studio__preview-counter{font-size:12px;color:var(--color-text-muted);background:var(--color-bg-secondary);padding:4px 8px;border-radius:999px;margin-left:8px}.studio__preview-actions{display:flex;align-items:center;gap:12px}.studio__preview-content{flex:1 1;background:var(--color-bg-secondary);border-radius:var(--radius-sm);padding:4px;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.studio__preview-content canvas{max-width:100%;max-height:100%;object-fit:contain}.studio__thumbnails{flex-shrink:0;display:flex;gap:4px;overflow-x:auto;padding:4px;background:var(--color-bg-secondary);border-radius:var(--radius-sm)}.studio__thumbnail{position:relative;width:72px;height:72px;border:2px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.studio__thumbnail:hover{transform:scale(1.05);border-color:var(--color-accent)}.studio__thumbnail.is-selected{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent)}.studio__thumbnail img{width:100%;height:100%;object-fit:cover}.studio__thumbnail-status{position:absolute;bottom:4px;right:4px;background:var(--color-primary);color:#fff;font-size:10px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}.studio__controls-section{flex:1 1;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}.studio__controls-tabs{flex-shrink:0;margin-bottom:6px}.studio__controls-content{flex:1 1;gap:6px;overflow-y:auto}.studio__controls-tabs{display:flex;gap:4px;margin-bottom:8px}.studio__tab{flex:1 1;padding:12px 16px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.studio__tab.is-active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.studio__tab:hover:not(.is-active){background:var(--color-bg);border-color:var(--color-border-hover)}.studio__controls-content{display:flex;flex-direction:column;gap:12px}.studio__section{display:flex;flex-direction:column;gap:6px}.studio__section-title{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:700;padding-bottom:4px;margin:0 0 6px}.studio__footer{flex-shrink:0;padding:8px 12px;border-top:1px solid var(--color-border)}.studio__footer-actions{display:flex;gap:8px}.studio__footer-actions .btn{flex:1 1}.studio-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--color-primary);color:#fff;padding:12px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);z-index:1000;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;inset:0;background-color:var(--color-border);border-radius:24px}.toggle-slider,.toggle-slider:before{position:absolute;transition:var(--transition-base)}.toggle-slider:before{content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:var(--color-accent)}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}.caption-section{gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border)}.caption-field,.caption-section{display:flex;flex-direction:column}.caption-field{gap:6px}.caption-field span{font-size:13px;font-weight:600;color:var(--color-text)}.caption-field textarea{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:14px;font-family:inherit;resize:vertical;min-height:60px}.caption-field textarea:focus{outline:none;border-color:var(--color-accent)}.ai-key-section{margin-top:12px;padding:12px;background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border)}.ai-key-section label{display:flex;flex-direction:column;gap:6px}.ai-key-section span{font-size:12px;font-weight:600;color:var(--color-text)}.ai-key-section input{padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);font-size:13px}.ai-key-section input:focus{outline:none;border-color:var(--color-accent)}.spinner-small{width:12px;height:12px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@media (max-width:1024px){.studio{height:auto;min-height:100vh;overflow:auto}.studio__workspace{grid-template-columns:1fr;gap:12px}.studio__controls-section{order:-1}.studio__section-title{margin-bottom:6px}}@media (max-width:768px){.studio{padding:8px 12px;padding:12px}.studio__header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}.studio__title{font-size:24px}.studio__subtitle{font-size:12px}.studio__preview-section,.studio__workspace{gap:12px}.studio__preview-content{padding:12px;min-height:300px}.studio__controls-tabs{position:-webkit-sticky;position:sticky;top:0;background:var(--color-bg);z-index:100;padding:12px;margin:0 -12px 12px;border-bottom:1px solid var(--color-border)}.studio__controls-content{gap:16px}.studio__footer-actions{flex-direction:column}}@media (max-width:480px){.studio{padding:8px}.studio__thumbnail{width:56px;height:56px}.btn--large{width:100%}}:root{--color-primary:#0f172a;--color-primary-light:#1e293b;--color-accent:#f97316;--color-accent-hover:#ea580c;--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-bg:#fff;--color-bg-secondary:#f8fafc;--color-text:#0f172a;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-success:#10b981;--color-error:#ef4444;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px rgba(0,0,0,.07);--shadow-lg:0 10px 15px rgba(0,0,0,.1);--shadow-xl:0 20px 25px rgba(0,0,0,.15);--transition-fast:150ms ease;--transition-base:200ms ease;--transition-slow:300ms ease}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:600;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:hover:not(:disabled){background:var(--color-accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn--secondary{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover:not(:disabled){background:var(--color-border);transform:translateY(-1px)}.btn--large{padding:16px 28px;font-size:16px}.btn--small{padding:8px 16px;font-size:12px}.destination-picker{width:100%}.destination-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px}.destination-card{display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);align-items:center}.destination-card:hover:not(.is-selected){border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.destination-card.is-selected{border-color:var(--color-accent);background:rgba(249,115,22,.05);box-shadow:var(--shadow-md)}.destination-card__icon{color:var(--color-text-secondary)}.destination-card__icon svg{width:20px;height:20px}.destination-card__content{display:flex;flex-direction:column;gap:2px;align-items:center}.destination-card__label{font-size:12px;font-weight:600;color:var(--color-text)}.destination-card__ratio{font-size:10px;color:var(--color-text-muted);font-family:JetBrains Mono,monospace}.aspect-preview{background:var(--color-border);border-radius:3px;transition:all var(--transition-fast)}.style-templates{width:100%}.style-templates__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px}.style-template-card{display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.style-template-card:hover:not(.is-selected){border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.style-template-card.is-selected{border-color:var(--color-accent);box-shadow:var(--shadow-md)}.template-preview{width:100%;aspect-ratio:3/4;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg-secondary);display:flex;align-items:center;justify-content:center}.template-preview__frame{width:70%;height:80%;background:#fff;display:flex;flex-direction:column;padding:4px;gap:2px}.template-preview__image{flex:1 1;background:var(--color-border);border-radius:2px}.template-preview__text{font-size:9px;text-align:center;opacity:.6}.style-template-card__info{display:flex;flex-direction:column;gap:1px;text-align:left}.style-template-card__name{font-size:11px;font-weight:600;color:var(--color-text)}.style-template-card__desc{font-size:10px;color:var(--color-text-muted)}.metadata-toggles{display:flex;flex-direction:column;gap:12px;width:100%}.metadata-toggles__chips{display:flex;flex-wrap:wrap;gap:8px}.toggle-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:999px;cursor:pointer;transition:all var(--transition-fast);font-size:13px}.toggle-chip:hover:not(.is-disabled):not(.is-checked){border-color:var(--color-border-hover);background:var(--color-bg)}.toggle-chip.is-checked{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.toggle-chip.is-disabled{opacity:.5;cursor:not-allowed}.toggle-chip__check{display:flex;align-items:center;justify-content:center;width:16px;height:16px}.toggle-chip__check svg{width:12px;height:12px}.toggle-chip__content{display:flex;flex-direction:column;gap:1px;align-items:flex-start}.toggle-chip__label{font-weight:600;line-height:1.2}.toggle-chip__value{font-size:11px;opacity:.8;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metadata-toggles__location{margin-top:4px}.location-input{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:14px;transition:border-color var(--transition-fast)}.location-input:focus{outline:none;border-color:var(--color-accent)}.location-input::placeholder{color:var(--color-text-muted)}.uploader{border:2px dashed var(--color-border);border-radius:var(--radius-xl);padding:40px 20px;text-align:center;background:var(--color-bg-secondary);transition:all var(--transition-base)}.uploader.is-dragging{border-color:var(--color-accent);background:rgba(249,115,22,.05)}.uploader__content{display:flex;flex-direction:column;align-items:center;gap:16px}.uploader__icon{color:var(--color-text-muted)}.uploader__icon svg{width:64px;height:64px}.uploader__title{margin:0;font-size:18px;font-weight:600;color:var(--color-text)}.uploader__hint{margin:0;font-size:14px;color:var(--color-text-muted)}.uploader__button{padding:12px 24px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.uploader__button:hover{background:var(--color-accent);transform:translateY(-1px)}.uploader__meta{margin:0;font-size:12px;color:var(--color-text-muted)}.uploader-compact{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.uploader-compact:hover{background:var(--color-accent);transform:scale(1.05)}.uploader-compact svg{width:24px;height:24px}.preview-canvas{flex-direction:column;gap:16px}.preview-canvas,.preview-canvas__wrapper{display:flex;width:100%;align-items:center}.preview-canvas__wrapper{position:relative;justify-content:center;background:var(--color-bg-secondary);border-radius:var(--radius-lg);overflow:hidden;touch-action:none}.preview-canvas__wrapper.is-panning{cursor:-webkit-grabbing;cursor:grabbing}.preview-canvas__wrapper:not(.is-panning){cursor:-webkit-grab;cursor:grab}.preview-canvas__display{max-width:100%;max-height:60vh;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);transition:transform .3s ease}.preview-canvas__controls{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}.pan-controls{flex-direction:column;align-items:center}.pan-controls,.pan-controls__row{display:flex;gap:4px}.pan-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text)}.pan-btn:hover:not(:disabled){background:var(--color-bg-secondary);border-color:var(--color-border-hover);transform:scale(1.05)}.pan-btn:disabled{opacity:.4;cursor:not-allowed}.pan-btn--center{background:var(--color-bg-secondary);border-color:var(--color-accent);color:var(--color-accent)}.pan-btn svg{width:16px;height:16px}.zoom-controls{gap:8px;padding:8px 16px;background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border)}.zoom-btn,.zoom-controls{display:flex;align-items:center}.zoom-btn{width:32px;height:32px;justify-content:center;background:var(--color-bg);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text)}.zoom-btn:hover:not(:disabled){background:var(--color-border);transform:scale(1.05)}.zoom-btn:disabled{opacity:.4;cursor:not-allowed}.zoom-btn svg{width:16px;height:16px}.zoom-value{min-width:48px;text-align:center;font-size:14px;font-weight:600;color:var(--color-text);font-family:JetBrains Mono,monospace}.preview-canvas__hint{font-size:12px;color:var(--color-text-muted);text-align:center}.preview-canvas--empty,.preview-canvas--error,.preview-canvas--loading{display:flex;align-items:center;justify-content:center;min-height:300px;padding:40px}.preview-canvas__error,.preview-canvas__loader{display:flex;flex-direction:column;gap:16px;align-items:center}.preview-canvas__loader svg{width:48px;height:48px}.preview-canvas__error svg{width:40px;height:40px;color:var(--color-error)}.spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.device-preview{width:280px;height:580px;margin:0 auto}.device-frame{position:relative;width:100%;height:100%;background:#1a1a1a;border-radius:40px;padding:12px;box-shadow:0 20px 40px rgba(0,0,0,.3)}.device-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:32px;background:#1a1a1a;border-radius:20px;z-index:10}.device-screen{width:100%;height:100%;background:#fff;border-radius:32px;overflow:hidden;display:flex;flex-direction:column}.device-app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid var(--color-border)}.device-app-header__action svg,.device-app-header__back svg{width:20px;height:20px;color:var(--color-text)}.device-app-header__title{font-size:15px;font-weight:600;color:var(--color-text)}.device-content{flex:1 1;display:flex;align-items:center;justify-content:center;background:#fafafa;padding:16px}.device-content__image{max-width:100%;max-height:100%;object-fit:contain}.device-app-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-top:1px solid var(--color-border)}.device-app-footer__icons{display:flex;gap:16px}.device-app-footer svg,.device-app-footer__icons svg{width:24px;height:24px;color:var(--color-text)}.device-home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:5px;background:#fff;border-radius:3px}.advanced-options{width:100%}.advanced-options__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.advanced-options__header:hover{background:var(--color-bg)}.advanced-options__header span{font-size:14px;font-weight:600;color:var(--color-text)}.chevron{width:16px;height:16px;transition:transform var(--transition-fast)}.chevron.is-collapsed{transform:rotate(-90deg)}.advanced-options__content{margin-top:12px;display:flex;flex-direction:column;gap:20px;animation:slideDown var(--transition-base)}.advanced-options.is-collapsed .advanced-options__content{display:none}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.adv-section{display:flex;flex-direction:column;gap:12px}.adv-section__title{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--color-border)}.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-gap:12px;gap:12px}.adv-field{display:flex;flex-direction:column;gap:6px}.adv-field span{font-size:13px;font-weight:600;color:var(--color-text)}.adv-field input[type=text],.adv-field select{padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:14px;transition:border-color var(--transition-fast)}.adv-field input[type=text]:focus,.adv-field select:focus{outline:none;border-color:var(--color-accent)}.adv-field input[type=color]{width:100%;height:40px;padding:2px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer}.adv-field__meta{display:flex;align-items:center;justify-content:space-between}.adv-field__value{font-size:12px;color:var(--color-text-muted);font-family:JetBrains Mono,monospace}.export-panel{display:flex;flex-direction:column;gap:16px;padding:20px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.export-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.export-panel__title{margin:0;font-size:18px;font-weight:700;color:var(--color-text)}.export-panel__count{font-size:13px;color:var(--color-text-muted)}.export-panel__options{display:flex;flex-direction:column;gap:16px}.export-field{display:flex;flex-direction:column;gap:8px}.export-field label{font-size:13px;font-weight:600;color:var(--color-text)}.export-field select{padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:14px;cursor:pointer}.export-field__hint{font-size:12px;color:var(--color-text-muted)}.export-slider{width:100%;height:8px;border-radius:4px;cursor:pointer}.export-panel__actions{display:flex;flex-direction:column;gap:8px}@media (max-width:768px){.destination-grid,.style-templates__grid{grid-template-columns:repeat(2,1fr)}.adv-grid{grid-template-columns:1fr}.preview-canvas__controls{flex-direction:column;gap:12px}.export-panel__actions{flex-direction:column}.device-preview{width:240px;height:480px}.device-frame{border-radius:32px;padding:8px}.device-notch{width:100px;height:28px}.device-screen{border-radius:24px}}@media (max-width:480px){.destination-grid,.style-templates__grid{grid-template-columns:1fr}.metadata-toggles__chips{flex-direction:column}.toggle-chip{width:100%;justify-content:flex-start}.btn--large{width:100%}}