.production-studio {
  --production-accent: #ebff75;
  display: grid;
  gap: 24px;
  max-width: 1500px;
  margin: auto;
}
.production-studio h2 {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.035em;
  margin: 8px 0;
}
.production-studio p {
  line-height: 1.6;
  color: var(--muted, #bcb8c9);
}
.production-kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--production-accent) !important;
  font-weight: 700;
}
.production-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 16px 0;
}
.production-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px !important;
  border: 1px solid #ffffff26;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff13, #ffffff05);
  cursor: pointer;
  min-width: 0;
  backdrop-filter: blur(12px);
}
.production-mode:has(input:checked) {
  border-color: var(--production-accent);
  background: linear-gradient(135deg, #d9ff5b20, #ffffff08);
  box-shadow: 0 0 28px #ddff6d12;
}
.production-mode input {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 18px !important;
  height: 18px;
  accent-color: var(--production-accent);
}
.production-mode strong {
  font-size: 17px;
  padding-right: 16px;
}
.production-mode small {
  color: var(--muted, #bcb8c9);
  line-height: 1.5;
}
.production-mode-icon {
  font-size: 24px;
  color: var(--production-accent);
}
.production-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 24px;
  align-items: start;
}
.production-studio .panel {
  min-width: 0;
  padding: 24px;
}
.production-studio label {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.production-studio input:not([type="checkbox"]):not([type="radio"]),
.production-studio textarea,
.production-studio select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 12px;
  background: #080911aa;
  border: 1px solid #ffffff30;
  color: inherit;
  padding: 12px;
  font: inherit;
}
.production-studio textarea {
  resize: vertical;
  min-height: 85px;
}
.production-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.production-studio .production-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.production-check input {
  flex: 0 0 18px;
  margin-top: 4px;
}
.production-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.production-studio .btn.primary {
  background: linear-gradient(135deg, #edff8960, #b1d13438);
  color: #f7ffd1;
  border: 1px solid #e8ff83b0;
  box-shadow:
    inset 0 1px #ffffff50,
    0 0 20px #dfff4914;
}
.production-studio .btn:focus-visible,
.production-mode:focus-within {
  outline: 3px solid #ebff75;
  outline-offset: 3px;
}
.production-note {
  border-left: 3px solid #c1a0ff;
  background: #ae84ff0b;
  padding: 12px 16px;
  border-radius: 0 12px 12px 0;
  font-size: 14px;
}
.production-status {
  min-height: 24px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.production-list {
  display: grid;
  gap: 10px;
  max-height: 500px;
  overflow: auto;
}
.production-item {
  display: block;
  text-align: left;
  width: 100%;
  padding: 14px;
  border: 1px solid #ffffff24;
  background: #ffffff08;
  color: inherit;
  border-radius: 12px;
  cursor: pointer;
}
.production-item[aria-pressed="true"] {
  border-color: #ebff75;
}
.production-item strong,
.production-item small {
  display: block;
  overflow-wrap: anywhere;
}
.production-item small {
  color: #bcb8c9;
  margin-top: 5px;
}
.production-scenes {
  display: grid;
  gap: 14px;
}
.production-scene {
  padding: 16px;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  background: #ffffff05;
}
.production-scene label:last-child {
  margin-bottom: 0;
}
.production-quote {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid #eaff7680;
  background: #caff6410;
}
.production-quote strong {
  font-size: 24px;
}
.production-preview img,
.production-preview video {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  border-radius: 14px;
  background: #050608;
}
.production-studio [hidden] {
  display: none !important;
}
.production-earnings {
  overflow: auto;
}
.production-earnings table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.production-earnings td,
.production-earnings th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ffffff24;
}
.production-studio a {
  color: #dbeb87;
}
.production-studio details summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
}
.production-badge {
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 20px;
  background: #aa87ff24;
  color: #dfcbff;
}
.production-progress {
  height: 6px;
  border: 0;
  border-radius: 8px;
  background: #ffffff20;
  width: 100%;
  accent-color: #dfff75;
}
.production-studio .aspect-ratio-hint {
  font-size: 12px;
}
.studio-tabs a[data-tab="create"] {
  color: #f0ff85;
}
.studio-tabs a[data-tab="create"][aria-current="page"] {
  border-color: #eaff75;
  background: #dbff7417;
}
@media (max-width: 1000px) {
  .production-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .production-columns {
    grid-template-columns: 1fr;
  }
  .production-studio .panel {
    padding: 18px;
  }
}
@media (max-width: 520px) {
  .production-row {
    grid-template-columns: 1fr;
  }
  .production-modes {
    gap: 8px;
  }
  .production-mode {
    padding: 13px !important;
  }
  .production-mode strong {
    font-size: 15px;
  }
  .production-mode small {
    font-size: 12px;
  }
  .production-studio h2 {
    font-size: 29px;
  }
  .production-actions .btn {
    flex: 1;
    min-width: 130px;
  }
  .production-studio .panel {
    padding: 15px;
  }
  .production-studio {
    gap: 14px;
  }
}

.production-row {
  align-items: start;
}
.production-row label {
  align-content: start;
}
.production-row select {
  height: 48px;
}