* { box-sizing: border-box; }

body { margin: 0; }

button, input, select { font: inherit; }

.studio-shell {
  width: min(100% - 24px, 980px);
  margin-inline: auto;
  padding: 24px 0 48px;
}

.studio-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.studio-header h1 { margin: 3px 0 8px; font-size: clamp(1.8rem, 7vw, 3rem); }
.studio-header p { margin: 0; color: var(--theme-color-text-muted); }
.studio-kicker { letter-spacing: .16em; font-size: .72rem; }

.studio-preview {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 28px;
}

.studio-preview__background {
  position: absolute;
  inset: -28px;
  background-image: var(--theme-background);
  background-position: var(--theme-background-position);
  background-size: var(--theme-background-size);
  filter: blur(var(--theme-background-blur));
}

.studio-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--studio-atmosphere-overlay, transparent);
}

.studio-preview__room {
  position: relative;
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  filter:
    brightness(var(--studio-atmosphere-brightness, 1))
    contrast(var(--studio-atmosphere-contrast, 1));
  z-index: 1;
}

.studio-preview__room p { margin: 0; font-weight: 700; }
.moon { position: absolute; top: 24px; right: 28px; font-size: 2.4rem; color: var(--theme-color-primary); }

.profile-card, .panel {
  border-radius: 22px;
  padding: 20px;
}

.profile-card { margin-top: 18px; }
.profile-card h2, .panel h2 { margin: 0 0 16px; font-size: 1.05rem; }
.profile-card dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; }
.profile-card dl div { padding: 10px; background: var(--theme-color-surface-soft); border-radius: 14px; }
.profile-card dt { color: var(--theme-color-text-muted); font-size: .75rem; }
.profile-card dd { margin: 5px 0 0; overflow-wrap: anywhere; }

.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.panel { display: grid; align-content: start; gap: 14px; }
.panel--wide { grid-column: 1 / -1; }
.panel label { display: grid; gap: 7px; color: var(--theme-color-text-muted); font-size: .88rem; }
.panel input:not([type="range"]), .panel select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--theme-color-border);
  border-radius: 12px;
  padding: 9px 11px;
  color: var(--theme-color-text);
  background: var(--theme-color-surface-soft);
}
.panel input[type="range"] { width: 100%; accent-color: var(--theme-color-primary); }

.button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  color: #fff;
  background: var(--theme-color-primary-strong);
  cursor: pointer;
}
.button--quiet { color: var(--theme-color-text); background: var(--theme-color-surface-soft); }
.studio-status { min-height: 1.5em; text-align: center; color: var(--theme-color-text-muted); }
.studio-status.is-error { color: var(--theme-color-danger); }
.atmosphere-status { color: var(--theme-color-primary); font-size: 1.05rem; }
.studio-preview[data-avatar-effect="moon-glow"] [data-avatar-preview] {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--theme-color-primary) 72%, transparent));
}
.studio-preview[data-avatar-effect="warm-rim"] [data-avatar-preview] {
  filter: drop-shadow(0 0 14px rgba(225, 151, 104, .5));
}
.studio-preview[data-atmosphere-animation="morning-mist"] .studio-preview__background {
  animation: atmosphere-drift 12s ease-in-out infinite alternate;
}
.preset-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-preview span {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--theme-color-text-muted);
  background: var(--theme-color-surface-soft);
  font-size: .78rem;
}

@keyframes atmosphere-drift {
  from { transform: scale(1.02) translateX(-4px); }
  to { transform: scale(1.05) translateX(4px); }
}

@media (max-width: 680px) {
  .studio-shell { width: min(100% - 20px, 980px); padding-top: 16px; }
  .studio-header { align-items: start; flex-direction: column; }
  .studio-grid { grid-template-columns: 1fr; }
  .profile-card dl { grid-template-columns: repeat(2, 1fr); }
  .studio-preview, .studio-preview__room { min-height: 220px; }
}