.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%;
  }
}

/* Omni workbench theme: one dark surface system with teal as the only accent. */
:root {
  color-scheme: dark;
  --ink: #e9f1f0;
  --muted: #8da3a1;
  --line: #263a3a;
  --bg: #091012;
  --paper: #10191b;
  --green: #32b6a6;
  --green-dark: #58cbbb;
  --mint: #183532;
  --navy: #0c1517;
  --danger: #ff7979;
  --warn: #e8b65d;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body,
.main,
.login-panel {
  background: var(--bg);
  color: var(--ink);
}

.login-story {
  background: radial-gradient(circle at 74% 18%, rgba(50, 182, 166, 0.2), transparent 27%), linear-gradient(145deg, #0a1114, #0d2021 68%, #123d38 145%);
}

.sidebar,
pre,
.studio-progress-visual {
  background: #0c1517;
}

.panel,
.stat-card,
.docs-main,
.docs-aside,
.pricing-account,
.pricing-tier,
.pricing-notes,
.test-form-card,
.studio-compose,
.studio-shelf,
.studio-output,
dialog {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

th,
.doc-table th {
  background: #0d1719;
  color: #829793;
}

td,
.cell-main strong,
.login-card label,
dialog label,
.test-form-card label,
.quote-form label,
.studio-fieldset legend,
.studio-label,
.studio-label > span:first-child {
  color: var(--ink);
}

td,
tbody tr,
.switch-row {
  border-color: var(--line);
}

tbody tr:hover,
.task-row-link:hover,
.task-row-link:focus-within {
  background: #132224;
}

.login-card input,
dialog input,
dialog select,
.filters select,
.date-filter,
.test-form-card textarea,
.test-form-card select,
.quote-form input,
.studio-label textarea,
.studio-label select,
.asset-url-row input,
.asset-url-row select,
.selected-asset,
.recent-asset,
.mini-button,
button.secondary {
  background: #0c1517;
  border-color: #2b4141;
  color: var(--ink);
}

.mode-tabs,
.output-mode,
.task-input-params > div,
.billing-breakdown > div,
.quote-result,
.doc-flow,
.doc-note,
.tip,
.task-prompt,
.task-input-section,
.task-input-card,
.status-guide article,
.studio-usage > div,
.studio-free-note,
.studio-balance {
  background: #0d1719;
  border-color: var(--line);
  color: var(--ink);
}

.mode-tabs {
  grid-template-columns: repeat(3, 1fr);
}

.mode-tabs button.active,
.output-mode button.active,
.recent-asset:hover,
.studio-upload-zone:hover,
.studio-upload-zone:focus-visible {
  background: #17302e;
  color: #81ded1;
}

.pricing-tier.current,
.task-input-section .task-prompt,
.task-input-section .task-input-card {
  background: #0d1c1e;
  border-color: #2c4f4b;
  color: var(--ink);
}

.studio-upload-zone {
  background: #0d1719;
  border-color: #3a5754;
  color: var(--ink);
}

.studio-empty > span,
.stat-icon,
.doc-title > span,
.input-role {
  background: var(--mint);
  color: var(--green);
}

.notice,
.doc-callout,
.quote-result.accent,
.service-status {
  background: #122724;
  border-color: #27534d;
  color: #a8d8d1;
}

.chip.success,
.chip.active {
  background: #173b35;
  color: #7de0cf;
}

.chip.running {
  background: #172d3a;
  color: #8bc5e8;
}

.chip.failed,
.chip.disabled {
  background: #3a2022;
  color: #ff9999;
}

.doc-table code,
.doc-section code,
.doc-intro code {
  background: #172426;
  color: #73d4c6;
}

.status-guide {
  grid-template-columns: repeat(4, 1fr);
}

button.primary,
.studio-result-actions a {
  background: #239d90;
  color: #f5fffd;
}

button.primary:hover,
.studio-result-actions a:hover {
  background: #2bb2a2;
}

button:active,
.start-choice:active,
a.result-link:active {
  transform: translateY(1px);
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline-color: rgba(50, 182, 166, 0.5);
}

@media (max-width: 760px) {
  #page-studio.active .studio-action-dock {
    background: rgba(16, 25, 27, 0.96);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.34);
  }

  .status-guide {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}