.studio-result-actions a {
  background: var(--green);
  color: #fcfdfd;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 750;
}

.studio-result-actions a:hover {
  background: var(--green-dark);
}

/* Keep the creation flow calm and compact without hiding the final action. */
textarea,
button,
input,
select {
  font: inherit;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(16, 138, 115, 0.28);
  outline-offset: 2px;
}

.studio-account-state {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.studio-free-note,
.studio-balance {
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  text-align: right;
}

.studio-free-note {
  border-color: rgba(16, 138, 115, 0.22);
  background: var(--mint);
  color: var(--green-dark);
}

.studio-free-note strong,
.studio-balance strong {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.studio-free-note span,
.studio-balance span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.studio-free-note[hidden] {
  display: none;
}

.studio-cost-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.studio-cost-bar > span:last-child {
  text-align: right;
}

.studio-result-actions,
.studio-result-actions > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.studio-result-actions .secondary,
.studio-result-actions a {
  min-height: 38px;
}

.studio-shelf,
.studio-output,
.studio-history-panel {
  min-width: 0;
}

.field-help,
.studio-label small,
.switch-row small,
.check-row small {
  font-size: 11px;
  line-height: 1.5;
}

@media (min-width: 981px) {
  .topbar {
    min-height: 70px;
    margin-bottom: 22px;
  }

  .studio-compose {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 38px);
    overflow: hidden;
  }

  .studio-compose form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .studio-form-scroll {
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }

  .studio-action-dock {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
}

@media (max-width: 760px) {
  #page-studio.active {
    padding-bottom: 132px;
  }

  #page-studio.active .studio-action-dock {
    position: fixed;
    z-index: 40;
    right: 12px;
    bottom: 0;
    left: 12px;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -12px 32px rgba(13, 38, 51, 0.12);
    backdrop-filter: blur(12px);
  }

  .studio-cost-bar {
    gap: 8px;
    font-size: 11px;
  }

  .studio-compose-head {
    align-items: flex-start;
  }

  .studio-account-state {
    flex-direction: column;
  }

  .studio-free-note,
  .studio-balance {
    min-width: 66px;
    padding: 7px 9px;
  }

  .studio-result-actions,
  .studio-result-actions > div {
    align-items: stretch;
  }

  .studio-result-actions .secondary,
  .studio-result-actions a {
    flex: 1 1 132px;
    text-align: center;
  }

  .studio-history-panel .table-wrap {
    max-width: 100%;
  }
}