/* Barrow Forge — Prompt Studio styles. Sections keep their original cascade order. */

/* ======================================================================
   Base styles and builder screens
   ====================================================================== */

:root {
  --bg: #0f1110;
  --panel: #1c1f1e;
  --panel2: #232827;
  --field: #303634;
  --text: #edefee;
  --muted: #a4aeab;
  --accent: #8cebc8;
  --accent2: #62be9c;
  --good: #4ead81;
  --border: #3d4543;
  --safe: env(safe-area-inset-bottom,0px);
  /* Brand layer (Barrow Forge Studio). */
  --bf-bg: #080b09;
  --bf-bg2: #0c100e;
  --bf-panel: #111614;
  --bf-panel2: #151b18;
  --bf-line: #1e2723;
  --bf-text: #e9efeb;
  --bf-muted: #8f9c96;
  --bf-accent: #2fe39b;
  --bf-accent-dim: #17a274;
  --bf-silver: #cfd8d3;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial,Helvetica,sans-serif;
  line-height: 1.45;
}

body {
  padding-bottom: calc(18px + var(--safe));
}

.app {
  max-width: 1380px;
  margin: auto;
  padding: 18px;
}

.top {
  padding: 6px 2px 14px;
}

.top h1 {
  font-size: 30px;
  margin: 0;
  color: var(--accent);
}

.top p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.card {
  background: var(--panel);
  border: 1px solid #2a2f2d;
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 14px;
}

.card h2 {
  font-size: 16px;
  color: #a9f0d6;
  margin: 0 0 10px;
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.row.two {
  grid-template-columns: 1fr 1fr;
}

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

label {
  display: block;
  color: #a6efd4;
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 4px;
}

select, input, textarea {
  width: 100%;
  background: var(--field);
  color: var(--text);
  border: 1px solid #505a57;
  border-radius: 8px;
  padding: 11px;
  font-size: 15px;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

button {
  border: 0;
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px;
  color: #ffffff;
  background: var(--accent2);
  cursor: pointer;
}

button.good {
  background: var(--good);
}

button.gray {
  background: #525c59;
}

button.small {
  padding: 8px 10px;
  font-size: 13px;
}

.buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.summary {
  background: #121414;
  border: 1px solid #353b39;
  border-radius: 8px;
  padding: 10px;
  min-height: 56px;
  font-size: 13px;
  color: #dbdfde;
}

.empty {
  color: #707e7a;
}

.output {
  display: block;
  width: 100%;
  height: 340px;
  max-height: 58vh;
  overflow-y: auto;
  white-space: pre-wrap;
  background: #0a0c0b;
  border: 1px solid #313735;
  border-radius: 9px;
  padding: 13px;
  color: var(--text);
  font: 13px/1.55 Consolas,monospace;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

.output:focus {
  outline: 1px solid #606c68;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tabs button {
  font-size: 12px;
  padding: 8px 9px;
  background: #505a57;
}

.tabs button.active {
  background: var(--accent2);
}

.hint {
  font-size: 11px;
  color: #818f8b;
  margin-top: 6px;
}

.screen {
  position: fixed;
  inset: 0;
  background: rgba(9, 10, 9, .82);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: none;
  overflow: auto;
  padding: 28px;
}

.screen.open {
  display: block;
}

.screen-inner {
  max-width: 1120px;
  margin: auto;
  padding: 14px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid #303634;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

.screen-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(15, 17, 16, .96);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 14px;
}

.screen-head h2 {
  margin: 0;
  color: var(--accent);
  font-size: 22px;
}

.back {
  background: #505a57;
  padding: 8px 11px;
}

.section {
  background: var(--panel);
  border: 1px solid #2a2f2d;
  border-radius: 11px;
  margin: 10px 0;
  overflow: hidden;
}

.section summary {
  padding: 13px;
  color: #a9f0d6;
  font-weight: bold;
  cursor: pointer;
}

.section-body {
  padding: 0 13px 13px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.full {
  grid-column: 1/-1;
}

.usebar {
  position: sticky;
  left: auto;
  right: auto;
  bottom: 0;
  z-index: 60;
  background: #171a19;
  border: 1px solid #373d3b;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.usebar button {
  flex: none;
  min-width: 240px;
}

.warning {
  display: none;
  background: #443e2c;
  color: #e2d3a7;
  border: 1px solid #62593d;
  border-radius: 8px;
  padding: 9px;
  font-size: 12px;
  margin-top: 8px;
}

.warning.show {
  display: block;
}

.desktop-note {
  font-size: 12px;
  color: #909c99;
  margin-top: 6px;
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 8px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #151717;
  border: 1px solid #373f3c;
  border-radius: 8px;
  padding: 9px;
  color: #dbdfde;
  font-size: 12px;
  font-weight: normal;
}

.toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--accent2);
}

.suggestion-box {
  background: #141616;
  border: 1px solid #373f3c;
  border-radius: 10px;
  padding: 11px;
}

.suggestion-box strong {
  color: #a9f0d6;
}

.suggestion-text {
  font-size: 12px;
  color: #ccd2d0;
  margin-top: 5px;
}

.hidden {
  display: none!important;
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.check-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #1c1f1e;
  border: 1px solid #303634;
  border-radius: 8px;
  padding: 8px 9px;
  color: #dbdfde;
  font-size: 12px;
  line-height: 1.35;
}

.check-option input {
  width: auto;
  margin: 2px 0 0;
  accent-color: var(--accent2);
}

.dynamic-note {
  font-size: 11px;
  color: #8e9a97;
  margin-top: 5px;
}

.rule-note {
  background: #131515;
  border: 1px solid #343a38;
  border-radius: 8px;
  padding: 8px 10px;
  color: #a5afac;
  font-size: 11px;
}

@media(max-width:680px) {
  .toggle-grid, .mini-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:1050px) {
  .output {
    height: 250px;
    max-height: 40vh;
  }
  .section-body {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:680px) {
  .app {
    padding: 14px;
  }
  .row.two, .row.three, .section-body {
    grid-template-columns: 1fr;
  }
  .screen {
    padding: 0;
  }
  .screen-inner {
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .usebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 10px 14px calc(10px + var(--safe));
    margin-top: 0;
  }
  .screen.open .usebar {
    display: flex;
  }
  .usebar button {
    flex: 1;
    min-width: 0;
  }
  .top h1 {
    font-size: 24px;
  }
}
/* ===== V5 APPLICATION SHELL ===== */

:root {
  --v5-sidebar: 210px;
  --v5-output: 410px;
  --v5-radius: 16px;
  --v5-panel: #1a1d1c;
  --v5-panel2: #202523;
  --v5-line: #333937;
  --v5-soft: #131515;
}

body {
  min-height: 100vh;
}

.v5-app {
  max-width: 1680px;
  margin: 0 auto;
  padding: 18px 20px 36px;
}

.v5-topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 8px 2px 20px;
}

.v5-topbar h1 {
  margin: 0;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: -.5px;
}

.v5-topbar h1 span {
  font-size: 14px;
  color: var(--accent);
  background: #1e312a;
  border: 1px solid #2f5648;
  border-radius: 999px;
  padding: 4px 8px;
  vertical-align: middle;
  margin-left: 6px;
}

.v5-topbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.v5-kicker, .v5-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 3px;
}

.v5-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v5-status {
  font-size: 12px;
  color: #b9c7c0;
  background: #17201c;
  border: 1px solid #32453c;
  padding: 7px 10px;
  border-radius: 999px;
}

.v5-layout {
  display: grid;
  grid-template-columns: var(--v5-sidebar) minmax(0,1fr) var(--v5-output);
  gap: 16px;
  align-items: start;
}

.v5-workspace {
  min-width: 0;
}

.v5-panel, .v5-module-card, .v5-output-card {
  background: var(--v5-panel);
  border: 1px solid var(--v5-line);
  border-radius: var(--v5-radius);
  padding: 16px;
  margin-bottom: 14px;
}

.v5-panel-head, .v5-module-top, .v5-output-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.v5-panel h2, .v5-module-card h2, .v5-output-card h2 {
  margin: 0;
  color: #f3f4f4;
  font-size: 17px;
}

.v5-panel-head {
  margin-bottom: 13px;
}

.v5-link-button {
  background: transparent!important;
  color: #a5afac!important;
  padding: 5px 2px!important;
  font-size: 12px!important;
}

.v5-link-button:hover {
  color: #ffffff!important;
}

.v5-quick-panel {
  background: linear-gradient(180deg,#1d2120 0%,#1a1d1c 50%);
}

.v5-quick-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.v5-quick-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.v5-quick-actions span {
  font-size: 11px;
  color: #808e8a;
}

.v5-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.v5-module-card {
  margin: 0;
  min-width: 0;
}

.v5-module-top {
  margin-bottom: 10px;
}

.v5-module-top button {
  padding: 8px 10px;
  font-size: 12px;
}

.v5-module-summary {
  background: var(--v5-soft);
  border: 1px solid #2b312f;
  border-radius: 10px;
  padding: 11px;
  min-height: 78px;
  color: #dbdfde;
  font-size: 12px;
  line-height: 1.48;
}

.v5-module-summary.empty {
  color: #6e7b77;
}

.v5-module-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
  color: #798984;
  font-size: 10px;
}

.v5-mini {
  font-size: 10px!important;
  padding: 6px 8px!important;
  background: #3a413f!important;
}

.v5-badge {
  background: #323836;
  color: #c9cfcd;
  border: 1px solid #434b49;
  border-radius: 999px;
  font-size: 10px;
  padding: 5px 8px;
}

.v5-badge.good {
  background: #17241e;
  border-color: #325042;
  color: #9fd3bb;
}

.v5-badge.warn {
  background: #312c1e;
  border-color: #554c30;
  color: #d1c294;
}

.v5-compat-list {
  display: grid;
  gap: 7px;
}

.v5-compat-item {
  background: #151717;
  border: 1px solid #2b312f;
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 11px;
  color: #c7cdcb;
}

.v5-compat-item::before {
  content: 'RULE';
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent);
  margin-right: 8px;
}

.v5-compat-empty {
  font-size: 11px;
  color: #6d7a76;
  padding: 4px 0;
}

.v5-output-col {
  min-width: 0;
}

.v5-output-card {
  position: sticky;
  top: 16px;
  margin: 0;
}

.v5-output-card .output {
  height: 480px;
  max-height: 62vh;
}

.v5-meter {
  font: 11px Consolas,monospace;
  color: #97a39f;
  background: #131515;
  border: 1px solid #2b312f;
  border-radius: 999px;
  padding: 6px 8px;
}

.v5-output-actions, .v5-output-subactions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.v5-output-actions button {
  flex: 1;
}

.v5-output-subactions button {
  background: #323937;
  font-size: 10px;
  padding: 7px 8px;
}

.v5-small-note {
  margin-top: 8px;
  color: #6d7a76;
  font-size: 10px;
}

.v5-preset-screen {
  max-width: 980px;
}

.v5-json-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.screen {
  z-index: 80;
}

.usebar {
  z-index: 90;
}

@media(max-width:1200px) {
  .v5-layout {
    grid-template-columns: 170px minmax(0,1fr) 360px;
  }
  .v5-quick-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:960px) {
  .v5-layout {
    grid-template-columns: 1fr;
  }
  .v5-output-card {
    position: static;
  }
  .v5-section-grid {
    grid-template-columns: 1fr 1fr;
  }
  .v5-output-col {
    order: 3;
  }
  .v5-topbar {
    align-items: flex-start;
  }
  .v5-output-card .output {
    height: 360px;
  }
}

@media(max-width:650px) {
  .v5-app {
    padding: 12px;
  }
  .v5-topbar {
    display: block;
  }
  .v5-top-actions {
    margin-top: 10px;
    justify-content: space-between;
  }
  .v5-quick-grid, .v5-section-grid {
    grid-template-columns: 1fr;
  }
  .v5-quick-actions {
    display: block;
  }
  .v5-quick-actions span {
    display: block;
    margin-top: 8px;
  }
}
/* V5.1 libraries */

.v5-library-panel {
  margin-top: 20px;
}

.v5-library-card .eyebrow {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #94b3a9;
}

.v5-library-screen .screen-inner {
  max-width: 1220px;
}

.v5-library-note {
  color: #bec9c5;
  line-height: 1.5;
  margin-bottom: 12px;
}

.v5-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(255px,1fr));
  gap: 14px;
}

.v5-library-grid.compact {
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}

.v5-library-card {
  background: #141817;
  border: 1px solid #28312e;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.v5-library-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.v5-library-card .sub {
  color: #9eaea8;
  font-size: .86rem;
  line-height: 1.4;
}

.v5-library-card .desc {
  color: #cad2d0;
  font-size: .93rem;
  line-height: 1.5;
  min-height: 66px;
}

.v5-library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v5-library-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: #1e2724;
  border: 1px solid #333e3a;
  color: #dbe3e0;
  font-size: .78rem;
}

.v5-library-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.v5-library-actions button {
  flex: 1 1 auto;
}

@media (max-width: 980px) {
  .v5-library-grid, .v5-library-grid.compact {
    grid-template-columns: 1fr;
  }
}
/* ===== V5.2 refinements ===== */

.v52-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.v52-card-actions button {
  padding: 8px 10px;
  font-size: 12px;
}

.v52-feedback-button {
  width: 100%;
  margin-top: 8px;
  background: #404846;
  border: 1px solid #545e5b;
}

.v52-feedback-button:hover {
  background: #454d4b;
}

.v52-library-browser {
  min-height: 520px;
}

.v52-library-search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  margin: 8px 0 12px;
}

.v52-library-search-row input {
  min-width: 0;
}

.v52-library-categories {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.v52-library-categories button {
  background: #343a38;
  border: 1px solid #454e4b;
  padding: 8px 11px;
}

.v52-library-categories button.active {
  background: var(--accent2);
  border-color: #4ea082;
}

.v52-library-filter-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #85938f;
  margin: 5px 0 7px;
}

.v52-library-tags-filter {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.v52-library-tag-button {
  background: #1f2423;
  border: 1px solid #333b38;
  color: #ced7d4;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
}

.v52-library-tag-button.active {
  background: #21312b;
  border-color: #3d6a5a;
  color: #dcf9ee;
}

.v52-library-empty {
  border: 1px dashed #434b49;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #8d9996;
  margin: 10px 0;
}

.v5-library-tag.clickable {
  cursor: pointer;
}

.v5-library-tag.clickable:hover {
  border-color: #62736d;
  color: #ffffff;
}

.v52-feedback-screen {
  max-width: 820px;
}

.v52-optional {
  font-weight: normal;
  color: #707e7a;
}

.v52-gallery-permission {
  margin-top: 14px;
  align-items: flex-start;
}

.v52-gallery-permission strong {
  color: #a6b1ae;
}

.v52-feedback-preview {
  margin-top: 14px;
  background: #121414;
  border: 1px solid #323937;
  border-radius: 10px;
  padding: 11px;
  color: #a5afac;
  font-size: 11px;
}

.v52-feedback-preview strong {
  display: block;
  color: #dbdfde;
  margin-bottom: 6px;
}

.v52-feedback-preview div {
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: Consolas,monospace;
}

.v52-feedback-status {
  min-height: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: #b9c7c0;
}

.v52-feedback-status.error {
  color: #d1c294;
}

.v52-honeypot {
  position: absolute!important;
  left: -10000px!important;
  width: 1px!important;
  height: 1px!important;
  overflow: hidden!important;
}

@media(max-width:650px) {
  .v52-library-search-row {
    grid-template-columns: 1fr;
  }
  .v52-library-search-row button {
    width: 100%;
  }
  .v52-card-actions {
    justify-content: flex-start;
  }
  .v52-card-actions button {
    flex: 1;
  }
  .v52-feedback-screen .row.two {
    grid-template-columns: 1fr;
  }
}

.v52-netlify-form-template {
  position: absolute!important;
  overflow: hidden!important;
  clip: rect(0 0 0 0)!important;
  clip-path: inset(50%)!important;
  height: 1px!important;
  width: 1px!important;
  margin: -1px!important;
  padding: 0!important;
  border: 0!important;
  white-space: nowrap!important;
}
/* ===== V5.5 UNIVERSAL NATURAL-LANGUAGE ENGINE ===== */

#tabSdxl {
  background: #505856;
}

.tabs #tabSdxl.active {
  background: var(--accent2);
}
/* ===== V5.5.1 BUILD NOTES ===== */

.v551-build-notes-panel {
  background: linear-gradient(180deg,#1d1f1e 0%,#191c1b 100%);
}

.v551-build-notes-intro {
  color: #97a29f;
  font-size: 11px;
  line-height: 1.5;
  margin: -4px 0 11px;
}

.v551-build-notes-rows {
  display: grid;
  gap: 7px;
}
/* V6 semantic Render Plan diagnostics */

.v6-note-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* V6.0.2 gender/presentation helper controls */

/* V6.0.3 refinement */

.v603-quick-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.v603-aspect-control {
  grid-column: span 2;
}

.v603-framing-tip {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(185, 199, 192, .24);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  font-size: 13px;
  line-height: 1.45;
  color: #c7cecb;
}

.v603-framing-tip strong {
  color: #eef2f0;
}

@media(max-width:760px) {
  .v603-aspect-control {
    grid-column: span 1;
  }
  .v603-quick-head-actions {
    justify-content: flex-start;
  }
}
/* V6.0.4 — graphics-ready library browser and privacy/file UX */

.v604-library-browser {
  min-height: 620px;
}

.v604-library-tools {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid #323b38;
  border-radius: 12px;
  background: #121715;
}

.v604-library-tools strong {
  display: block;
  color: #f0f3f2;
  font-size: 13px;
}

.v604-library-tools span {
  display: block;
  color: #a0afaa;
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.4;
}

.v604-library-grid {
  grid-template-columns: repeat(auto-fit,minmax(265px,1fr));
}

.v604-library-card {
  overflow: hidden;
}

.v604-library-thumb {
  height: 105px;
  margin: -16px -16px 0;
  border-bottom: 1px solid #2d3734;
  background: linear-gradient(135deg,#19201e,#232b29);
  display: flex;
  align-items: flex-end;
  padding: 12px 16px;
}

.v604-library-thumb span {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 800;
  color: #9eb6ae;
}

.v604-tag-button {
  font: inherit;
  line-height: 1.1;
  cursor: pointer;
}

.v604-feedback-settings {
  margin-top: 12px;
  align-items: flex-start;
}

.v604-feedback-privacy {
  margin: 6px 0 2px 28px;
  max-width: 680px;
}

.v604-library-card .desc {
  min-height: 72px;
}

.v604-library-categories {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 0;
  background: linear-gradient(#0f1110 72%,rgba(15, 17, 16, 0));
}

@media(max-width:720px) {
  .v604-library-tools {
    grid-template-columns: 1fr;
  }
  .v604-library-tools button {
    width: 100%;
  }
  .v604-library-grid {
    grid-template-columns: 1fr;
  }
  .v604-feedback-privacy {
    margin-left: 0;
  }
}
/* ===== V6.1 LOCAL TEST — progressive outfit UX ===== */

.v61-guided {
  border-color: #384641!important;
  background: linear-gradient(180deg,rgba(78, 160, 130, .08),rgba(255, 255, 255, .01));
}

.v61-guided summary {
  color: #c4f2e1;
}

.v61-guided-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))!important;
}

.v61-guided-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.v61-guided-actions span {
  color: #b2bbb8;
  font-size: 12px;
  line-height: 1.4;
}

.v61-tier-note {
  border: 1px solid #3f4744;
  background: #151a18;
  border-radius: 10px;
  padding: 10px 12px;
  color: #c4cdca;
  font-size: 12px;
  line-height: 1.45;
}

#outfitScreen details.section:not(.v61-guided)>summary::after {
  content: ' optional';
  font-size: 10px;
  font-weight: 600;
  color: #707e7a;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media(max-width:720px) {
  .v61-guided-grid {
    grid-template-columns: 1fr!important;
  }
}
/* ===== V6.1 UI REFINEMENT TEST ===== */

.v61-flow-strip {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 0 0 16px;
  padding: 8px 10px;
  background: rgba(22, 25, 24, .96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--v5-line);
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}

.v61-flow-label {
  flex: 0 0 auto;
  color: #82908c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  padding: 0 5px 0 2px;
}

.v61-flow-strip button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: transparent;
  border: 1px solid transparent;
  color: #d5d9d8;
  white-space: nowrap;
  font-size: 11px;
}

.v61-flow-strip button:hover, .v61-flow-strip button:focus-visible {
  background: #232a27;
  border-color: #324c43;
  color: #ffffff;
  outline: none;
}

.v61-flow-strip button span {
  color: var(--accent);
  font: 9px/1 Consolas,monospace;
}

.v61-refinement-layout {
  grid-template-columns: minmax(0,1fr) minmax(360px,420px);
  gap: 18px;
}

.v61-refinement-layout>.v5-output-col {
  align-self: stretch;
}

.v5-section-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.v5-module-card {
  min-height: 0;
}

.v5-module-summary {
  min-height: 62px;
}

.v61-quick-look-card {
  min-width: 0;
}

.v61-start-look-button {
  width: 100%;
  min-height: 44px;
  background: #2e3b36;
  border: 1px solid #405d52;
  text-align: left;
  font-weight: 700;
}

.v61-start-look-button:hover {
  background: #324740;
}

.v61-library-entry {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(135deg,#1a1d1c 0%,#1e2120 100%);
}

.v61-library-entry h2 {
  margin: 0 0 5px;
}

.v61-library-entry p {
  margin: 0;
  max-width: 760px;
  color: #9ba7a3;
  font-size: 12px;
  line-height: 1.5;
}

.v61-browse-libraries {
  min-width: 150px;
}

.v5-output-card {
  top: 58px;
  max-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.v5-output-card .tabs {
  flex: 0 0 auto;
}

.v5-output-card .output {
  height: auto;
  min-height: 260px;
  max-height: none;
  flex: 1 1 420px;
  resize: none;
  overflow-y: auto;
}

.v5-output-card .v5-output-head, .v5-output-card .warning, .v5-output-card .v5-output-actions, .v5-output-card .v52-feedback-button, .v5-output-card .v5-output-subactions, .v5-output-card .v5-small-note {
  flex: 0 0 auto;
}

@media(max-width:1200px) {
  .v61-refinement-layout {
    grid-template-columns: minmax(0,1fr) 360px;
  }
  .v61-flow-strip {
    border-radius: 11px;
  }
  .v5-quick-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:960px) {
  .v61-flow-strip {
    position: static;
    margin-bottom: 14px;
  }
  .v61-refinement-layout {
    grid-template-columns: 1fr;
  }
  .v5-output-col {
    order: 3;
  }
  .v5-output-card {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .v5-output-card .output {
    height: 360px;
    min-height: 260px;
    max-height: 54vh;
    resize: vertical;
  }
  .v61-library-entry {
    grid-template-columns: 1fr;
  }
  .v61-browse-libraries {
    width: 100%;
  }
}

@media(max-width:650px) {
  .v61-flow-strip {
    margin-left: -2px;
    margin-right: -2px;
    padding: 7px 8px;
  }
  .v61-flow-label {
    display: none;
  }
  .v61-flow-strip button {
    padding: 7px 8px;
  }
  .v61-library-entry {
    gap: 12px;
  }
  .v61-library-entry p {
    font-size: 11px;
  }
  .v61-start-look-button {
    text-align: center;
  }
  .v5-module-top {
    align-items: flex-start;
  }
  .v5-module-top>button, .v52-card-actions {
    max-width: 46%;
  }
}
/* ===== V6.1.2 SAVE / LOAD ARCHITECTURE TEST ===== */

.v612-save-load-screen {
  max-width: 1040px;
}

.v612-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px;
  background: #151717;
  border: 1px solid var(--v5-line);
  border-radius: 12px;
}

.v612-mode-tabs button {
  min-height: 42px;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: .3px;
}

.v612-mode-tabs button.active {
  background: #25302c;
  border-color: #39564c;
  color: #ffffff;
}

.v612-scope-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.v612-scope-grid button {
  display: flex;
  min-height: 90px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  text-align: left;
  background: #191c1b;
  border: 1px solid #343a38;
  border-radius: 10px;
  padding: 13px;
}

.v612-scope-grid button:hover, .v612-scope-grid button.active {
  background: #202926;
  border-color: #3f6456;
}

.v612-scope-grid strong {
  font-size: 13px;
  color: #f2f4f3;
}

.v612-scope-grid span {
  font-size: 10px;
  line-height: 1.35;
  color: #909c99;
}

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

.v612-save-row input {
  min-height: 44px;
}

.v612-save-row button {
  min-width: 110px;
  min-height: 44px;
}

.v612-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 14px;
}

.v612-filter-row button {
  padding: 7px 11px;
  background: #181b1a;
  border: 1px solid #343a38;
  font-size: 11px;
}

.v612-filter-row button.active {
  background: #25302c;
  border-color: #3f6456;
  color: #ffffff;
}

.v612-saved-list {
  display: grid;
  gap: 9px;
}

.v612-saved-empty {
  padding: 24px;
  border: 1px dashed #39413e;
  border-radius: 10px;
  color: #82918c;
  text-align: center;
  font-size: 12px;
}

.v612-saved-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  background: #171a19;
  border: 1px solid #303634;
  border-radius: 10px;
}

.v612-saved-main {
  min-width: 0;
}

.v612-saved-type {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
  color: var(--accent);
  text-transform: uppercase;
}

.v612-saved-name {
  margin: 4px 0 3px;
  font-size: 14px;
  font-weight: 800;
  color: #eeefef;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v612-saved-meta {
  font-size: 10px;
  color: #82908c;
}

.v612-saved-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.v612-saved-actions button {
  padding: 7px 9px;
  font-size: 10px;
}

.v612-portable-panel {
  padding: 0;
  overflow: hidden;
}

.v612-portable-panel>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
}

.v612-portable-panel>summary::-webkit-details-marker {
  display: none;
}

.v612-portable-panel>summary span {
  font-size: 10px;
  color: #82908c;
  font-weight: 500;
}

.v612-portable-body {
  border-top: 1px solid var(--v5-line);
  padding: 15px 17px 17px;
}

.v612-portable-body p {
  margin: 0 0 12px;
  color: #929f9b;
  font-size: 11px;
  line-height: 1.5;
}

.v612-legacy-tools {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2a2f2e;
}

.v612-legacy-tools summary {
  cursor: pointer;
  color: #8a9894;
  font-size: 10px;
  margin-bottom: 9px;
}

.v612-autosave-note {
  padding: 2px 4px 10px;
  color: #74837e;
  font-size: 10px;
  text-align: center;
}

@media(max-width:820px) {
  .v612-scope-grid {
    grid-template-columns: 1fr 1fr;
  }
  .v612-saved-item {
    grid-template-columns: 1fr;
  }
  .v612-saved-actions {
    justify-content: flex-start;
  }
}

@media(max-width:520px) {
  .v612-scope-grid {
    grid-template-columns: 1fr;
  }
  .v612-scope-grid button {
    min-height: 72px;
  }
  .v612-save-row {
    grid-template-columns: 1fr;
  }
  .v612-save-row button {
    width: 100%;
  }
  .v612-mode-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .v612-portable-panel>summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}
/* ===== V6.1.3 POSE + SHOT STRUCTURE TEST ===== */

.v613-subsection {
  margin-top: 10px;
}

.v613-inline-action {
  display: flex!important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.v613-inline-action span {
  flex: 1 1 260px;
  color: #909c99;
  font-size: 11px;
  line-height: 1.45;
}

.v613-inline-action button {
  flex: 0 0 auto;
}

#poseExpressionScreen .screen-inner, #sceneCameraLightScreen .screen-inner {
  max-width: 1080px;
}

#sceneCameraLightScreen .section>summary, #poseExpressionScreen .section>summary {
  letter-spacing: .15px;
}

@media(max-width:650px) {
  .v613-inline-action {
    align-items: stretch;
  }
  .v613-inline-action button {
    width: 100%;
  }
  .v613-inline-action span {
    flex-basis: 100%;
  }
}
/* V7 Beta */

.v7r1-fast-subpanel {
  margin: 0!important;
}

.v7r1-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(157, 220, 199, .22);
  border-radius: 12px;
  background: rgba(157, 220, 199, .06);
}

.v7r1-next-step>div:first-child {
  display: grid;
  gap: 2px;
}

.v7r1-next-step span {
  color: var(--muted,#aeb9b5);
  font-size: .92rem;
}

.v7r1-next-step-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.v52-card-actions .v7r1-reset-all-link {
  flex-basis: 100%;
  margin-left: auto;
  padding: 2px 4px!important;
  text-align: right;
  justify-content: flex-end;
  color: var(--muted,#aeb9b5);
}

.v7r1-pose-moment-note {
  margin-top: 4px;
}

.v7r1-makeup-section {
  border-style: dashed;
}

@media(max-width:720px) {
  .v7r1-next-step {
    align-items: flex-start;
    flex-direction: column;
  }
  .v7r1-next-step-actions {
    width: 100%;
  }
  .v7r1-next-step-actions button {
    flex: 1;
  }
}

/* ======================================================================
   Visual shell: dashboard, cards and responsive layout
   ====================================================================== */

/* =========================================================
   BARROW FORGE — PROMPT STUDIO V7 VISUAL SHELL TEST 1
   Presentation-only layer. No prompt/state logic lives here.
   ========================================================= */

:root {
  --v7vs-bg: #090e0c;
  --v7vs-bg2: #0f1413;
  --v7vs-panel: #131917;
  --v7vs-panel2: #171f1c;
  --v7vs-panel3: #0f1614;
  --v7vs-line: #293330;
  --v7vs-line-soft: #202926;
  --v7vs-text: #f5f9f8;
  --v7vs-muted: #96a49f;
  --v7vs-accent: #76e7be;
  --v7vs-accent-soft: #a0eed1;
  --v7vs-purple: #a1e7d9;
  --v7vs-blue: #95dcc4;
  --v7vs-green: #7bdcaf;
  --v7vs-shadow: 0 18px 55px rgba(0, 0, 0, .28);
  --v7vs-radius: 16px;
}

html {
  scroll-behavior: smooth;
}

html, body {
  background: radial-gradient(900px 420px at 82% -100px,rgba(99, 146, 131, .12),transparent 58%), radial-gradient(720px 360px at 10% 5%,rgba(118, 231, 190, .07),transparent 62%), linear-gradient(180deg,var(--v7vs-bg2),var(--v7vs-bg) 46%,#080c0b);
  color: var(--v7vs-text);
}

body {
  font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing: -.005em;
}

button, select, input, textarea {
  font-family: inherit;
}

button {
  transition: background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease,color .16s ease;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}
/* Shell */

.v5-app {
  max-width: 1580px;
  padding: 24px 30px 42px;
}

.v5-topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 4px 4px 21px;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
}

.v5-topbar>div:first-child {
  position: relative;
  padding-left: 58px;
  min-width: 0;
}

.v7vs-brand-mark {
  position: absolute;
  left: 0;
  top: 3px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg,rgba(118, 231, 190, .16),rgba(161, 231, 217, .06));
  border: 1px solid rgba(118, 231, 190, .18);
  box-shadow: 0 8px 28px rgba(118, 231, 190, .08);
}

.v7vs-brand-mark svg {
  width: 27px;
  height: 27px;
  display: block;
}

.v5-kicker {
  color: var(--v7vs-accent-soft);
  font-size: 10px;
  letter-spacing: 2.1px;
  margin-bottom: 4px;
}

.v5-topbar h1 {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.7px;
  color: #ffffff;
}

.v5-topbar h1 span {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: #caf6e6;
  background: rgba(118, 231, 190, .10);
  border: 1px solid rgba(118, 231, 190, .30);
  padding: 4px 8px;
  margin-left: 8px;
  transform: translateY(-2px);
}

.v5-topbar p {
  color: #909d99;
  margin-top: 7px;
  letter-spacing: 0;
}

.v5-top-actions {
  gap: 9px;
}

.v5-top-actions button {
  min-width: 74px;
  background: #171e1c;
  border: 1px solid #2d3935;
  color: #f0f6f4;
  padding: 9px 13px;
}

.v5-top-actions button:hover {
  background: #1d2724;
  border-color: #445650;
}

.v5-status {
  background: #101b16;
  border: 1px solid #254436;
  color: #aad8c3;
  padding: 7px 11px;
}
/* Workflow navigator */

.v61-flow-strip {
  top: 10px;
  z-index: 40;
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px;
  background: rgba(14, 19, 17, .90);
  border: 1px solid #2b3632;
  border-radius: 15px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px) saturate(120%);
}

.v61-flow-label {
  padding-left: 9px;
  padding-right: 8px;
  color: #85938e;
  letter-spacing: 1.8px;
}

.v61-flow-strip button {
  min-height: 46px;
  flex: 1 1 0;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  color: #e0e7e5;
}

.v61-flow-strip button:hover, .v61-flow-strip button:focus-visible {
  background: #161f1c;
  border-color: #3c4a46;
  box-shadow: none;
}

.v61-flow-strip button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #19221f;
  border: 1px solid #2d3935;
  color: #87eac6;
  font: bold 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.v61-flow-strip button[data-v7vs-step="2"] span {
  color: var(--v7vs-purple);
}

.v61-flow-strip button[data-v7vs-step="3"] span {
  color: var(--v7vs-blue);
}

.v61-flow-strip button[data-v7vs-step="4"] span {
  color: var(--v7vs-green);
}

.v61-flow-strip .v7vs-fast-nav {
  flex: .72 1 0;
  border-left: 1px solid #2b3633;
  margin-left: 3px;
  border-radius: 0 10px 10px 0;
  color: #caf6e6;
}

.v61-flow-strip .v7vs-fast-nav span {
  background: rgba(118, 231, 190, .10);
  border-color: rgba(118, 231, 190, .22);
  font-family: inherit;
  font-size: 14px;
}
/* Main columns */

.v61-refinement-layout {
  grid-template-columns: minmax(0,1fr) minmax(370px,430px);
  gap: 20px;
  align-items: start;
}

.v5-workspace {
  min-width: 0;
}

.v5-panel, .v5-module-card, .v5-output-card {
  background: linear-gradient(180deg,rgba(22, 29, 27, .96),rgba(16, 23, 20, .96));
  border: 1px solid var(--v7vs-line);
  border-radius: var(--v7vs-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015) inset;
}

.v5-section-grid {
  gap: 12px;
}

.v5-module-card {
  position: relative;
  padding: 20px 20px 16px;
  overflow: hidden;
}

.v5-module-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--v7vs-accent);
  opacity: .75;
}

.v5-module-card:nth-child(2)::before {
  background: var(--v7vs-purple);
}

.v5-module-card:nth-child(3)::before {
  background: var(--v7vs-blue);
}

.v5-module-card:nth-child(4)::before {
  background: var(--v7vs-green);
}

.v5-module-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg,rgba(255, 255, 255, .018),transparent 26%);
}

.v5-module-top {
  position: relative;
  z-index: 1;
  align-items: center;
  margin-bottom: 12px;
}

.v5-module-top>div:first-child {
  min-width: 0;
}

.v5-eyebrow {
  font-size: 9px;
  letter-spacing: 1.75px;
  color: var(--v7vs-accent-soft);
}

.v5-module-card:nth-child(2) .v5-eyebrow {
  color: #bbeee4;
}

.v5-module-card:nth-child(3) .v5-eyebrow {
  color: #a8e2cf;
}

.v5-module-card:nth-child(4) .v5-eyebrow {
  color: #98e8c3;
}

.v5-module-card h2 {
  font-size: 20px;
  letter-spacing: -.3px;
}

.v7vs-card-subtitle {
  margin-top: 3px;
  color: #95a29e;
  font-size: 11px;
  line-height: 1.45;
}

.v5-module-top button, .v52-card-actions button {
  background: #1c2623;
  border: 1px solid #3c4b46;
  color: #f0f6f4;
  border-radius: 9px;
  padding: 8px 11px;
}

.v5-module-top button:hover, .v52-card-actions button:hover {
  background: #232e2a;
  border-color: #52665f;
}

.v5-module-top button:not(.gray), .v52-card-actions button:not(.gray) {
  background: linear-gradient(180deg,#3c9977,#318063);
  border-color: #56bd97;
}

.v5-module-summary {
  position: relative;
  z-index: 1;
  min-height: 0;
  max-height: 118px;
  overflow: hidden;
  background: #0e1412;
  border: 1px solid #27312e;
  border-radius: 11px;
  padding: 13px 14px;
  color: #dae1df;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

.v5-module-summary:not(.empty) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.v5-module-footer {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  color: #778480;
}

.v5-mini {
  background: #19221f!important;
  border: 1px solid #2e3a36!important;
  color: #c3ccc9!important;
}
/* Optional / feedback / notes */

.v5-panel {
  padding: 17px;
}

.v5-panel h2 {
  font-size: 16px;
}

#v5CompatibilityPanel {
  background: linear-gradient(180deg,#121a17,#0f1614);
}

.v5-compat-item {
  background: #0e1412;
  border-color: #26312d;
  color: #cbd4d1;
}

.v551-build-notes-panel {
  opacity: .94;
}
/* Output */

.v5-output-card {
  top: 76px;
  max-height: calc(100vh - 94px);
  padding: 18px;
  box-shadow: var(--v7vs-shadow);
  border-color: #2f3b37;
}

.v5-output-head h2 {
  font-size: 21px;
  letter-spacing: -.35px;
}

.v7vs-output-subtitle {
  margin: 3px 0 0;
  color: #95a29d;
  font-size: 11px;
  line-height: 1.4;
}

.v5-meter {
  background: #101714;
  border: 1px solid #2a3531;
  color: #a2aeaa;
}

.v5-output-card .tabs {
  gap: 7px;
  margin-top: 13px;
  margin-bottom: 9px;
}

.v5-output-card .tabs button {
  background: #1a2220;
  border: 1px solid #2c3733;
  color: #cfd8d5;
  border-radius: 8px;
  padding: 8px 11px;
}

.v5-output-card .tabs button.active {
  background: linear-gradient(180deg,#4bd3a1,#3daa82);
  border-color: #6ee6ba;
  color: white;
}

.v5-output-card .output {
  background: #080c0b;
  border: 1px solid #2b3633;
  border-radius: 10px;
  color: #f2f5f4;
  font-size: 12px;
  line-height: 1.56;
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .01);
}

.v5-output-actions {
  gap: 7px;
}

.v5-output-actions button {
  background: #1b2421;
  border: 1px solid #2f3b37;
  color: #eff4f2;
}

.v5-output-actions button.good {
  background: linear-gradient(180deg,#4fd8a6,#3eb287);
  border-color: #6ae2b6;
  box-shadow: 0 8px 18px rgba(79, 216, 166, .14);
}

.v52-feedback-button {
  background: #19221f!important;
  border: 1px solid #323f3a!important;
  color: #e0e6e4!important;
}

.v5-output-subactions button {
  background: #151d1a;
  border: 1px solid #283430;
  color: #b4c0bc;
}

.v5-small-note {
  color: #75827e;
}
/* Fast workflow is deliberately secondary and collapsed. */

.v7vs-fast-section {
  margin: 16px 0 14px;
  scroll-margin-top: 76px;
}

.v7vs-fast-details {
  overflow: hidden;
  border: 1px solid rgba(118, 231, 190, .23);
  border-radius: 16px;
  background: linear-gradient(120deg,rgba(118, 231, 190, .07),rgba(27, 45, 41, .55) 42%,rgba(15, 22, 20, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

.v7vs-fast-details>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
}

.v7vs-fast-details>summary::-webkit-details-marker {
  display: none;
}

.v7vs-fast-summary-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.v7vs-fast-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(118, 231, 190, .13);
  border: 1px solid rgba(118, 231, 190, .24);
  color: #8cebc8;
  font-size: 20px;
}

.v7vs-fast-summary-main h2 {
  margin: 0;
  font-size: 16px;
  color: #f6faf8;
}

.v7vs-fast-summary-main p {
  margin: 3px 0 0;
  color: #94a19d;
  font-size: 11px;
}

.v7vs-fast-summary-side {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a8d6c5;
  font-size: 11px;
  white-space: nowrap;
}

.v7vs-fast-caret {
  font-size: 18px;
  transition: transform .18s ease;
}

.v7vs-fast-details[open] .v7vs-fast-caret {
  transform: rotate(180deg);
}

.v7vs-fast-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.v7vs-fast-body .v5-panel {
  margin: 0;
  border-radius: 12px;
  background: #131a18;
}

.v7vs-fast-body .v61-library-entry {
  margin-top: 0;
}

.v61-quick-look-card {
  display: none!important;
}
/* Fields / buttons harmonization */

select, input, textarea {
  background: #131a18;
  border-color: #3d4c47;
  color: #f2f5f4;
}

select:focus, input:focus, textarea:focus {
  outline: 2px solid rgba(118, 231, 190, .18);
  outline-offset: 1px;
  border-color: #4c6c60;
}

label {
  color: #90e5c6;
}
/* Screen/modal polish */

.screen {
  background: rgba(6, 9, 8, .78);
  backdrop-filter: blur(10px);
}

.screen-inner {
  background: #0d1210;
  border-color: #293430;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.screen-head {
  background: rgba(13, 18, 16, .94);
}

.screen-head h2 {
  color: #8cebc8;
}

.section {
  background: #131917;
  border-color: #2a3632;
}

.section summary {
  color: #9ceed0;
}

.usebar {
  background: rgba(16, 23, 20, .96);
  border-color: #2d3a35;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .22);
}
/* Responsive */

@media(max-width:1200px) {
  .v61-refinement-layout {
    grid-template-columns: minmax(0,1fr) 370px;
  }
  .v5-app {
    padding-left: 20px;
    padding-right: 20px;
  }
  .v61-flow-strip button {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media(max-width:960px) {
  .v5-topbar {
    align-items: flex-start;
  }
  .v61-flow-strip {
    position: sticky;
    top: 6px;
  }
  .v61-refinement-layout {
    grid-template-columns: 1fr;
  }
  .v5-output-card {
    position: static;
    max-height: none;
    box-shadow: none;
  }
  .v5-output-col {
    order: 2;
  }
  .v5-workspace {
    order: 1;
  }
}

@media(max-width:700px) {
  .v5-app {
    padding: 12px 12px calc(22px + var(--safe));
  }
  .v5-topbar {
    padding: 3px 2px 14px;
    gap: 12px;
  }
  .v5-topbar>div:first-child {
    padding-left: 44px;
  }
  .v7vs-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .v7vs-brand-mark svg {
    width: 22px;
    height: 22px;
  }
  .v5-topbar h1 {
    font-size: 23px;
  }
  .v5-topbar h1 span {
    font-size: 9px;
    margin-left: 4px;
    padding: 3px 6px;
  }
  .v5-topbar p {
    font-size: 10px;
    max-width: 260px;
  }
  .v5-top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 138px;
  }
  .v5-status {
    width: 100%;
    text-align: center;
    font-size: 9px;
    padding: 5px 7px;
  }
  .v5-top-actions button {
    min-width: 62px;
    padding: 7px 9px;
    font-size: 11px;
  }
  .v61-flow-strip {
    position: sticky;
    top: 4px;
    margin: 0 0 12px;
    padding: 6px;
    gap: 5px;
    overflow-x: auto;
    border-radius: 12px;
  }
  .v61-flow-label {
    display: none;
  }
  .v61-flow-strip button {
    flex: 0 0 auto;
    min-height: 39px;
    padding: 6px 9px;
    font-size: 10px;
    border-radius: 8px;
  }
  .v61-flow-strip button span {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 9px;
  }
  .v61-flow-strip .v7vs-fast-nav {
    border-left: 0;
    border-radius: 8px;
    margin-left: 0;
  }
  .v5-module-card {
    padding: 16px 14px 13px;
    border-radius: 13px;
  }
  .v5-module-card h2 {
    font-size: 17px;
  }
  .v7vs-card-subtitle {
    font-size: 10px;
  }
  .v5-module-top {
    align-items: flex-start;
    gap: 8px;
  }
  .v5-module-top>button, .v52-card-actions {
    max-width: 48%;
  }
  .v5-module-summary {
    font-size: 11px;
    max-height: 108px;
    -webkit-line-clamp: 5;
  }
  .v5-module-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .v5-output-card {
    padding: 15px;
    border-radius: 13px;
  }
  .v5-output-head h2 {
    font-size: 18px;
  }
  .v5-output-card .output {
    height: 330px;
    max-height: 48vh;
  }
  .v7vs-fast-details>summary {
    padding: 13px;
  }
  .v7vs-fast-summary-side {
    display: none;
  }
  .v7vs-fast-summary-main p {
    font-size: 10px;
  }
  /* Mobile builders: actions are inline, never float over form controls. */
  .screen .usebar, .screen.open .usebar {
    position: static!important;
    left: auto!important;
    right: auto!important;
    bottom: auto!important;
    border-radius: 11px!important;
    margin: 14px 0 0!important;
    padding: 10px!important;
    box-shadow: none!important;
  }
  .screen .usebar button {
    min-height: 44px;
  }
  .screen-inner {
    padding-bottom: calc(18px + var(--safe));
  }
}

@media(max-width:520px) {
  .v5-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .v5-top-actions {
    max-width: 128px;
    gap: 5px;
  }
  .v5-top-actions button {
    min-width: 58px;
  }
  .v61-flow-strip button {
    font-size: 0;
    gap: 0;
  }
  .v61-flow-strip button span {
    font-size: 9px;
  }
  .v61-flow-strip .v7vs-fast-nav {
    font-size: 0;
  }
  .v61-flow-strip .v7vs-fast-nav span {
    font-size: 13px;
  }
  .v5-module-top {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
  }
  .v52-card-actions {
    max-width: none;
  }
  .v5-module-top>button {
    max-width: none;
  }
}
/* Keep Reset All quiet and secondary beside the Identity actions. */

.v52-card-actions .v7r1-reset-all-link {
  flex: 0 0 auto!important;
  width: auto!important;
  min-width: 0!important;
  margin-left: auto!important;
  padding: 2px 1px!important;
  background: transparent!important;
  border: 0!important;
  box-shadow: none!important;
  color: #85928e!important;
  font-size: 10px!important;
  line-height: 1.2!important;
  transform: none!important;
}

.v52-card-actions .v7r1-reset-all-link:hover {
  color: #c5cecb!important;
  background: transparent!important;
}

@media(max-width:700px) {
  .v52-card-actions .v7r1-reset-all-link {
    flex: 0 0 100%!important;
    text-align: right!important;
    justify-content: flex-end!important;
  }
}

/* ======================================================================
   Builder card photography, gallery preview and workflow strip
   ====================================================================== */

/* =========================================================
   BARROW FORGE — PROMPT STUDIO V7 VISUAL SHELL TEST 2
   UI/content refinement layered over Visual Shell Test 1.
   ========================================================= */
/* Workflow navigator now visually belongs to the builder column. */

@media (min-width:1201px) {
  .v61-flow-strip {
    width: calc(100% - 450px);
    max-width: calc(100% - 450px);
    margin-right: auto;
  }
}

@media (min-width:961px) and (max-width:1200px) {
  .v61-flow-strip {
    width: calc(100% - 390px);
    max-width: calc(100% - 390px);
    margin-right: auto;
  }
}

@media (max-width:960px) {
  .v61-flow-strip {
    width: 100%;
    max-width: 100%;
  }
}

.v61-flow-strip button {
  flex: 0 1 auto;
  min-width: 0;
}

.v61-flow-strip button[data-v7vs-step="1"] {
  min-width: 120px;
}

.v61-flow-strip button[data-v7vs-step="2"] {
  min-width: 118px;
}

.v61-flow-strip button[data-v7vs-step="3"] {
  min-width: 180px;
}

.v61-flow-strip button[data-v7vs-step="4"] {
  min-width: 142px;
}

.v61-flow-strip .v7vs-fast-nav {
  margin-left: auto;
  min-width: 145px;
  flex: 0 0 auto;
}

@media(max-width:700px) {
  .v61-flow-strip button[data-v7vs-step], .v61-flow-strip .v7vs-fast-nav {
    min-width: auto;
  }
}
/* Header gallery entry */

/* Builder photography slots */

.v5-module-card.v7vs2-has-media {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  grid-template-areas: "media head" "media summary" "media footer";
  column-gap: 16px;
  align-items: start;
}

.v5-module-card.v7vs2-has-media .v7vs2-card-media {
  grid-area: media;
  position: relative;
  z-index: 1;
  width: 118px;
  height: 100%;
  min-height: 190px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #323e3a;
  background: #0c110f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.v5-module-card.v7vs2-has-media .v7vs2-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  filter: saturate(.86) contrast(1.02);
}

.v5-module-card.v7vs2-has-media .v7vs2-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 56%,rgba(6, 10, 9, .30));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

.v5-module-card.v7vs2-has-media .v5-module-top {
  grid-area: head;
}

.v5-module-card.v7vs2-has-media .v5-module-summary {
  grid-area: summary;
}

.v5-module-card.v7vs2-has-media .v5-module-footer {
  grid-area: footer;
}
/* Outfit guided flow */

#v61GuidedOutfit {
  border-color: #2e433b;
  background: linear-gradient(180deg,#141b1a,#121716);
}

#v61GuidedOutfit>summary {
  color: #a9f0d6;
}

.v7vs2-guided-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.v7vs2-guided-actions .good {
  min-width: 155px;
}

.v7vs2-use-outfit-now {
  background: linear-gradient(180deg,#4ac799,#359773)!important;
  border-color: #62dbaf!important;
  color: #ffffff!important;
  box-shadow: 0 7px 18px rgba(74, 199, 153, .13);
}

.v7vs2-guided-choice {
  color: #96a39f;
  font-size: 11px;
  line-height: 1.45;
}
/* Homepage Gallery showcase */

.v7vs2-gallery-showcase {
  margin: 16px 0 14px;
  padding: 18px;
  border: 1px solid #2c3733;
  border-radius: 16px;
  background: linear-gradient(180deg,rgba(20, 28, 25, .97),rgba(13, 19, 17, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.v7vs2-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 13px;
}

.v7vs2-gallery-head h2 {
  margin: 2px 0 0;
  font-size: 18px;
  color: #f6faf8;
}

.v7vs2-gallery-head p {
  margin: 4px 0 0;
  max-width: 600px;
  color: #8c9a95;
  font-size: 11px;
  line-height: 1.5;
}

.v7vs2-gallery-head a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
  color: #c9f6e5;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 10px;
  border: 1px solid rgba(118, 231, 190, .24);
  border-radius: 9px;
  background: rgba(118, 231, 190, .07);
}

.v7vs2-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 9px;
}

.v7vs2-gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid #313c38;
  background: #0d1210;
  aspect-ratio: 4/5;
  text-decoration: none;
  color: #ffffff;
  min-width: 0;
}

.v7vs2-gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease,filter .22s ease;
}

.v7vs2-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 46%,rgba(4, 7, 6, .88));
  pointer-events: none;
}

.v7vs2-gallery-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.04);
}

.v7vs2-gallery-card-copy {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 9px;
}

.v7vs2-gallery-card-copy small {
  display: block;
  margin-bottom: 2px;
  color: #9de7cc;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.v7vs2-gallery-card-copy strong {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width:900px) {
  .v7vs2-gallery-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .v7vs2-gallery-card:nth-child(n+4) {
    display: none;
  }
}

@media(max-width:700px) {
  .v5-module-card.v7vs2-has-media {
    grid-template-columns: 82px minmax(0,1fr);
    grid-template-areas: "media head" "media summary" "footer footer";
    column-gap: 11px;
  }
  .v5-module-card.v7vs2-has-media .v7vs2-card-media {
    width: 82px;
    min-height: 112px;
    height: 112px;
    border-radius: 10px;
  }
  .v5-module-card.v7vs2-has-media .v7vs2-card-media img {
    min-height: 112px;
  }
  .v5-module-card.v7vs2-has-media .v5-module-footer {
    grid-area: footer;
  }
  .v7vs2-gallery-showcase {
    padding: 14px;
  }
  .v7vs2-gallery-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .v7vs2-gallery-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .v7vs2-gallery-card:nth-child(4) {
    display: block;
  }
  .v7vs2-gallery-card:nth-child(n+5) {
    display: none;
  }
}

@media(max-width:520px) {
  .v5-module-card.v7vs2-has-media {
    grid-template-columns: 74px minmax(0,1fr);
  }
  .v5-module-card.v7vs2-has-media .v7vs2-card-media {
    width: 74px;
    height: 104px;
    min-height: 104px;
  }
  .v5-module-card.v7vs2-has-media .v7vs2-card-media img {
    min-height: 104px;
  }
  .v7vs2-gallery-grid {
    gap: 7px;
  }
}

#v5CharacterCard, #v5OutfitCard, #v7vs2PoseCard, #v7vs2ShotCard {
  scroll-margin-top: 76px;
}

/* ======================================================================
   Gallery navigation link and aspect-ratio controls
   ====================================================================== */

.v61-flow-strip .v7-launch-gallery-nav {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 8px 10px;
  margin-left: 6px;
  border-left: 1px solid #4f655d;
  color: #d9f4ea;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.v61-flow-strip .v7-launch-gallery-nav:hover {
  color: #99edce;
  background: #ffffff0a;
}

.v61-flow-strip .v7-launch-gallery-nav:focus-visible {
  outline: 2px solid #99edce;
  outline-offset: 2px;
}

.v7-launch-aspect {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #4f655d;
}

.v7-launch-aspect .desktop-note {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}

.v7-launch-aspect label {
  line-height: 1.5;
}

/* ======================================================================
   Dataset Builder
   ====================================================================== */

.ds-inner {
  max-width: 1400px;
  padding: 24px;
}

.ds-inner h2 small {
  font-size: 12px;
  color: #aeb9b5;
}

.ds-lead {
  color: #c6d2ce;
}

.ds-setup {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 18px;
}

.ds-inner label {
  display: block;
  margin: 12px 0 6px;
}

.ds-inner input:not([type=checkbox]), .ds-inner textarea, .ds-inner select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
}

.ds-inner textarea {
  line-height: 1.5;
  resize: vertical;
}

.ds-actions, .ds-toolbar, .ds-title {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ds-toolbar {
  padding: 16px 0;
  border-bottom: 1px solid #3c4a46;
  margin-bottom: 18px;
  justify-content: space-between;
}

.ds-toolbar label {
  margin: 0;
}

.ds-toolbar select {
  width: auto;
  display: inline;
}

.ds-layout {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 24px;
}

.ds-shot {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  background: #17201d;
  border: 1px solid #3c4a46;
}

.ds-shot small {
  display: block;
  font-size: 11px;
  color: #b3c5bf;
  margin-top: 5px;
}

.ds-shot.selected {
  border-color: #8debc9;
  background: #21372f;
}

.ds-layout main {
  min-width: 0;
}

#dsFilename {
  font-family: monospace;
  color: #acd3c1;
}

#dsStatus {
  font-size: 12px;
  color: #b5d6c7;
}

.ds-title {
  justify-content: space-between;
}

.ds-title input {
  width: auto;
}

.ds-title h3 {
  margin: 0;
  font-size: 23px;
}

.ds-inner [hidden] {
  display: none!important;
}

@media(min-width:900px) {
  #dsList {
    max-height: 75vh;
    overflow-y: auto;
    position: sticky;
    top: 75px;
  }
}

@media(max-width:700px) {
  .ds-inner {
    padding: 14px;
  }
  .ds-setup, .ds-layout {
    grid-template-columns: 1fr;
  }
  #dsList {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .ds-shot {
    flex: 0 0 210px;
  }
  .ds-actions button {
    flex: 1;
  }
  .ds-toolbar {
    align-items: flex-start;
  }
}

/* ======================================================================
   Dataset card and Libraries navigation
   ====================================================================== */

.prerelease-dataset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
}

.prerelease-dataset-card h2 {
  margin: 5px 0;
}

.prerelease-dataset-card p {
  color: #b1beba;
  margin: 4px 0;
  font-size: 13px;
}

.v61-flow-strip {
  flex-wrap: wrap;
}

.v61-flow-strip .prerelease-libraries-nav {
  flex: 0 0 auto;
  min-width: 0;
  border-left: 1px solid #4f655d;
  border-radius: 0;
  padding: 8px 10px;
  color: #d9f4ea;
}

@media(max-width:700px) {
  .prerelease-dataset-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .v61-flow-strip .prerelease-libraries-nav {
    font-size: 11px;
  }
}

@media(min-width:1000px) {
  .v61-flow-strip {
    gap: 3px;
  }
  .v61-flow-strip button[data-v7vs-step], .v61-flow-strip .v7vs-fast-nav {
    min-width: 0;
    flex: 0 1 auto;
    padding: 8px;
    font-size: 11px;
    gap: 6px;
  }
  .v61-flow-strip button span {
    width: 22px;
    height: 22px;
  }
  .v61-flow-strip .v7vs-fast-nav {
    margin-left: auto;
  }
  .v61-flow-strip .v7-launch-gallery-nav {
    margin-left: 0;
    padding: 8px;
    font-size: 11px;
  }
}

/* ======================================================================
   Layout fixes
   ====================================================================== */

/* Builder photography keeps its 4:5 shape, so nothing inside the image is cropped. */
.v5-module-card.v7vs2-has-media .v7vs2-card-media {
  align-self: start;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
}
.v5-module-card.v7vs2-has-media .v7vs2-card-media img {
  height: 100%;
  min-height: 0;
}

/* Update Notes list. */
.v551-build-notes-rows ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #c6d2ce;
  font-size: 13px;
  line-height: 1.55;
}

/* The prompt length meter stays on one line. */
.v5-meter {
  white-space: nowrap;
}

@media (max-width: 700px) {
  /* Workflow strip: a single scrollable row without wrapped dividers. */
  .v61-flow-strip {
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .v61-flow-strip .v7-launch-gallery-nav, .v61-flow-strip .prerelease-libraries-nav {
    flex: 0 0 auto;
    margin-left: 0;
    border-left: 0;
    padding: 6px 7px;
    font-size: 11px;
  }
  .v61-flow-strip {
    gap: 4px;
  }
  .v5-module-card.v7vs2-has-media .v5-module-summary {
    margin-top: 0;
  }

  /* Builder cards: actions sit below the title (never over the eyebrow) and the summary uses the full card width. */
  .v5-module-card.v7vs2-has-media {
    grid-template-areas: "media head" "summary summary" "footer footer";
    row-gap: 12px;
  }
  .v5-module-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .v5-module-top > button, .v52-card-actions {
    max-width: none;
    align-self: flex-start;
  }
  .v5-module-card.v7vs2-has-media .v7vs2-card-media, .v5-module-card.v7vs2-has-media .v7vs2-card-media img {
    height: auto;
    min-height: 0;
  }
  .v5-module-card.v7vs2-has-media .v7vs2-card-media img {
    height: 100%;
  }
}

@media (max-width: 520px) {
  .v5-module-top {
    display: flex;
  }
  .v61-flow-strip button[data-v7vs-step], .v61-flow-strip .v7vs-fast-nav {
    flex: 0 0 auto;
    padding: 6px 5px;
  }
}

/* ---------------------------------------------------------------
   Mobile Primary Output (<= 960px)

   The output panel is pinned to the bottom of the viewport and slid
   out of view; a floating pill shows the live prompt length, copies
   in one tap, and slides the panel back up. Above 960px none of this
   applies and the panel stays in the right-hand column.
   --------------------------------------------------------------- */

.v7m-pill, .v7m-backdrop, .v7m-sheet-bar {
  display: none;
}

@media (max-width: 960px) {
  .v7m-pill {
    position: fixed;
    right: 12px;
    bottom: calc(12px + var(--safe));
    z-index: 95;
    display: flex;
    align-items: stretch;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--v7vs-line);
    border-radius: 999px;
    background: var(--v7vs-panel2);
    box-shadow: 0 8px 26px rgba(0,0,0,.5);
    overflow: hidden;
  }
  body.v7m-output-open .v7m-pill {
    display: none;
  }
  /* Clear the sticky Use bar inside a builder screen: 64px tall, 28px off the
     bottom edge. It only sticks above 700px; below that it scrolls with content. */
  @media (min-width: 701px) {
    .screen.open ~ .v7m-pill {
      bottom: calc(104px + var(--safe));
    }
  }

  .v7m-pill button {
    font: inherit;
    font-size: 13px;
    color: var(--v7vs-text);
    background: none;
    border: 0;
    min-height: 44px;
    cursor: pointer;
  }
  .v7m-pill-open {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 12px 0 16px;
    min-width: 0;
  }
  .v7m-pill-label {
    font-weight: 700;
    letter-spacing: .01em;
  }
  .v7m-pill-count {
    color: var(--v7vs-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v7m-pill-copy {
    padding: 0 17px;
    font-weight: 700;
    color: #05130d;
    background: var(--v7vs-accent);
    border-left: 1px solid var(--v7vs-line) !important;
  }
  .v7m-pill button:focus-visible {
    outline: 2px solid var(--v7vs-blue);
    outline-offset: -3px;
  }

  .v7m-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: none;
    background: rgba(5,11,9,.64);
    backdrop-filter: blur(2px);
  }
  body.v7m-output-open .v7m-backdrop {
    display: block;
  }

  /* The panel itself, repositioned. Nothing inside it changes. */
  #outputPanel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px calc(12px + var(--safe));
    border-top: 1px solid var(--v7vs-line);
    border-radius: 18px 18px 0 0;
    background: var(--v7vs-bg2);
    box-shadow: 0 -18px 50px rgba(0,0,0,.55);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
  }
  body.v7m-output-open #outputPanel {
    transform: none;
    visibility: visible;
  }

  .v7m-sheet-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 2px 6px;
    background: var(--v7vs-bg2);
  }
  .v7m-grip {
    position: absolute;
    left: 50%;
    top: 12px;
    width: 42px;
    height: 4px;
    margin-left: -21px;
    border-radius: 999px;
    background: var(--v7vs-line);
  }
  .v7m-sheet-close {
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--v7vs-accent-soft);
    background: none;
    border: 0;
    padding: 6px 10px;
    min-height: 40px;
    cursor: pointer;
  }
  .v7m-sheet-close:focus-visible {
    outline: 2px solid var(--v7vs-blue);
    outline-offset: -2px;
  }

  /* In the sheet the panel has already been asked for by name, so the standing
     headline and blurb are dead weight -- give that room to the prompt instead. */
  #outputPanel .v7vs-output-subtitle {
    display: none;
  }
  #outputPanel .v5-output-head {
    align-items: center;
    gap: 10px;
  }
  #outputPanel .v5-output-head h2 {
    font-size: 17px;
    line-height: 1.25;
  }
  #outputPanel .v5-output-head .v5-eyebrow {
    margin-bottom: 2px;
  }

  /* Keep the pill clear of the last control on the page and in every builder. */
  .v5-app {
    padding-bottom: calc(80px + var(--safe));
  }
  .screen-inner {
    padding-bottom: calc(86px + var(--safe));
  }
}

@media (prefers-reduced-motion: reduce) {
  #outputPanel {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Reference Look cards and filters

   A look card carries its traits in plain words, the shot it suggests and
   the length of the prompt it produces, so the grid can be browsed rather
   than opened one card at a time.
   --------------------------------------------------------------- */

.v52-library-refine {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
}

.v52-library-refine .v52-library-filter-label {
  margin: 0 4px 0 0;
}

.v52-library-refine .v7l-refine-gap {
  margin-left: 14px;
}

.v52-library-refine button {
  padding: 5px 11px;
  font-size: 12px;
  background: none;
  border: 1px solid var(--bf-line);
  color: var(--bf-muted);
  border-radius: 999px;
}

.v52-library-refine button.active {
  border-color: var(--bf-accent-dim);
  color: var(--bf-accent);
  background: var(--bf-panel2);
}

.v604-library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v7l-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0;
}

.v7l-traits span {
  font-size: 11px;
  line-height: 1.5;
  color: var(--bf-muted);
  border: 1px solid var(--bf-line);
  border-radius: 4px;
  padding: 2px 7px;
}

.v7l-shot {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bf-text);
}

.v7l-shot-label {
  display: block;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bf-muted);
  margin-bottom: 2px;
}

.v7l-chars {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--bf-accent);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Workflow strip icons

   Fast Workflow, View Gallery and Libraries share one 22px inline-SVG
   mark: stroked, not filled, so they keep the weight of the text beside
   them and pick up the accent on hover without loading an image.
   --------------------------------------------------------------- */

.v7n-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--bf-muted);
  transition: color .16s ease;
}

.v7vs-fast-nav .v7n-icon {
  fill: currentColor;
  stroke: none;
}

.v61-flow-strip button:hover .v7n-icon,
.v61-flow-strip a:hover .v7n-icon,
.v61-flow-strip button:focus-visible .v7n-icon,
.v61-flow-strip a:focus-visible .v7n-icon {
  color: var(--bf-accent);
}

.v7vs-fast-nav,
.v7-launch-gallery-nav,
.prerelease-libraries-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .v7n-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Brand layer — Barrow Forge Studio

   Header, panel and control treatment for the Obsidian identity. The
   palette above is already remapped to it; these rules carry the parts
   that are shape rather than colour. Tokens live in :root at the top.
   --------------------------------------------------------------- */

html, body { background: var(--bf-bg); color: var(--bf-text); }

body { -webkit-font-smoothing: antialiased; }

/* Header ---------------------------------------------------------------- */
.v5-topbar { padding-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--bf-line); }
.v7vs-brand-mark {
  width: 46px; height: 46px; background: none; border: 0; box-shadow: none; border-radius: 0;
  background-image: url(../assets/mark.png); background-size: contain; background-repeat: no-repeat; background-position: center;
}
.v7vs-brand-mark svg { display: none; }
.v5-kicker {
  color: var(--bf-silver); font-size: 10px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
}
.v5-topbar h1 {
  font-weight: 300; letter-spacing: .04em; color: #ffffff;
  font-size: 30px; margin-top: 4px;
}
.v5-topbar h1 span {
  background: none; border: 1px solid var(--bf-line); color: var(--bf-muted);
  font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 8px; vertical-align: middle; margin-left: 10px;
}
.v5-topbar p { color: var(--bf-muted); letter-spacing: .01em; }

/* Panels and cards ------------------------------------------------------ */
.v5-module-card, .v5-panel, .v5-output-card, .v7vs2-gallery-showcase, .v7r1-fast-workflow-shell {
  background: linear-gradient(180deg,#121816,#0e1311); border: 1px solid var(--bf-line); border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(47,227,155,.18), 0 18px 60px rgba(0,0,0,.55);
}
.v5-eyebrow, .v5-module-top .v5-eyebrow {
  color: var(--bf-muted); font-size: 9px; letter-spacing: .26em; font-weight: 600;
}
.v5-module-card h2, .v5-panel h2, .v5-output-head h2 {
  font-weight: 500; letter-spacing: .01em; color: #ffffff;
}
.v7vs-card-subtitle, .v5-module-footer span, .v5-module-summary { color: var(--bf-muted); }

/* Workflow strip -------------------------------------------------------- */
.v61-flow-strip { background: var(--bf-panel); border: 1px solid var(--bf-line); box-shadow: none; }
.v61-flow-strip button { background: transparent; border: 1px solid transparent; color: var(--bf-text); }
.v61-flow-strip button:hover { border-color: var(--bf-line); background: var(--bf-panel2); }
.v61-flow-strip button span { background: var(--bf-panel2); border: 1px solid var(--bf-line); color: var(--bf-accent); }

/* Buttons --------------------------------------------------------------- */
button, .v5-mini, .v5-link-button { letter-spacing: .02em; }
button {
  background: var(--bf-panel2); border: 1px solid var(--bf-line); color: var(--bf-text); font-weight: 500;
}
button:hover { border-color: var(--bf-accent-dim); background: var(--bf-panel2); }
/* One emerald action per context: the card's primary, Copy, Apply, and active tabs. */
.v5-module-top button:not(.gray):not(.v5-link-button),
.v5-output-actions button.good,
.v7vs2-use-outfit-now,
button.good,
.v52-feedback-button {
  background: linear-gradient(180deg, var(--bf-accent), var(--bf-accent-dim));
  border: 0; color: #05130d; font-weight: 600;
}
.v52-feedback-button { background: none; border: 1px solid var(--bf-line); color: var(--bf-text); font-weight: 500; }
.v5-output-subactions button, .v5-mini { background: none; border: 1px solid var(--bf-line); color: var(--bf-muted); }
.tabs button { background: none; border: 1px solid transparent; color: var(--bf-muted); }
.tabs button.active { background: var(--bf-panel2); border-color: var(--bf-accent-dim); color: var(--bf-accent); }
.v5-link-button { background: none; border: 0; color: var(--bf-muted); }

/* Workflow chips stay quiet; only the step number carries the accent. */
.v61-flow-strip button, .v61-flow-strip .v7vs-fast-nav, .v61-flow-strip .prerelease-libraries-nav, .v61-flow-strip .v7-launch-gallery-nav {
  background: none; border: 1px solid transparent; color: var(--bf-text); font-weight: 500;
}
.v61-flow-strip button:hover, .v61-flow-strip a:hover { background: var(--bf-panel2); border-color: var(--bf-line); }
.v61-flow-strip button span { background: none; border: 1px solid var(--bf-line); color: var(--bf-accent); font-weight: 600; }
.v61-flow-label { color: var(--bf-muted); letter-spacing: .26em; }

/* Gallery preview ------------------------------------------------------- */
.v7vs2-gallery-card img { filter: saturate(.9); }
.v7vs2-gallery-card-copy small { color: var(--bf-accent); letter-spacing: .2em; }

/* Utilities replacing inline style attributes ---------------------------- */
/* Every rule below moved out of a style="" attribute in index.html so the
   Content Security Policy can drop 'unsafe-inline' from style-src. */
.bf-mt-8 { margin-top: 8px; }
.bf-mt-9 { margin-top: 9px; }
.bf-mt-10 { margin-top: 10px; }
.bf-mt-12 { margin-top: 12px; }

.acc-group {
  border: 1px solid var(--border, #514558);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}

.ds-stale {
  color: #ffd48b;
  border: 1px solid #8c6e44;
  padding: 12px;
}

/* Collapsible Library cards ---------------------------------------------
   The card is a row until it is opened: picture, name, one line. Everything
   the old card showed at once now lives in .v7c-body. */
.v7c-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.v7c-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: 16px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.v7c-head:hover { background: #18201d; }
.v7c-head:focus-visible { outline: 2px solid var(--bf-accent, #7fd3ae); outline-offset: -3px; }

.v7c-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #19201e, #232b29);
  border: 1px solid #2d3734;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.v7c-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The looks are portraits; crop to the face rather than the middle. */
  object-position: 50% 22%;
  display: block;
}

.v7c-thumb span {
  font-size: 8px;
  letter-spacing: .12em;
  font-weight: 800;
  color: #9eb6ae;
  text-align: center;
  padding: 0 4px;
}

.v7c-headtext { min-width: 0; display: block; }
.v7c-headtext .eyebrow { display: block; font-size: .6rem; letter-spacing: .12em; }

.v7c-headtext h3 {
  margin: 1px 0 0;
  font-size: .98rem;
  line-height: 1.25;
}

/* One line, clipped. The full text is inside the panel. */
.v7c-headtext .sub {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: #9eaea8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v7c-chev {
  width: 20px;
  height: 20px;
  position: relative;
  justify-self: end;
  opacity: .65;
}

.v7c-chev::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.v7c-card.open .v7c-chev::before { transform: rotate(-135deg) translate(-3px, -3px); }
.v7c-card.open .v7c-head { background: #18201d; border-radius: 16px 16px 0 0; }

.v7c-body {
  padding: 12px;
  border-top: 1px solid #28312e;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* display:flex above outranks the browser's own [hidden] rule, so say it here. */
.v7c-body[hidden] { display: none; }

/* Inside the panel nothing needs a reserved height any more. */
.v7c-body .desc, .v604-library-card .v7c-body .desc { min-height: 0; }
.v7c-body .v7l-traits, .v7c-body .v7l-shot, .v7c-body .v7l-chars { margin-top: 0; }
.v7c-body .v5-library-actions { margin-top: 2px; }

.v7c-hero {
  display: block;
  height: 190px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #19201e, #232b29);
}

.v7c-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

/* Collapsed rows are short, so the grid can hold narrower columns. */
.v5-library-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }

@media (max-width: 720px) {
  .v7c-head { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 10px; padding: 9px 10px; }
  .v7c-thumb { width: 48px; height: 48px; }
  .v7c-hero { height: 150px; }
}

/* Restated after the grid override above, which would otherwise win on width. */
@media (max-width: 980px) {
  .v5-library-grid, .v5-library-grid.compact { grid-template-columns: 1fr; }
}

/* The category strip sticks to the top of the Library. Its fade-out background
   only covered the first row of chips, so on a narrow screen -- where the chips
   wrap to three rows -- the cards scrolled through them. Solid behind the whole
   strip below the wrap point, with the fade kept for the single-row case. */
@media (max-width: 820px) {
  .v604-library-categories {
    background: #0f1110;
    box-shadow: 0 8px 12px -8px rgba(0, 0, 0, .8);
  }
}

/* Footer -----------------------------------------------------------------
   Says plainly where a visitor's work is kept, since none of it leaves the
   browser and nobody should have to guess that. */
.bf-footer {
  margin: 28px 0 0;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--bf-line, #28312e);
  color: var(--bf-muted, #8f9c96);
  font-size: .86rem;
  line-height: 1.6;
  max-width: 820px;
}

.bf-footer p { margin: 0 0 10px; }
.bf-footer strong { color: var(--bf-text, #e9efeb); font-weight: 600; }
.bf-footer a { color: var(--bf-accent, #2fe39b); }

.bf-footer-meta {
  margin: 14px 0 0;
  font-size: .78rem;
  letter-spacing: .04em;
}

/* The floating prompt pill sits over the bottom of the page on a phone. */
@media (max-width: 960px) {
  .bf-footer { padding-bottom: 96px; }
}