/* Quiet, original backgrounds sit underneath the independent character layer. */
.featured-visual,.avatar {
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.tone-1 .featured-visual,.avatar.variant-1 { background-image:url('/assets/backgrounds/library.svg'); }
.tone-2 .featured-visual,.avatar.variant-2 { background-image:url('/assets/backgrounds/desk.svg'); }
.tone-3 .featured-visual,.avatar.variant-3 { background-image:url('/assets/backgrounds/garden.svg'); }
.tone-4 .featured-visual,.avatar.variant-4 { background-image:url('/assets/backgrounds/shelf.svg'); }
.decor-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
}
.decor-panel p { margin:0; font-size:13px; color:var(--muted); }
.decor-panel .text-button { flex-shrink:0; }
#decor-dialog { width:650px; }
#decor-dialog>h2 { margin-bottom:6px; }
#decor-dialog .dialog-intro { margin-bottom:18px; }
.decor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.decor-stage {
  grid-column:1 / -1;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  height:190px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#F8F8FF;
}
.decor-background {
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.decor-character {
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.decor-character-default.profile-art {
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:auto;
  height:100%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  transform-origin:center;
  background-color:transparent;
}
.featured-visual>.decor-character-default.profile-art { width:auto; height:100%; }
.custom-decor::before { display:none; }
.custom-decor { background-image:none!important; }
.custom-decor>.decor-background,.custom-decor>.decor-character { width:100%; height:100%; }
.asset-slot {
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--ghost);
}
.asset-slot>label { display:block; font-size:13px; font-weight:700; margin-bottom:7px; }
.asset-slot input[type=file] { display:block; width:100%; max-width:100%; font-size:12px; color:var(--muted); }
.asset-slot input[type=file]::file-selector-button {
  margin:0 9px 0 0;
  padding:7px 10px;
  border:1px solid #dfd8df;
  border-radius:6px;
  background:white;
  color:var(--ink);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.asset-slot input[type=file]:hover::file-selector-button { border-color:#ddbaae; }
.asset-meta { display:block; margin:9px 0 0; overflow-wrap:anywhere; font-size:12px; color:var(--muted); }
.asset-remove { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:3px 0; margin-top:4px; border:0; background:none; color:var(--accent); font-size:12px; }
.asset-remove .icon { width:15px; height:15px; }
.background-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:13px 0 0; }
.background-option,.background-options button {
  min-width:0;
  padding:3px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--white);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.background-option img,.background-options button img { display:block; width:100%; height:38px; object-fit:cover; border-radius:4px; }
.background-option span,.background-options button span { display:block; margin-top:3px; padding-bottom:1px; }
.background-option:hover,.background-options button:hover { border-color:#ddbaae; }
.background-option[aria-pressed=true],.background-option.selected,.background-options button[aria-pressed=true] { border-color:var(--tomato); box-shadow:0 0 0 1px var(--tomato); color:var(--accent); }
.decor-options { grid-column:1 / -1; }
.decor-options>label,.decor-options-heading { display:block; margin:2px 0 8px; font-size:13px; font-weight:700; }
.decor-default-character { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:14px; }
.decor-default-character label { font-size:13px; font-weight:700; }
.decor-default-character select { min-width:140px; max-width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--white); font-size:13px; }
.character-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.character-options button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:36px; padding:7px 5px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--muted); font-size:12px; }
.character-options button:hover { border-color:#ddbaae; }
.character-options button[aria-pressed=true] { border-color:var(--tomato); box-shadow:0 0 0 1px var(--tomato); color:var(--accent); }
.character-options .profile-art { width:54px; height:54px; background-color:transparent; }
#decor-dialog .dialog-actions { flex-wrap:wrap; }
#decor-reset { margin-right:auto; }
.decor-adjustments {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:17px;
  padding:15px 0 2px;
  border-top:1px solid var(--line);
}
.decor-adjustments label { display:block; min-width:0; font-size:12px; color:var(--muted); }
.decor-adjustments label>span { display:flex; justify-content:space-between; gap:7px; margin-bottom:7px; }
.decor-adjustments output { font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums; }
.decor-adjustments input[type=range] { display:block; width:100%; margin:7px 0; accent-color:var(--tomato); cursor:pointer; }
.decor-error { font-size:13px; color:#a02722; line-height:1.65; margin:12px 0 0; overflow-wrap:anywhere; }
.decor-error:empty { display:none; }
.decor-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; }
.decor-footer .dialog-actions { margin-top:0; }
.decor-footer>.text-button { color:var(--muted); }
@media(max-width:760px) {
  #decor-dialog { padding:22px; }
  .decor-stage { height:172px; }
  .decor-panel { align-items:flex-start; padding:12px 14px; }
  .asset-slot { padding:12px; }
}
@media(max-width:480px) {
  .decor-grid { gap:11px; }
  .asset-slot { grid-column:1 / -1; }
  .decor-stage { height:154px; }
  
  .decor-default-character { align-items:flex-start; flex-wrap:wrap; gap:8px; }
  .decor-default-character select { flex:1; }
  .decor-adjustments { grid-template-columns:1fr; gap:9px; margin-top:14px; }
  .decor-adjustments label>span { margin-bottom:4px; }
  .decor-adjustments input[type=range] { margin-top:5px; }
  .decor-footer { align-items:flex-start; flex-wrap:wrap; gap:9px; }
  .decor-footer .dialog-actions { margin-left:auto; }
  .background-option img,.background-options button img { height:32px; }
}

/* The live composition spans both slots; background and character stay independent. */
.decor-preview-column,.decor-assets{grid-column:1 / -1;min-width:0}
.decor-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.private-panel .decor-panel{margin:0;padding:0;border:0;background:transparent;justify-content:flex-start;flex:1;flex-wrap:wrap}
@media(max-width:480px){.decor-assets{grid-template-columns:1fr}.private-panel .decor-panel{gap:8px}}