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

#studioModeTabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.studio-model-field {
  margin-top: 16px;
}

.studio-model-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.studio-model-price > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(8, 125, 104, 0.22);
  border-radius: 8px;
  background: var(--mint);
}

.studio-model-price span,
.studio-model-price small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.studio-model-price strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--green-dark);
  font-size: 17px;
  line-height: 1.3;
  white-space: pre-line;
}

.studio-price-lines {
  display: grid;
  gap: 5px;
  margin-top: 5px;
}

.studio-price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.studio-price-line span:first-child {
  color: inherit;
  font-size: inherit;
}

.studio-price-line strong {
  margin: 0;
  color: inherit;
  font-size: inherit;
  white-space: nowrap;
}

.studio-specs > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fbfa;
}

.studio-specs span,
.studio-specs small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.studio-specs strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

#studioReferenceField .asset-url-row {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 8px 0;
}

#studioReferenceField .studio-selected-list {
  margin-top: 8px;
}

/* 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 .studio-action-dock {
    position: static;
    margin-top: 14px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: none;
  }

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

@media (max-width: 430px) {
  .studio-specs,
  .studio-model-price {
    grid-template-columns: 1fr;
  }
}
.studio-upload-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.studio-upload-zone.is-busy{opacity:.65;cursor:progress}

/* Keep studio surfaces consistent with the site-wide Apple-like neutral system. */
.studio-compose,.studio-shelf,.studio-output,.studio-history-panel{border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.035)}
.studio-model-price>div{border-radius:8px;background:#e5f5f0;border-color:#c5e6dc}
.studio-specs>div{border-radius:8px;background:#f5f5f7}
.studio-upload-zone{border-radius:9px;background:#fafafa}
.selected-asset,.recent-asset{border-radius:8px;background:#fff}
.asset-url-row{align-items:stretch}
.asset-url-row input{background:#f5f5f7;border-color:#d2d2d7;font-size:13px}
.asset-url-row input:focus{box-shadow:none;background:#fff}
.asset-add-button{min-width:64px;padding:9px 14px;border-radius:8px;font-size:12px}

/* Final UI pass: compact controls and one consistent visual language. */
.brand-mark{background:#102b38;border:1px solid rgba(94,224,188,.22);box-shadow:0 10px 24px rgba(8,62,61,.18)}
.brand-mark.small{box-shadow:none}
.mascot-mark{overflow:hidden;isolation:isolate;background:#f7f7f8;border-color:#d9dce1}
.brand-mascot{width:128%;height:128%;object-fit:cover;transform:translateY(4%);mix-blend-mode:multiply;filter:saturate(1.12) drop-shadow(0 4px 7px rgba(96,36,123,.18));animation:mascotFloat 4.5s ease-in-out infinite}
@keyframes mascotFloat{0%,100%{transform:translateY(4%) rotate(-2deg)}50%{transform:translateY(-1%) rotate(2deg)}}
.sidebar .brand{gap:10px;padding-left:8px}
.asset-url-row{grid-template-columns:minmax(0,1fr) auto;margin:8px 0 12px}
.asset-url-row.has-type-select{grid-template-columns:92px minmax(0,1fr) auto}
.asset-url-row #studioAssetType.is-hidden{display:none}
.asset-url-row input,.asset-url-row select{min-height:38px;padding:8px 10px;border-radius:8px}
.asset-add-button{min-width:58px;min-height:38px;padding:8px 12px;border-radius:8px;box-shadow:none}
.studio-result-actions{padding-top:11px;border-top:1px solid var(--line)}
.studio-result-actions p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.studio-result-actions>div{gap:7px;margin-left:auto}
.studio-result-actions .secondary,.studio-result-actions a{min-height:34px;padding:7px 11px;border-radius:8px;font-size:11px;font-weight:700;box-shadow:none}
.studio-result-actions .secondary{background:#fff;border-color:#d8e0e2;color:#40515b}
.studio-result-actions .secondary:hover{background:#f4f8f7;border-color:#a9c8c0;color:var(--green-dark)}
.studio-result-actions a{display:inline-flex;align-items:center;text-decoration:none}
.studio-result-actions a:hover{background:var(--green-dark)}

.studio-balance{min-width:128px;padding:10px 14px;border-color:#cfd5db;background:#f7f7f8}
.studio-balance span{font-size:11px;color:#69717c}
.studio-balance strong{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;margin-top:3px;color:var(--green);font-size:28px;line-height:1;letter-spacing:-.04em}
.studio-balance strong b{font-weight:850}
.studio-balance strong small{font-size:13px;font-weight:750;letter-spacing:0;color:var(--green-dark)}

@media (max-width:760px){
  .asset-url-row{grid-template-columns:minmax(0,1fr) auto}
  .asset-url-row.has-type-select{grid-template-columns:86px minmax(0,1fr) auto}
  .studio-result-actions{display:grid;gap:9px}
  .studio-result-actions>div{margin-left:0}
  .studio-result-actions .secondary,.studio-result-actions a{flex:0 1 auto}
}

/* Workbench header final layout: keep the title readable and the balance compact. */
.studio-compose-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.studio-compose-head > div:first-child{min-width:0}
.studio-compose-head h2{
  max-width:none;
  font-size:clamp(24px,2.2vw,29px);
  line-height:1.18;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.studio-head-help{
  max-width:30ch;
  line-height:1.5;
}
.studio-account-state{justify-self:end}
.studio-balance{
  min-width:122px;
  padding:11px 13px;
  border:1px solid #d4d9df;
  border-radius:13px;
  background:linear-gradient(145deg,#fbfbfc,#f4f5f6);
  text-align:right;
}
.studio-balance span{
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}
.studio-balance strong{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:5px;
  margin-top:5px;
  font-size:26px;
  line-height:1;
  white-space:nowrap;
}
.studio-balance strong b{font-weight:850}
.studio-balance strong small{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
@media (max-width:760px){
  .studio-compose-head{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }
  .studio-compose-head h2{
    max-width:12ch;
    font-size:23px;
  }
  .studio-balance{
    min-width:114px;
    padding:10px 11px;
  }
  .studio-balance strong{font-size:23px}
}
@media (max-width:430px){
  .studio-compose-head{
    grid-template-columns:1fr;
    gap:12px;
  }
  .studio-account-state{justify-self:start}
  .studio-balance{
    min-width:0;
    width:max-content;
    text-align:left;
  }
  .studio-balance strong{justify-content:flex-start}
}