.collage-studio{scroll-margin-top:90px;--paper:var(--collage-surface,var(--card));--ink:var(--foreground);--muted:var(--collage-muted,var(--muted-foreground));--line:var(--collage-line,var(--border));--control:color-mix(in srgb,var(--foreground) 5%,var(--background));--control-hover:color-mix(in srgb,var(--foreground) 10%,var(--background));--studio-accent:var(--collage-highlight,#fbbf24);--studio-on-accent:var(--collage-on-highlight,#171715);--studio-shadow:#00000030;--studio-preview:color-mix(in srgb,var(--background) 90%,black);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 18px 60px var(--studio-shadow);color-scheme:dark}.collage-studio button,.collage-studio input{font:inherit}.collage-studio button{cursor:pointer}.collage-studio button:disabled{cursor:not-allowed;opacity:.45}.collage-studio :focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}.collage-toolbar{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.12em;font-weight:650}.collage-toolbar>span:last-child{letter-spacing:0;color:var(--muted);font-weight:400}.collage-dot{width:5px;height:5px;border-radius:50%;background:var(--studio-accent);margin:0 5px}.collage-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 260px;min-width:0;border:0;padding:0;margin:0}.collage-controls{padding:20px;min-width:0}.collage-controls h2{font-size:13px;font-weight:650;margin:0 0 12px}.collage-controls:first-child{border-right:1px solid var(--line)}.collage-settings{border-left:1px solid var(--line)}.collage-preview-panel{padding:28px 24px 22px;display:flex;flex-direction:column;align-items:center;background:var(--studio-preview);min-height:560px;justify-content:center}.collage-canvas-wrap{position:relative;max-width:100%;width:min(100%,340px);box-shadow:0 12px 32px var(--studio-shadow)}.collage-canvas-wrap:has(canvas[width="1280"]){width:100%}.collage-canvas-wrap canvas{display:block;width:100%;height:100%}.collage-canvas-wrap>p{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}.collage-player{display:flex;gap:12px;align-items:center;width:100%;margin-top:22px}.collage-player button{background:var(--studio-accent);color:var(--studio-on-accent);border-radius:50%;padding:9px;flex-shrink:0}.collage-player input{min-width:30px;flex:1;accent-color:var(--studio-accent)}.collage-player output{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}.collage-help{font-size:11px;line-height:1.7;color:var(--muted);margin:7px 0}.collage-upload{width:100%;background:var(--control)!important;border-color:var(--line)!important;color:var(--ink)!important;border-style:dashed!important;border-radius:8px!important}.collage-photo-list{display:flex;flex-direction:column;gap:5px;max-height:180px;overflow-y:auto;margin-top:14px}.collage-photo-row{display:flex;align-items:center;justify-content:space-between;border:1px solid transparent;border-radius:5px;background:var(--control);padding:3px}.collage-photo-row.is-selected{border-color:var(--studio-accent);background:color-mix(in srgb,var(--studio-accent) 7%,var(--paper))}.collage-photo-row button{padding:5px;border-radius:4px}.collage-photo-select{display:flex;gap:9px;align-items:center;flex:1;text-align:left;font-size:11px!important}.collage-photo-select img{width:30px;height:34px;object-fit:cover;border-radius:2px}.collage-photo-row button:hover{background:var(--control-hover)}.collage-text-button{display:flex;align-items:center;gap:6px;font-size:11px!important;margin-top:12px;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}.collage-label{display:block;font-size:11px;font-weight:600;margin:14px 0 7px}.collage-input{color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:10px;min-width:0}.collage-input,.collage-theme{width:100%;background:var(--control);font-size:12px!important}.collage-theme{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:7px 9px;min-height:44px;border-radius:8px;margin-bottom:7px;text-align:left}.collage-theme.is-selected{border-color:var(--studio-accent);background:color-mix(in srgb,var(--studio-accent) 7%,var(--paper))}.collage-theme svg{margin-left:auto}.collage-swatch{width:24px;height:28px;background:linear-gradient(135deg,#a7beb7 40%,#ddc296 41%,#a2ad8b);border:3px solid #fffc;box-shadow:1px 2px 4px #0002;transform:rotate(-7deg)}.collage-swatch.birthday{background:linear-gradient(135deg,#dca6b4,#f2cfa8)}.collage-swatch.anniversary{background:linear-gradient(135deg,#b7b4a4,#ac838b)}.collage-music{display:flex;gap:8px;align-items:center;font-size:11px;margin-top:16px}.collage-music input{accent-color:var(--studio-accent)}.collage-export-box{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}.collage-export{width:100%;display:flex;gap:6px;background:var(--studio-accent)!important;color:var(--studio-on-accent)!important;font-size:11px!important;border-radius:7px!important;margin:10px 0;min-height:42px}.collage-export span{margin-left:auto;font-size:9px;opacity:.75}.collage-notice{padding:16px 24px;background:var(--control);border-top:1px solid var(--line);font-size:13px}.collage-crop{width:100%;aspect-ratio:1;touch-action:none;cursor:grab;border:8px solid var(--border)}.collage-select[data-slot=select-trigger]{width:100%;height:40px;min-width:0;border-color:var(--line);background:var(--control);color:var(--ink);font-size:12px}.collage-select-content[data-slot=select-content]{border-color:var(--border);background:var(--background);color:var(--foreground);color-scheme:dark}.collage-select-content [data-slot=select-item][data-highlighted]{background:var(--card);color:var(--foreground)}.collage-select-content [data-slot=select-item][data-state=checked]{color:var(--collage-highlight,#fbbf24)}.collage-output-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin-top:12px}.collage-output-options .collage-label{margin:4px 0 0}#collage-ratio-label{grid-area:1/1}#collage-ratio{grid-area:2/1}#collage-duration-label{grid-area:1/2}#collage-duration{grid-area:2/2}#collage-quality-label{grid-area:3/1/4/3}#collage-quality{grid-area:4/1/5/3}@media (min-width:1100px){.collage-canvas-wrap{max-height:480px;width:auto;height:480px}.collage-canvas-wrap:has(canvas[width="720"][height="720"]){height:auto;width:min(100%,480px)}.collage-canvas-wrap:has(canvas[width="1280"]){height:auto;width:100%}}@media (max-width:1000px){.collage-grid{grid-template-columns:210px minmax(0,1fr)}.collage-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;border-top:1px solid var(--line);border-left:0}.collage-settings .collage-label{margin-top:6px}.collage-preview-panel{min-height:520px}}@media (max-width:640px){.collage-toolbar{padding:14px;flex-wrap:wrap}.collage-grid{display:flex;flex-direction:column}.collage-preview-panel{order:-1;min-height:0;padding:20px 18px}.collage-canvas-wrap{width:auto;height:390px;max-width:100%}.collage-canvas-wrap:has(canvas[width="1280"]),.collage-canvas-wrap:has(canvas[width="720"][height="720"]){width:100%;height:auto}.collage-controls{padding:20px;border-top:1px solid var(--line)}.collage-controls:first-child{border-right:0}.collage-photo-list{max-height:190px}.collage-settings{display:block}.collage-player{margin-top:15px}.collage-input{font-size:16px!important}.collage-studio{border-radius:12px}}