.photo-inspiration { border:1px solid var(--border); border-radius:12px; margin:0 0 20px; background:var(--white); }
.photo-inspiration summary { display:flex; align-items:center; gap:10px; padding:14px; cursor:pointer; font-weight:600; list-style:none; }
.photo-inspiration summary::-webkit-details-marker { display:none; }
.photo-inspiration summary span { flex:1; }
.photo-inspiration summary > .icon:last-child { width:18px; transition:transform .18s ease; }
.photo-inspiration[open] summary > .icon:last-child { transform:rotate(90deg); }
.photo-inspiration-body { padding:0 14px 14px; }
.photo-inspiration-body > .option-help { margin:0 0 14px; }
.photo-inspiration-body figure { margin:0 0 14px; }
.photo-inspiration-body img { display:block; width:100%; max-height:240px; object-fit:contain; background:var(--surface); border-radius:8px; }
.photo-inspiration-body figcaption { margin-top:6px; color:var(--muted); font-size:.8125rem; overflow-wrap:anywhere; }
.photo-inspiration-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.photo-inspiration-actions .button { min-width:0; padding:10px 12px; font-size:.875rem; }
.photo-inspiration-body > .inspiration-hint { margin:14px 0 0; font-size:.8125rem; }
@media (prefers-reduced-motion:reduce) { .photo-inspiration summary > .icon:last-child { transition:none; } }
@font-face {
  font-family:Figtree;
  src:url('fonts/Figtree-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Figtree;
  src:url('fonts/Figtree-600.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}
@font-face {
  font-family:Figtree;
  src:url('fonts/Figtree-700.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}
:root {
  --coral:#FF643E;
  --yellow:#FFDE32;
  --ink:#292524;
  --surface:#F3F3F1;
  --white:#fff;
  --muted:#655F5B;
  --border:#DAD7D3;
  --selected:#FFF0EB;
  --text-caption:.875rem;
  --text-body:1rem;
  --text-subheading:1.125rem;
  --text-heading:1.5rem;
  --radius-control:10px;
  --radius-panel:16px;
  --z-header:10;
  --z-modal:20;
  --z-toast:30;
  --ease:cubic-bezier(.22,1,.36,1)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  background:var(--white);
  font:400 var(--text-body)/1.5 Figtree,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
button,input,select {
  font:inherit;
  color:inherit
}
button,a,input,select {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.65
}
a {
  color:inherit
}
button {
  border:0;
  background:none
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.025em;
  text-wrap:balance
}
h1 {
  font-size:var(--text-heading)
}
h2 {
  font-size:var(--text-subheading)
}
h3 {
  font-size:var(--text-body)
}
p {
  text-wrap:pretty;
  max-width:70ch
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.icon {
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  transform:translateY(-160%);
  background:var(--ink);
  color:#fff;
  padding:12px;
  z-index:var(--z-toast)
}
.skip-link:focus {
  transform:none
}
.app-header {
  position:sticky;
  top:0;
  z-index:var(--z-header);
  display:flex;
  align-items:center;
  gap:40px;
  height:80px;
  padding:0 32px;
  border-bottom:1px solid var(--border);
  background:#fff
}
.brand {
  display:flex;
  gap:8px;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
  min-height:44px
}
.brand img {
  display:block
}
.app-nav {
  display:flex;
  align-self:stretch;
  gap:24px
}
.nav-link {
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 4px;
  font-size:var(--text-caption);
  color:var(--muted);
  position:relative;
  font-weight:600
}
.nav-link[aria-current=page] {
  color:var(--ink)
}
.nav-link[aria-current=page]:after {
  content:'';
  position:absolute;
  bottom:0;
  height:3px;
  background:var(--coral);
  left:4px;
  right:4px
}
.nav-link:hover {
  color:var(--ink)
}
.demo-badge {
  margin-left:auto;
  background:var(--yellow);
  border-radius:8px;
  padding:8px 12px;
  font-size:var(--text-caption);
  font-weight:600;
  min-height:44px;
  white-space:nowrap
}
.studio-shell,.library-shell {
  max-width:1600px;
  margin:auto;
  padding:28px 32px 48px
}
.workspace-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px
}
.workspace-heading p {
  color:var(--muted);
  font-size:var(--text-caption);
  margin-top:4px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:8px 16px;
  font-size:var(--text-caption);
  font-weight:600;
  border-radius:var(--radius-control);
  transition:background 150ms,transform 150ms;
  color:var(--ink);
  text-decoration:none
}
.button:active {
  transform:translateY(1px)
}
.button.primary {
  background:var(--coral);
  border:1px solid transparent
}
.button.primary:hover {
  background:#F95D38
}
.button.secondary {
  background:#fff;
  border:1px solid var(--border)
}
.button.secondary:hover {
  background:var(--surface);
  border-color:var(--ink)
}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:8px 0;
  font-weight:600;
  font-size:var(--text-caption)
}
.text-button:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.icon-button {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border-radius:8px
}
.icon-button:hover {
  background:var(--surface)
}
.studio-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:32px;
  align-items:start
}
.visual-column {
  min-width:0;
  position:sticky;
  top:104px
}
.preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  margin-bottom:12px
}
.photo-name {
  font-size:var(--text-caption);
  font-weight:600
}
.view-switch {
  display:flex;
  padding:4px;
  background:var(--surface);
  border-radius:10px
}
.view-switch button {
  min-height:44px;
  padding:4px 12px;
  font-size:var(--text-caption);
  border-radius:6px;
  white-space:nowrap
}
.view-switch button[aria-pressed=true] {
  background:#fff;
  font-weight:600
}
.photo-stage {
  width:100%;
  max-height:calc(100dvh - 288px);
  position:relative;
  isolation:isolate;
  aspect-ratio:4/3;
  border-radius:var(--radius-panel);
  overflow:hidden;
  background:var(--surface);
  --split:50%
}
.room-photo {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}
.photo-stage.is-demo .room-photo {
  object-fit:cover
}
.comparison-layer,.original-label-layer {
  position:absolute;
  inset:0;
  pointer-events:none
}
.comparison-layer {
  /* A result with another format must not reveal the original through its margins. */
  background:var(--surface);
  clip-path:inset(0 0 0 var(--split))
}
.original-label-layer {
  clip-path:inset(0 calc(100% - var(--split)) 0 0)
}
.photo-stage:not(.has-result) .original-label-layer {
  clip-path:none
}
.photo-label {
  position:absolute;
  bottom:20px;
  padding:8px 12px;
  border-radius:8px;
  background:#fff;
  font-size:var(--text-caption);
  font-weight:600;
  white-space:nowrap
}
.label-before {
  left:20px
}
.label-after {
  right:20px
}
.compare-control {
  position:absolute;
  inset:0
}
.split-line {
  position:absolute;
  left:var(--split);
  top:0;
  bottom:0;
  width:2px;
  background:#fff;
  transform:translateX(-50%)
}
.split-handle {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  display:grid;
  place-items:center;
  box-shadow:0 2px 8px #0003
}
.compare-control input {
  width:100%;
  height:100%;
  margin:0;
  position:absolute;
  inset:0;
  opacity:0;
  cursor:ew-resize
}
.photo-stage:has(input:focus-visible) {
  outline:3px solid var(--ink);
  outline-offset:4px
}
.drop-overlay {
  display:none;
  position:absolute;
  inset:12px;
  background:#FFF0EBF5;
  border:2px dashed var(--coral);
  border-radius:12px;
  place-content:center;
  justify-items:center;
  gap:16px;
  font-weight:600
}
.photo-stage.dragging .drop-overlay {
  display:grid
}
.drop-overlay .icon {
  width:32px;
  height:32px
}
.photo-note {
  font-size:var(--text-caption);
  color:var(--muted);
  margin-top:12px
}
.selection-summary {
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--border)
}
.summary-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:16px
}
.status-tag {
  border-radius:6px;
  background:var(--surface);
  padding:4px 8px;
  font-size:var(--text-caption);
  white-space:nowrap
}
.summary-items {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.summary-chip {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border-radius:8px;
  padding:4px 12px 4px 4px;
  font-size:var(--text-caption);
  min-height:40px
}
.summary-chip .catalog-image {
  width:32px;
  height:32px;
  border-radius:4px;
  flex:none;
  aspect-ratio:auto
}
.summary-chip .icon {
  margin:0 4px
}
.preserve-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--muted);
  font-size:var(--text-caption);
  margin-top:16px
}
.preserve-note .icon {
  width:16px;
  height:20px
}
.settings-panel {
  border:1px solid var(--border);
  border-radius:var(--radius-panel);
  overflow:hidden;
  background:#fff
}
.settings-body {
  padding:20px
}
.settings-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px
}
.settings-intro {
  color:var(--muted);
  font-size:var(--text-caption);
  margin-bottom:16px
}
.room-field {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
  gap:12px
}
.room-field label {
  font-size:var(--text-caption);
  font-weight:600
}
.room-field select {
  min-width:148px;
  max-width:70%;
  padding:8px 12px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  font-size:var(--text-caption);
  min-height:44px
}
.choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.choice {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:4px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:12px;
  position:relative;
  overflow:hidden;
  transition:border-color 150ms,background 150ms
}
.choice:hover {
  border-color:var(--ink)
}
.choice[aria-pressed=true] {
  border:2px solid var(--ink);
  padding:3px;
  background:var(--selected)
}
.choice-check {
  position:absolute;
  top:12px;
  right:12px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:none;
  place-items:center
}
.choice-check .icon {
  width:16px;
  height:16px
}
.choice[aria-pressed=true] .choice-check {
  display:grid
}
.choice .choice-label {
  display:block;
  padding:8px 8px 4px;
  font-weight:600;
  font-size:var(--text-caption)
}
.choice .choice-description {
  display:block;
  padding:0 8px 8px;
  color:var(--muted);
  font-size:var(--text-caption);
  line-height:1.35
}
.catalog-image {
  display:block;
  width:100%;
  aspect-ratio:1/1;
  background-color:var(--surface);
  background-size:200% 200%;
  background-repeat:no-repeat;
  border-radius:8px
}
.ambience-image {
  aspect-ratio:1.7/1
}
.catalog-ambiences {
  background-image:url('catalog/ambiences.webp')
}
.catalog-sofas {
  background-image:url('catalog/sofas.webp')
}
.catalog-floors {
  background-image:url('catalog/floors.webp')
}
.catalog-chairs {
  background-image:url('catalog/chairs.webp')
}
.quad-0 {
  background-position:0 0
}
.quad-1 {
  background-position:100% 0
}
.quad-2 {
  background-position:0 100%
}
.quad-3 {
  background-position:100% 100%
}
.personalize-entry {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:16px 0 0;
  text-align:left;
  border-top:1px solid var(--border);
  margin-top:24px
}
.personalize-entry>span {
  flex:1
}
.personalize-entry strong {
  display:block;
  font-size:var(--text-body);
  font-weight:600
}
.personalize-entry small {
  display:block;
  color:var(--muted);
  font-size:var(--text-caption);
  margin-top:4px
}
.personalize-entry:hover strong {
  text-decoration:underline;
  text-underline-offset:4px
}
.generate-footer {
  padding:16px 24px 20px;
  border-top:1px solid var(--border);
  background:#fff
}
.generate-footer>.button {
  width:100%;
  min-height:48px
}
.generate-footer>.button .icon:last-child {
  margin-left:auto
}
.generate-footer>.button .icon:first-child {
  margin-right:auto
}
.credit-note,.save-status {
  font-size:var(--text-caption);
  text-align:center;
  color:var(--muted)
}
.save-status {
  margin-bottom:12px
}
.credit-note {
  margin-top:8px
}
.panel-back {
  margin:-8px 0 12px;
  gap:4px
}
.category-list {
  display:flex;
  flex-direction:column;
  margin-top:16px
}
.category-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--border);
  text-align:left;
  min-height:72px
}
.category-link:last-child {
  border-bottom:0
}
.category-link .category-content {
  flex:1;
  min-width:0
}
.category-link strong {
  display:block;
  font-weight:600
}
.category-link small {
  display:block;
  color:var(--muted);
  font-size:var(--text-caption);
  margin-top:4px
}
.category-link .catalog-image {
  width:48px;
  height:48px;
  flex:none
}
.category-link>.icon:first-child {
  margin:0 14px
}
.category-link:hover strong {
  text-decoration:underline;
  text-underline-offset:4px
}
.category-group-title {
  font-size:var(--text-caption);
  color:var(--muted);
  font-weight:400;
  margin-top:24px
}
.reset-choice {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:20px 0
}
.plain-option {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  text-align:left;
  font-size:var(--text-caption);
  min-height:44px
}
.radio-dot {
  display:block;
  width:16px;
  height:16px;
  border:1px solid var(--muted);
  border-radius:50%;
  flex:none
}
.plain-option[aria-pressed=true] {
  border-color:var(--ink);
  font-weight:600
}
.plain-option[aria-pressed=true] .radio-dot {
  border:5px solid var(--ink)
}
.option-help {
  font-size:var(--text-caption);
  color:var(--muted);
  margin-top:20px
}
.segmented {
  display:flex;
  gap:4px;
  background:var(--surface);
  padding:4px;
  border-radius:10px;
  margin:12px 0 24px
}
.segmented button {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  font-size:var(--text-caption);
  border-radius:6px
}
.segmented button[aria-pressed=true] {
  background:#fff;
  font-weight:600
}
.switch-field {
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  margin-top:16px;
  font-size:var(--text-caption);
  min-height:44px
}
.switch-field input {
  accent-color:var(--ink);
  width:20px;
  height:20px;
  margin:4px 0 0;
  flex:none
}
.catalog-seasons {
  background-image:url('catalog/seasons.webp')
}
.season-choices {
  margin-top:12px
}
.season-choices .choice-label {
  padding-bottom:8px
}
.season-original {
  margin-top:12px;
  width:100%
}
.inline-message {
  padding:12px 16px;
  background:var(--surface);
  font-size:var(--text-caption);
  border-radius:8px;
  margin-top:12px
}
.inline-message.error {
  background:#FFF0EB;
  color:#992B13;
  margin:0 0 20px
}
.result-notice {
  padding:16px;
  background:#FFF8D0;
  border-radius:10px;
  font-size:var(--text-caption);
  margin-top:16px
}
.result-notice p {
  margin-top:4px
}
.result-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px
}
.library-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px
}
.library-item {
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  text-align:left;
  padding:0
}
.library-item:hover {
  border-color:var(--ink)
}
.library-item>img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block
}
.library-item-text {
  display:block;
  padding:16px
}
.library-item-text strong {
  display:block;
  font-size:var(--text-subheading)
}
.library-item-text small {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:var(--text-caption)
}
.library-hint {
  margin-top:24px;
  color:var(--muted);
  font-size:var(--text-caption)
}
dialog {
  padding:24px;
  border:0;
  border-radius:16px;
  width:min(520px,calc(100% - 32px));
  color:var(--ink);
  max-height:calc(100dvh - 48px)
}
dialog::backdrop {
  background:#29252470
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px
}
.dialog-heading h2 {
  font-size:var(--text-heading)
}
dialog p {
  color:var(--muted);
  margin-bottom:16px
}
.dialog-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px
}
.export-preview {
  width:100%;
  border-radius:8px;
  display:block;
  margin:12px 0
}
.export-choice-list {
  display:flex;
  flex-direction:column;
  gap:8px
}
.export-choice-list .plain-option strong {
  flex:1
}
.photo-delete-button { position:absolute; top:16px; right:16px; z-index:6; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid var(--line,#DEDAD6); border-radius:12px; background:#fff; color:#292524; font:inherit; font-weight:600; cursor:pointer; }
.photo-delete-button:hover { background:#FFF0EB; }
.photo-deletion-notice { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:20px 32px 0; padding:12px 16px; border-radius:12px; background:#FFF8CF; }
.photo-deletion-notice .text-button { flex-shrink:0; }
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 32px);
  padding:12px 20px;
  background:var(--ink);
  color:#fff;
  border-radius:10px;
  z-index:var(--z-toast);
  font-size:var(--text-caption)
}
.noscript {
  padding:20px;
  background:var(--yellow)
}
/* Indeterminate activity only: no invented percentage or processing stages. */
.generation-spinner {
  display:none;
  width:24px;
  height:24px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:42 15;
  animation:generation-spin 1s linear infinite;
}
.button.busy > .generation-spinner { display:block; }
.button.busy > .icon { display:none; }
:is(.studio-shell, .video-shell) .button.busy:disabled { opacity:1; cursor:wait; }
.room-selection-help { margin:-8px 0 24px; }
@keyframes generation-spin { to { transform:rotate(360deg); } }
@media (max-width:799px) {

}
@media(min-width:1600px) {
  .photo-stage {
    max-height:650px;
    aspect-ratio:auto
  }
  .room-photo {
    aspect-ratio:4/3
  }
}
@media(max-width:1100px) {
  .studio-grid {
    grid-template-columns:minmax(0,1fr) 340px;
    gap:24px
  }
  .studio-shell,.library-shell {
    padding:24px
  }
  .settings-body {
    padding:20px
  }
  .generate-footer {
    padding:16px 20px
  }
  .preview-toolbar {
    align-items:flex-start;
    flex-direction:column
  }
  .preview-toolbar .view-switch {
    align-self:stretch
  }
  .view-switch button {
    flex:1
  }
  .photo-stage {
    aspect-ratio:4/3
  }
  .app-header {
    padding:0 24px;
    gap:32px
  }
}
@media(max-width:799px) {
  .app-header {
    height:72px;
    padding:0 20px;
    gap:20px;
    flex-wrap:wrap
  }
  .brand img:first-child {
    width:34px;
    height:34px
  }
  .brand img:last-child {
    width:88px;
    height:24px
  }
  .app-nav {
    order:3;
    width:100%;
    height:48px;
    justify-content:center;
    background:#fff;
    border-bottom:1px solid var(--border);
    gap:32px
  }
  .app-header {
    height:120px;
    align-content:center;
    row-gap:0;
    padding-top:8px
  }
  .app-nav .nav-link {
    min-height:48px
  }
  .demo-badge {
    min-height:40px
  }
  .studio-shell,.library-shell {
    padding:20px 20px 32px
  }
  .workspace-heading {
    gap:12px;
    align-items:flex-start;
    margin-bottom:20px
  }
  .workspace-heading>.button {
    padding:8px;
    max-width:150px
  }
  .studio-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .visual-column {
    position:static
  }
  .photo-stage {
    max-height:460px;
    aspect-ratio:4/3
  }
  .preview-toolbar {
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    min-height:32px
  }
  .preview-toolbar .view-switch {
    flex:1
  }
  .photo-name {
    flex-shrink:0
  }
  .settings-panel {
    border-radius:12px;
    scroll-margin-top:136px
  }
  .settings-body {
    padding:20px
  }
  .ambience-image {
    aspect-ratio:1.8/1
  }
  .catalog-image:not(.ambience-image) {
    max-height:180px
  }
  .selection-summary {
    margin-top:20px;
    padding-top:16px
  }
  .preserve-note {
    margin-top:12px
  }
  .generate-footer {
    position:sticky;
    bottom:0
  }
  .photo-label {
    bottom:12px;
    padding:8px
  }
  .label-before {
    left:12px
  }
  .label-after {
    right:12px
  }
  .library-grid {
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr))
  }
  .workspace-heading h1 {
    font-size:var(--text-heading)
  }
}
@media(max-width:399px) {
  .app-header {
    padding-left:16px;
    padding-right:16px;
    gap:12px;
    row-gap:0
  }
  .studio-shell,.library-shell {
    padding:16px
  }
  .workspace-heading>.button {
    max-width:120px;
    line-height:1.25
  }
  .workspace-heading>.button .icon {
    display:none
  }
  .app-nav {
    gap:24px
  }
  .photo-label {
    font-size:var(--text-caption)
  }
  .settings-body {
    padding:16px
  }
  .generate-footer {
    padding:16px
  }
  .choice .choice-description {
    padding-left:4px;
    padding-right:4px
  }
  .choice .choice-label {
    padding-left:4px;
    padding-right:4px
  }
  .choices {
    gap:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Mobile is an explicit three-step flow;
desktop keeps the full working surface. */
.mobile-steps,.mobile-continue {
  display:none
}
@media(max-width:799px) {
  .studio-shell {
    padding-bottom:180px
  }
  .mobile-steps {
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin:4px 0 20px
  }
  .mobile-steps button {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    font-size:var(--text-caption);
    color:var(--muted);
    padding:4px
  }
  .mobile-steps button span {
    width:24px;
    height:24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--surface);
    font-weight:600
  }
  .mobile-steps button[aria-current=step] {
    font-weight:600;
    color:var(--ink)
  }
  .mobile-steps button[aria-current=step] span {
    background:var(--ink);
    color:#fff
  }
  .mobile-steps button:disabled {
    cursor:default;
    opacity:.65
  }
  [data-mobile-step=photo] .settings-panel,[data-mobile-step=photo] .selection-summary,[data-mobile-step=photo] .result-notice,[data-mobile-step=photo] .result-actions {
    display:none
  }
  [data-mobile-step=choices] .visual-column,[data-mobile-step=result] .settings-panel {
    display:none
  }
  .photo-stage {
    max-height:none;
    aspect-ratio:4/3
  }
  .settings-panel {
    overflow:visible
  }
  .settings-body {
    padding:20px
  }
  .generate-footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:12px 20px max(12px,env(safe-area-inset-bottom));
    z-index:var(--z-header);
    background:#fff
  }
  .generate-footer .save-status {
    margin-bottom:8px
  }
  .generate-footer .credit-note {
    margin-top:4px
  }
  .generate-footer #generation-feedback {
    max-height:32dvh;
    overflow:auto
  }
  .ambience-image {
    aspect-ratio:1.4/1
  }
  .mobile-continue {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:12px 20px max(12px,env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid var(--border);
    z-index:var(--z-header)
  }
  .mobile-continue>.button {
    width:100%
  }
  .mobile-continue .icon {
    margin-left:auto
  }
  [data-mobile-step=photo] .mobile-continue {
    display:block
  }
  .season-choices .catalog-image {
    aspect-ratio:1.35/1
  }
}
.settings-intro,.option-help,.switch-field,.result-notice {
  font-size:var(--text-body)
}
@media(min-width:800px) {
  .settings-body {
    max-height:calc(100dvh - 364px);
    overflow:auto;
    scrollbar-gutter:stable
  }
}

.ambience-title { flex-wrap:wrap; margin-bottom:16px; gap:4px 12px; }
.ambience-title .text-button { padding:4px 0; }
.ambience-title .icon { width:16px; height:16px; }
@media(max-width:799px) {
  /* The Photo step keeps upload/context; the choice step gives that space to images. */
  [data-mobile-step=choices] .workspace-heading {
    margin:0;
  }
  [data-mobile-step=choices] .workspace-heading > div {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  [data-mobile-step=choices] .workspace-heading > button {
    display:none;
  }
}

/* Align canvas/settings; the optional description opens from the creation bar. */
textarea {
  font:inherit;
  color:inherit;
}
textarea:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px;
}
.studio-grid {
  grid-template-areas:"visual settings" "composer settings" "summary settings";
  row-gap:16px;
}
.visual-column {
  grid-area:visual;
  position:static;
}
.settings-panel {
  grid-area:settings;
  position:sticky;
  top:104px;
}
.photo-stage {
  max-height:max(340px,calc(100dvh - 464px));
}
.preview-toolbar {
  margin:12px 0 0;
}
.creation-composer {
  grid-area:composer;
  min-width:0;
}
.description-panel {
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:16px;
  background:#fff;
  transition:border-color 150ms;
}
.description-panel:focus-within {
  border-color:var(--ink);
}
.prompt-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.prompt-heading label {
  font-weight:600;
}
.prompt-heading>span,.prompt-meta {
  color:var(--muted);
  font-size:var(--text-caption);
}
#prompt-input {
  display:block;
  width:100%;
  min-height:56px;
  max-height:180px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  resize:vertical;
  line-height:1.5;
}
#prompt-input::placeholder {
  color:var(--muted);
  opacity:1;
}
.prompt-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:4px;
}
#prompt-count {
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.creation-composer .generate-footer {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 20px;
  padding:0;
  margin:0;
  border:0;
}
.submit-group {
  min-width:240px;
}
.submit-group .button {
  width:100%;
  min-height:48px;
}
.submit-group .credit-note {
  margin-top:4px;
}
.creation-composer .save-status {
  margin:8px 0 0;
  text-align:left;
}
.creation-composer #generation-feedback {
  width:100%;
  margin-top:0;
}
.selection-summary {
  grid-area:summary;
  min-width:0;
  margin-top:4px;
}
.summary-note {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:12px;
}
@media(min-width:800px) {
  .settings-body {
    max-height:calc(100dvh - 152px);
  }
}
@media(max-width:1100px) and (min-width:800px) {
  .creation-composer .generate-footer { gap:8px; }
  .submit-group { min-width:0; flex:1; }
  .creation-composer .generate-footer>.text-button { flex-basis:100%; justify-content:flex-start; }
}
@media(max-width:799px) {
  .studio-grid {
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .studio-grid>* { width:100%; }
  .settings-panel { position:static; }
  .settings-panel { order:-1; }
  .description-panel { padding:16px; margin:0; }
  .creation-composer .generate-footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:12px 20px max(12px,env(safe-area-inset-bottom));
    margin:0;
    align-items:center;
    gap:4px 12px;
    border-top:1px solid var(--border);
  }
  .creation-composer .generate-footer>.text-button { font-size:var(--text-caption); }
  .creation-composer .generate-footer>.text-button .icon { display:none; }
  .submit-group { min-width:0; flex:1; }
  .submit-group .button { padding:8px 12px; }
  .submit-group .button .icon { display:none; }
  .submit-group .credit-note { font-size:var(--text-caption); }
  .creation-composer .save-status { margin-top:12px; }
  .photo-stage { max-height:none; }
  [data-mobile-step=photo] .creation-composer,
  [data-mobile-step=result] .creation-composer,
  [data-mobile-step=choices] .selection-summary { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .description-panel { transition:none; }
}

/* Compact composer: helper/counter never create a second form beneath the photo. */
.prompt-heading-meta { display:flex; gap:12px; align-items:center; }
.prompt-helper { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.creation-composer .composer-utilities .save-status { margin:4px 0 0; }
@media(max-width:799px) {
  .creation-composer .composer-utilities { display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; }
  .creation-composer .composer-utilities .text-button { flex-shrink:0; }
  .creation-composer .composer-utilities .save-status { margin:0; max-width:190px; text-align:right; }
  .creation-composer .generate-footer .submit-group { width:100%; flex-basis:100%; }
  .creation-composer .composer-utilities .icon { display:none; }
}

/* Only user intent is visible; internal prompt controls are absent. */
.creation-composer .generate-footer { align-items:center; }
.image-model-control { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; flex-basis:100%; min-width:0; padding-bottom:12px; border-bottom:1px solid var(--border,#dedbd7); }
.image-model-control label { font-size:var(--text-caption); color:var(--muted,#6f6a66); }
.image-model-control select { width:auto; max-width:100%; min-width:0; min-height:44px; padding:8px 32px 8px 12px; border:1px solid var(--border,#dedbd7); border-radius:10px; background:#fff; font:inherit; color:inherit; }
.image-model-control [role=status]:not(:empty) { flex-basis:100%; font-size:var(--text-caption); }
.design-mode-field { margin-top:20px; margin-bottom:6px; }
.design-mode-help { margin-top:0; margin-bottom:20px; }
@media(max-width:599px) { .image-model-control { align-items:stretch; gap:6px; } .image-model-control label,.image-model-control select { width:100%; } }
.creation-composer .composer-utilities { flex:1; min-width:0; }
.creation-composer .composer-utilities .save-status { margin:0; }
#description-toggle { gap:8px; padding:8px 0; min-height:44px; }
#description-toggle .icon { width:16px; height:16px; transform:rotate(90deg); }
#description-toggle[aria-expanded=true] .icon { transform:rotate(-90deg); }
.description-added { font-size:var(--text-caption); color:var(--muted); font-weight:400; }
@media(max-width:799px) {
  .creation-composer .composer-utilities { flex-direction:column; justify-content:center; gap:0; }
  .creation-composer .composer-utilities #description-toggle .icon { display:block; }
  .creation-composer .composer-utilities .save-status { max-width:none; text-align:center; }
  .prompt-heading { flex-wrap:wrap; gap:4px 12px; }
  #prompt-input { scroll-margin-bottom:180px; }
}

/* An explicit, shared entry to the details available for each room. */
.details-entry {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin-top:16px;
  padding:12px;
  min-height:64px;
  border:1px solid var(--border);
  border-radius:10px;
  text-align:left;
  transition:background 150ms,border-color 150ms;
}
.details-entry:hover { background:var(--surface); border-color:var(--ink); }
.details-entry > span { flex:1; min-width:0; }
.details-entry strong { display:block; font-size:var(--text-caption); font-weight:600; }
.details-entry small { display:block; margin-top:4px; color:var(--muted); font-size:var(--text-caption); line-height:1.5; }
.details-entry > .icon { flex-shrink:0; }
@media(prefers-reduced-motion:reduce) { .details-entry { transition:none; } }

/* Room contact sheets load when a matching room/category is displayed. */
.catalog-sheet { background-size:400% var(--tile-size-y); background-position:var(--tile-x) var(--tile-y); }
.catalog-kitchen { background-image:url('catalog/kitchen-v4.webp'); }
.catalog-bedroom { background-image:url('catalog/bedroom-v4.webp'); }
.catalog-bathroom { background-image:url('catalog/bathroom-v4.webp'); }
.catalog-spaces { background-image:url('catalog/spaces-v8.webp'); }

/* Local retouch intent: one photograph, one target and a reversible request. */
.photo-edit-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; flex-wrap:wrap; }
.retouch-count { color:var(--muted); font-size:var(--text-caption); }
.retouch-shell { max-width:1920px; padding:24px 32px 48px; margin:auto; }
.retouch-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:16px 0 24px; }
.retouch-heading p { color:var(--muted); margin-top:8px; }
.retouch-grid { grid-template-areas:"photo settings" "history settings"; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:32px; align-items:start; }
.retouch-visual { min-width:0; grid-area:photo; }
/* Photo context stays together; a single available version is plain text. */
.retouch-context-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:12px 0; margin-bottom:16px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.retouch-context-fields { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; }
.retouch-context-field { display:flex; align-items:center; gap:8px; font-size:var(--text-caption); }
.retouch-context-field label { color:var(--muted); }
.retouch-shell .retouch-context-field select { width:auto; min-height:44px; max-width:210px; padding:8px 24px 8px 8px; background:var(--white); border:0; border-radius:6px; font-weight:600; }
#retouch-base-static { display:flex; align-items:center; min-height:44px; font-weight:600; padding-inline:8px; }
.retouch-zone-modes { display:flex; border:0; border-radius:10px; background:var(--surface); padding:4px; margin:0; min-width:0; max-width:100%; }
.retouch-zone-modes label { position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border-radius:6px; font-size:var(--text-caption); cursor:pointer; white-space:nowrap; }
.retouch-zone-modes input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:inherit; }
.retouch-zone-modes label:has(input:checked) { background:var(--white); font-weight:600; }
.retouch-zone-modes label:has(input:focus-visible) { outline:2px solid var(--ink); outline-offset:2px; }
.retouch-zone-modes label:has(input:disabled) { opacity:.65; cursor:default; }
.retouch-figure { padding:0; text-align:center; }
.retouch-canvas { position:relative; isolation:isolate; width:100%; max-width:calc(62dvh * var(--image-ratio)); aspect-ratio:var(--image-ratio); margin:0 auto; border-radius:16px; overflow:hidden; background:var(--surface); }
#retouch-image { display:block; width:100%; height:100%; object-fit:contain; user-select:none; }
.retouch-photo-grid { position:absolute; inset:0; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
.retouch-photo-grid button { position:relative; min-width:0; min-height:0; padding:0; border:1px solid rgb(255 255 255 / .8); box-shadow:inset 0 0 0 1px rgb(41 37 36 / .28); border-radius:0; transition:background-color 150ms ease-out; }
.retouch-photo-grid button[aria-pressed=true] { background:rgb(255 100 62 / .14); outline:2px solid var(--ink); outline-offset:-3px; }
.retouch-photo-grid button[data-occupied=true] { background:rgb(255 255 255 / .12); }
.retouch-photo-grid button[data-occupied=true]::after { content:attr(data-number); position:absolute; top:10px; right:10px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--white); color:var(--ink); font-weight:700; font-size:16px; }
.retouch-photo-grid button[aria-pressed=true] { background:rgb(255 100 62 / .14); }
.retouch-photo-grid button[aria-pressed=true]::after { background:var(--coral); }
.retouch-photo-grid button:focus-visible { outline:3px solid var(--ink); outline-offset:-5px; box-shadow:inset 0 0 0 2px #fff; }
@media (hover:hover) { .retouch-photo-grid button:not(:disabled):hover { background:rgb(255 255 255 / .20); } .retouch-photo-grid button[aria-pressed=true]:hover { background:rgb(255 100 62 / .22); } }
@media (prefers-reduced-motion:reduce) { .retouch-photo-grid button { transition:none; } }
.retouch-draw-layer { position:absolute; inset:0; cursor:crosshair; touch-action:none; z-index:3; }
.retouch-region { position:absolute; border:2px solid var(--ink); outline:2px solid #fff; background:rgb(255 100 62 / .10); z-index:2; pointer-events:none; }
.retouch-regions { position:absolute; inset:0; pointer-events:none; z-index:2; }
.retouch-region-choice { position:absolute; border:2px solid var(--white); outline:1px solid var(--ink); pointer-events:none; }
.retouch-region-choice[data-active=true] { border-color:var(--ink); outline:2px solid var(--white); background:rgb(255 100 62 / .10); }
.retouch-region-choice button { position:absolute; top:0; left:0; width:100%; height:100%; min-width:44px; min-height:44px; pointer-events:auto; }
.retouch-region-choice button span { position:absolute; top:6px; left:6px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--white); color:var(--ink); font-weight:700; }
.retouch-region-choice button[aria-pressed=true] span { background:var(--coral); }
.retouch-region-choice button:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.retouch-region-choice:has(button:focus-visible) { outline:2px solid var(--ink); }
.retouch-zone-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.retouch-zone-list button { display:flex; gap:8px; align-items:center; min-height:44px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); font-size:var(--text-caption); }
.retouch-zone-list button span { color:var(--muted); }
.retouch-zone-list button[aria-pressed=true] { background:var(--selected); border-color:var(--ink); }
.retouch-scope-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
#retouch-scope-count { color:var(--muted); font-size:var(--text-caption); white-space:nowrap; }
.retouch-items-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.retouch-changes { display:contents; }
.retouch-changes button { min-height:44px; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:var(--text-caption); }
.retouch-changes button[aria-pressed=true] { border-color:var(--ink); background:var(--selected); font-weight:600; }
#retouch-add-change { margin:0; padding:4px 8px; }
.retouch-remove-change { color:var(--muted); margin-top:12px; }
.retouch-undo { margin-bottom:12px; display:flex; align-items:center; gap:16px; padding:8px 12px; background:var(--surface); border-radius:8px; font-size:var(--text-caption); }

.retouch-figure figcaption { font-size:var(--text-caption); color:var(--muted); margin-top:12px; text-align:left; }
.retouch-zone-tools { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.retouch-zone-help { font-size:var(--text-caption); color:var(--muted); margin-top:8px; }
.retouch-keyboard-help { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.retouch-shell select { min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.retouch-history { grid-area:history; margin-top:0; border-top:1px solid var(--border); padding-top:20px; }
.retouch-history .summary-heading { margin-bottom:12px; }
#retouch-history-list > p { color:var(--muted); font-size:var(--text-caption); }
.retouch-history ol { list-style:none; margin:0; padding:0; max-height:360px; overflow:auto; }
.retouch-history li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
.retouch-history li:last-child { border-bottom:0; }
.retouch-history li > span { min-width:0; }
.retouch-history strong { display:block; font-size:var(--text-caption); font-weight:600; }
.retouch-history small { display:block; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; font-size:var(--text-caption); }
.retouch-history button { flex-shrink:0; }
.retouch-form { grid-area:settings; position:sticky; top:104px; min-width:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--white); }
.retouch-form-body { padding:20px; overflow:auto; max-height:calc(100dvh - 224px); scrollbar-gutter:stable; }
.retouch-field-label { display:block; font-size:var(--text-caption); font-weight:600; margin-bottom:8px; }
#retouch-target { width:100%; }
.retouch-variants-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.retouch-variants-heading > span { color:var(--muted); font-size:var(--text-caption); }
.retouch-note-details { margin-top:16px; border-top:1px solid var(--border); }
.retouch-note-details summary { min-height:48px; display:flex; align-items:center; gap:8px; font-size:var(--text-caption); cursor:pointer; list-style:none; }
.retouch-note-details summary::-webkit-details-marker { display:none; }
.retouch-note-details summary::after { content:'+'; font-size:20px; line-height:1; }
.retouch-note-details[open] summary::after { content:'−'; }
#retouch-note-optional { margin-left:auto; color:var(--muted); }
.retouch-note-details[open] summary { margin-bottom:8px; }
#retouch-notes { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; resize:vertical; min-height:80px; font-size:var(--text-body); line-height:1.5; }
#retouch-notes::placeholder { color:var(--muted); opacity:1; }
.retouch-notes-meta { display:flex; gap:12px; justify-content:space-between; color:var(--muted); font-size:var(--text-caption); margin-top:4px; }
#retouch-note-count { flex-shrink:0; font-variant-numeric:tabular-nums; }
.retouch-preserve { display:flex; gap:8px; margin-top:20px; color:var(--muted); font-size:var(--text-caption); }
.retouch-custom-help { color:var(--muted); font-size:var(--text-body); margin-top:16px; }
.retouch-error { margin-top:16px; color:var(--ink); background:var(--selected); padding:12px; border-radius:8px; }
.retouch-ready { background:var(--selected); padding:16px; border-radius:10px; margin-top:20px; }
.retouch-ready p { margin-top:8px; font-size:var(--text-caption); }
.retouch-submit { border-top:1px solid var(--border); padding:16px 20px; background:var(--white); }
.retouch-submit .button { width:100%; gap:12px; }
.retouch-submit .button .icon:last-child { margin-left:auto; }
.retouch-submit p { color:var(--muted); font-size:var(--text-caption); text-align:center; margin-top:8px; }
.retouch-shell button:disabled { cursor:default; }
@media(max-width:1100px) and (min-width:800px) {
  .retouch-shell { padding:20px 24px 40px; }
  .retouch-grid { grid-template-columns:minmax(0,1fr) 340px; gap:24px; }
}
@media(max-width:799px) {
  .retouch-shell { padding:16px 16px 168px; }
  .retouch-heading { align-items:flex-start; flex-wrap:wrap; gap:20px; }
  .retouch-context-fields { gap:0 12px; }
  .retouch-context-bar { gap:8px; }
  .retouch-shell .retouch-context-field select { padding-right:16px; max-width:170px; }
  .retouch-zone-modes label { padding-inline:8px; }
  .retouch-grid { grid-template-areas:"photo" "settings" "history"; grid-template-columns:1fr; gap:24px; }
  .retouch-canvas { max-width:100%; }
  .retouch-form { position:static; overflow:visible; }
  .retouch-form-body { padding:16px; max-height:none; overflow:visible; }
  .retouch-submit { position:fixed; bottom:0; left:0; right:0; z-index:var(--z-header); padding:12px 20px max(12px,env(safe-area-inset-bottom)); }
  .retouch-history { margin-top:20px; }
  .retouch-history:has(#retouch-history-list > p) { display:none; }
  .retouch-zone-tools { gap:8px 16px; }
  .retouch-notes-meta { flex-wrap:wrap; }
}

/* Keep the action visible; changing the source/target starts the form at its top. */
@media(min-width:800px) {
  .retouch-form { display:flex; flex-direction:column; max-height:calc(100dvh - 330px); }
  .retouch-form-body { min-height:0; max-height:none; }
  .retouch-submit { flex-shrink:0; }
}
@media(max-width:1100px) and (min-width:800px) {
  .retouch-form { max-height:calc(100dvh - 356px); }
}
@media(max-height:720px) and (min-width:800px) {
  .retouch-form { position:static; max-height:none; }
  .retouch-form-body { max-height:none; }
}
@media(max-width:799px) {
  body:has(#retouch-view:not([hidden])) .toast { bottom:calc(128px + env(safe-area-inset-bottom)); pointer-events:none; }
}

/* One studio: the same photo and sidebar for ambience, materials and local changes. */
.studio-shell { --image-ratio:1.333333; }
.photo-stage,.studio-shell .retouch-canvas { aspect-ratio:var(--image-ratio); max-height:none; max-width:min(100%,calc(max(340px,100dvh - 420px) * var(--image-ratio))); margin-inline:auto; }
.photo-stage.is-demo .room-photo { object-fit:contain; }
.studio-shell[data-empty=true] .studio-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"visual"; }
.studio-shell[data-empty=true] :is(.settings-panel,.creation-composer,.selection-summary,.mobile-continue) { display:none; }
.studio-shell[data-empty=true] .workspace-heading > [data-action=upload] { display:none; }
.studio-shell[data-empty=true] .photo-stage { aspect-ratio:auto; max-width:100%; min-height:360px; border:1px dashed var(--border); background:var(--white); }
.photo-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:360px; padding:48px 24px; text-align:center; }
.photo-empty .photo-empty-icon { width:36px; height:36px; color:var(--muted); }
.photo-empty h2 { margin:0; font-size:clamp(24px,3vw,32px); letter-spacing:-.025em; line-height:1.2; }
.photo-empty p { max-width:380px; margin:0; color:var(--muted); }
.photo-empty .button { margin-top:8px; }
.photo-empty small { font-size:14px; color:var(--muted); }
@media(max-width:799px) {
 .studio-shell[data-empty=true] { padding-bottom:24px; }
 .studio-shell[data-empty=true] .photo-stage { min-height:340px; }
 .photo-empty { min-height:340px; padding:32px 20px; }
}
#photo-context { margin-top:8px; }
#photo-context select { width:auto; min-height:44px; max-width:200px; border:0; background:var(--white); font-weight:600; }
.studio-shell[data-editing=true] .preview-toolbar,.studio-shell[data-editing=true] #result-notice,.studio-shell[data-editing=true] #result-actions,.studio-shell[data-editing=true] #photo-note { display:none; }
#retouch-view .retouch-form { display:block; position:static; border:0; border-radius:0; max-height:none; overflow:visible; }
#retouch-view .retouch-form-body { padding:20px; max-height:calc(100dvh - 152px); overflow:auto; }
#retouch-view .panel-back { margin-top:-8px; }
#retouch-view .settings-title { margin-top:8px; }
#retouch-view .retouch-scope-heading { margin-top:16px; }
#retouch-view .retouch-scope-heading h2 { font-size:var(--text-caption); }
#retouch-view select { width:100%; min-height:44px; border:1px solid var(--border); border-radius:8px; padding:8px 12px; background:var(--white); }
#retouch-view .retouch-variants-heading { margin:16px 0 12px; }
#retouch-view .retouch-zone-modes { flex-wrap:wrap; }
#retouch-view .retouch-zone-modes label { padding:8px; }
.optional-label { margin-left:auto; color:var(--muted); }
#retouch-view .retouch-undo { margin:0 20px 16px; }
#retouch-history { margin-top:24px; }
#retouch-history summary { min-height:44px; cursor:pointer; font-size:var(--text-caption); color:var(--muted); }
@media(max-width:799px) {
 .photo-stage,.studio-shell .retouch-canvas { max-width:100%; }
 #retouch-view .retouch-form-body { overflow:visible; max-height:none; padding:20px; }
 .studio-shell[data-editing=true] .visual-column { display:block; }
 .studio-shell[data-editing=true] .settings-panel { order:0; }
 .studio-shell[data-editing=true] .creation-composer { order:1; }
 .studio-shell[data-editing=true][data-zone-mode=none] .visual-column { display:none; }
 .studio-shell[data-editing=true] #photo-context { display:none; }
 .studio-shell[data-editing=true] #retouch-location { scroll-margin-bottom:190px; }
}
@media(max-height:720px) and (min-width:800px) { #retouch-view .retouch-form-body { max-height:none; overflow:visible; } }
.retouch-panel-heading { padding:20px 20px 0; background:var(--white); }
#retouch-view .retouch-panel-heading .settings-title { margin-bottom:8px; }
#retouch-view .retouch-form-body { padding-top:0; max-height:calc(100dvh - 244px); }
#retouch-view .plain-option[aria-pressed=true] { border-color:var(--ink); background:var(--surface); font-weight:600; }
#retouch-view .choices .catalog-image { aspect-ratio:1.4/1; }
#retouch-view .retouch-variants-heading { margin-top:8px; }
#retouch-view .retouch-items-toolbar[hidden] { display:none; }
@media(max-width:799px), (max-height:720px) { #retouch-view .retouch-form-body { max-height:none; } }

/* Season choices open explicitly; keeping the original is a choice within the picker. */
.season-picker { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:64px; padding:12px; margin-top:12px; border:1px solid var(--border); border-radius:8px; text-align:left; }
.season-picker:hover { border-color:var(--ink); }
.season-picker small,.season-picker strong { display:block; }
.season-picker small { color:var(--muted); font-size:var(--text-caption); margin-bottom:4px; }
.season-picker .icon { transform:rotate(90deg); flex-shrink:0; }
.season-picker[aria-expanded=true] .icon { transform:rotate(-90deg); }
#description-toggle { text-align:left; }
#description-toggle .icon { flex-shrink:0; }
.demo-feedback-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:12px; }
dialog:has(.demo-slider) { width:min(880px,calc(100% - 32px)); }
.demo-slider { --image-ratio:1.333333; max-width:100%; margin:20px 0 12px; }
.customization-group { border-bottom:1px solid var(--border); }
.customization-group > summary { display:flex; align-items:center; gap:12px; min-height:88px; padding:16px 0; cursor:pointer; list-style:none; }
.customization-group > summary::-webkit-details-marker { display:none; }
.customization-group > summary .catalog-image { width:52px; height:52px; flex:none; }
.customization-group .category-content { flex:1; min-width:0; }
.customization-group > summary strong { display:block; font-weight:600; }
.customization-group > summary small { display:block; margin-top:4px; color:var(--muted); font-size:var(--text-caption); }
.customization-group > summary > .icon { flex:none; transition:transform 160ms ease; }
.customization-group[open] > summary > .icon { transform:rotate(90deg); }
.customization-group > summary:hover strong { text-decoration:underline; text-underline-offset:4px; }
.customization-group > .category-list { margin:0 0 16px 16px; padding-left:16px; border-left:2px solid var(--surface); }
.customization-group .category-link { padding:12px 0; }
.customization-utilities { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-top:16px; }
.customization-utilities [data-action=reset] { color:var(--muted); font-size:var(--text-caption); }
@media(max-width:599px) {
 .demo-slider .photo-label { bottom:8px; padding:4px 8px; font-size:12px; }
 .demo-slider .label-before { left:8px; }
 .demo-slider .label-after { right:8px; }
 .demo-feedback-actions > .button { width:100%; white-space:normal; text-align:center; }
}

/* Completed video assets remain beside their original before/after pair. */
.video-results{margin:0 0 24px}
.video-results h2{font-size:24px;letter-spacing:-.02em;margin:0 0 16px}
#video-results-list{display:grid;gap:24px}
.video-result{display:grid;gap:12px;min-width:0}
.video-result video{display:block;width:100%;max-height:600px;border-radius:16px;background:#171717}
.video-result .button{justify-self:start}

/* Native modal keeps keyboard focus inside the full-screen loading view. */
dialog.generation-progress {
  position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:32px; border:0; border-radius:0; background:#F8F7F4; color:#292524; overflow:auto;
}
.generation-progress-logo { position:absolute; top:28px; left:32px; width:144px; height:44px; object-fit:contain; }
.generation-progress-content { min-height:calc(100dvh - 64px); width:min(100%,620px); margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:72px 24px; }
.generation-progress-mascot { display:grid; justify-items:center; gap:24px; margin-bottom:24px; }
.generation-progress-beaver { display:block; width:160px; height:147px; object-fit:contain; transform-origin:50% 94%; }
.generation-progress-dots { display:flex; gap:8px; }
.generation-progress-dots span { width:6px; height:6px; border-radius:50%; background:#FF643E; opacity:.4; }
/* Continuous activity, not a completion percentage. Only animate the visible dialog. */
@media (prefers-reduced-motion:no-preference) {
 dialog.generation-progress[open] .generation-progress-beaver { animation:beaver-breathe 4s cubic-bezier(.25,1,.5,1) infinite; }
 dialog.generation-progress[open] .generation-progress-dots span { animation:beaver-thinking 1.8s ease-in-out infinite; }
 dialog.generation-progress[open] .generation-progress-dots span:nth-child(2) { animation-delay:.2s; }
 dialog.generation-progress[open] .generation-progress-dots span:nth-child(3) { animation-delay:.4s; }
}
@keyframes beaver-breathe {
 0%,100% { transform:translateY(0) rotate(0); }
 35% { transform:translateY(-4px) rotate(-2deg); }
 70% { transform:translateY(-1px) rotate(1deg); }
}
@keyframes beaver-thinking {
 0%,65%,100% { opacity:.4; }
 30% { opacity:1; }
}
.generation-progress h2 { margin:12px 0 16px; font-size:clamp(30px,4vw,48px); line-height:1.12; letter-spacing:-.035em; }
.generation-progress #generation-progress-description { margin:0; color:#69635F; line-height:1.6; }
.generation-progress-time { margin:32px 0; display:grid; gap:4px; }
.generation-progress-time output { font-size:40px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.generation-progress-time span,.generation-progress small { color:#69635F; font-size:13px; }
.generation-progress small { margin-top:12px; }
@media (max-width:599px) {
 dialog.generation-progress { padding:20px; }
 .generation-progress-logo { top:20px; left:20px; width:120px; }
 .generation-progress-content { min-height:calc(100dvh - 40px); }
}

.revision-panel { padding:20px; margin-bottom:20px; border:1px solid #DEDAD6; border-radius:16px; background:#FFF8F5; }
.revision-panel[hidden] { display:none; }
.revision-heading,.revision-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.revision-panel p { font-size:14px; color:#69635F; margin:10px 0 16px; }
.revision-panel label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.revision-panel textarea { width:100%; resize:vertical; min-height:100px; border:1px solid #DEDAD6; border-radius:10px; padding:12px; font:inherit; background:#fff; color:#292524; }
.revision-tools { margin-top:8px; font-size:13px; }
.revision-tools span { color:#69635F; }
.result-actions { flex-wrap:wrap; }

/* Photo workspace: editable title, focused actions and a compact visual history. */
.project-name-button { display:inline-flex; align-items:center; gap:12px; max-width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:inherit; text-align:left; cursor:text; }
.project-name-button span { overflow-wrap:anywhere; }
.project-name-button .icon { flex-shrink:0; width:20px; height:20px; color:var(--muted); }
.project-name-button:hover span { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.project-name-input { display:block; width:100%; min-width:0; font:inherit; font-weight:inherit; color:inherit; border:1px solid var(--ink); border-radius:8px; padding:4px 8px; }
#studio-view .workspace-heading > div { min-width:0; flex:1; }
#project-name-error { color:var(--ink); font-size:var(--text-caption); }
#studio-view .preview-toolbar .photo-name { display:none; }
#studio-view .preview-toolbar { justify-content:flex-start; }
#studio-view .result-actions { gap:8px; margin-top:16px; }
#studio-view .result-actions .button { padding:10px 14px; min-height:44px; font-size:var(--text-caption); }
#studio-view .result-actions .primary { background:var(--white,#fff); border:1px solid var(--border); }
#studio-view .result-actions .primary:hover { background:var(--surface,#f4f4f1); border-color:var(--ink); }
#studio-view .result-actions .primary > .icon:last-child { display:none; }
#studio-view .selection-summary { padding-top:12px; }
#studio-view .selection-summary > summary { color:var(--muted); font-size:var(--text-caption); cursor:pointer; }
#studio-view .selection-summary .summary-items { margin-top:12px; }
#studio-view .selection-summary .preserve-note { font-size:var(--text-caption); }
#studio-view #generation-demo-note { display:none; }
#studio-view .save-status { font-size:12px; }
.photo-history { min-width:0; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.photo-history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.photo-history-heading h2 { font-size:var(--text-body,16px); margin:0; }
.photo-history-heading h2 span { color:var(--muted); font-weight:400; margin-left:6px; }
.photo-history-status { font-size:12px; color:var(--muted); }
.photo-history-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:12px; }
.photo-history-card { min-width:0; padding:0; text-align:left; background:white; color:var(--ink); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; }
.photo-history-card[aria-pressed=true] { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); background:var(--soft,#fff0eb); }
.photo-history-card:hover { border-color:var(--ink); }
.photo-history-card img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; background:#f3f3f0; }
.photo-history-card > span { display:grid; gap:2px; padding:9px 10px; }
.photo-history-card strong { font-size:14px; }
.photo-history-card small { color:var(--muted); font-size:12px; line-height:1.5; }
.photo-history-card:disabled { cursor:wait; opacity:.65; }
.photo-history-error { margin-top:12px; font-size:var(--text-caption); }
.photo-history-more { margin-top:12px; }
@media(max-width:799px) {
  .photo-history-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  [data-mobile-step=choices] .photo-history { display:none; }
  #studio-view .result-actions .button { flex:1 1 auto; justify-content:center; }
}
@media(prefers-reduced-motion:no-preference) { .photo-history-card { transition:border-color 150ms,background-color 150ms; } }

/* Video shares Beaver's typography, controls and spacing with the photo studio. */
.video-shell { max-width:1920px; margin:auto; padding:28px 32px 48px; }
.video-back { margin-bottom:12px; }
.video-heading h1 { font-size:var(--text-heading); }
#video-title:focus,#video-picker-title:focus,#video-import-title:focus { outline:none; }
#video-results-title { scroll-margin-top:108px; }
.video-history-intro { color:var(--muted); font-size:var(--text-caption); margin:0 0 20px; max-width:65ch; }
#video-results-list.video-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); align-items:start; gap:16px; margin-bottom:24px; }
.video-gallery-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; min-width:0; background:var(--white); }
.video-card-open { display:block; width:100%; padding:0; text-align:left; border:0; background:var(--white); color:var(--ink); cursor:pointer; }
.video-card-open:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; border-radius:11px; }
.video-thumbnail { display:block; position:relative; aspect-ratio:16/9; background:#171717; }
.video-thumbnail .video-card-thumb { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.video-play-icon { display:grid; place-items:center; position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%; color:var(--ink); background:var(--white); transition:transform 180ms ease-out; }
.video-card-open:hover .video-play-icon { transform:scale(1.08); }
.video-play-icon .icon { width:20px; height:20px; fill:currentColor; }
.video-card-duration { position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:4px; color:var(--white); background:var(--ink); font-size:.75rem; }
.video-card-duration:empty { display:none; }
.video-card-caption { display:block; padding:12px; }
.video-card-heading { display:flex; gap:8px; align-items:center; justify-content:space-between; min-height:24px; }
.video-card-title { font-size:.9375rem; font-weight:600; }
.video-archive-badge { padding:3px 6px; border-radius:4px; background:var(--surface); color:var(--ink); font-size:.6875rem; }
.video-card-meta { display:block; margin-top:4px; color:var(--muted); font-size:.8125rem; }
dialog.video-viewer { width:min(1040px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:12px; overflow:auto; overscroll-behavior:contain; background:var(--white); }
dialog.video-viewer::backdrop { background:rgb(0 0 0 / .65); }
.video-viewer-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px; }
.video-viewer-heading h2 { margin:0 0 4px; font-size:1.25rem; }
.video-viewer-close { flex:none; }
.video-viewer-player { display:block; width:100%; max-width:100%; min-width:0; aspect-ratio:16/9; max-height:calc(100dvh - 250px); object-fit:contain; background:#171717; }
.video-card-body { padding:16px; }
.video-viewer .video-card-details { font-size:.875rem; color:var(--muted); margin:0; overflow-wrap:anywhere; }
.video-card-body time { display:block; color:var(--muted); font-size:.75rem; }
.video-card-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.video-card-actions .text-button,.video-card-refresh { min-height:44px; font-size:.875rem; }
.video-card-actions .icon { width:18px; height:18px; }
.video-card-body .video-error { margin-top:8px; }
@media (max-width:600px) {
 #video-results-list.video-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .video-card-heading { flex-wrap:wrap; }
 .video-card-caption { padding:10px; }
 .video-viewer-heading { padding:16px; gap:8px; }
 .video-viewer .video-card-actions { gap:8px; }
 .video-viewer .video-card-download { padding-inline:12px; }
}
@media (prefers-reduced-motion:reduce) { .video-play-icon { transition:none; } }
#video-history-more { margin-top:16px; }
.video-history-empty { padding:20px 0; color:var(--muted); font-size:var(--text-caption); }
.video-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; align-items:start; gap:32px; }
.video-visual { min-width:0; position:sticky; top:108px; }
.video-stage { position:relative; width:100%; max-width:min(100%,calc(max(320px,100dvh - 390px) * var(--video-ratio,1.7778))); aspect-ratio:var(--video-ratio,1.7778); margin-inline:auto; overflow:hidden; isolation:isolate; background:var(--surface); border-radius:16px; }
.video-stage > img { width:100%; height:100%; display:block; object-fit:contain; }
.video-frame-label { position:absolute; top:16px; left:16px; background:var(--white); padding:8px 12px; border-radius:8px; font-size:var(--text-caption); font-weight:600; }
.video-preview-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; color:var(--muted); font-size:var(--text-caption); }
.video-preview-caption .text-button { font-size:var(--text-caption); color:var(--ink); }
#video-preview-toggle { display:none; }
.video-storyboard { display:flex; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.video-frame-button { display:flex; align-items:center; gap:12px; min-width:0; flex:1; text-align:left; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--white); }
.video-frame-button[aria-pressed=true] { border-color:var(--ink); outline:1px solid var(--ink); background:var(--selected); }
.video-frame-button:hover { border-color:var(--ink); }
.video-frame-button img { width:80px; height:60px; object-fit:cover; border-radius:6px; }
.video-frame-button strong,.video-frame-button small { display:block; }
.video-frame-button strong { font-size:var(--text-body); font-weight:600; }
.video-frame-button small { color:var(--muted); font-size:var(--text-caption); }
.video-connection { display:flex; align-items:center; gap:8px; flex:0 1 160px; color:var(--muted); font-size:var(--text-caption); white-space:nowrap; }
.video-connection-line { height:1px; background:var(--border); flex:1; min-width:8px; }
.video-motion-note { margin:12px 0 0; color:var(--muted); font-size:var(--text-caption); }
.video-settings { border:1px solid var(--border); border-radius:16px; min-width:0; overflow:hidden; background:var(--white); }
.video-settings-body { padding:20px; }
.video-settings h2 { font-size:var(--text-subheading); margin:0 0 16px; }
.video-transitions { display:flex; flex-direction:column; gap:8px; }
.video-transition { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:10px; text-align:left; min-height:64px; }
.video-transition:hover { border-color:var(--ink); }
.video-transition[aria-pressed=true] { border-color:var(--ink); outline:1px solid var(--ink); background:var(--selected); }
.video-transition-icon { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--surface); }
.video-transition[aria-pressed=true] .video-transition-icon { background:var(--white); }
.video-transition-text { flex:1; min-width:0; }
.video-transition strong { display:block; font-weight:600; font-size:var(--text-body); }
.video-transition small { display:block; color:var(--muted); margin-top:4px; font-size:var(--text-caption); }
.video-transition-check { flex:none; width:16px; visibility:hidden; }
.video-transition[aria-pressed=true] .video-transition-check { visibility:visible; }
.video-settings fieldset { padding:0; border:0; margin:24px 0 0; min-width:0; }
.video-settings legend { font-weight:600; font-size:var(--text-body); margin-bottom:12px; }
.video-duration { margin-top:24px; }
.video-duration-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:600; }
#video-duration-value { font-variant-numeric:tabular-nums; white-space:nowrap; }
#video-duration-range { display:block; appearance:none; -webkit-appearance:none; width:100%; height:44px; margin:4px 0 0; background:transparent; cursor:pointer; accent-color:var(--coral); border-radius:8px; }
#video-duration-range::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(to right,var(--coral) var(--duration-progress),var(--border) var(--duration-progress)); }
#video-duration-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border:2px solid var(--ink); border-radius:50%; background:var(--white); }
#video-duration-range::-moz-range-track { height:6px; border-radius:3px; background:var(--border); }
#video-duration-range::-moz-range-progress { height:6px; border-radius:3px; background:var(--coral); }
#video-duration-range::-moz-range-thumb { width:20px; height:20px; border:2px solid var(--ink); border-radius:50%; background:var(--white); }
.video-duration-axis { display:flex; justify-content:space-between; padding:0 12px; color:var(--muted); font-size:var(--text-caption); font-variant-numeric:tabular-nums; }
.video-output-details > summary,.video-extra-details > summary { display:flex; align-items:center; gap:12px; min-height:72px; cursor:pointer; list-style:none; }
.video-output-details > summary { background:var(--surface); border-radius:10px; padding:12px; }
.video-output-details > summary::-webkit-details-marker,.video-extra-details > summary::-webkit-details-marker { display:none; }
.video-output-details > summary > span,.video-extra-details > summary > span { flex:1; min-width:0; }
.video-output-details summary .icon,.video-extra-details summary .icon { flex:none; }
.video-output-details summary strong,.video-extra-details summary strong { display:block; font-size:var(--text-body); font-weight:600; }
#video-output-summary,.video-extra-details summary small { display:block; font-size:var(--text-caption); font-variant-numeric:tabular-nums; margin-top:4px; color:var(--muted); }
.video-output-details[open] > summary > .icon:last-child,.video-extra-details[open] > summary > .icon:last-child { transform:rotate(90deg); }
.video-output-fields fieldset { margin:20px 0 0; }
.video-output-fields legend { margin-bottom:8px; }
.video-output-fields .video-duration { margin-top:20px; }
.video-ratios { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.video-resolutions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.video-quantities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.video-ratios,.video-resolutions,.video-quantities { padding:4px; border-radius:10px; background:var(--surface); }
.video-choice { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 4px; border:1px solid transparent; border-radius:8px; min-height:44px; cursor:pointer; font-size:var(--text-body); font-variant-numeric:tabular-nums; }
.video-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.video-choice:has(input:checked) { background:var(--white); border-color:var(--ink); }
.video-choice:has(input:focus-visible) { outline:2px solid var(--ink); outline-offset:2px; }
.video-choice:hover { border-color:var(--ink); }
.video-choice strong { font-weight:600; }
.video-choice small { font-size:var(--text-caption); color:var(--muted); text-align:center; }
.video-ratio-choice { min-height:68px; font-size:var(--text-caption); }
.video-ratio-shape { display:block; width:26px; max-height:24px; aspect-ratio:var(--ratio-width)/var(--ratio-height); border:2px solid currentColor; border-radius:3px; }
.video-ratio-choice:has(input[value="9:16"]) .video-ratio-shape { width:13px; }
.video-ratio-choice:has(input[value="3:4"]) .video-ratio-shape { width:18px; }
.video-ratio-choice:has(input[value="1:1"]) .video-ratio-shape { width:24px; }
.video-audio-control { display:flex; align-items:center; gap:16px; margin-top:20px; cursor:pointer; min-height:48px; }
.video-audio-control > span { flex:1; }
.video-audio-control strong { display:block; font-weight:600; }
.video-audio-control small { display:block; color:var(--muted); font-size:var(--text-caption); margin-top:4px; }
#video-audio { appearance:none; -webkit-appearance:none; position:relative; width:44px; height:28px; flex:none; margin:0; border:1px solid var(--muted); border-radius:20px; background:var(--surface); cursor:pointer; }
#video-audio::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--muted); transition:transform 150ms var(--ease); }
#video-audio:checked { background:var(--ink); border-color:var(--ink); }
#video-audio:checked::after { background:var(--white); transform:translateX(16px); }
.video-setting-help { margin:8px 0 0; color:var(--muted); font-size:var(--text-caption); }
.video-file-format { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 0; font-size:var(--text-caption); color:var(--muted); }
.video-file-format strong { color:var(--ink); font-weight:600; }
.video-extra-details { margin-top:20px; border-top:1px solid var(--border); }
.video-extra-details > summary { padding:16px 0; }
.video-extra-details .video-transitions { padding-bottom:4px; }
.video-extra-details + .video-signature-details { margin-top:0; }
.video-settings .segmented { width:100%; }
.video-settings .segmented button { flex:1; }
.video-signature-details { margin-top:24px; border-top:1px solid var(--border); }
.video-signature-details > summary { display:flex; align-items:center; gap:12px; padding:20px 0 0; min-height:64px; list-style:none; cursor:pointer; }
.video-signature-details > summary::-webkit-details-marker { display:none; }
.video-signature-details > summary > span { flex:1; min-width:0; }
.video-signature-details > summary strong { font-weight:600; font-size:var(--text-caption); display:block; }
.video-signature-details > summary small { font-size:var(--text-caption); color:var(--muted); display:block; margin-top:4px; }
.video-signature-details > summary > .icon { flex:none; }
.video-signature-details[open] > summary > .icon:last-child { transform:rotate(90deg); }
.video-signature-fields { margin-top:16px; }
.video-signature-fields > p:first-child { color:var(--muted); font-size:var(--text-caption); margin:0 0 16px; }
.video-signature-fields > label { display:block; margin-bottom:8px; font-weight:600; font-size:var(--text-caption); }
#video-agency-name { border:1px solid var(--border); border-radius:10px; padding:12px; min-height:44px; width:100%; background:var(--white); }
#video-agency-name::placeholder { color:var(--muted); opacity:1; }
.video-logo-actions { display:flex; gap:12px; align-items:center; margin-top:12px; }
.video-logo-actions .button { font-size:var(--text-caption); }
.video-signature-fields .switch-field { margin-top:16px; }
.video-signature { position:absolute; bottom:20px; right:20px; display:flex; align-items:center; gap:12px; background:var(--white); color:var(--ink); padding:12px 16px; border-radius:8px; max-width:min(70%,360px); }
.video-signature img { max-width:96px; max-height:48px; object-fit:contain; }
.video-signature span { font-size:var(--text-body); font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.video-signature[data-position=final] { left:50%; right:auto; bottom:32px; transform:translateX(-50%); width:max-content; max-width:80%; }
.video-signature.is-entering { animation:signature-appear 320ms var(--ease) both; }
@keyframes signature-appear { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
.video-submit { padding:20px; border-top:1px solid var(--border); }
#video-generate { width:100%; justify-content:space-between; }
#video-generate.busy { justify-content:center; gap:12px; }
.video-submit > p { text-align:center; }
.video-submit .save-status { margin-top:8px; }
.video-feedback { background:var(--surface); padding:16px; margin-top:16px; border-radius:8px; font-size:var(--text-caption); }
.video-feedback p { margin:8px 0; color:var(--muted); }
.video-error { font-size:var(--text-caption); color:var(--ink); background:var(--selected); border:1px solid var(--coral); border-radius:8px; padding:12px; }
.video-picker { margin-bottom:28px; }
.video-picker-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; }
.video-picker h2 { font-size:var(--text-subheading); }
.video-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.video-pair-option { min-width:0; padding:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; text-align:left; }
.video-pair-option:hover { border-color:var(--ink); }
.video-pair-thumbs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
.video-pair-thumbs img { width:100%; height:120px; object-fit:cover; }
.video-pair-option > span:last-child { display:block; padding:16px; }
.video-pair-option strong,.video-pair-option small { display:block; overflow-wrap:anywhere; }
.video-pair-option small { margin-top:4px; color:var(--muted); font-size:var(--text-caption); }
.video-empty { padding:40px 0; max-width:640px; }
.video-empty > p { color:var(--muted); max-width:55ch; margin:0 0 20px; }
.video-empty .dialog-actions { margin-top:20px; }
.library-card { min-width:0; }
.library-card .library-item { width:100%; }
.library-video-action { margin-top:8px; width:100%; justify-content:center; }
.result-actions [data-action=video-from-photo] { gap:8px; }
@media(min-width:800px) and (max-width:1100px) {
 .video-grid { grid-template-columns:minmax(0,1fr) 340px; gap:24px; }
 .video-connection { flex-basis:40px; }
 .video-connection .icon,.video-connection-line { display:none; }
 .video-frame-button { flex-direction:column; align-items:stretch; }
 .video-frame-button img { width:100%; height:auto; aspect-ratio:4/3; }
}
@media(max-width:799px) {
 #video-results-title { scroll-margin-top:140px; }
 .app-nav { gap:16px; }
 .app-nav .nav-link { gap:6px; }
 .nav-prefix { display:none; }
 .app-nav .nav-link > span { text-transform:capitalize; }
 .video-shell { padding:20px 20px 32px; }
 .video-heading { flex-wrap:wrap; }
 .video-heading > .button { max-width:none; }
 .video-grid { grid-template-columns:minmax(0,1fr); gap:24px; padding-bottom:160px; }
 .video-visual { position:static; }
 .video-visual[data-expanded=false] .video-stage { display:none; }
 .video-preview-desktop-label { display:none; }
 #video-preview-toggle { display:inline-flex; }
 .video-stage { max-width:min(100%,calc(360px * var(--video-ratio,1.7778))); }
 .video-frame-label { top:12px; left:12px; font-size:var(--text-caption); }
 .video-storyboard { gap:8px; }
 .video-frame-button { flex-direction:row; align-items:center; gap:8px; }
 .video-frame-button img { width:48px; height:40px; }
 .video-frame-detail { display:none; }
 .video-connection { flex-basis:36px; justify-content:center; }
 .video-connection .icon,.video-connection-line { display:none; }
 .video-frame-button small { font-size:var(--text-caption); }
 .video-submit { position:fixed; bottom:0; left:0; right:0; z-index:var(--z-header); padding:12px 20px max(12px,env(safe-area-inset-bottom)); background:var(--white); }
 .video-submit .video-feedback { max-height:30dvh; overflow:auto; text-align:left; }
 .video-submit .save-status { margin-top:4px; }
 .video-signature { bottom:12px; right:12px; padding:8px 12px; gap:8px; }
 .video-signature img { max-width:64px; max-height:32px; }
 .video-signature span { font-size:var(--text-caption); }
 .video-signature[data-position=final] { bottom:20px; }
 .video-picker-heading { align-items:flex-start; flex-direction:column; }
 .video-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .result-actions [data-action=video-from-photo] { width:100%; justify-content:center; }
}
@media(min-width:800px) and (min-height:760px) {
 /* Leave room for the studio heading even before the page starts scrolling. */
 .video-settings { position:sticky; top:108px; display:flex; flex-direction:column; max-height:calc(100dvh - 280px); }
 .video-settings-body { overflow-y:auto; min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable; }
 .video-submit { flex:none; }
}
@media(prefers-reduced-motion:reduce) { .video-signature.is-entering { animation:none; } #video-audio::after { transition:none; } }

/* The video home combines its library with two compact creation links. */
.video-entry { margin:32px 0; }
.video-start-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1100px; }
.video-start-card { display:grid; grid-template-columns:48px minmax(0,1fr); align-content:start; gap:8px 20px; padding:24px; text-decoration:none; text-align:left; color:var(--ink); background:var(--white); border:1px solid var(--border); border-radius:16px; cursor:pointer; min-width:0; transition:border-color 160ms ease-out, background-color 160ms ease-out; }
.video-start-card:hover { border-color:var(--ink); background:#fffaf8; }
.video-start-card:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.video-start-symbol { display:grid; place-items:center; width:48px; height:48px; background:#fff0eb; border-radius:12px; grid-row:1 / span 3; }
.video-start-symbol .icon { width:26px; height:26px; }
.video-start-card > strong { grid-column:2; font-size:1.125rem; line-height:1.25; }
.video-start-card > span:not(.video-start-symbol):not(.video-start-link) { grid-column:2; color:var(--muted); line-height:1.5; }
.video-start-link { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding-top:12px; font-weight:600; }
.video-start-link .icon { flex-shrink:0; }
.video-import-form { max-width:1000px; }
.video-entry-back { margin-bottom:24px; }
.video-import-form h2 { margin:0 0 12px; }
.video-entry-help { color:var(--muted); max-width:70ch; margin:0 0 28px; }
.video-import-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.video-import-field h3 { font-size:1.125rem; margin:0 0 4px; }
.video-import-field > p { color:var(--muted); margin:0 0 12px; }
.video-import-zone { position:relative; display:grid; place-items:center; aspect-ratio:4/3; border:1px dashed var(--border); background:var(--surface); border-radius:12px; overflow:hidden; cursor:pointer; }
.video-import-zone:focus-within { outline:3px solid var(--ink); outline-offset:3px; }
.video-import-zone:hover { border-color:var(--ink); }
.video-import-zone input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1; }
.video-import-zone input:disabled { cursor:wait; }
.video-import-zone img { width:100%; height:100%; position:absolute; inset:0; object-fit:contain; }
.video-import-placeholder { display:flex; flex-direction:column; align-items:center; gap:16px; font-weight:600; padding:16px; text-align:center; }
.video-import-zone.has-image .video-import-placeholder { display:none; }
.video-import-file { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; margin-top:8px; }
.video-import-file > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-caption); color:var(--muted); }
.video-import-file button { flex-shrink:0; }
.video-import-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--border); padding-top:24px; margin-top:24px; }
.video-import-footer > p { color:var(--muted); max-width:38ch; }
.video-pair-thumbs { aspect-ratio:16/9; background:var(--surface); }
.video-pair-thumbs img { width:100%; height:100%; object-fit:cover; }
.video-pair-option > span:last-child .video-pair-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; font-weight:600; color:var(--ink); }
.video-pair-cta-compact { display:none; }
.video-pair-option strong { overflow-wrap:anywhere; }
@media(max-width:1000px) { .video-start-options { gap:16px; } .video-start-card { padding:20px; } }
@media(max-width:799px) {
 .video-picker-heading { margin-bottom:16px; }
 .video-pair-option > span:last-child { padding:12px; }
 .video-pair-option strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; min-height:2.7em; font-size:1rem; line-height:1.35; }
 .video-pair-option small { font-size:.875rem; line-height:1.4; margin-top:8px; }
 .video-pair-detail,.video-pair-cta-wide { display:none; }
 .video-pair-cta-compact { display:inline; }
 .video-pair-option > span:last-child .video-pair-cta { min-height:44px; margin-top:8px; gap:6px; font-size:.875rem; }
 .video-pair-cta .icon { width:16px; height:16px; flex:none; }
 .video-start-options { grid-template-columns:1fr; }
 .video-start-card { gap:10px; }
 .video-start-symbol { margin-bottom:4px; }
 .video-start-link { padding-top:12px; }
 .video-import-pair { gap:16px; }
 .video-import-footer { flex-direction:column; align-items:stretch; gap:8px; }
 .video-import-footer .button { width:100%; }
}
@media(max-width:359px) {
 .video-shell { padding-inline:16px; }
 .video-pair-option > span:last-child { padding:10px; }
}
@media(max-width:480px) { .video-import-pair { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .video-start-card { transition:none; } }

.video-operation-field { display:grid; gap:8px; margin-bottom:20px; }
.video-operation-field label { font-weight:600; font-size:var(--text-caption); }
.video-operation-field select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--white); color:var(--ink); font:inherit; }

/* Mes biens and the library use the established Beaver controls and palette. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.properties-shell { max-width:1240px; padding:36px 32px 56px; margin:auto; }
.properties-shell h1:focus,#library-title:focus { outline:none; }
.properties-shell .workspace-heading { margin-bottom:28px; }
.properties-shell h1 { font-size:2rem; overflow-wrap:anywhere; }
.properties-shell .workspace-heading > div { min-width:0; }
.properties-shell .workspace-heading > .button { flex-shrink:0; }
.properties-shell .workspace-heading p { margin-top:8px; font-size:1rem; }
.property-back { margin-bottom:20px; }
.property-context { font-size:.875rem; margin-bottom:8px; max-width:100%; text-align:left; }
.property-context span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-heading .property-context { margin-right:20px; }
.property-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-top:1px solid var(--border); margin-bottom:8px; color:var(--muted); font-size:.875rem; }
.property-search { width:min(100%,340px); }
.properties-shell input:not([type=checkbox]),.properties-shell select,.library-controls input,.library-controls select,.property-assignment select { min-width:0; width:100%; min-height:44px; border:1px solid var(--border); background:var(--white); border-radius:10px; padding:10px 12px; font:inherit; color:var(--ink); }
.property-search input::placeholder { color:var(--muted); }
.property-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.property-card { display:block; width:100%; padding:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; text-align:left; background:var(--white); transition:border-color 160ms; }
.property-card:hover { border-color:var(--ink); }
.property-card > img,.property-card > .property-cover-empty { display:block; width:100%; height:auto; aspect-ratio:1.6; object-fit:cover; }
.property-card > .property-cover-empty { display:grid; }
.property-cover-empty { display:grid; place-items:center; background:var(--surface); color:var(--muted); }
.property-cover-empty .icon { width:40px; height:40px; stroke-width:1.2; }
.property-card-body { display:flex; flex-direction:column; gap:8px; padding:20px; }
.property-card-body > small { color:var(--muted); font-size:.875rem; }
.property-card-body > strong { font-size:1.25rem; line-height:1.3; overflow-wrap:anywhere; }
.property-card-body > span { font-size:.875rem; color:var(--muted); }
.property-card-body .property-card-open { display:flex; align-items:center; justify-content:space-between; color:var(--ink); margin-top:12px; font-weight:600; }
.property-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:360px; padding:40px 24px; border:1px dashed var(--border); border-radius:16px; text-align:center; gap:12px; }
.property-empty > .icon { width:40px; height:40px; stroke-width:1.2; color:var(--muted); margin-bottom:8px; }
.property-empty h2 { font-size:1.5rem; }
.property-empty p { color:var(--muted); max-width:50ch; }
.property-empty .button { margin-top:12px; }
.unassigned-callout { display:flex; justify-content:space-between; align-items:center; padding:24px 0; gap:16px; border-bottom:1px solid var(--border); }
.unassigned-callout > span { display:flex; gap:16px; align-items:center; }
.unassigned-callout small { display:block; color:var(--muted); margin-top:4px; font-size:.875rem; }
.unassigned-callout .text-button { flex-shrink:0; }
.property-local-note { margin-top:24px; color:var(--muted); font-size:.8125rem; }
.property-no-match { padding:40px 0; text-align:center; }
.property-no-match p { margin-inline:auto; }
.property-filters { display:flex; gap:24px; border-bottom:1px solid var(--border); margin:24px 0; }
.property-filters button { display:flex; gap:8px; align-items:center; padding:12px 0; min-height:48px; position:relative; color:var(--muted); }
.property-filters button[aria-pressed=true] { color:var(--ink); font-weight:600; }
.property-filters button[aria-pressed=true]:after { content:''; position:absolute; bottom:-1px; height:3px; background:var(--coral); left:0; right:0; }
.property-filters button span { font-size:.75rem; min-width:20px; padding:0 4px; border-radius:4px; background:var(--surface); text-align:center; }
.property-media-card { border:1px solid var(--border); border-radius:12px; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
/* Keep the cover at the top when optional actions make neighbouring cards taller. */
.property-media-card .library-item { border:0; border-radius:0; flex:1; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; }
.property-media-card .library-item:hover { background:#FAFAF9; }
.property-media-cover { display:block; position:relative; }
.property-media-cover img { display:block; width:100%; height:auto; aspect-ratio:1.5; object-fit:cover; }
.property-media-cover .property-cover-empty { aspect-ratio:1.5; }
.property-media-badge { position:absolute; left:12px; bottom:12px; padding:4px 8px; border-radius:6px; background:var(--white); font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.property-media-badge .icon { width:16px; height:16px; }
.property-media-card .library-item-text strong { overflow-wrap:anywhere; font-size:1rem; min-block-size:2lh; }
.property-media-card .library-item-text small:last-child { display:flex; align-items:center; gap:8px; }
.property-media-note { font-size:.8125rem; padding:0 16px 12px; color:var(--muted); }
.property-media-note button { border:0; background:transparent; color:inherit; font:inherit; padding:6px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.property-media-note button:hover { color:var(--ink); }
.property-media-card .library-video-action { border-top:1px solid var(--border); width:100%; margin:0; padding:12px 16px; font-size:.875rem; }
.property-media-card .library-assign-action { border-top:1px solid var(--border); width:100%; margin:0; padding:12px 16px; font-size:.875rem; text-align:left; }
.library-assign-action > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.library-assign-action small { display:block; font-size:.75rem; font-weight:400; color:var(--muted); margin-bottom:2px; }
.property-media-more { border-top:1px solid var(--border); padding:0 16px; font-size:.875rem; }
.property-media-more > summary { min-height:44px; padding:10px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; color:var(--muted); }
.property-media-more > summary::-webkit-details-marker { display:none; }
.property-media-more summary .icon { width:16px; height:16px; transform:rotate(90deg); }
.property-media-more[open] summary .icon { transform:rotate(-90deg); }
.property-media-more > div { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-bottom:12px; }
.property-media-more .text-button { font-size:.875rem; text-align:left; }
.library-rename-form { width:100%; padding:4px 0 12px; }
.library-rename-form label { display:block; margin-bottom:8px; font-weight:600; }
.library-rename-form input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; color:var(--ink); background:var(--white); }
.library-rename-actions { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.library-rename-actions .button { min-height:44px; padding:10px 16px; font-size:.875rem; }
.property-metadata { margin-top:-12px; font-size:.875rem; }
.property-metadata summary { min-height:44px; display:flex; gap:8px; align-items:center; cursor:pointer; list-style:none; color:var(--muted); }
.property-metadata summary::-webkit-details-marker { display:none; }
.property-metadata summary .icon { width:16px; height:16px; transform:rotate(90deg); }
.property-metadata form { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:20px; background:var(--surface); border-radius:12px; margin-top:8px; }
.property-metadata .property-field { flex:1; min-width:200px; margin:0; }
.property-metadata .property-form-error { width:100%; }
.property-field { display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.property-field label { font-weight:600; }
.property-field label > span { font-weight:400; color:var(--muted); margin-left:8px; font-size:.875rem; }
.property-field small { color:var(--muted); font-size:.8125rem; }
.property-wizard { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; max-width:1000px; margin:40px auto 0; }
.property-wizard-aside { padding-top:12px; }
.property-steps { list-style:none; padding:0; margin:0; }
.property-steps li { display:flex; align-items:center; gap:16px; position:relative; padding-bottom:36px; }
.property-steps li:first-child:after { content:''; height:28px; width:1px; position:absolute; left:19px; top:48px; background:var(--border); }
.property-steps li:last-child { padding-bottom:0; }
.property-steps li > span { display:grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid var(--border); border-radius:50%; }
.property-steps li[aria-current=step] > span { background:var(--ink); border-color:var(--ink); color:var(--white); }
.property-steps small { display:block; color:var(--muted); margin-top:4px; font-size:.8125rem; }
.property-wizard-tip { font-size:.875rem; color:var(--muted); margin-top:32px; max-width:25ch; }
.wizard-context { display:flex; gap:12px; align-items:center; font-weight:600; overflow-wrap:anywhere; }
.property-wizard-form { border:1px solid var(--border); border-radius:16px; padding:32px; min-width:0; }
.property-wizard-form fieldset { border:0; padding:0; margin:0; min-width:0; }
.property-wizard-form h2 { font-size:1.375rem; }
.property-form-intro { color:var(--muted); font-size:.875rem; margin-top:8px; }
.property-wizard-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
.property-form-footnote { color:var(--muted); font-size:.8125rem; margin-top:12px; }
.property-upload { display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 16px; margin-top:24px; border:1px dashed var(--border); border-radius:12px; background:#FAFAF8; text-align:center; }
.property-upload.dragging { background:var(--selected); border-color:var(--coral); }
.property-upload small { color:var(--muted); font-size:.75rem; }
.property-upload-icon { display:grid; place-items:center; width:44px; height:44px; background:var(--selected); border-radius:12px; }
.property-upload-icon .icon { width:24px; height:24px; }
.property-file { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }
.property-file img { flex:none; width:72px; height:72px; object-fit:cover; border-radius:8px; }
.property-file > div { flex:1; min-width:0; }
.property-file strong { display:block; font-size:.875rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-bottom:6px; }
.property-file select { font-size:.8125rem!important; }
.property-file .icon-button { flex:none; }
.property-form-error,#property-file-errors:not(:empty) { background:#FFF0EB; color:var(--ink); border-radius:8px; padding:12px; margin-top:16px; font-size:.875rem; overflow-wrap:anywhere; }
.property-existing { margin-top:24px; border-top:1px solid var(--border); }
.property-existing summary { min-height:48px; display:flex; gap:8px; align-items:center; list-style:none; cursor:pointer; font-weight:600; }
.property-existing summary::-webkit-details-marker { display:none; }
.property-existing summary > span { background:var(--surface); padding:2px 6px; border-radius:4px; font-size:.75rem; }
.property-existing summary .icon { margin-left:auto; transform:rotate(90deg); }
.property-existing[open] summary .icon { transform:rotate(-90deg); }
.property-existing > p { color:var(--muted); font-size:.8125rem; margin-bottom:12px; }
.property-existing-list { max-height:340px; overflow:auto; padding:4px; margin:-4px; }
.property-existing-item { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:8px; cursor:pointer; }
.property-existing-item:has(:checked) { border-color:var(--ink); background:var(--selected); }
.property-existing-item input { accent-color:var(--ink); width:18px; height:18px; flex:none; }
.property-existing-item img { width:56px; height:48px; object-fit:cover; border-radius:6px; flex:none; }
.property-existing-item > span { min-width:0; }
.property-existing-item strong { display:block; font-size:.875rem; overflow-wrap:anywhere; }
.property-existing-item small { display:block; font-size:.75rem; color:var(--muted); margin-top:4px; }
.library-controls { padding-top:20px; }
.library-property-filter { display:flex; gap:12px; align-items:center; min-width:0; }
.library-property-filter select { max-width:300px; }
.library-property-group { margin-bottom:40px; }
.library-group-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:20px 0 16px; }
.library-group-heading h2 { min-width:0; }
.library-group-heading .text-button { font-size:1.125rem; text-align:left; overflow-wrap:anywhere; }
.library-group-heading > span { color:var(--muted); font-size:.8125rem; flex:none; }
.property-assignment { padding:24px; margin:24px 0; background:var(--surface); border-radius:12px; scroll-margin-top:130px; }
.property-assignment h2 { overflow-wrap:anywhere; }
.property-assignment p { color:var(--muted); font-size:.875rem; margin-top:8px; }
.property-assignment > label { display:block; margin-top:16px; font-size:.875rem; font-weight:600; }
.property-assignment-controls { display:flex; gap:12px; align-items:center; margin-top:8px; }
.property-assignment-controls select { flex:1; }
.property-assignment-controls input { flex:1; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--white); color:var(--ink); font:inherit; }
.property-assignment-controls input::placeholder { color:var(--muted); }
.property-assignment > .text-button { margin-top:8px; }
@media(min-width:800px) and (max-width:1100px) {
 .app-header { gap:20px; padding-inline:20px; }
 .app-nav { gap:16px; }
 .nav-prefix { display:none; }
 .property-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .property-wizard { gap:32px; grid-template-columns:200px minmax(0,1fr); }
}
@media(max-width:799px) {
 .properties-shell { padding:24px 20px 40px; }
 .properties-shell h1 { font-size:1.625rem; }
 .properties-shell .workspace-heading { flex-direction:column; align-items:flex-start; gap:16px; }
 .properties-shell .workspace-heading > .button { max-width:none; }
 .property-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .property-card-body { padding:16px; }
 .property-wizard { display:block; margin-top:24px; }
 .property-wizard-aside { padding:0; }
 .property-steps { display:flex; gap:24px; margin-bottom:24px; }
 .property-steps li { padding-bottom:0; gap:8px; flex:1; }
 .property-steps li:first-child:after { display:none; }
 .property-steps li > span { width:32px; height:32px; }
 .property-steps small { display:none; }
 .property-wizard-tip,.wizard-context { display:none; }
 .property-wizard-form { padding:24px; }
 .unassigned-callout { align-items:flex-start; flex-direction:column; gap:8px; }
 .property-toolbar { align-items:flex-start; flex-direction:column; }
 .property-search { width:100%; }
 .library-controls { gap:12px; }
 .library-property-filter { width:100%; }
 .library-property-filter select { max-width:none; }
 .property-metadata form { padding:16px; }
 .property-metadata .property-field { min-width:100%; }
 .property-assignment { padding:16px; }
 .property-assignment-controls { flex-wrap:wrap; }
 .property-assignment-controls select,.property-assignment-controls input { flex-basis:100%; }
 .property-filters { gap:20px; }
 .property-empty { min-height:300px; padding:28px 16px; }
 .property-empty h2 { font-size:1.25rem; }
 .property-empty p { font-size:.875rem; }
}
@media(max-width:520px) {
 .property-media-card .library-item-text strong { min-block-size:auto; }
 .app-nav { gap:12px; justify-content:space-between; }
 .app-nav .nav-link { padding-inline:0; gap:0; font-size:.8125rem; }
 .app-nav .nav-link > .icon { display:none; }
 .app-nav .nav-link[data-action=studio] > span,.app-nav .nav-link[data-action=video] > span { text-transform:capitalize; }
 .property-grid { grid-template-columns:1fr; }
 .property-wizard-form { padding:20px 16px; }
 .property-filters { gap:0; justify-content:space-between; }
 .property-filters button { font-size:.8125rem; gap:4px; }
 .property-filters button span { min-width:16px; font-size:.6875rem; padding:0 3px; }
 .property-file { gap:8px; }
 .property-file img { width:48px; height:60px; }
 .property-file .icon-button { width:32px; min-width:32px; padding:4px; }
 .property-existing-item { gap:8px; padding:8px; }
 .property-existing-item img { width:44px; height:44px; }
}
@media(max-width:399px) {
 .properties-shell { padding-inline:16px; }
 .app-nav { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .property-card { transition:none; } }

/* Archive navigation uses document links in the connected app, like the studio pages. */

/* Agency settings inherit Beaver's existing type, palette and compact controls. */
.agency-nav { margin-left:auto; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; font-size:.875rem; font-weight:600; white-space:nowrap; padding:8px 0; border-radius:8px; }
.agency-nav:hover { text-decoration:underline; text-underline-offset:4px; }
.agency-nav[aria-current=page] { background:var(--selected); padding-inline:12px; }
.app-header { gap:28px; }
.app-header .demo-badge { margin-left:0; }
.agency-shell { max-width:1240px; margin:auto; padding:36px 32px 56px; }
.agency-shell .workspace-heading { align-items:center; margin-bottom:36px; }
.agency-shell h1 { font-size:2rem; }
.agency-shell h1:focus { outline:none; }
.agency-shell .workspace-heading p { font-size:1rem; margin-top:8px; }
.agency-saved-indicator { display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--muted); }
.agency-saved-indicator .icon { width:16px; height:16px; }
.agency-layout { display:grid; grid-template-columns:minmax(320px,400px) minmax(0,1fr); gap:64px; align-items:start; }
.agency-form { min-width:0; }
.agency-form > fieldset { margin:0; padding:0; border:0; min-width:0; }
.agency-form h2 { font-size:1.125rem; }
.agency-intro { color:var(--muted); font-size:.875rem; margin-top:8px; }
.agency-field { margin-top:24px; }
.agency-field > label,.agency-field-label { display:block; margin-bottom:8px; font-weight:600; font-size:.875rem; }
.agency-field-label > span { font-weight:400; color:var(--muted); margin-left:8px; font-size:.8125rem; }
.agency-field > input { min-height:48px; padding:12px; border:1px solid var(--border); background:var(--white); border-radius:10px; width:100%; }
.agency-field > input::placeholder { color:var(--muted); }
.agency-field-hint { display:block; margin-top:8px; font-size:.8125rem; color:var(--muted); overflow-wrap:anywhere; }
.agency-logo-upload { display:flex; align-items:center; gap:20px; padding:20px; border:1px dashed var(--border); border-radius:12px; background:#FAFAF9; }
.agency-logo-upload.dragging { background:var(--selected); border-color:var(--coral); }
.agency-logo-thumb { width:80px; height:72px; flex:none; display:grid; place-items:center; background:var(--white); border-radius:8px; padding:8px; }
.agency-logo-thumb img { max-width:100%; max-height:56px; object-fit:contain; }
.agency-logo-thumb .icon { width:28px; height:28px; color:var(--muted); }
.agency-logo-controls { display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:0; }
.agency-logo-controls .button { white-space:normal; text-align:left; }
.agency-logo-controls .text-button { font-size:.8125rem; }
.agency-defaults { border-top:1px solid var(--border); margin-top:32px; padding-top:28px; }
.agency-defaults h2 { margin-bottom:12px; }
.agency-preference { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; cursor:pointer; }
.agency-preference > span { min-width:0; }
.agency-preference strong { font-weight:600; font-size:.875rem; display:block; }
.agency-preference small { display:block; color:var(--muted); margin-top:4px; font-size:.8125rem; }
.agency-preference input { appearance:none; -webkit-appearance:none; width:40px; height:24px; border-radius:24px; background:var(--border); border:1px solid var(--border); position:relative; flex:none; cursor:pointer; margin:0; }
.agency-preference input:before { content:''; position:absolute; width:18px; height:18px; top:2px; left:2px; border-radius:50%; background:var(--white); transition:transform 150ms var(--ease); }
.agency-preference input:checked { background:var(--ink); border-color:var(--ink); }
.agency-preference input:checked:before { transform:translateX(16px); }
.agency-position { border:0; padding:0; margin:12px 0 0; min-width:0; }
.agency-position legend { font-size:.8125rem; color:var(--muted); padding:0; margin-bottom:8px; }
.agency-position .segmented button { flex:1; }
.agency-save-row { display:flex; align-items:flex-start; flex-direction:column; gap:8px; margin-top:28px; }
.agency-save-row .text-button { font-size:.8125rem; }
.agency-save-status { font-size:.8125rem; color:var(--muted); margin-top:12px; }
.agency-error { padding:12px; background:var(--selected); border-radius:8px; margin-top:12px; font-size:.875rem; }
.agency-error .text-button { margin-top:8px; }
.agency-preview { position:sticky; top:112px; min-width:0; }
.agency-preview-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.agency-preview-heading h2 { font-size:1rem; }
.agency-medium-switch { display:flex; border-bottom:1px solid var(--border); flex:none; gap:16px; }
.agency-medium-switch button { min-height:44px; padding:8px 0; color:var(--muted); position:relative; font-size:.875rem; }
.agency-medium-switch button[aria-pressed=true] { color:var(--ink); font-weight:600; }
.agency-medium-switch button[aria-pressed=true]:after { content:''; position:absolute; bottom:-1px; height:3px; left:0; right:0; background:var(--coral); }
.agency-preview-stage,.export-preview { position:relative; border-radius:12px; overflow:hidden; background:var(--surface); isolation:isolate; }
.agency-preview-stage > img,.export-preview > img { width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; }
.agency-preview-label { position:absolute; top:16px; left:16px; font-size:.75rem; background:var(--white); padding:4px 8px; border-radius:6px; }
.agency-preview-caption { font-size:.8125rem; margin-top:12px; color:var(--muted); }
.agency-explanation { display:flex; gap:12px; padding-top:24px; margin-top:24px; border-top:1px solid var(--border); }
.agency-explanation p { font-size:.875rem; }
.agency-explanation .icon { color:var(--muted); margin-top:2px; }
.agency-existing-note { font-size:.8125rem; color:var(--muted); margin:12px 0 0 32px; }
.agency-demo-link { margin:20px 0 0 32px; font-size:.8125rem; color:var(--muted); }
.video-agency-reuse { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.video-agency-reuse .text-button { font-size:.8125rem; text-align:left; }
.export-preview { margin-top:16px; }
.export-preview .video-signature { bottom:16px; right:16px; max-width:80%; padding:8px 12px; gap:8px; }
.export-preview .video-signature span { font-size:.875rem; }
.export-preview .video-signature img { max-width:72px; max-height:40px; }
.export-signature-toggle { margin:16px 0; }
@media(min-width:800px) and (max-width:1100px) {
 .app-header { gap:20px; }
 .app-header .demo-badge { display:none; }
 .agency-layout { grid-template-columns:340px minmax(0,1fr); gap:32px; }
 .agency-preview-heading { align-items:flex-start; flex-direction:column; gap:8px; }
 .agency-preview .video-signature { padding:8px 12px; gap:8px; max-width:86%; }
 .agency-preview .video-signature span { font-size:.875rem; }
 .agency-preview .video-signature img { max-width:64px; max-height:40px; }
}
@media(max-width:799px) {
 .app-header { column-gap:12px; }
 .app-header .demo-badge { display:none; }
 .agency-nav { font-size:.8125rem; margin-left:auto; }
 .agency-shell { padding:24px 20px 40px; }
 .agency-shell h1 { font-size:1.625rem; }
 .agency-shell .workspace-heading { margin-bottom:24px; align-items:flex-start; flex-direction:column; }
 .agency-shell .workspace-heading p { font-size:.875rem; }
 .agency-layout { display:flex; flex-direction:column; gap:28px; }
 .agency-form,.agency-preview { width:100%; }
 .agency-preview { position:static; order:-1; }
 .agency-preview-heading h2 { font-size:.875rem; }
 .agency-preview-stage { max-width:440px; margin:auto; }
 .agency-preview-stage > img { max-height:280px; object-fit:contain; }
 .agency-preview-label { top:8px; left:8px; font-size:.6875rem; }
 .agency-preview .video-signature { max-width:82%; }
 .agency-explanation,.agency-existing-note,.agency-demo-link { display:none; }
 .agency-save-row > .button { width:100%; }
 .agency-logo-upload { gap:12px; padding:16px; }
 .agency-logo-thumb { width:64px; height:64px; }
 .agency-preview-heading { gap:12px; }
}
@media(max-width:399px) {
 .agency-shell { padding-inline:16px; }
 .agency-logo-upload { padding:12px; }
 .agency-logo-controls .button { padding:8px 10px; }
 .agency-preview .video-signature span { font-size:.8125rem; }
 .agency-preview .video-signature img { max-width:48px; max-height:32px; }
}
@media(prefers-reduced-motion:reduce) { .agency-preference input:before { transition:none; } }
#agency-save:disabled { cursor:default; opacity:1; color:var(--muted); background:var(--surface); }
#agency-fields:disabled #agency-save { cursor:wait; }

/* Add the account link without changing the established photo controls. */
.app-nav a.nav-link,
a.agency-nav {
  text-decoration: none;
}
.billing-nav {
  text-decoration: none;
  margin-left: 0;
}
@media (min-width: 1101px) {
  .app-header {
    gap: 20px;
  }
  .app-nav {
    gap: 20px;
  }
}
@media (min-width: 800px) and (max-width: 1100px) {
  .app-header {
    gap: 16px;
  }
  .app-nav {
    gap: 12px;
  }
  .nav-prefix {
    display: none;
  }
  .app-header .demo-badge {
    display: none;
  }
  .brand img:last-child {
    width: 88px;
  }
}
@media (max-width: 799px) {
  .app-header {
    column-gap: 16px;
  }
  .app-header .demo-badge {
    display: none;
  }
  .billing-nav {
    min-height: 44px;
  }
}
@media (max-width: 399px) {
  .app-header {
    column-gap: 10px;
  }
  .app-header .brand img:last-child {
    width: 72px;
  }
  .app-header .agency-nav {
    font-size: 0.75rem;
  }
  .app-header .agency-nav .icon {
    display: none;
  }
  .app-header .agency-nav[aria-current='page'] {
    padding-inline: 8px;
  }
}

.enhancement-error{padding:16px;background:#FFF0EB;color:#292524;position:relative;z-index:50}