/* Studio 4.1 — shared proportions and quiet interaction feedback. */
:root {
  --studio-motion-fast: 160ms;
  --studio-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --studio-feedback-ring: rgba(189, 143, 255, .38);
}

/* Do not transform controls: several preview actions use positioned transforms. */
:where(button, [role="button"], a.button, a.account-entry, a.studio-outline-button, a.route-card, .studio-nav a, .step-nav a, .toc a, label.button, label.file-picker, summary) {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--studio-motion-fast) ease,
    border-color var(--studio-motion-fast) ease,
    color var(--studio-motion-fast) ease,
    box-shadow var(--studio-motion-fast) ease,
    opacity var(--studio-motion-fast) ease;
}
:where(button, [role="button"], a.button, a.account-entry, a.studio-outline-button, a.route-card, .studio-nav a, .step-nav a, .toc a, label.button, label.file-picker, summary):focus-visible {
  outline: 2px solid var(--studio-accent, #a878ed);
  outline-offset: 3px;
}
:where(input, select, textarea) {
  transition: border-color var(--studio-motion-fast) ease, box-shadow var(--studio-motion-fast) ease;
}
:where(button, [role="button"], a.button, a.account-entry, a.studio-outline-button, a.route-card, .studio-nav a, .step-nav a, .toc a, label.button, label.file-picker):active:not(:disabled):not([aria-disabled="true"]):not(.disabled) {
  opacity: .82;
}
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
:where(button, a, input, select, textarea)[aria-disabled="true"] { cursor: not-allowed; }

/* The main studio already owns its grid, shelf, preview, and task alignment. */
#studioRoot .studio-glass,
#studioRoot .app-shell > main.grid > .panel {
  box-shadow: 0 10px 28px rgba(14, 8, 24, .14), inset 0 1px 0 rgba(255, 255, 255, .04);
}
#studioRoot .studio-view-heading { gap: 20px; margin-bottom: 20px; }
#studioRoot .studio-view-heading h2 { line-height: 1.35; }
#studioRoot .studio-view-heading p { line-height: 1.7; }
#studioRoot .studio-model-toolbar { border-radius: 16px; }
#studioRoot .studio-model-card { border-radius: 17px; }
#studioRoot .studio-model-card h3 { line-height: 1.35; }
#studioRoot .studio-model-specs { line-height: 1.75; }
#studioRoot .studio-model-card,
body.studio-secondary .asset,
body.studio-secondary .result-card {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#studioRoot :is(.studio-api-keys, .studio-api-overview, .studio-api-history) { border-radius: 17px; }
#studioRoot .studio-section-head { gap: 14px; }
#studioRoot .studio-section-head p { line-height: 1.65; }
#studioRoot .modal-card:not(.video-card):not(.preview-card):not(.asset-preview-card) { border-radius: 20px !important; }

/* Shared secondary-page rhythm, without changing the editing workspace grid. */
body.studio-secondary { line-height: 1.6; }
body.studio-secondary :is(.image-topbar, .collection-layout > .panel, .billing-layout, #agentApp > .panel) { border-radius: 18px; }
body.studio-secondary :is(.image-topbar, .topbar, .edit-topbar) :is(h1, h2) { line-height: 1.35; }
body.studio-secondary :is(.image-topbar, .topbar, .edit-topbar) :is(.subtitle, .page-heading p) { line-height: 1.65; }
body.studio-secondary :is(.button, .account-entry) { font-weight: 550; }
body.studio-secondary .button.primary { font-weight: 650; }
body.studio-secondary :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 2px;
}
body.studio-secondary :is(.image-layout, .collection-layout, .billing-layout, #agentApp) :is(.panel, .workspace) { min-width: 0; }
body.studio-secondary :is(.image-results-hint, .hint, .subtitle, .notice) { line-height: 1.7; }

/* Image creation: a balanced workspace and controls that divide evenly. */
body.studio-secondary-image .image-app { width: min(1700px, 100%); padding: 22px clamp(16px, 2vw, 32px) 32px; }
body.studio-secondary-image .image-topbar { padding: 19px 24px; gap: 22px; }
body.studio-secondary-image .image-topbar h1 { font-size: clamp(23px, 1.8vw, 28px); font-weight: 700; }
body.studio-secondary-image .image-topbar .eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--studio-accent); }
body.studio-secondary-image .image-layout { grid-template-columns: minmax(350px, .88fr) minmax(440px, 1.25fr); gap: 20px; margin-top: 20px; min-height: 0; align-items: stretch; }
body.studio-secondary-image .image-layout > .panel { padding: 23px; }
body.studio-secondary-image .panel-heading { margin-bottom: 21px; min-height: 34px; flex-wrap: wrap; }
body.studio-secondary-image .panel-heading h2 { font-size: 17px; line-height: 1.4; }
body.studio-secondary-image .step { width: 31px; height: 31px; border-radius: 10px; }
body.studio-secondary-image .field { font-size: 13px; gap: 9px; }
body.studio-secondary-image .field > span:first-child { font-weight: 600; }
body.studio-secondary-image .field textarea { height: clamp(190px, 23vh, 270px); min-height: 160px; padding: 14px 15px; font-size: 13px; line-height: 1.8; }
body.studio-secondary-image .field select { height: 42px; font-size: 13px; border-radius: 10px; }
body.studio-secondary-image .prompt-field { margin-bottom: 20px; }
body.studio-secondary-image .controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 19px; }
/* Quality can be disabled by site settings; the final unpaired field gets a full row. */
body.studio-secondary-image .controls-grid > .field:nth-child(odd of .field:not(.hidden):not([hidden])):nth-last-child(1 of .field:not(.hidden):not([hidden])) { grid-column: 1 / -1; }
body.studio-secondary-image .reference-picker { padding: 15px; border-radius: 13px; background: var(--studio-field); }
body.studio-secondary-image .reference-picker img { width: 88px; height: 88px; object-fit: contain; border-radius: 9px; }
body.studio-secondary-image .batch-task .reference-picker img { width: 64px; height: 64px; }
body.studio-secondary-image .file-picker { min-height: 44px; }
body.studio-secondary-image .batch-field small { line-height: 1.7; }
body.studio-secondary-image .cost-note { margin: 21px 1px 12px; line-height: 1.6; flex-wrap: wrap; gap: 5px 12px; }
body.studio-secondary-image .generate-button { min-height: 46px; font-size: 14px; border-radius: 12px; }
body.studio-secondary-image .result-grid { grid-template-columns: repeat(auto-fill, minmax(min(195px, 100%), 1fr)); gap: 14px; overflow: visible; padding-right: 0; }
body.studio-secondary-image .result-grid.empty { grid-template-columns: 1fr; min-height: 350px; background: var(--studio-field); }
body.studio-secondary-image .result-card { border-radius: 13px; }
body.studio-secondary-image .result-card img { height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
body.studio-secondary-image .result-card-meta { padding: 11px; gap: 9px; }
body.studio-secondary-image .result-card-name strong { font-size: 12px; }
body.studio-secondary-image .result-card-name small { font-size: 10px; line-height: 1.6; }
body.studio-secondary-image .result-card-actions { gap: 5px; }
body.studio-secondary-image .result-card-actions .button { min-height: 29px; padding: 5px 8px; font-size: 11px; border-radius: 7px; }
body.studio-secondary-image .result-pending { min-height: 175px; height: auto; }
body.studio-secondary-image .image-selection-toolbar { gap: 8px; padding: 12px 0; margin-bottom: 8px; }

/* Project collection and account history. */
html[data-theme] body.studio-secondary.collection-page .app-shell {
  width: min(1680px, 100%) !important;
  margin: 0 auto !important;
  padding: 22px clamp(16px, 2vw, 32px) 36px !important;
  gap: 20px;
}
html[data-theme] body.studio-secondary.collection-page .topbar { min-height: 88px !important; padding: 18px 23px !important; border-radius: 18px; }
body.studio-secondary.collection-page .page-heading h1 { margin: 0; font-size: clamp(22px, 1.8vw, 27px); }
body.studio-secondary.collection-page .page-heading p { margin: 7px 0 0; font-size: 12px; }
body.studio-secondary.collection-page .collection-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 20px; }
body.studio-secondary.collection-page :is(.project-sidebar, .workspace, .billing-layout) { padding: 21px; }
body.studio-secondary.collection-page .heading h2 { margin: 0; font-size: 17px; line-height: 1.45; }
body.studio-secondary.collection-page .heading { gap: 12px; margin-bottom: 18px; }
body.studio-secondary.collection-page .toolbar { gap: 9px; margin-bottom: 13px; }
body.studio-secondary.collection-page .toolbar > :is(button, select, input[type="search"]) { min-height: 36px; }
body.studio-secondary.collection-page .workspace > .toolbar:first-child { padding-bottom: 15px; border-bottom: 1px solid var(--studio-line); }
body.studio-secondary.collection-page #projects { gap: 9px; margin-bottom: 20px; }
body.studio-secondary.collection-page #projects button { padding: 11px 12px; border-radius: 10px; line-height: 1.5; }
body.studio-secondary.collection-page .assets { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
body.studio-secondary.collection-page .asset :is(img, video) { height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
body.studio-secondary.collection-page .asset-body { padding: 15px; }
body.studio-secondary.collection-page .asset h3 { line-height: 1.55; }
body.studio-secondary.collection-page .asset .toolbar { gap: 7px; margin-top: 14px; }
body.studio-secondary.collection-page .empty { padding: 50px 22px; line-height: 1.75; background: var(--studio-field); }
body.studio-secondary.collection-page .billing-layout { padding: 25px; }
body.studio-secondary.collection-page .billing-layout > .hint { margin-bottom: 22px; }
body.studio-secondary.collection-page #balance { font-size: clamp(21px, 2vw, 27px); }
body.studio-secondary.collection-page #records { gap: 14px; }
body.studio-secondary.collection-page .bill { padding: 19px 21px; border-radius: 13px; }
body.studio-secondary.collection-page .bill > strong { font-size: 14px; line-height: 1.65; }
body.studio-secondary.collection-page .bill p { line-height: 1.7; }
body.studio-secondary.collection-page .totals { gap: 12px 28px; padding-top: 8px; line-height: 1.6; }
body.studio-secondary.collection-page dialog:not(#studioBackgroundDialog) { padding: 25px; border-radius: 20px; }
body.studio-secondary.collection-page dialog label { gap: 8px; margin-bottom: 16px; }

/* Agent console keeps wide data tables inside their own scroll containers. */
body.studio-secondary-agent #agentApp { max-width: 1440px; padding: 24px clamp(16px, 2.2vw, 34px) 42px; }
body.studio-secondary-agent .top { padding: 23px 25px; margin-bottom: 20px; gap: 20px; }
body.studio-secondary-agent .top h1 { margin-top: 5px; font-size: clamp(23px, 1.8vw, 28px); }
body.studio-secondary-agent .stats { gap: 18px; margin-bottom: 20px; }
body.studio-secondary-agent .stat { padding: 23px; border-radius: 16px; }
body.studio-secondary-agent .stat strong { font-size: 30px; line-height: 1.2; margin-top: 12px; font-variant-numeric: tabular-nums; }
body.studio-secondary-agent .stat small { font-size: 11px; line-height: 1.65; }
body.studio-secondary-agent #agentApp > .panel { padding: 23px; margin-bottom: 20px; }
body.studio-secondary-agent .panel-head { margin-bottom: 19px; gap: 16px; }
body.studio-secondary-agent .panel p { line-height: 1.7; }
body.studio-secondary-agent .table-wrap { border: 1px solid var(--studio-line); border-radius: 12px; }
body.studio-secondary-agent th { padding: 13px 15px; background: var(--studio-field); font-size: 12px; }
body.studio-secondary-agent td { padding: 14px 15px; font-size: 13px; line-height: 1.65; }
body.studio-secondary-agent tr:last-child td { border-bottom: 0; }
body.studio-secondary-agent .pager { padding-top: 6px; flex-wrap: wrap; }

/* API docs favor reading rhythm over a dashboard's compact density. */
body.studio-secondary-docs > .shell { width: min(1120px, calc(100% - 48px)); padding: 36px 42px 46px; margin: 24px auto; border-radius: 21px; }
body.studio-secondary-docs header { padding-bottom: 26px; }
body.studio-secondary-docs h1 { margin-top: 1px; font-size: clamp(24px, 2vw, 30px); line-height: 1.4; }
body.studio-secondary-docs h2 { margin: 36px 0 15px; padding-top: 8px; font-size: 19px; line-height: 1.5; }
body.studio-secondary-docs h3 { margin-top: 25px; line-height: 1.5; }
body.studio-secondary-docs p { line-height: 1.85; }
body.studio-secondary-docs :is(p, li) { overflow-wrap: anywhere; }
body.studio-secondary-docs .toc { display: flex; flex-wrap: wrap; gap: 7px; margin: 19px 0 27px; }
body.studio-secondary-docs .toc a { display: inline-flex; align-items: center; margin: 0; padding: 6px 11px; border: 1px solid var(--studio-line); border-radius: 8px; background: var(--studio-field); font-size: 12px; line-height: 1.5; }
body.studio-secondary-docs .endpoint { gap: 11px; padding: 13px 15px; border-radius: 10px; flex-wrap: wrap; }
body.studio-secondary-docs .endpoint > code { overflow-wrap: anywhere; min-width: 0; }
body.studio-secondary-docs .endpoint > span:last-child:not(.method) { font-size: 12px; color: var(--studio-muted); }
body.studio-secondary-docs .method { min-width: 50px; padding: 3px 8px; border-radius: 6px; flex: none; }
body.studio-secondary-docs .note { padding: 15px 17px; border-radius: 0 10px 10px 0; line-height: 1.8; overflow-wrap: anywhere; }
body.studio-secondary-docs pre { padding: 19px 21px; font-size: 12px; line-height: 1.8; }
body.studio-secondary-docs :is(th, td) { padding: 12px 14px; line-height: 1.75; }
body.studio-secondary-docs .table-wrap { margin: 15px 0; border-radius: 10px; }
body.studio-secondary-docs .table-wrap table { margin: 0; }

/* The administrative console retains a light, high-contrast data surface. */
body:has(#adminRoot) {
  --admin-theme-page: #f3f1f8;
  --admin-theme-soft: #f8f6fc;
  --admin-theme-border: #e5dfef;
  --admin-theme-primary: #8255cb;
  --admin-theme-primary-hover: #7041b7;
  --admin-theme-sidebar: #231d2f;
}
#adminView { grid-template-columns: 232px minmax(0, 1fr); }
#adminView .admin-sidebar { width: 232px; padding: 22px 13px; background: linear-gradient(175deg, #2e243b, #201b2b 75%); }
#adminView .admin-brand { padding-bottom: 27px; }
#adminView .admin-brand-mark { border-radius: 12px; background: linear-gradient(135deg, #b078ec, #8055c7); }
#adminView .admin-nav { gap: 6px; }
#adminView .admin-nav button { height: 43px; min-height: 43px; font-size: 13px; border-radius: 10px; }
#adminView .admin-nav button.active { background: rgba(183, 135, 242, .16); box-shadow: inset 3px 0 #bd8afa; }
#adminView .admin-nav svg { color: #bda2e6; }
#adminView .admin-content { width: 100%; max-width: 1780px; margin: 0 auto; padding: 27px clamp(20px, 2.1vw, 38px) 45px; }
#adminView .admin-top { margin-bottom: 24px; }
#adminView :is(.stat, .metric, .admin-overview-card) { padding: 21px; border-radius: 14px; box-shadow: 0 5px 18px rgba(44, 28, 64, .035); }
#adminView :is(.stat, .metric, .admin-overview-card) strong { font-size: 27px; font-variant-numeric: tabular-nums; }
#adminView :is(.table-wrap, .provider, .form-disclosure, .security-form, .summary-band) { border-radius: 13px; }
#adminView .table-wrap th { padding-top: 14px; padding-bottom: 14px; }
#adminView .table-wrap td { padding-top: 15px; padding-bottom: 15px; }
#adminView :is(input, select, textarea, button) { border-radius: 9px; }
#adminView .provider > summary { padding: 19px 21px; }
#adminView .provider > summary::before { transition: transform .18s ease; }
#adminView .form-disclosure > summary { padding: 15px 18px; }
#adminView .admin-page.active > :is(.api-panel, .announcement-panel) { border-radius: 17px; padding: 25px; }
#adminRoot #loginView { max-width: 420px; width: calc(100% - 32px); padding: 33px; border-radius: 22px; border: 1px solid var(--admin-theme-border); box-shadow: 0 22px 70px rgba(65, 41, 91, .12); }
#adminRoot #loginView h1 { font-size: 25px; line-height: 1.4; }
#adminRoot #loginView .field { margin: 19px 0; }
#adminRoot #loginView :is(input, button) { height: 42px; border-radius: 10px; }
body:has(#adminRoot) :is(.admin-dialog, .password-card) { border-radius: 18px; }

@media (hover: hover) and (pointer: fine) {
  #studioRoot .studio-model-card:hover,
  body.studio-secondary :is(.asset, .result-card):hover {
    border-color: var(--studio-line-strong, rgba(194, 150, 255, .5));
    box-shadow: 0 9px 25px rgba(23, 12, 35, .16);
  }
  body.studio-secondary-agent tbody tr:hover { background: var(--studio-hover); }
  body.studio-secondary-docs .toc a:hover { background: var(--studio-hover); border-color: var(--studio-line-strong); }
}

@media (max-width: 1100px) {
  body.studio-secondary-image .image-layout { grid-template-columns: minmax(330px, .92fr) minmax(350px, 1.08fr); gap: 16px; }
  body.studio-secondary-image .image-layout > .panel { padding: 19px; }
  body.studio-secondary-image .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.studio-secondary.collection-page .collection-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  body.studio-secondary.collection-page :is(.workspace, .project-sidebar) { padding: 18px; }
}
@media (max-width: 900px) {
  body.studio-secondary-image .image-layout { grid-template-columns: minmax(0, 1fr); }
  body.studio-secondary-image .image-topbar { align-items: flex-start; gap: 15px; }
  body.studio-secondary-image .result-grid { grid-template-columns: repeat(auto-fill, minmax(min(195px, 100%), 1fr)); }
  body.studio-secondary-image .result-grid.empty { min-height: 300px; }
  #adminView { grid-template-columns: minmax(0, 1fr); }
  #adminView .admin-sidebar { width: 100%; min-height: 0; height: auto; padding: 16px; }
  #adminView .admin-nav { display: flex; gap: 5px; }
  #adminView .admin-nav button { width: auto; flex: none; }
  #adminView .admin-content { padding: 22px 17px 35px; }
}
@media (max-width: 760px) {
  html[data-theme] body.studio-secondary.collection-page .app-shell { padding: 12px 12px 25px !important; gap: 14px; }
  html[data-theme] body.studio-secondary.collection-page .topbar { padding: 17px !important; gap: 14px; }
  body.studio-secondary.collection-page .collection-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.studio-secondary.collection-page .project-sidebar { padding: 17px; }
  body.studio-secondary.collection-page #projects { margin-bottom: 13px; }
  body.studio-secondary.collection-page .project-sidebar .hint { margin-bottom: 0; }
  body.studio-secondary.collection-page .billing-layout { padding: 19px; }
  body.studio-secondary-agent #agentApp { padding: 13px 12px 27px; }
  body.studio-secondary-agent .top { padding: 20px; }
  body.studio-secondary-agent .stats { gap: 12px; }
  body.studio-secondary-agent .stat { padding: 19px; }
  body.studio-secondary-agent #agentApp > .panel { padding: 18px; }
  body.studio-secondary-docs > .shell { width: calc(100% - 24px); padding: 23px; margin: 12px auto; }
}
@media (max-width: 520px) {
  #studioRoot .studio-view-heading { gap: 12px; margin-bottom: 16px; }
  body.studio-secondary-image .image-app { padding: 12px 12px 24px; }
  body.studio-secondary-image .image-topbar { padding: 18px; }
  body.studio-secondary-image .image-layout { margin-top: 14px; gap: 14px; }
  body.studio-secondary-image .image-layout > .panel { padding: 17px; }
  body.studio-secondary-image .panel-heading { gap: 9px; margin-bottom: 17px; }
  body.studio-secondary-image .panel-heading h2 { font-size: 16px; }
  body.studio-secondary-image .controls-grid { gap: 12px; }
  body.studio-secondary-image .field textarea { min-height: 170px; height: 190px; }
  body.studio-secondary-image .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.studio-secondary-image .result-card-meta { padding: 9px; }
  body.studio-secondary-image .result-card-actions .button { font-size: 10px; padding: 5px 6px; }
  body.studio-secondary-image .reference-picker { padding: 12px; gap: 11px; }
  body.studio-secondary-image .reference-picker img { width: 72px; height: 72px; }
  body.studio-secondary.collection-page .assets { grid-template-columns: minmax(0, 1fr); }
  body.studio-secondary.collection-page .bill { padding: 16px; }
  body.studio-secondary.collection-page .totals { gap: 12px; }
  body.studio-secondary.collection-page dialog:not(#studioBackgroundDialog) { padding: 20px; }
  body.studio-secondary-agent .top-actions { gap: 7px; }
  body.studio-secondary-agent .top-actions button { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }
  body.studio-secondary-docs > .shell { padding: 20px 17px 27px; }
  body.studio-secondary-docs h2 { margin-top: 28px; font-size: 18px; }
  body.studio-secondary-docs .endpoint { padding: 12px; gap: 8px; }
  body.studio-secondary-docs .endpoint > span:last-child:not(.method) { flex-basis: 100%; }
  body.studio-secondary-docs pre { padding: 15px; }
  body.studio-secondary-docs .note { padding: 13px; }
  #adminView :is(.stat, .metric, .admin-overview-card) { padding: 16px; }
  #adminView :is(.stats, .metric-grid, .admin-overview-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #adminView :is(.stat, .metric, .admin-overview-card) strong { font-size: 24px; }
  #adminView .admin-page.active > :is(.api-panel, .announcement-panel) { padding: 18px; }
  #page-imageApi .settings-actions:has(> #imageApiGptSizes) { flex-direction: column; align-items: stretch; gap: 8px; }
  #page-imageApi :is(#imageApiGptSizes, #imageApiDalleSizes) { width: 100%; height: auto; min-height: 38px; padding: 9px 12px; line-height: 1.5; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], a.button, a.account-entry, a.studio-outline-button, a.route-card, .studio-nav a, .step-nav a, .toc a, label.button, label.file-picker, summary, input, select, textarea),
  #studioRoot .studio-model-card,
  body.studio-secondary :is(.asset, .result-card),
  #adminView .provider > summary::before { transition: none !important; }
}