:root {
  --bg: #030504;
  --panel: rgba(15, 17, 16, 0.72);
  --panel-strong: rgba(22, 24, 23, 0.86);
  --line: rgba(231, 255, 241, 0.13);
  --line-strong: rgba(231, 255, 241, 0.28);
  --text: #f5f7f3;
  --muted: #aeb8b0;
  --dim: #737b74;
  --mint: #dff9ec;
  --sage: #a8b9aa;
  --gold: #d9c093;
  --black: #000;
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 14%, rgba(213, 238, 216, 0.24), transparent 34rem),
    radial-gradient(circle at 15% 84%, rgba(170, 204, 203, 0.18), transparent 26rem),
    linear-gradient(145deg, #020302 0%, #050706 54%, #0d120f 100%);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.page-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px 20px 24px;
}

.top-nav {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.brand,
.account-chip,
.nav-pills {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 66% 44%, #0d100e 0 26%, transparent 27%),
    radial-gradient(circle at 44% 50%, #f5fff8 0 37%, transparent 38%),
    linear-gradient(145deg, #eef8ef, #8a9a90);
  box-shadow: 0 0 28px rgba(223, 249, 236, 0.2);
}

.nav-pills {
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.nav-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-pill:hover,
.nav-pill.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.nav-pill:active,
.primary-button:active,
.ghost-button:active {
  transform: translateY(1px);
}

.icon-pill {
  width: 34px;
  padding: 0;
}

.account-chip {
  gap: 9px;
  color: #e6ece7;
  font-size: 13px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dff9ec;
  box-shadow: 0 0 18px rgba(223, 249, 236, 0.8);
}

.workspace-card {
  position: relative;
  min-height: calc(100vh - 92px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px clamp(18px, 3vw, 40px) 28px;
  background:
    linear-gradient(115deg, rgba(0, 0, 0, 0.9), rgba(10, 14, 13, 0.92) 44%, rgba(183, 210, 197, 0.22)),
    var(--black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 90px rgba(0, 0, 0, 0.52);
}

.workspace-card::before,
.workspace-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 249, 236, 0.32), transparent);
}

.workspace-card::before {
  top: 34%;
}

.workspace-card::after {
  bottom: 26%;
}

.ambient {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(8px);
}

.ambient-one {
  width: 52vw;
  height: 52vw;
  top: -18vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(233, 255, 231, 0.42), rgba(171, 198, 190, 0.18) 38%, transparent 68%);
}

.ambient-two {
  width: 28vw;
  height: 28vw;
  bottom: -10vw;
  left: -8vw;
  background: radial-gradient(circle, rgba(178, 214, 214, 0.28), transparent 66%);
}

.orbit-node {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  color: rgba(246, 250, 246, 0.82);
  z-index: 1;
}

.orbit-node::before {
  content: "";
  position: absolute;
  top: 16px;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 249, 236, 0.3));
}

.orbit-node span {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 249, 236, 0.22), rgba(255, 255, 255, 0.03));
}

.orbit-node b {
  font-weight: 500;
}

.orbit-node small {
  color: rgba(255, 255, 255, 0.48);
}

.node-left {
  left: 6%;
  top: 23%;
}

.node-left::before {
  right: 100%;
}

.node-right {
  right: 6%;
  top: 28%;
}

.node-right::before {
  left: 100%;
  transform: rotate(180deg);
}

.workspace-hero {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}

.eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d8e4dc;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.mini-orb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 16px rgba(223, 249, 236, 0.7);
}

.workspace-hero h1 {
  margin: 20px 0 10px;
  font-size: clamp(64px, 8vw, 128px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: 0;
}

.workspace-hero p {
  max-width: 690px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.7;
}

.studio-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(250px, 0.72fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.glass-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.input-panel,
.analysis-panel,
.output-panel,
.generator-panel,
.api-form,
.api-guide {
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head.compact {
  margin-bottom: 10px;
}

.section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.panel-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.drop-zone {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px dashed rgba(223, 249, 236, 0.3);
  border-radius: var(--radius);
  color: #edf6ef;
  background:
    radial-gradient(circle at center, rgba(223, 249, 236, 0.1), transparent 60%),
    rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.drop-zone.drag-over {
  border-color: rgba(223, 249, 236, 0.8);
  box-shadow: 0 0 0 1px rgba(223, 249, 236, 0.26), 0 0 34px rgba(223, 249, 236, 0.14);
}

.reference-drop.drag-over {
  border-color: rgba(223, 249, 236, 0.8);
  box-shadow: 0 0 0 1px rgba(223, 249, 236, 0.22), 0 0 30px rgba(223, 249, 236, 0.12);
}

.drop-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.drop-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--mint);
  font-size: 28px;
}

.drop-zone small {
  color: var(--muted);
}

.drop-zone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  object-position: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.36);
}

.drop-zone.has-image img {
  display: block;
}

.drop-zone.has-image::after {
  content: "更换图片";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(16px);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

input,
select {
  height: 44px;
  padding: 0 12px;
}

textarea {
  resize: vertical;
  min-height: 88px;
  padding: 12px;
}

select option {
  background: #101312;
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(223, 249, 236, 0.65);
  box-shadow: 0 0 0 3px rgba(223, 249, 236, 0.09);
  background: rgba(255, 255, 255, 0.08);
}

.wide-field {
  margin-top: 12px;
}

.primary-button,
.ghost-button {
  border: 0;
  cursor: pointer;
}

.primary-button {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  border-radius: 999px;
  color: #101412;
  font-weight: 700;
  background: linear-gradient(135deg, #f7fff9, #bfd6c7);
  box-shadow: 0 20px 38px rgba(223, 249, 236, 0.16);
}

.primary-button i {
  width: 20px;
  height: 2px;
  background: #101412;
}

.ghost-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.button-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.analysis-panel {
  min-height: 100%;
}

.progress-label {
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

.convergence-stage {
  position: relative;
  height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at center, rgba(223, 249, 236, 0.16), transparent 32%),
    radial-gradient(circle at 50% 110%, rgba(196, 210, 203, 0.2), transparent 44%),
    rgba(0, 0, 0, 0.28);
}

.line-field,
.beam,
.core-orb,
.scan-ring {
  position: absolute;
}

.line-field {
  inset: 0;
}

.beam {
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: linear-gradient(transparent, rgba(223, 249, 236, 0.55), transparent);
  opacity: 0.34;
  transform-origin: center;
}

.beam-a { transform: translateX(-82px); }
.beam-b { transform: translateX(-42px); }
.beam-c { transform: translateX(-10px); }
.beam-d { transform: translateX(24px); }
.beam-e { transform: translateX(66px); }
.beam-f { transform: translateX(108px); }

.convergence-stage.scanning .beam {
  animation: converge 1600ms ease-in-out infinite;
}

.convergence-stage.scanning .beam-b,
.convergence-stage.scanning .beam-e {
  animation-delay: 120ms;
}

.convergence-stage.scanning .beam-c,
.convergence-stage.scanning .beam-f {
  animation-delay: 260ms;
}

@keyframes converge {
  0% { opacity: 0.16; filter: blur(0); }
  50% { opacity: 0.82; transform: translateX(0); filter: blur(0.2px); }
  100% { opacity: 0.24; }
}

.core-orb {
  inset: 50% auto auto 50%;
  width: 94px;
  height: 94px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(223, 249, 236, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(223, 249, 236, 0.08) 42%, transparent 66%);
}

.core-orb span {
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 35px rgba(223, 249, 236, 0.78);
}

.scan-ring {
  inset: 50% auto auto 50%;
  border: 1px solid rgba(223, 249, 236, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 180px;
  height: 180px;
}

.ring-two {
  width: 270px;
  height: 270px;
}

.convergence-stage.scanning .scan-ring {
  animation: pulseRing 1800ms ease-in-out infinite;
}

.convergence-stage.scanning .ring-two {
  animation-delay: 260ms;
}

@keyframes pulseRing {
  0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.65; transform: translate(-50%, -50%) scale(1.06); }
}

.analysis-steps {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.analysis-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--dim);
  background: rgba(255, 255, 255, 0.03);
  counter-increment: steps;
}

.analysis-steps li::before {
  content: counter(steps, decimal-leading-zero);
  color: var(--dim);
  font-size: 11px;
}

.analysis-steps li.active,
.analysis-steps li.done {
  color: var(--text);
  border-color: var(--line);
}

.analysis-steps li.done::before {
  color: var(--mint);
}

.output-panel {
  min-width: 0;
}

.generator-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.generator-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(240px, 0.43fr) minmax(240px, 0.43fr);
  gap: 16px;
  align-items: start;
}

.generation-prompt-field textarea {
  min-height: 250px;
  max-height: 420px;
}

.reference-panel,
.generated-preview-panel {
  display: grid;
  gap: 7px;
  align-content: start;
}

.reference-title,
.preview-title {
  color: var(--muted);
  font-size: 13px;
  line-height: 16px;
}

.reference-drop,
.generated-preview-box {
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 14px;
  border: 1px dashed rgba(223, 249, 236, 0.28);
  border-radius: var(--radius);
  color: #edf6ef;
  background:
    radial-gradient(circle at center, rgba(223, 249, 236, 0.08), transparent 62%),
    rgba(255, 255, 255, 0.035);
}

.reference-drop {
  cursor: pointer;
}

.reference-drop input {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

.reference-empty {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
}

.generated-empty {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #edf6ef;
}

.reference-drop.has-reference {
  justify-content: flex-start;
}

.reference-drop.has-reference .reference-empty {
  display: none;
}

.reference-drop small,
.generated-empty small,
.generation-status {
  color: var(--muted);
}

.reference-list,
.generated-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.reference-drop .reference-list,
.generated-preview-box .generated-gallery {
  position: relative;
  z-index: 3;
  width: 100%;
  display: none;
  align-content: start;
}

.reference-drop .reference-list {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
}

.reference-drop.has-reference .reference-list {
  display: grid;
}

.generated-preview-box.has-generated {
  justify-content: flex-start;
}

.generated-preview-box.has-generated .generated-empty {
  display: none;
}

.generated-preview-box.has-generated .generated-gallery {
  display: grid;
  grid-template-columns: 1fr;
}

.reference-thumb,
.generated-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.26);
}

.reference-thumb {
  aspect-ratio: 1;
}

.reference-thumb img,
.generated-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.34);
}

.reference-thumb button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: rgba(0, 0, 0, 0.64);
  cursor: pointer;
}

.generation-actions {
  display: grid;
  grid-template-columns: minmax(240px, 0.36fr) minmax(260px, 0.64fr);
  gap: 14px;
  align-items: end;
  margin-top: 16px;
}

.generation-actions .primary-button {
  margin-top: 0;
}

.generation-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.generated-card {
  margin: 0;
  aspect-ratio: 9 / 16;
}

.generated-preview-box .generated-card {
  height: 220px;
  aspect-ratio: auto;
}

.generated-actions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.generated-actions a {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(14px);
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  color: #e4ebe6;
  line-height: 1.75;
  font-size: 13px;
}

#outputBox {
  height: 590px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.36);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  min-width: 220px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.api-page .workspace-card {
  min-height: calc(100vh - 92px);
}

.api-hero {
  margin-bottom: 32px;
}

.api-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 0.75fr);
  gap: 16px;
}

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

.span-two {
  grid-column: span 2;
}

.form-actions {
  margin-top: 16px;
}

.form-actions .primary-button {
  flex: 1;
  margin-top: 0;
}

.api-guide pre {
  min-height: 360px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.32);
}

.api-note {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.api-note strong {
  color: var(--text);
}

.api-note p {
  margin: 8px 0 0;
  line-height: 1.65;
}

@media (max-width: 1120px) {
  .studio-grid,
  .api-layout,
  .generator-grid,
  .generation-actions {
    grid-template-columns: 1fr;
  }

  .convergence-stage {
    height: 260px;
  }

  #outputBox {
    height: 440px;
  }

  .orbit-node {
    display: none;
  }
}

@media (max-width: 720px) {
  .page-shell {
    padding: 10px;
  }

  .top-nav {
    height: auto;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 0;
  }

  .brand {
    width: 100%;
  }

  .nav-pills {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .nav-pill {
    flex: 1;
    padding: 0 10px;
  }

  .account-chip {
    margin-left: auto;
  }

  .workspace-card {
    padding: 28px 12px 14px;
    border-radius: 20px;
  }

  .workspace-hero h1 {
    font-size: 40px;
  }

  .field-grid,
  .two-col {
    grid-template-columns: 1fr;
  }

  .span-two {
    grid-column: auto;
  }

  .button-row {
    flex-wrap: wrap;
  }
}

/* Reverse workbench UI refresh. Scoped so the API page and generator logic stay intact. */
body.reverse-page {
  min-width: 1280px;
  color: #17213a;
  background: #f5f7fb;
}

.reverse-page .noise,
.reverse-page .ambient,
.reverse-page .orbit-node,
.reverse-page .reverse-workspace::before,
.reverse-page .reverse-workspace::after {
  display: none;
}

.reverse-page .page-shell {
  width: 100%;
  max-width: none;
  padding: 0;
}

.reverse-page .top-nav {
  width: 100%;
  height: 70px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #dfe6f1;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(37, 63, 105, 0.05);
}

.reverse-page .brand {
  color: #14224a;
  font-size: 18px;
  font-weight: 750;
}

.reverse-page .brand-mark {
  width: 38px;
  height: 38px;
  background:
    radial-gradient(circle at 58% 48%, #ffffff 0 23%, transparent 24%),
    radial-gradient(circle at 50% 50%, #2d6cff 0 48%, #dce8ff 49% 70%, #f7faff 71%);
  box-shadow: 0 0 0 1px #d9e4f7;
}

.reverse-page .nav-pills {
  gap: 4px;
  height: 46px;
  padding: 4px;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  background: #f8faff;
  backdrop-filter: none;
}

.reverse-page .nav-pill {
  min-width: 142px;
  min-height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  color: #53617b;
  font-size: 14px;
  font-weight: 600;
}

.reverse-page .nav-pill:hover {
  color: #235fe8;
  background: #eef4ff;
}

.reverse-page .nav-pill.active {
  color: #1657df;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(44, 91, 177, 0.12), inset 0 0 0 1px #b9d0ff;
}

.reverse-page .icon-pill {
  display: none;
}

.reverse-page .account-chip {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #dfe6f1;
  border-radius: 12px;
  color: #30405e;
  background: #ffffff;
}

.reverse-page .status-dot {
  background: #2f6df6;
  box-shadow: 0 0 0 4px #e6efff;
}

.reverse-page .reverse-workspace {
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.reverse-page .workspace-hero {
  max-width: none;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
  text-align: left;
}

.reverse-page .hero-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reverse-page .page-title-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #bcd0f7;
  border-radius: 12px;
  color: #2563eb;
  background: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.reverse-page .workspace-hero h1 {
  margin: 0;
  color: #14213d;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 750;
}

.reverse-page .workspace-hero p {
  max-width: none;
  margin: 4px 0 0;
  color: #66738c;
  font-size: 14px;
  line-height: 1.4;
}

.reverse-page .workspace-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #53617b;
  font-size: 14px;
}

.reverse-page .workspace-meta > span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  background: #ffffff;
}

.reverse-page .meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20b26b;
}

.reverse-page .history-mark {
  color: #5e6f8d;
  font-size: 17px;
  font-style: normal;
}

.reverse-page .history-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.reverse-page .history-button:hover { color: #1e5ce7; }

.reverse-page .reverse-grid {
  display: grid;
  grid-template-columns: minmax(280px, 24fr) minmax(236px, 20fr) minmax(560px, 56fr);
  gap: 20px;
  align-items: stretch;
}

.reverse-page .reverse-panel {
  min-width: 0;
  min-height: 690px;
  padding: 20px;
  border: 1px solid #dce5f1;
  border-radius: 16px;
  color: #17213a;
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 6px 20px rgba(42, 69, 111, 0.06);
}

.reverse-page .reverse-panel .panel-head {
  min-height: 48px;
  margin-bottom: 14px;
}

.reverse-page .reverse-panel .section-kicker {
  margin-bottom: 6px;
  color: #3470ed;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.reverse-page .reverse-panel .panel-head h2 {
  color: #17213a;
  font-size: 19px;
  font-weight: 720;
}

.reverse-page .reverse-panel .ghost-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d5dfed;
  border-radius: 10px;
  color: #42516d;
  background: #ffffff;
}

.reverse-page .reverse-panel .ghost-button:hover {
  border-color: #9fbcf6;
  color: #1f5fe2;
  background: #f6f9ff;
}

.reverse-page .input-panel .drop-zone {
  min-height: 230px;
  margin-bottom: 16px;
  border-color: #bfd0e6;
  border-radius: 14px;
  color: #273651;
  background: #f8faff;
}

.reverse-page .input-panel .drop-zone.drag-over {
  border-color: #3d78f2;
  box-shadow: 0 0 0 3px rgba(61, 120, 242, 0.1);
}

.reverse-page .input-panel .drop-icon {
  width: 44px;
  height: 44px;
  border-color: #b9c9df;
  color: #2d6df6;
  background: #ffffff;
  font-size: 24px;
}

.reverse-page .input-panel .drop-zone small {
  color: #6b7890;
}

.reverse-page .input-panel .drop-zone img {
  padding: 8px;
  background: #f4f7fb;
}

.reverse-page .input-panel .drop-zone.has-image::after {
  border-color: #d2ddeb;
  border-radius: 10px;
  color: #30405e;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
}

.reverse-page .input-panel .field-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.reverse-page .reverse-panel label {
  gap: 7px;
  color: #394966;
  font-size: 14px;
  font-weight: 550;
}

.reverse-page .reverse-panel input,
.reverse-page .reverse-panel select,
.reverse-page .reverse-panel textarea {
  border: 1px solid #d8e1ed;
  border-radius: 10px;
  color: #1f2d47;
  background: #ffffff;
}

.reverse-page .reverse-panel input,
.reverse-page .reverse-panel select {
  height: 44px;
}

.reverse-page .reverse-panel textarea {
  min-height: 92px;
}

.reverse-page .reverse-panel input::placeholder,
.reverse-page .reverse-panel textarea::placeholder {
  color: #929db0;
}

.reverse-page .reverse-panel input:focus,
.reverse-page .reverse-panel select:focus,
.reverse-page .reverse-panel textarea:focus {
  border-color: #4b7ff0;
  box-shadow: 0 0 0 3px rgba(75, 127, 240, 0.1);
  background: #ffffff;
}

.reverse-page .reverse-panel select option {
  color: #1f2d47;
  background: #ffffff;
}

.reverse-page .input-panel .primary-button {
  height: 48px;
  margin-top: 16px;
  border-radius: 12px;
  color: #ffffff;
  background: #2166f3;
  box-shadow: 0 8px 18px rgba(33, 102, 243, 0.22);
}

.reverse-page .input-panel .primary-button:hover {
  background: #1459df;
}

.reverse-page .input-panel .primary-button i {
  background: #ffffff;
}

.reverse-page .analysis-panel {
  display: flex;
  flex-direction: column;
}

.reverse-page .progress-label {
  min-width: 54px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9daf7;
  border-radius: 10px;
  color: #2563df;
  background: #f3f7ff;
  font-size: 13px;
  font-weight: 700;
}

.reverse-page .analysis-summary {
  height: auto;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: #f8faff;
}

.reverse-page .analysis-summary span {
  color: #3370ea;
  font-size: 12px;
  font-weight: 700;
}

.reverse-page .analysis-summary strong {
  color: #1d2b45;
  font-size: 16px;
}

.reverse-page .analysis-summary small {
  color: #68758c;
  font-size: 13px;
  line-height: 1.6;
}

.reverse-page .analysis-summary.scanning {
  border-color: #8fb1f5;
  background: #f3f7ff;
}

.reverse-page .analysis-steps {
  gap: 10px;
  margin-top: 16px;
}

.reverse-page .analysis-steps li {
  position: relative;
  min-height: 56px;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  color: #65728a;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.reverse-page .analysis-steps li::before {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #c9d8ef;
  border-radius: 50%;
  color: #4e6282;
  background: #f7f9fd;
  font-size: 11px;
}

.reverse-page .analysis-steps li.active,
.reverse-page .analysis-steps li.done {
  border-color: #b9cdf4;
  color: #20304d;
  background: #f8faff;
}

.reverse-page .analysis-steps li.active::before,
.reverse-page .analysis-steps li.done::before {
  border-color: #8eb0f5;
  color: #1e63e7;
  background: #eaf1ff;
}

.reverse-page .output-panel {
  display: flex;
  flex-direction: column;
}

.reverse-page #outputBox {
  flex: 1;
  height: auto;
  min-height: 604px;
  padding: 20px;
  border: 1px solid #d8e1ed;
  border-radius: 14px;
  color: #24324c;
  background: #fbfcff;
  font-size: 14px;
  line-height: 1.8;
}

.reverse-page .generator-panel {
  margin-top: 24px;
  color: var(--text);
  background: #101312;
}

.reverse-page .generator-panel .panel-head h2 {
  color: var(--text);
}

.reverse-page .generator-panel .primary-button {
  color: #101412;
  background: linear-gradient(135deg, #f7fff9, #bfd6c7);
}

/* Second-round scope: left input panel only. */
.reverse-page .input-panel.reverse-panel {
  padding: 24px;
}

.reverse-page .input-panel .panel-head {
  min-height: 42px;
  margin-bottom: 12px;
}

.reverse-page .input-panel .section-kicker {
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 1;
}

.reverse-page .input-panel .panel-head h2 {
  color: #172a4b;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
}

.reverse-page .input-panel .image-uploader {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  border: 1px dashed #b8c9df;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fbff;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.reverse-page .input-panel .image-uploader.drag-over {
  border-color: #2f6df6;
  background: #f1f6ff;
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.1);
}

.reverse-page .input-panel .uploader-input,
.reverse-page .input-panel .logic-only {
  display: none;
}

.reverse-page .input-panel .upload-empty-state {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  color: #40516e;
  text-align: center;
  cursor: pointer;
}

.reverse-page .input-panel .upload-empty-state:hover {
  background: #f2f7ff;
}

.reverse-page .input-panel .upload-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  border: 1px solid #bbcae0;
  border-radius: 9px;
  color: #2868ee;
  background: #ffffff;
  font-size: 21px;
  line-height: 1;
}

.reverse-page .input-panel .upload-empty-state strong {
  color: #213453;
  font-size: 14px;
  line-height: 1.25;
}

.reverse-page .input-panel .upload-empty-state > span:not(.upload-icon) {
  color: #687a95;
  font-size: 13px;
  font-weight: 500;
}

.reverse-page .input-panel .upload-empty-state small {
  color: #7d8ba1;
  font-size: 12px;
  font-weight: 500;
}

.reverse-page .input-panel .image-preview-state {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
}

.reverse-page .input-panel .image-uploader.has-image {
  border-style: solid;
  border-color: #d5dfec;
  background: #eef3f9;
}

.reverse-page .input-panel .image-uploader.has-image .upload-empty-state {
  display: none;
}

.reverse-page .input-panel .image-uploader.has-image .image-preview-state {
  display: block;
}

.reverse-page .input-panel .image-preview-state img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.reverse-page .input-panel .image-count-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  min-width: 44px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(191, 205, 224, 0.86);
  border-radius: 8px;
  color: #233a5c;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 7px rgba(28, 50, 83, 0.1);
  font-size: 12px;
  font-weight: 700;
}

.reverse-page .input-panel .image-preview-strip {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid rgba(191, 205, 224, 0.82);
  border-radius: 9px;
  background: rgba(247, 250, 255, 0.92);
  box-shadow: 0 3px 12px rgba(28, 50, 83, 0.12);
  backdrop-filter: blur(5px);
  scrollbar-width: thin;
}

.reverse-page .input-panel .uploaded-preview-thumb {
  position: relative;
  width: 48px;
  height: 38px;
  flex: 0 0 48px;
}

.reverse-page .input-panel .preview-thumb-select {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #e8eef7;
}

.reverse-page .input-panel .preview-thumb-select.is-active {
  border-color: #2f6bff;
}

.reverse-page .input-panel .preview-thumb-select img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reverse-page .input-panel .preview-thumb-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d5dfec;
  border-radius: 50%;
  color: #42536d;
  background: #ffffff;
  font-size: 12px;
  line-height: 1;
}

.reverse-page .input-panel .preview-thumb-remove:hover {
  border-color: #e38a90;
  color: #c9363e;
  background: #fff4f4;
}

.reverse-page .input-panel .image-preview-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.reverse-page .input-panel .image-preview-actions button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(191, 205, 224, 0.86);
  border-radius: 8px;
  color: #233a5c;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 7px rgba(28, 50, 83, 0.1);
  backdrop-filter: blur(4px);
  font-size: 13px;
  font-weight: 650;
}

.reverse-page .input-panel .image-preview-actions button:hover {
  border-color: #8fb0ee;
  color: #185bd8;
  background: #edf4ff;
}

.reverse-page .input-panel .upload-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  color: #20385f;
  background: rgba(247, 250, 255, 0.9);
  backdrop-filter: blur(3px);
}

.reverse-page .input-panel .upload-progress-overlay[hidden] {
  display: none;
}

.reverse-page .input-panel .upload-progress-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #cfddf4;
  border-top-color: #2f6bff;
  border-radius: 50%;
  animation: reverse-analysis-spin 760ms linear infinite;
}

.reverse-page .input-panel .upload-progress-overlay strong {
  font-size: 14px;
}

.reverse-page .input-panel .upload-progress-track {
  width: min(220px, 72%);
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8f6;
}

.reverse-page .input-panel .upload-progress-track i {
  width: 32%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #2f6bff;
  transition: width 120ms linear;
}

.reverse-page .input-panel .upload-progress-track i.is-indeterminate {
  animation: upload-progress-indeterminate 1.1s ease-in-out infinite;
}

.reverse-page .input-panel .upload-progress-overlay button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #b8c9e3;
  border-radius: 8px;
  color: #38506f;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
}

@keyframes upload-progress-indeterminate {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.reverse-page .input-panel input:disabled,
.reverse-page .input-panel select:disabled,
.reverse-page .input-panel textarea:disabled,
.reverse-page .input-panel .selectable-chip:disabled,
.reverse-page .input-panel .image-preview-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.reverse-page .input-panel .image-file-meta {
  min-height: 32px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: #596b86;
  font-size: 12px;
}

.reverse-page .input-panel .image-file-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #657792;
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reverse-page .input-panel .form-stack {
  display: grid;
  gap: 8px;
}

.reverse-page .input-panel .form-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #30415f;
}

.reverse-page .input-panel .form-label {
  color: #30415f;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}

.reverse-page .input-panel .optional-mark {
  color: #77869d;
  font-size: 11px;
  font-weight: 500;
}

.reverse-page .input-panel .form-row input,
.reverse-page .input-panel .form-row select,
.reverse-page .input-panel .form-row textarea {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-color: #cfdae8;
  border-radius: 9px;
  color: #1e2d48;
  font-size: 13px;
  line-height: 1.4;
}

.reverse-page .input-panel .form-row textarea {
  padding-top: 11px;
  padding-bottom: 8px;
  resize: vertical;
}

.reverse-page .input-panel .form-row input:focus,
.reverse-page .input-panel .form-row select:focus,
.reverse-page .input-panel .form-row textarea:focus {
  border-color: #3973ef;
  outline: none;
  box-shadow: 0 0 0 3px rgba(57, 115, 239, 0.11);
}

.reverse-page .input-panel .analysis-focus-block {
  margin-top: 12px;
}

.reverse-page .input-panel .analysis-focus-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #30415f;
  font-size: 13px;
  font-weight: 700;
}

.reverse-page .input-panel .focus-info {
  position: relative;
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #aebed4;
  border-radius: 50%;
  color: #63758f;
  background: #ffffff;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.reverse-page .input-panel .focus-info::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10;
  width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  border-radius: 7px;
  color: #ffffff;
  background: #1f3150;
  content: attr(data-tooltip);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.reverse-page .input-panel .focus-info:hover::after,
.reverse-page .input-panel .focus-info:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.reverse-page .input-panel .analysis-focus-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reverse-page .input-panel .selectable-chip {
  position: relative;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #cfdae8;
  border-radius: 8px;
  color: #60718a;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, transform 100ms ease;
}

.reverse-page .input-panel .selectable-chip:hover,
.reverse-page .input-panel .selectable-chip:focus-visible {
  border-color: #77a0f4;
  color: #1e63df;
  background: #edf4ff;
}

.reverse-page .input-panel .selectable-chip.is-selected {
  border-color: #2f6bff;
  color: #1e63df;
  background: #ffffff;
}

.reverse-page .input-panel .selectable-chip:focus-visible {
  outline: 2px solid rgba(47, 109, 246, 0.24);
  outline-offset: 2px;
}

.reverse-page .input-panel .selectable-chip:active {
  transform: translateY(1px);
}

.reverse-page .input-panel .chip-check {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #2f6df6;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  transform: translate(38%, -38%);
}

.reverse-page .input-panel .chip-check[hidden] {
  display: none;
}

.reverse-page .input-panel .primary-button {
  width: 100%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  border-radius: 10px;
  color: #ffffff;
  background: #2267f2;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 150ms ease, transform 100ms ease, opacity 150ms ease;
}

.reverse-page .input-panel .primary-button:hover:not(:disabled) {
  background: #1559dc;
}

.reverse-page .input-panel .primary-button:active:not(:disabled) {
  transform: translateY(1px);
}

.reverse-page .input-panel .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.reverse-page .input-panel .analysis-button-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  font-size: 20px;
  line-height: 1;
}

.reverse-page .input-panel .primary-button.is-busy .analysis-button-icon {
  animation: reverse-analysis-spin 900ms linear infinite;
}

@keyframes reverse-analysis-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Third-round scope: middle analysis panel only. */
.reverse-page .analysis-panel.reverse-panel {
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  border-color: #e3ebf8;
  border-radius: 16px;
  background: #ffffff;
}

.reverse-page .analysis-panel .analysis-panel-head {
  min-height: 44px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.reverse-page .analysis-panel .section-kicker {
  margin-bottom: 7px;
  color: #2f6bff;
  font-size: 12px;
  line-height: 1;
}

.reverse-page .analysis-panel .panel-head h2 {
  color: #102a68;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.reverse-page .analysis-panel .analysis-status-badge {
  min-width: 88px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #dce4f0;
  border-radius: 10px;
  color: #69758c;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.reverse-page .analysis-panel .analysis-status-badge.is-analyzing {
  border-color: #bfd0fb;
  color: #2f6bff;
  background: #f2f6ff;
}

.reverse-page .analysis-panel .analysis-status-badge.is-completed {
  border-color: #bde8d8;
  color: #128d5c;
  background: #effaf5;
}

.reverse-page .analysis-panel .analysis-status-badge.is-error {
  border-color: #f3c9cc;
  color: #d63d43;
  background: #fff5f5;
}

.reverse-page .analysis-panel .status-badge-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.reverse-page .analysis-panel .analysis-status-badge.is-analyzing .status-badge-icon {
  border-color: rgba(47, 107, 255, 0.24);
  border-top-color: #2f6bff;
  animation: analysis-spinner 760ms linear infinite;
}

.reverse-page .analysis-panel .status-confidence {
  min-width: 24px;
  color: currentColor;
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.reverse-page .analysis-panel .analysis-step-list-wrap {
  margin-top: 20px;
}

.reverse-page .analysis-panel .analysis-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.reverse-page .analysis-panel .analysis-steps li {
  position: relative;
  height: 58px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid #e3ebf8;
  border-radius: 10px;
  color: #69758c;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.reverse-page .analysis-panel .analysis-steps li::before,
.reverse-page .analysis-panel .analysis-steps li::after {
  display: none;
  content: none;
}

.reverse-page .analysis-panel .step-index {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #cfdaea;
  border-radius: 50%;
  color: #6f7f98;
  background: #f8faff;
  font-size: 11px;
  font-weight: 750;
}

.reverse-page .analysis-panel .analysis-steps li:not(:last-child) .step-index::after {
  position: absolute;
  top: 29px;
  left: 50%;
  z-index: -1;
  width: 1px;
  height: 40px;
  background: #dbe5f3;
  content: "";
  transform: translateX(-50%);
}

.reverse-page .analysis-panel .step-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.reverse-page .analysis-panel .step-copy strong,
.reverse-page .analysis-panel .step-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reverse-page .analysis-panel .step-copy strong {
  color: #263b62;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.reverse-page .analysis-panel .step-copy small {
  color: #8793aa;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
}

.reverse-page .analysis-panel .step-state {
  min-width: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: #8793aa;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.reverse-page .analysis-panel .step-state i {
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #cbd6e5;
  border-radius: 50%;
  color: #ffffff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.reverse-page .analysis-panel .analysis-steps li[data-step-state="processing"] {
  border-color: #aec5fb;
  background: #f7f9ff;
}

.reverse-page .analysis-panel li[data-step-state="processing"] .step-index,
.reverse-page .analysis-panel li[data-step-state="processing"] .step-state {
  color: #2f6bff;
}

.reverse-page .analysis-panel li[data-step-state="processing"] .step-index {
  border-color: #99b6f8;
  background: #edf3ff;
}

.reverse-page .analysis-panel li[data-step-state="processing"] .step-state i {
  border-color: rgba(47, 107, 255, 0.24);
  border-top-color: #2f6bff;
  animation: analysis-spinner 760ms linear infinite;
}

.reverse-page .analysis-panel li[data-step-state="completed"] .step-index {
  border-color: #b9dfd1;
  color: #128d5c;
  background: #f0faf6;
}

.reverse-page .analysis-panel li[data-step-state="completed"] .step-state {
  color: #69758c;
}

.reverse-page .analysis-panel li[data-step-state="completed"] .step-state i {
  border-color: #16b978;
  background: #16b978;
}

.reverse-page .analysis-panel li[data-step-state="error"] {
  border-color: #f0bfc3;
  background: #fff8f8;
}

.reverse-page .analysis-panel li[data-step-state="error"] .step-index,
.reverse-page .analysis-panel li[data-step-state="error"] .step-state {
  color: #e5484d;
}

.reverse-page .analysis-panel li[data-step-state="error"] .step-state i {
  border-color: #e5484d;
  background: #e5484d;
}

.reverse-page .analysis-panel .recognition-summary {
  margin-top: 20px;
}

.reverse-page .analysis-panel .recognition-summary h3 {
  margin: 0 0 12px;
  color: #102a68;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
}

.reverse-page .analysis-panel .metric-list {
  display: grid;
  gap: 10px;
}

.reverse-page .analysis-panel .metric-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #53637d;
  font-size: 13px;
  line-height: 1.2;
}

.reverse-page .analysis-panel .metric-progress strong {
  min-width: 28px;
  color: #69758c;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

.reverse-page .analysis-panel .metric-track {
  width: 100%;
  height: 6px;
  display: block;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
}

.reverse-page .analysis-panel .metric-track i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #2f6bff;
  transition: width 220ms ease;
}

.reverse-page .analysis-panel .analysis-statistics {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 10px 12px;
  border: 1px solid #dce7fa;
  border-radius: 10px;
  color: #61708d;
  background: #f7faff;
  font-size: 12px;
  line-height: 1.5;
}

.reverse-page .analysis-panel .analysis-statistics strong {
  color: #355078;
  font-weight: 750;
}

.reverse-page .analysis-panel .statistics-icon {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #7fa2ee;
  border-radius: 50%;
  color: #2f6bff;
  background: #ffffff;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
}

.reverse-page .analysis-panel .analysis-error-actions {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #f0c8cb;
  border-radius: 10px;
  background: #fff8f8;
}

.reverse-page .analysis-panel .analysis-error-actions p {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  color: #b6373c;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reverse-page .analysis-panel .analysis-retry-button {
  width: 100%;
  height: 34px;
  border: 1px solid #e4a9ad;
  border-radius: 8px;
  color: #c13e43;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.reverse-page .analysis-panel .analysis-retry-button:focus-visible {
  outline: 2px solid rgba(229, 72, 77, 0.2);
  outline-offset: 2px;
}

@keyframes analysis-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Fourth-round scope: right structured result panel only. */
.reverse-page .output-panel.reverse-panel {
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
  border-color: #e3ebf8;
  border-radius: 16px;
  background: #ffffff;
}

.reverse-page .output-panel .result-panel-head {
  min-height: 44px;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 16px;
}

.reverse-page .output-panel .section-kicker {
  margin-bottom: 7px;
  color: #2f6bff;
  font-size: 12px;
  line-height: 1;
}

.reverse-page .output-panel .panel-head h2 {
  color: #102a68;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.reverse-page .output-panel .result-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.reverse-page .output-panel .result-actions[hidden] {
  display: none;
}

.reverse-page .output-panel .result-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #d7e1ef;
  border-radius: 8px;
  color: #4d5f7d;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.reverse-page .output-panel .result-actions button:hover:not(:disabled) {
  border-color: #9db8f3;
  color: #245fdd;
  background: #f5f8ff;
}

.reverse-page .output-panel .result-actions .result-send-button {
  border-color: #2f6bff;
  color: #ffffff;
  background: #2f6bff;
}

.reverse-page .output-panel .result-actions .result-send-button:hover:not(:disabled) {
  border-color: #2158d8;
  color: #ffffff;
  background: #2158d8;
}

.reverse-page .output-panel .result-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.reverse-page .output-panel .result-download-control {
  position: relative;
}

.reverse-page .output-panel .result-download-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 30;
  width: 152px;
  padding: 6px;
  border: 1px solid #dbe5f2;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(38, 61, 98, 0.15);
}

.reverse-page .output-panel .result-download-menu[hidden] {
  display: none;
}

.reverse-page .output-panel .result-download-menu button {
  width: 100%;
  min-height: 34px;
  justify-content: space-between;
  border: 0;
}

.reverse-page .output-panel .result-download-menu small {
  color: #8a96a9;
  font-size: 11px;
}

.reverse-page .output-panel .result-state-view {
  min-height: 600px;
  display: grid;
  place-items: center;
  border: 1px solid #e3ebf8;
  border-radius: 12px;
  background: #fbfcff;
}

.reverse-page .output-panel .result-state-view[hidden] {
  display: none;
}

.reverse-page .output-panel .result-empty-state,
.reverse-page .output-panel .result-skeleton,
.reverse-page .output-panel .result-error-state {
  width: min(440px, 86%);
  text-align: center;
}

.reverse-page .output-panel .result-state-view [hidden] {
  display: none !important;
}

.reverse-page .output-panel .result-state-icon,
.reverse-page .output-panel .tab-empty-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid #bfd0ec;
  border-radius: 12px;
  color: #2f6bff;
  background: #f3f7ff;
  font-size: 21px;
  line-height: 1;
}

.reverse-page .output-panel .result-state-icon.is-error {
  border-color: #efc2c5;
  color: #e5484d;
  background: #fff5f5;
}

.reverse-page .output-panel .result-empty-state h3,
.reverse-page .output-panel .result-error-state h3,
.reverse-page .output-panel .tab-empty-state h3 {
  margin: 0;
  color: #243a62;
  font-size: 16px;
  font-weight: 700;
}

.reverse-page .output-panel .result-empty-state p,
.reverse-page .output-panel .result-error-state p,
.reverse-page .output-panel .tab-empty-state p {
  margin: 7px 0 0;
  color: #75829a;
  font-size: 13px;
  line-height: 1.6;
}

.reverse-page .output-panel .result-skeleton {
  text-align: left;
}

.reverse-page .output-panel .result-skeleton > div {
  border-radius: 7px;
  background: #eaf0f8;
  animation: result-skeleton-pulse 1.25s ease-in-out infinite alternate;
}

.reverse-page .output-panel .skeleton-heading {
  width: 35%;
  height: 22px;
  margin-bottom: 18px;
}

.reverse-page .output-panel .skeleton-tabs {
  width: 100%;
  height: 40px;
  margin-bottom: 22px;
}

.reverse-page .output-panel .skeleton-line {
  width: 72%;
  height: 12px;
  margin-bottom: 12px;
}

.reverse-page .output-panel .skeleton-line.is-long {
  width: 94%;
}

.reverse-page .output-panel .skeleton-line.is-medium {
  width: 82%;
}

.reverse-page .output-panel .skeleton-card {
  width: 100%;
  height: 210px;
  margin-top: 20px;
}

.reverse-page .output-panel .result-skeleton strong,
.reverse-page .output-panel .result-skeleton > span {
  display: block;
  text-align: center;
}

.reverse-page .output-panel .result-skeleton strong {
  margin-top: 18px;
  color: #344a70;
  font-size: 14px;
}

.reverse-page .output-panel .result-skeleton > span {
  margin-top: 5px;
  color: #7a879d;
  font-size: 12px;
}

.reverse-page .output-panel .result-error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.reverse-page .output-panel .result-error-state .result-state-icon {
  margin: 0;
}

.reverse-page .output-panel .result-error-state > div {
  text-align: left;
}

.reverse-page .output-panel .result-error-state button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #e5aeb2;
  border-radius: 8px;
  color: #c43d43;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.reverse-page .output-panel .result-error-actions {
  display: flex;
  gap: 8px;
}

.reverse-page .output-panel .result-error-state button.is-secondary {
  border-color: #cdd8e8;
  color: #53647f;
}

.reverse-page .output-panel .result-state-view.is-compact-error {
  min-height: 74px;
  margin-bottom: 12px;
  padding: 10px 14px;
  place-items: stretch;
  border-color: #efc7ca;
  background: #fff8f8;
}

.reverse-page .output-panel .result-state-view.is-compact-error .result-error-state {
  width: 100%;
  justify-content: flex-start;
}

.reverse-page .output-panel .result-success-content {
  min-width: 0;
}

.reverse-page .output-panel .stale-result-banner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #bfd2f5;
  border-radius: 10px;
  color: #536783;
  background: #f4f8ff;
}

.reverse-page .output-panel .stale-result-banner[hidden] {
  display: none;
}

.reverse-page .output-panel .stale-result-banner div {
  display: grid;
  gap: 3px;
}

.reverse-page .output-panel .stale-result-banner strong {
  color: #244a92;
  font-size: 13px;
}

.reverse-page .output-panel .stale-result-banner span {
  font-size: 12px;
}

.reverse-page .output-panel .stale-result-banner button {
  height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid #2f6bff;
  border-radius: 8px;
  color: #ffffff;
  background: #2f6bff;
  font-size: 12px;
  font-weight: 700;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.reverse-page .output-panel .result-success-content[hidden] {
  display: none;
}

.reverse-page .output-panel .result-tabs-scroll {
  height: 44px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #e3ebf8;
  scrollbar-width: none;
}

.reverse-page .output-panel .result-tabs-scroll::-webkit-scrollbar,
.reverse-page .output-panel .recognition-tag-list::-webkit-scrollbar {
  display: none;
}

.reverse-page .output-panel .result-tab {
  position: relative;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 0;
  color: #5f6b82;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.reverse-page .output-panel .result-tab::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: "";
}

.reverse-page .output-panel .result-tab.is-active {
  color: #2f6bff;
}

.reverse-page .output-panel .result-tab.is-active::after {
  background: #2f6bff;
}

.reverse-page .output-panel .result-tab:focus-visible {
  outline: 2px solid rgba(47, 107, 255, 0.22);
  outline-offset: -3px;
}

.reverse-page .output-panel .recognition-tags {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.reverse-page .applied-focus-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce7fa;
  border-radius: 12px;
  background: #f8fbff;
}

.reverse-page .applied-focus-section[hidden] { display: none; }

.reverse-page .applied-focus-head,
.reverse-page .applied-focus-result header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reverse-page .applied-focus-head h3,
.reverse-page .applied-focus-result h4 { margin: 0; color: #153269; }
.reverse-page .applied-focus-head h3 { font-size: 15px; }
.reverse-page .applied-focus-head > span { color: #168d64; font-size: 12px; }

.reverse-page .applied-focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reverse-page .applied-focus-tag {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #cad7ea;
  border-radius: 7px;
  color: #596b86;
  background: #ffffff;
  cursor: pointer;
}

.reverse-page .applied-focus-tag:hover,
.reverse-page .applied-focus-tag.is-selected {
  border-color: #7fa5f5;
  color: #245ed5;
  background: #eef4ff;
}

.reverse-page .applied-focus-results {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
}

.reverse-page .applied-focus-results[hidden] { display: none; }

.reverse-page .applied-focus-result {
  padding: 12px;
  border: 1px solid #e3ebf8;
  border-radius: 10px;
  background: #ffffff;
}

.reverse-page .applied-focus-result h4 { font-size: 14px; }
.reverse-page .applied-focus-result code { color: #61708d; font-size: 11px; }
.reverse-page .applied-focus-result p,
.reverse-page .applied-focus-result ul { color: #344561; font-size: 13px; line-height: 1.65; }
.reverse-page .applied-focus-result ul { margin: 6px 0 10px; padding-left: 20px; }
.reverse-page .applied-focus-result strong { color: #153269; font-size: 12px; }

.reverse-page .applied-focus-fragments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.reverse-page .applied-focus-fragments span {
  padding: 4px 7px;
  border-radius: 6px;
  color: #245ed5;
  background: #eef4ff;
  font-size: 12px;
}

.reverse-page .output-panel .recognition-tags h3 {
  margin: 0;
  color: #263b62;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.reverse-page .output-panel .recognition-tag-list {
  min-width: 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.reverse-page .output-panel .recognition-tag-chip,
.reverse-page .output-panel .tag-empty,
.reverse-page .output-panel .variable-chip {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid #dce5f2;
  border-radius: 7px;
  color: #61708a;
  background: #f7f9fd;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.reverse-page .output-panel .recognition-tag-chip:hover,
.reverse-page .output-panel .recognition-tag-chip.is-selected {
  border-color: #8eaff4;
  color: #245fdd;
  background: #eef4ff;
}

.reverse-page .output-panel .tag-empty {
  border-style: dashed;
  color: #8793a8;
}

.reverse-page .output-panel .result-tab-content {
  margin-top: 16px;
}

.reverse-page .output-panel .prompt-result-card,
.reverse-page .output-panel .structured-tab-view {
  min-height: 290px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid #e3ebf8;
  border-radius: 12px;
  background: #ffffff;
}

.reverse-page .output-panel .prompt-result-card {
  display: flex;
  flex-direction: column;
}

.reverse-page .output-panel .prompt-result-card[hidden],
.reverse-page .output-panel .structured-tab-view[hidden] {
  display: none;
}

.reverse-page .output-panel .prompt-result-card > header,
.reverse-page .output-panel .negative-prompt-card > header,
.reverse-page .output-panel .structured-view-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #edf1f7;
}

.reverse-page .output-panel .prompt-result-card > header > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reverse-page .output-panel .prompt-result-card h3,
.reverse-page .output-panel .structured-view-head h3,
.reverse-page .output-panel .negative-prompt-card h3,
.reverse-page .output-panel .result-mini-card h3,
.reverse-page .output-panel .structured-section-card h3 {
  margin: 0;
  color: #102a68;
  font-size: 15px;
  font-weight: 700;
}

.reverse-page .output-panel .optimized-badge {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 7px;
  color: #128d5c;
  background: #edf9f4;
  font-size: 11px;
  font-weight: 700;
}

.reverse-page .output-panel .unsaved-indicator {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 7px;
  color: #9b630e;
  background: #fff7df;
  font-size: 11px;
  font-weight: 700;
}

.reverse-page .output-panel .unsaved-indicator[hidden] {
  display: none;
}

.reverse-page .output-panel .prompt-card-actions,
.reverse-page .output-panel .structured-view-head {
  flex: 0 0 auto;
}

.reverse-page .output-panel .prompt-card-actions {
  display: flex;
  gap: 7px;
}

.reverse-page .output-panel .prompt-card-actions button,
.reverse-page .output-panel .structured-view-head button,
.reverse-page .output-panel .negative-prompt-card header button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  color: #526480;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
}

.reverse-page .output-panel .prompt-card-actions button[hidden] {
  display: none;
}

.reverse-page .output-panel .prompt-card-actions button:hover,
.reverse-page .output-panel .structured-view-head button:hover,
.reverse-page .output-panel .negative-prompt-card header button:hover {
  border-color: #99b5ef;
  color: #245fdd;
  background: #f4f8ff;
}

.reverse-page .output-panel .prompt-card-actions button.is-primary,
.reverse-page .output-panel .structured-view-actions button.is-primary {
  border-color: #2f6bff;
  color: #ffffff;
  background: #2f6bff;
}

.reverse-page .output-panel #outputBox {
  width: 100%;
  height: auto;
  min-height: 226px;
  max-height: 346px;
  flex: 1;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  outline: none;
  color: #2d3d59;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reverse-page .output-panel #outputBox.is-editing {
  background: #fbfdff;
  box-shadow: inset 0 0 0 2px rgba(47, 107, 255, 0.16);
}

.reverse-page .output-panel .variable-token {
  display: inline;
  padding: 1px 4px;
  border: 1px solid #c3d5fa;
  border-radius: 5px;
  color: #1f61e2;
  background: #eef4ff;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.reverse-page .output-panel .prompt-result-card > footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid #edf1f7;
  color: #7c899e;
  font-size: 12px;
}

.reverse-page .output-panel .structured-tab-view {
  padding: 14px;
}

.reverse-page .output-panel .structured-view-head {
  margin: -14px -14px 14px;
}

.reverse-page .output-panel .structured-section-card {
  padding: 14px;
  border: 1px solid #e5ecf6;
  border-radius: 10px;
  background: #fbfcff;
}

.reverse-page .output-panel .structured-section-head,
.reverse-page .output-panel .structured-view-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reverse-page .output-panel .structured-view-actions {
  justify-content: flex-end;
}

.reverse-page .output-panel .inline-copy-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  color: #526480;
  background: #ffffff;
  font-size: 14px;
}

.reverse-page .output-panel .structured-section-card p.is-editing,
.reverse-page .output-panel .negative-prompt-editor.is-editing {
  padding: 10px;
  border-radius: 8px;
  outline: 2px solid rgba(47, 107, 255, 0.18);
  background: #ffffff;
}

.reverse-page .output-panel .structured-list-editor {
  width: 100%;
  min-height: 260px;
  max-height: 520px;
  padding: 14px;
  resize: vertical;
  border: 1px solid #a9c1f1;
  border-radius: 9px;
  outline: none;
  color: #34455f;
  background: #fbfdff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
}

.reverse-page .output-panel .structured-section-card + .structured-section-card {
  margin-top: 10px;
}

.reverse-page .output-panel .tag-filter-empty {
  margin: 18px 0 0;
  padding: 12px;
  border: 1px dashed #d6e1ef;
  border-radius: 9px;
  color: #7d8aa0;
  background: #fafcff;
  font-size: 12px;
  text-align: center;
}

.reverse-page .output-panel .structured-section-card p {
  margin: 7px 0 0;
  color: #52617b;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.reverse-page .output-panel .tab-empty-state {
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.reverse-page .output-panel .full-rule-list,
.reverse-page .output-panel .full-variable-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.reverse-page .output-panel .full-rule-list {
  display: grid;
}

.reverse-page .output-panel .full-rule-item,
.reverse-page .output-panel .rule-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  color: #52617b;
  font-size: 12px;
  line-height: 1.55;
}

.reverse-page .output-panel .full-rule-item .inline-copy-button {
  margin-left: auto;
}

.reverse-page .output-panel .variable-copy-unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reverse-page .output-panel .rule-check {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 50%;
  color: #ffffff;
  background: #16b978;
  font-size: 9px;
}

.reverse-page .output-panel .negative-prompt-card {
  border: 1px solid #e7edf6;
  border-radius: 10px;
  overflow: hidden;
}

.reverse-page .output-panel .negative-prompt-editor {
  min-height: 220px;
  margin: 0;
  padding: 15px;
  outline: none;
  color: #4f5e77;
  background: #fffafa;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.reverse-page .output-panel .variable-token-popover {
  position: fixed;
  z-index: 80;
  width: 298px;
  padding: 14px;
  border: 1px solid #cddbef;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(32, 56, 92, 0.2);
}

.reverse-page .output-panel .variable-token-popover[hidden] {
  display: none;
}

.reverse-page .output-panel .variable-token-popover header,
.reverse-page .output-panel .variable-token-popover footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reverse-page .output-panel .variable-token-popover header {
  margin-bottom: 12px;
}

.reverse-page .output-panel .variable-token-popover header button {
  width: 28px;
  height: 28px;
  border: 0;
  color: #687892;
  background: transparent;
  font-size: 19px;
}

.reverse-page .output-panel .variable-token-popover label {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: #50617d;
  font-size: 12px;
  font-weight: 650;
}

.reverse-page .output-panel .variable-token-popover input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #d4deec;
  border-radius: 8px;
  color: #273a59;
  background: #ffffff;
}

.reverse-page .output-panel .variable-token-popover input:focus {
  border-color: #2f6bff;
  outline: 3px solid rgba(47, 107, 255, 0.11);
}

.reverse-page .output-panel .variable-token-popover footer {
  justify-content: flex-end;
  margin-top: 14px;
}

.reverse-page .output-panel .variable-token-popover footer button {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d4deec;
  border-radius: 8px;
  color: #526480;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
}

.reverse-page .output-panel .variable-token-popover footer button.is-primary {
  border-color: #2f6bff;
  color: #ffffff;
  background: #2f6bff;
}

.reverse-page .output-panel .result-bottom-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.reverse-page .output-panel .result-bottom-cards[hidden] {
  display: none;
}

.reverse-page .output-panel .result-mini-card {
  min-height: 128px;
  padding: 14px;
  border: 1px solid #e3ebf8;
  border-radius: 12px;
  background: #fbfcff;
}

.reverse-page .output-panel .result-mini-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.reverse-page .output-panel .result-mini-card > header button {
  border: 0;
  color: #2f6bff;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}

.reverse-page .output-panel .rule-list {
  display: grid;
  gap: 7px;
}

.reverse-page .output-panel .variable-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.reverse-page .output-panel .variable-chip {
  color: #2f63ca;
  background: #f2f6ff;
}

.reverse-page .output-panel .variable-chip:hover {
  border-color: #91aff0;
  background: #eaf1ff;
}

.reverse-page .output-panel .mini-empty {
  margin: 0;
  color: #8a96aa;
  font-size: 12px;
}

@keyframes result-skeleton-pulse {
  from {
    opacity: 0.58;
  }
  to {
    opacity: 1;
  }
}

/* Sixth-round scope: result actions and generator transfer fields. */
.reverse-page .generator-transfer-context {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(190, 214, 199, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.reverse-page .generator-transfer-context[hidden] { display: none; }

.reverse-page .generator-transfer-context > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #e8f0eb;
  font-size: 14px;
}

.reverse-page .generator-source-badge {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(179, 211, 191, 0.36);
  border-radius: 7px;
  color: #d8eee0;
  background: rgba(180, 216, 193, 0.1);
  font-size: 11px;
  font-weight: 700;
}

.reverse-page .generator-transfer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.reverse-page .generator-transfer-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #aebbb2;
  font-size: 12px;
  font-weight: 650;
}

.reverse-page .generator-transfer-grid label.is-wide { grid-column: 1 / -1; }

.reverse-page .generator-transfer-grid input,
.reverse-page .generator-transfer-grid select,
.reverse-page .generator-transfer-grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  resize: vertical;
  border: 1px solid rgba(207, 223, 213, 0.2);
  border-radius: 8px;
  color: #edf4ef;
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  line-height: 1.45;
}

.reverse-page .generator-transfer-grid input:focus,
.reverse-page .generator-transfer-grid select:focus,
.reverse-page .generator-transfer-grid textarea:focus {
  border-color: #acd0b9;
  outline: 3px solid rgba(172, 208, 185, 0.1);
}

.action-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  color: #263a59;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(28, 48, 78, 0.24);
}

.action-dialog::backdrop { background: rgba(26, 39, 60, 0.32); backdrop-filter: blur(2px); }
.action-dialog form { padding: 20px; }
.action-dialog h2 { margin: 0; color: #153269; font-size: 18px; }
.action-dialog p { margin: 10px 0 20px; color: #63718a; font-size: 14px; line-height: 1.6; }
.action-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }

.action-dialog button {
  height: 38px;
  padding: 0 13px;
  border: 1px solid #d2ddeb;
  border-radius: 8px;
  color: #52627c;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.action-dialog button.is-primary { border-color: #2f6bff; color: #ffffff; background: #2f6bff; }
.action-dialog button.is-danger-secondary { border-color: #edbfc2; color: #c43d43; background: #fff8f8; }

.reverse-page .toast {
  top: 84px;
  right: 24px;
  bottom: auto;
  left: auto;
  min-width: 220px;
  border-color: #c8dbcf;
  border-radius: 10px;
  color: #214833;
  background: rgba(246, 255, 250, 0.97);
  box-shadow: 0 12px 30px rgba(33, 72, 51, 0.16);
  transform: translateY(-10px);
}

.reverse-page .toast.show { transform: translateY(0); }
.reverse-page .toast.is-error { border-color: #efc7ca; color: #a4343a; background: rgba(255, 248, 248, 0.98); box-shadow: 0 12px 30px rgba(132, 45, 50, 0.14); }

/* API access workbench: scoped so reverse and generation workbenches keep their existing designs. */
body.api-access-page {
  min-width: 1180px;
  color: #24385e;
  background: #f7f9fd;
}

.api-access-page .noise { display: none; }

.api-access-page .page-shell {
  width: 100%;
  max-width: none;
  padding: 0;
}

.api-access-page .top-nav {
  height: 70px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e1e9f6;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(32, 62, 112, 0.04);
}

.api-access-page .brand { color: #102a68; font-size: 18px; }

.api-access-page .brand-mark {
  border-radius: 10px;
  background: #2f6bff;
  box-shadow: none;
}

.api-access-page .nav-pills {
  padding: 4px;
  border-color: #dce6f5;
  border-radius: 11px;
  background: #f9fbff;
  backdrop-filter: none;
}

.api-access-page .nav-pill {
  min-width: 108px;
  min-height: 36px;
  border-radius: 8px;
  color: #62718d;
  font-weight: 650;
}

.api-access-page .nav-pill:hover,
.api-access-page .nav-pill.active {
  color: #1e5eea;
  background: #edf3ff;
  box-shadow: inset 0 0 0 1px #bcd1ff;
}

.api-access-page .account-chip { color: #536580; }
.api-access-page .status-dot { background: #20b978; box-shadow: none; }

.api-access-workspace { min-height: calc(100vh - 88px); }

.api-access-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 4px 18px;
}

.api-access-kicker,
.api-card-kicker {
  display: block;
  margin-bottom: 6px;
  color: #2f6bff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.api-access-header h1,
.api-card-header h2,
.api-side-card h2 {
  margin: 0;
  color: #102a68;
}

.api-access-header h1 { font-size: 30px; line-height: 1.2; }
.api-access-header p { margin: 6px 0 0; color: #6a7891; font-size: 14px; }

.api-header-status {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #d5e0ef;
  border-radius: 9px;
  color: #64738d;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.api-status-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9aa8bd;
}

.api-header-status[data-status="connected"] { border-color: #b8e5cf; color: #188a5b; background: #f2fcf6; }
.api-header-status[data-status="connected"] .api-status-indicator { background: #1db979; }
.api-header-status[data-status="testing"], .api-header-status[data-status="saving"] { border-color: #bcd1ff; color: #2f6bff; background: #f2f6ff; }
.api-header-status[data-status="testing"] .api-status-indicator, .api-header-status[data-status="saving"] .api-status-indicator { background: #2f6bff; }
.api-header-status[data-status="failed"], .api-header-status[data-status="invalid_key"], .api-header-status[data-status="timeout"], .api-header-status[data-status="invalid_base_url"], .api-header-status[data-status="model_unavailable"], .api-header-status[data-status="quota_exhausted"], .api-header-status[data-status="service_error"] { border-color: #f1c7cb; color: #c54a52; background: #fff8f8; }
.api-header-status[data-status="failed"] .api-status-indicator, .api-header-status[data-status="invalid_key"] .api-status-indicator, .api-header-status[data-status="timeout"] .api-status-indicator, .api-header-status[data-status="invalid_base_url"] .api-status-indicator, .api-header-status[data-status="model_unavailable"] .api-status-indicator, .api-header-status[data-status="quota_exhausted"] .api-status-indicator, .api-header-status[data-status="service_error"] .api-status-indicator { background: #e5484d; }

.api-access-grid {
  display: grid;
  grid-template-columns: minmax(680px, 1.68fr) minmax(330px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.api-config-card,
.api-side-card {
  border: 1px solid #e0e9f7;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(42, 73, 125, 0.05);
}

.api-config-card { padding: 24px; }

.api-card-header,
.api-side-heading,
.api-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.api-card-header h2 { font-size: 20px; }

.api-draft-state,
.api-field-state,
.api-usage-source {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #dce5f3;
  border-radius: 7px;
  color: #66758e;
  background: #f8faff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.api-draft-state[data-state="dirty"] { border-color: #f2d8a6; color: #9b6b16; background: #fffaf0; }
.api-draft-state[data-state="saving"] { border-color: #bcd1ff; color: #2f6bff; background: #f2f6ff; }

.api-setup-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.api-setup-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #8996aa;
  font-size: 13px;
}

.api-setup-steps li span {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #d6e0ef;
  border-radius: 50%;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.api-setup-steps li.is-active { color: #2f6bff; }
.api-setup-steps li.is-active span { border-color: #2f6bff; color: #ffffff; background: #2f6bff; }
.api-setup-steps strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.api-form-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #edf1f8;
}

.api-form-section h3 { margin: 0 0 13px; color: #243c70; font-size: 16px; }
.api-section-heading span { color: #7b8aa4; font-size: 12px; }

.provider-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.provider-choice {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px;
  border: 1px solid #dce5f3;
  border-radius: 10px;
  color: #4f607c;
  text-align: left;
  background: #ffffff;
  cursor: pointer;
}

.provider-choice strong { color: #29436f; font-size: 14px; }
.provider-choice span { color: #8290a6; font-size: 12px; }
.provider-choice:hover, .provider-choice.is-selected { border-color: #76a3ff; color: #1e5eea; background: #f5f8ff; }
.provider-choice.is-selected strong, .provider-choice.is-selected span { color: #2461e9; }

.api-field-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.api-field-row label,
.api-model-grid label > span { color: #556783; font-size: 14px; font-weight: 700; }

.api-field-row input,
.api-model-grid select {
  width: 100%;
  height: 42px;
  border: 1px solid #d7e1f0;
  border-radius: 9px;
  color: #273a5e;
  background: #ffffff;
  font: inherit;
}

.api-field-row input { padding: 0 12px; }
.api-model-grid select { padding: 0 10px; }

.api-field-row input:focus,
.api-model-grid select:focus,
.provider-choice:focus-visible,
.skill-choice:focus-within {
  border-color: #2f6bff;
  outline: 3px solid rgba(47, 107, 255, 0.12);
}

.api-key-control { position: relative; min-width: 0; }
.api-key-control input { padding-right: 58px; }
.api-icon-button { position: absolute; top: 6px; right: 6px; height: 30px; padding: 0 9px; border: 0; border-radius: 6px; color: #4d6dab; background: #edf3ff; font-size: 12px; font-weight: 750; cursor: pointer; }
.api-icon-button:hover { color: #174fc8; background: #e2ecff; }
.api-field-help { margin: 8px 0 0 102px; color: #7787a1; font-size: 12px; line-height: 1.5; }

.api-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.api-model-grid label { display: grid; gap: 7px; }

.skill-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-choice { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #d8e3f4; border-radius: 7px; color: #61708b; background: #ffffff; font-size: 13px; font-weight: 650; cursor: pointer; }
.skill-choice:has(input:checked) { border-color: #8eb2ff; color: #2461e9; background: #f1f6ff; }
.skill-choice input { width: 14px; height: 14px; accent-color: #2f6bff; }
.skill-rule-summary { margin-top: 12px; padding: 11px 12px; border: 1px solid #d8e6fb; border-radius: 9px; color: #557096; background: #f7faff; font-size: 13px; line-height: 1.55; }

.api-feedback { min-height: 42px; display: flex; align-items: center; margin-top: 20px; padding: 0 12px; border: 1px solid #dce5f3; border-radius: 9px; color: #61718c; background: #f8faff; font-size: 13px; }
.api-feedback[data-tone="success"] { border-color: #bde5d0; color: #177c52; background: #f3fcf7; }
.api-feedback[data-tone="error"] { border-color: #f1c8cc; color: #b6424b; background: #fff8f8; }

.api-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #edf1f8; }
.api-action-group { display: flex; gap: 10px; }
.api-primary-button, .api-secondary-button, .api-text-button { font: inherit; cursor: pointer; }
.api-primary-button, .api-secondary-button { min-height: 40px; padding: 0 15px; border-radius: 9px; font-size: 14px; font-weight: 750; }
.api-primary-button { border: 1px solid #2f6bff; color: #ffffff; background: #2f6bff; box-shadow: 0 7px 16px rgba(47, 107, 255, 0.18); }
.api-primary-button:hover { border-color: #2258d9; background: #2258d9; }
.api-secondary-button { border: 1px solid #cbd9ee; color: #42628e; background: #ffffff; }
.api-secondary-button:hover { border-color: #8fb3ff; color: #1f5de1; background: #f6f9ff; }
.api-primary-button:disabled, .api-secondary-button:disabled, .api-text-button:disabled { cursor: not-allowed; opacity: 0.52; }

.api-side-column { display: grid; gap: 16px; }
.api-side-card { padding: 20px; }
.api-side-heading h2, .api-connection-card h2 { font-size: 18px; }
.api-connection-card { min-height: 218px; }
.api-connection-card > p { margin: 9px 0 18px; color: #6b7b94; font-size: 14px; line-height: 1.55; }
.api-connection-card[data-status="connected"] { border-color: #bde5d0; }
.api-connection-card[data-status="failed"], .api-connection-card[data-status="invalid_key"], .api-connection-card[data-status="timeout"], .api-connection-card[data-status="invalid_base_url"], .api-connection-card[data-status="model_unavailable"], .api-connection-card[data-status="quota_exhausted"], .api-connection-card[data-status="service_error"] { border-color: #f1c8cc; }
.api-connection-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.api-connection-meta div { padding-right: 10px; border-right: 1px solid #edf1f8; }
.api-connection-meta div:last-child { border-right: 0; }
.api-connection-meta dt { color: #8a98ad; font-size: 12px; }
.api-connection-meta dd { margin: 5px 0 0; color: #31496f; font-size: 13px; font-weight: 750; }
.api-retry-button { width: 100%; }

.api-usage-source { color: #647592; }
.api-usage-total { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; }
.api-usage-total strong { color: #1d4fb8; font-size: 30px; line-height: 1; }
.api-usage-total span { color: #72829a; font-size: 13px; }
.api-usage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.api-usage-metrics span { display: grid; gap: 4px; padding-right: 7px; border-right: 1px solid #e9eef7; color: #8090a7; font-size: 12px; }
.api-usage-metrics span:last-child { border: 0; }
.api-usage-metrics b { color: #2a426d; font-size: 15px; }
.api-side-note { margin: 14px 0 0; color: #8795aa; font-size: 12px; line-height: 1.5; }

.api-text-button { padding: 0; border: 0; color: #2f6bff; background: transparent; font-size: 13px; font-weight: 750; }
.api-call-list { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; }
.api-call-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 8px; border-bottom: 1px solid #edf1f7; }
.api-call-row:last-child { border-bottom: 0; }
.api-call-row strong { color: #385179; font-size: 13px; }
.api-call-row span { color: #7b8aa0; font-size: 12px; white-space: nowrap; }
.api-empty-row { padding: 14px 0; color: #8a98ad; font-size: 13px; text-align: center; }
.api-error-card { border-color: #f1c8cc; background: #fffafa; }
.api-error-card p { margin: 12px 0; color: #a2454d; font-size: 13px; line-height: 1.55; word-break: break-word; }

.api-access-page .toast { top: 84px; right: 24px; bottom: auto; left: auto; min-width: 220px; border-color: #d7e2f1; border-radius: 9px; color: #354f79; background: #ffffff; box-shadow: 0 12px 30px rgba(42, 73, 125, 0.18); transform: translateY(-10px); }
.api-access-page .toast.show { transform: translateY(0); }
.api-access-page .toast[data-tone="success"] { border-color: #bde5d0; color: #197b54; background: #f4fdf8; }
.api-access-page .toast[data-tone="error"] { border-color: #f1c8cc; color: #b6424b; background: #fff8f8; }

@media (max-width: 1180px) {
  body.api-access-page { min-width: 0; }
  .api-access-grid { grid-template-columns: 1fr; }
  .api-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-side-column .api-call-card, .api-side-column .api-error-card { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .api-access-page .page-shell { padding: 0 14px 24px; }
  .api-access-page .top-nav { height: auto; margin: 0; padding: 12px 16px; flex-wrap: wrap; }
  .api-access-page .account-chip { display: none; }
  .api-access-header { align-items: flex-start; flex-direction: column; }
  .api-config-card, .api-side-card { padding: 18px; }
  .provider-choice-grid, .api-model-grid, .api-side-column { grid-template-columns: 1fr; }
  .api-field-row { grid-template-columns: 1fr; gap: 7px; }
  .api-field-help { margin-left: 0; }
  .api-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .api-action-group { display: grid; grid-template-columns: 1fr 1fr; }
  .api-setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .reverse-page .generator-transfer-grid { grid-template-columns: 1fr; }
  .reverse-page .generator-transfer-grid label.is-wide { grid-column: auto; }
}

/* Generation workbench shell: scoped to /generate only. */
body.generation-page {
  min-width: 1280px;
  color: #172b51;
  background: #f8faff;
}

.generation-page .noise { display: none; }

.generation-page .page-shell {
  width: 100%;
  max-width: none;
  padding: 0;
}

.generation-page .top-nav {
  height: 70px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e3ebf8;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(42, 75, 130, 0.04);
}

.generation-page .generation-workspace {
  min-height: calc(100vh - 84px);
}

.generation-page .generation-page-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 4px 16px;
}

.generation-page .generation-page-header h1 {
  margin: 0;
  color: #102a68;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 750;
}

.generation-page .generation-page-header p {
  margin: 5px 0 0;
  color: #69758c;
  font-size: 14px;
}

.generation-page .generation-page-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #5f6f8f;
  font-size: 14px;
}

.generation-page .generation-autosave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #33735d;
  font-weight: 650;
}

.generation-page .generation-autosave i {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #20b978;
  border-radius: 50%;
}

.generation-page .generation-autosave i::after {
  content: "";
  width: 5px;
  height: 3px;
  border-bottom: 1.5px solid #20b978;
  border-left: 1.5px solid #20b978;
  transform: rotate(-45deg) translateY(-1px);
}

.generation-page .generation-page-actions button {
  height: 38px;
  padding: 0 14px;
  border: 1px solid #cfdcf2;
  border-radius: 9px;
  color: #677795;
  background: #ffffff;
  font-weight: 650;
}

.generation-page .generation-workbench-grid {
  display: grid;
  grid-template-columns: minmax(320px, 30fr) minmax(300px, 28fr) minmax(440px, 42fr);
  gap: 18px;
  align-items: stretch;
}

.generation-page .generation-card {
  min-width: 0;
  min-height: 724px;
  padding: 22px;
  border: 1px solid #e3ebf8;
  border-radius: 16px;
  color: #263a60;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(39, 73, 130, 0.05);
}

.generation-page .generation-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin-bottom: 12px;
}

.generation-page .generation-card-heading {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.generation-page .generation-card-header-actions {
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.generation-page .generation-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #2f6bff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.11em;
}

.generation-page .generation-card-title {
  margin: 0;
  color: #102a68;
  font-size: 20px;
  line-height: 1.2;
}

.generation-page .generation-panel-clear-button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #cad9ef;
  border-radius: 8px;
  color: #315fba;
  background: #ffffff;
  font: 13px/1 inherit;
  font-weight: 700;
  cursor: pointer;
}

.generation-page .generation-panel-clear-button:hover:not(:disabled),
.generation-page .generation-panel-clear-button:focus-visible:not(:disabled) {
  border-color: #8fb1ef;
  color: #155de7;
  background: #eff5ff;
  outline: none;
}

.generation-page .generation-panel-clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.generation-page .generation-field {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.generation-page .generation-field-label,
.generation-page .generation-subtitle {
  color: #32486f;
  font-size: 14px;
  font-weight: 700;
}

.generation-page .generation-field select,
.generation-page .generation-field textarea,
.generation-page .generation-field input[type="text"] {
  width: 100%;
  border: 1px solid #dbe5f4;
  border-radius: 9px;
  color: #21375e;
  background: #ffffff;
  font: inherit;
}

.generation-page .generation-field select {
  height: 42px;
  padding: 0 12px;
}

.generation-page .generation-field input[type="text"] {
  height: 42px;
  padding: 0 12px;
}

.generation-page .generation-field textarea {
  min-height: 116px;
  padding: 12px;
  resize: vertical;
  line-height: 1.65;
}

.generation-page .generation-field select:focus,
.generation-page .generation-field textarea:focus,
.generation-page .generation-field input[type="text"]:focus {
  border-color: #2f6bff;
  outline: 3px solid rgba(47, 107, 255, 0.1);
}

.generation-page .generation-prompt-box {
  position: relative;
}

.generation-page .generation-prompt-box textarea {
  padding-bottom: 32px;
}

.generation-page .generation-prompt-meta {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7a88a2;
  font-size: 12px;
}

.generation-page .generation-source-badge {
  padding: 2px 7px;
  border-radius: 5px;
  color: #1c835e;
  background: #ecfaf4;
  font-weight: 650;
}

.generation-handoff-dialog {
  width: min(460px, calc(100vw - 40px));
  border: 1px solid #dce7fa;
  border-radius: 14px;
  padding: 0;
  color: #243a66;
  background: #ffffff;
  box-shadow: 0 20px 54px rgba(24, 51, 101, 0.2);
}

.generation-handoff-dialog::backdrop { background: rgba(16, 34, 70, 0.28); }

.generation-handoff-dialog form { padding: 22px; }
.generation-handoff-dialog h2 { margin: 0; color: #102a68; font-size: 18px; }
.generation-handoff-dialog p { margin: 10px 0 20px; color: #61708d; font-size: 14px; line-height: 1.65; }
.generation-handoff-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.generation-handoff-dialog button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #d3def0;
  border-radius: 8px;
  color: #36507f;
  background: #ffffff;
  font: inherit;
  cursor: pointer;
}
.generation-handoff-dialog button:hover { border-color: #7ca7ff; background: #f1f6ff; color: #1e5ce7; }
.generation-handoff-dialog button.is-primary { border-color: #2f6bff; color: #ffffff; background: #2f6bff; }
.generation-handoff-dialog button.is-primary:hover { background: #2358d7; }

.reverse-history-dialog { width: min(980px, calc(100vw - 40px)); max-height: min(720px, calc(100vh - 48px)); padding: 0; border: 1px solid #dce7fa; border-radius: 16px; color: #102a68; background: #ffffff; box-shadow: 0 24px 72px rgba(34, 69, 135, 0.22); }
.reverse-history-dialog::backdrop { background: rgba(16, 34, 70, 0.28); }
.history-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #e3ebf8; }
.history-dialog-head h2 { margin: 4px 0 0; font-size: 20px; }
.history-dialog-head button { width: 34px; height: 34px; border: 1px solid #dce7fa; border-radius: 8px; color: #61708d; background: #fff; font-size: 22px; cursor: pointer; }
.history-dialog-body { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.5fr); min-height: 480px; max-height: calc(100vh - 170px); }
.history-record-list { overflow: auto; padding: 14px; border-right: 1px solid #e3ebf8; background: #f8faff; }
.history-record-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 10px; color: #1d376f; text-align: left; background: transparent; cursor: pointer; }
.history-record-item + .history-record-item { margin-top: 8px; }
.history-record-item:hover, .history-record-item.is-selected { border-color: #a9c4ff; background: #eef4ff; }
.history-record-item img, .history-thumbnail-placeholder { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #e8edf5; }
.history-record-item strong, .history-record-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-record-item small { display: block; margin-top: 4px; color: #69758c; }
.history-record-detail { overflow: auto; padding: 22px; }
.history-record-detail h3 { margin: 0; font-size: 18px; }
.history-detail-meta { margin: 8px 0 16px; color: #69758c; font-size: 13px; }
.history-detail-image { width: 100%; max-height: 180px; border-radius: 10px; object-fit: cover; background: #f1f4f9; }
.history-detail-prompt { max-height: 180px; margin: 14px 0; padding: 12px; overflow: auto; border: 1px solid #e3ebf8; border-radius: 10px; color: #263c6d; white-space: pre-wrap; line-height: 1.6; background: #fbfcff; }
.history-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.history-detail-actions button { min-height: 38px; padding: 0 12px; border: 1px solid #d2e0fa; border-radius: 8px; color: #1e5ce7; background: #fff; cursor: pointer; }
.history-detail-actions .is-primary { border-color: #2f6bff; color: #fff; background: #2f6bff; }
.history-detail-actions .is-danger { color: #c13542; border-color: #efc4ca; }
.history-empty { margin: 0; color: #69758c; }

@media (max-width: 760px) {
  .history-dialog-body { grid-template-columns: 1fr; }
  .history-record-list { max-height: 220px; border-right: 0; border-bottom: 1px solid #e3ebf8; }
}

.generation-page .generation-custom-input {
  margin-top: 8px;
}

.generation-page .generation-field-error,
.generation-page .generation-action-message {
  min-height: 18px;
  margin: -3px 0 0;
  color: #d14354;
  font-size: 12px;
  line-height: 1.5;
}

.generation-page .generation-handoff-reference-notice {
  margin: 6px 0 0;
  color: #9a6714;
  font-size: 12px;
  line-height: 1.5;
}

.generation-page .generation-action-message {
  margin: 8px 0 -2px;
  color: #607392;
  text-align: center;
}

.generation-page .generation-action-message.is-error { color: #d14354; }

.generation-page .generation-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.generation-page .generation-chip,
.generation-page .generation-segment {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dce6f5;
  border-radius: 8px;
  color: #61718f;
  background: #ffffff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.generation-page .generation-chip:hover,
.generation-page .generation-segment:hover {
  border-color: #9ebeff;
  color: #2f6bff;
  background: #f5f8ff;
}

.generation-page .generation-chip.is-selected,
.generation-page .generation-segment.is-selected {
  border-color: #7ca6ff;
  color: #1f5de6;
  background: #edf3ff;
}

.generation-page .generation-segmented-control {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.generation-page .generation-segment { padding: 0 6px; }

.generation-page .generation-reference-field { display: grid; gap: 8px; }

.generation-page .generation-reference-dropzone {
  min-height: 128px;
  display: grid;
  place-items: center;
  border: 1px dashed #9ebdff;
  border-radius: 10px;
  background: #f8faff;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.generation-page .generation-reference-dropzone:hover,
.generation-page .generation-reference-dropzone.is-dragging {
  border-color: #2f6bff;
  background: #f2f6ff;
}

.generation-page .generation-reference-dropzone.has-reference {
  display: block;
  padding: 8px;
}

.generation-page .generation-reference-dropzone.is-full { cursor: default; }

.generation-page .generation-reference-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 14px;
  color: #7282a0;
  font-size: 12px;
  text-align: center;
}

.generation-page .generation-reference-empty::before {
  content: "+";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #9ebdff;
  border-radius: 50%;
  color: #2f6bff;
  font-size: 22px;
  line-height: 1;
}

.generation-page .generation-reference-empty strong { color: #25446f; font-size: 14px; }
.generation-page .generation-reference-empty small { color: #8491a7; }

.generation-page .generation-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.generation-page .generation-reference-tile {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #dbe5f4;
  border-radius: 9px;
  background: #f8faff;
}

.generation-page .generation-reference-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
}

.generation-page .generation-reference-tile.is-uploading img { opacity: 0.45; }
.generation-page .generation-reference-tile.is-error { border-color: #efadb7; background: #fff7f8; }

.generation-page .generation-reference-tile select {
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid #dbe5f4;
  border-radius: 0;
  color: #526684;
  background: #ffffff;
  font-size: 11px;
}

.generation-page .generation-reference-status {
  position: absolute;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 3px 6px;
  overflow: hidden;
  border-radius: 5px;
  color: #ffffff;
  background: rgba(24, 53, 97, 0.74);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-page .generation-reference-tile.is-error .generation-reference-status { background: #cf4859; }

.generation-page .generation-reference-error {
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 8px;
  color: #c53e50;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.generation-page .generation-reference-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #dbe5f4;
}

.generation-page .generation-reference-actions button {
  min-width: 0;
  height: 28px;
  border: 0;
  border-right: 1px solid #dbe5f4;
  color: #4a638a;
  background: #ffffff;
  font-size: 11px;
  cursor: pointer;
}

.generation-page .generation-reference-actions button:last-child { border-right: 0; }
.generation-page .generation-reference-actions button:hover:not(:disabled) { color: #1e5fe6; background: #edf3ff; }
.generation-page .generation-reference-actions button:disabled { cursor: not-allowed; color: #a4afc0; }

.generation-page .generation-reference-remove {
  color: #ba4050 !important;
}

.generation-page .generation-reference-add {
  min-height: 112px;
  border: 1px dashed #9ebdff;
  border-radius: 9px;
  color: #2f6bff;
  background: #f7faff;
  font-size: 32px;
  cursor: pointer;
}

.generation-page .generation-reference-hint,
.generation-page .generation-duration-hint {
  margin: 0;
  color: #8190a9;
  font-size: 12px;
}

.generation-page .generation-primary-action {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: #2f6bff;
  font-size: 16px;
  font-weight: 750;
}

.generation-page .generation-primary-action:hover:not(:disabled) { background: #1f5fe6; }
.generation-page .generation-primary-action:active:not(:disabled) { transform: translateY(1px); }

.generation-page .generation-primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.generation-page .generation-duration-hint { text-align: center; padding-top: 8px; }

.generation-page .generation-consistency-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 9px;
  min-height: 54px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #bcd2ff;
  border-radius: 8px;
  background: #eef4ff;
}

.generation-page .generation-consistency-copy { display: grid; gap: 2px; min-width: 0; }
.generation-page .generation-consistency-copy strong { color: #1f5fde; font-size: 13px; line-height: 1.25; }
.generation-page .generation-consistency-copy small { color: #7081a0; font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.generation-page .generation-consistency-details { margin: 0; color: #52709d; font-size: 11px; }
.generation-page .generation-consistency-details summary { cursor: pointer; color: #2f6bff; font-weight: 650; list-style: none; }
.generation-page .generation-consistency-details summary::-webkit-details-marker { display: none; }
.generation-page .generation-consistency-details summary::before { content: "细项"; }
.generation-page .generation-consistency-details summary { font-size: 0; }
.generation-page .generation-consistency-details summary::before { font-size: 11px; }
.generation-page .generation-consistency-details[open] { grid-column: 1 / -1; grid-row: 2; }
.generation-page .generation-lock-list { display: flex; flex-wrap: wrap; gap: 9px 11px; padding-top: 5px; }
.generation-page .generation-lock-option {
  position: relative;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #cfdae8;
  border-radius: 7px;
  color: #566b8e;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.generation-page .generation-lock-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.generation-page .generation-lock-option:hover { border-color: #77a0f4; color: #1e63df; background: #f6f9ff; }
.generation-page .generation-lock-option:has(input:checked) { border-color: #2f6bff; color: #1e63df; background: #ffffff; }
.generation-page .generation-lock-option:has(input:focus-visible) { outline: 2px solid rgba(47, 109, 246, 0.24); outline-offset: 2px; }
.generation-page .generation-lock-option:has(input:disabled) { cursor: not-allowed; opacity: 0.58; }
.generation-page .generation-lock-indicator {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #2f6bff;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(38%, -38%) scale(0.72);
  transition: opacity 120ms ease, transform 120ms ease;
}
.generation-page .generation-lock-option:has(input:checked) .generation-lock-indicator { opacity: 1; transform: translate(38%, -38%) scale(1); }
.generation-page .generation-lock-label { white-space: nowrap; }
.generation-page .generation-consistency-hint { display: none; grid-column: 1 / -1; margin: 0; color: #6d7f9d; font-size: 11px; line-height: 1.45; }
.generation-page .generation-consistency-hint:not(:empty) { display: block; }

.generation-page .generation-switch {
  width: 32px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.generation-page .generation-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.generation-page .generation-switch-track {
  position: relative;
  width: 32px;
  height: 18px;
  display: block;
  border-radius: 999px;
  background: #c8d3e5;
  box-shadow: inset 0 0 0 1px rgba(56, 88, 140, 0.12);
  transition: background 160ms ease;
}

.generation-page .generation-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  content: "";
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(32, 67, 126, 0.24);
  transition: transform 160ms ease;
}

.generation-page .generation-switch-input:checked + .generation-switch-track { background: #2f6bff; }
.generation-page .generation-switch-input:checked + .generation-switch-track::after { transform: translateX(14px); }
.generation-page .generation-switch-input:focus-visible + .generation-switch-track { outline: 2px solid rgba(47, 107, 255, 0.35); outline-offset: 2px; }
.generation-page .generation-switch:has(.generation-switch-input:disabled) { cursor: not-allowed; opacity: 0.55; }

html[data-theme="dark"] .generation-page .generation-consistency-copy strong { color: #b7d0ff; }
html[data-theme="dark"] .generation-page .generation-consistency-copy small { color: #aebdd3; }
html[data-theme="dark"] .generation-page .generation-consistency-details summary { color: #8eb7ff; }
html[data-theme="dark"] .generation-page .generation-switch-track { background: #42536c; box-shadow: inset 0 0 0 1px #526786; }
html[data-theme="dark"] .generation-page .generation-switch-input:checked + .generation-switch-track { background: #5286dd; }

.generation-page .generation-parameter-group { display: grid; gap: 11px; }
.generation-page .generation-slider-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.generation-page .generation-slider-label { color: #596b89; font-size: 13px; }
.generation-page .generation-slider-row input { width: 100%; accent-color: #2f6bff; }
.generation-page .generation-slider-value { color: #2f6bff; font-size: 13px; text-align: right; }

.generation-page .generation-output-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.generation-page .generation-count-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.generation-page .generation-model-feedback {
  min-height: 18px;
  margin: 0;
  color: #7182a0;
  font-size: 12px;
  line-height: 1.5;
}
.generation-page .generation-model-feedback.is-error { color: #d14354; }
.generation-page .generation-negative-chip.is-automatic::after {
  content: "锁定";
  margin-left: 5px;
  color: #1f5fe6;
  font-size: 10px;
}
.generation-page .generation-negative-chip:disabled { cursor: not-allowed; opacity: 0.72; }
.generation-page .generation-preview-container {
  --generation-preview-block-height: 150px;
  display: grid;
  grid-template-rows: auto repeat(2, var(--generation-preview-block-height));
  gap: 8px;
  min-width: 0;
}
.generation-page .generation-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.generation-page .generation-preview-state { color: #6d7f9d; font-size: 12px; font-weight: 700; }
.generation-page .generation-preview-state.is-manual { color: #1f5fe6; }
.generation-page .generation-preview-actions { display: inline-flex; gap: 6px; }
.generation-page .generation-icon-action {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #d4e0f3;
  border-radius: 7px;
  color: #42608a;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.generation-page .generation-icon-action:hover:not(:disabled) { border-color: #9ebeff; color: #1f5fe6; background: #f4f7ff; }
.generation-page .generation-icon-action:disabled { cursor: not-allowed; opacity: 0.55; }
.generation-page .generation-prompt-preview {
  width: 100%;
  min-height: 0;
  height: var(--generation-preview-block-height);
  max-height: var(--generation-preview-block-height);
  margin: 0;
  padding: 12px;
  overflow: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  scrollbar-gutter: stable;
  white-space: pre-wrap;
  border: 1px solid #dbe5f4;
  border-radius: 9px;
  color: #496180;
  background: #fbfcff;
  font: 12px/1.7 inherit;
}
.generation-page .generation-prompt-editor { resize: none; }
.generation-page .generation-negative-preview {
  min-height: 0;
  height: var(--generation-preview-block-height);
  max-height: var(--generation-preview-block-height);
  margin: 0;
  padding: 9px 10px;
  overflow: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  scrollbar-gutter: stable;
  white-space: pre-wrap;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  color: #697b97;
  background: #f8faff;
  font: 12px/1.65 inherit;
}
.generation-page .generation-control-card.is-settings-locked { cursor: progress; }
.generation-page .generation-control-card.is-settings-locked input,
.generation-page .generation-control-card.is-settings-locked select,
.generation-page .generation-control-card.is-settings-locked button { cursor: not-allowed; }

.generation-page .generation-result-status {
  padding: 7px 10px;
  border-radius: 8px;
  color: #5e718f;
  background: #f3f6fb;
  font-size: 12px;
  font-weight: 700;
}
.generation-page .generation-result-status.is-validating,
.generation-page .generation-result-status.is-submitting,
.generation-page .generation-result-status.is-generating {
  color: #1f5fe6;
  background: #edf3ff;
}
.generation-page .generation-result-status.is-success { color: #16845d; background: #ecfaf4; }
.generation-page .generation-result-status.is-partial_success { color: #9a6a10; background: #fff7df; }
.generation-page .generation-result-status.is-failed { color: #c63f50; background: #fff1f2; }

.generation-page .generation-result-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin: -4px 0 12px;
}

.generation-page .generation-empty-result {
  min-height: 360px;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1px dashed #c8d7ee;
  border-radius: 12px;
  color: #5f7190;
  background: #fbfcff;
  text-align: center;
}

.generation-page .generation-empty-result strong { color: #273f6c; font-size: 16px; }
.generation-page .generation-empty-result p { max-width: 260px; margin: 0; font-size: 13px; line-height: 1.6; }
.generation-page .generation-empty-result.is-error { border-color: #efadb7; background: #fff8f8; }
.generation-page .generation-empty-result.has-generated-image { display: grid; place-content: stretch; padding: 0; overflow: hidden; }
.generation-page .generation-generated-preview-trigger {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: #f4f7fb;
  cursor: zoom-in;
}
.generation-page .generation-generated-preview-trigger:focus-visible { outline: 3px solid rgba(47, 107, 255, 0.42); outline-offset: -3px; }
.generation-page .generation-generated-preview { width: 100%; min-height: 300px; max-height: 410px; display: block; object-fit: contain; background: #f4f7fb; }
.generation-page .generation-generated-meta { max-width: none; padding: 9px 12px; color: #637593; background: #ffffff; text-align: left; }
.generation-page .generation-generated-meta.is-warning { color: #9b3b42; background: #fff5f5; }
.generation-page .generation-image-lightbox[hidden] { display: none; }
body.has-generation-image-lightbox { overflow: hidden; }
.generation-page .generation-image-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 22, 47, 0.76);
}
.generation-page .generation-image-lightbox-content {
  position: relative;
  display: grid;
  width: min(1160px, 100%);
  max-height: calc(100vh - 48px);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: #152545;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}
.generation-page .generation-image-lightbox-image {
  width: 100%;
  max-height: calc(100vh - 128px);
  display: block;
  object-fit: contain;
  background: #0b1427;
}
.generation-page .generation-image-lightbox-meta { margin: 10px 44px 0 0; color: #d9e5f8; font-size: 12px; }
.generation-page .generation-image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 7px;
  color: #ffffff;
  background: rgba(10, 20, 39, 0.72);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.generation-page .generation-image-lightbox-close:hover { background: #2f6bff; border-color: #2f6bff; }
.generation-page .generation-result-progress { place-items: center; }
.generation-page .generation-progress-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #dbe7fb;
  border-top-color: #2f6bff;
  border-radius: 50%;
  animation: generation-job-spin 900ms linear infinite;
}
@keyframes generation-job-spin { to { transform: rotate(360deg); } }
.generation-page .generation-subtitle { margin: 18px 0 10px; }

.generation-page .generation-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.generation-page .generation-plan-placeholder { min-height: 84px; display: grid; align-content: end; gap: 4px; padding: 10px; border: 1px solid #e3ebf8; border-radius: 9px; color: #667892; background: #f8faff; }
.generation-page .generation-plan-placeholder span { color: #3b527b; font-weight: 700; }
.generation-page .generation-plan-placeholder small { color: #94a1b5; font-size: 11px; }
.generation-page .generation-result-plan { position: relative; overflow: hidden; cursor: pointer; text-align: left; }
.generation-page .generation-result-plan:hover { border-color: #9ebeff; }
.generation-page .generation-result-plan.is-selected { border-color: #2f6bff; box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.12); }
.generation-page .generation-result-plan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.generation-page .generation-result-plan span,
.generation-page .generation-result-plan small { position: relative; z-index: 1; }
.generation-page .generation-plan-placeholder.is-failed { border-color: #efadb7; color: #c63f50; background: #fff8f8; }
.generation-page .generation-plan-placeholder.is-failed span { color: #c63f50; }

.generation-page .generation-output-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.generation-page .generation-check-card { min-height: 98px; padding: 12px; border: 1px solid #e3ebf8; border-radius: 10px; background: #ffffff; }
.generation-page .generation-check-card h3 { margin: 0 0 8px; color: #2f6bff; font-size: 14px; }
.generation-page .generation-check-card p { margin: 0; color: #72819a; font-size: 12px; line-height: 1.55; }
.generation-page .generation-inline-action {
  min-height: 30px;
  margin: 9px 7px 0 0;
  padding: 0 9px;
  border: 1px solid #d2dff3;
  border-radius: 7px;
  color: #48638d;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.generation-page .generation-inline-action:hover:not(:disabled) { border-color: #98b9ff; color: #1f5fe6; background: #f4f7ff; }
.generation-page .generation-inline-action-primary { border-color: #2f6bff; color: #ffffff; background: #2f6bff; }
.generation-page .generation-inline-action-primary:hover:not(:disabled) { color: #ffffff; background: #1f5fe6; }
.generation-page .generation-inline-action:disabled { cursor: not-allowed; opacity: 0.55; }
.generation-page .generation-result-action-message { min-height: 18px; margin: 10px 0 0; color: #617492; font-size: 12px; text-align: right; }
.generation-page .generation-reference-dropzone.is-locked { cursor: not-allowed; opacity: 0.72; }

/* Shared primary-workbench layout: one set of spatial anchors for every route. */
:root {
  --app-min-width: 1280px;
  --app-topbar-height: 70px;
  --app-inline-padding: 28px;
  --app-workspace-top: 16px;
  --app-workspace-bottom: 28px;
  --app-page-header-height: 64px;
  --app-content-gap: 20px;
  --app-card-radius: 16px;
  --app-card-padding: 22px;
  --app-card-min-height: 724px;
  --app-border-color: #e3ebf8;
  --app-card-shadow: 0 8px 26px rgba(39, 73, 130, 0.05);
}

html {
  min-width: var(--app-min-width);
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body.app-page {
  min-width: var(--app-min-width);
  color: #172b51;
  background: #f7f9fd;
  overflow-x: clip;
}

.app-page .app-shell,
.app-page .page-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.app-page .app-topbar,
.app-page .top-nav {
  width: 100%;
  height: var(--app-topbar-height);
  min-width: var(--app-min-width);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0 var(--app-inline-padding);
  border-bottom: 1px solid #e1e9f6;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(42, 75, 130, 0.04);
}

.app-page .brand { justify-self: start; color: #102a68; }

.app-page .nav-pills {
  height: 46px;
  justify-self: center;
  gap: 4px;
  padding: 4px;
  border-color: #dce6f5;
  border-radius: 12px;
  background: #f8faff;
  backdrop-filter: none;
}

.app-page .nav-pill {
  min-width: 138px;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 9px;
  color: #62718d;
  font-size: 14px;
  font-weight: 650;
}

.app-page .nav-pill:hover,
.app-page .nav-pill.active {
  color: #1e5eea;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #bcd1ff;
}

.app-page .icon-pill { display: none; }

.app-page .account-chip {
  min-width: 176px;
  min-height: 42px;
  justify-self: end;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #dfe6f1;
  border-radius: 12px;
  color: #30405e;
  background: #ffffff;
}

.app-page .topbar-tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}

.app-page .theme-mode-toggle {
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  background: #f8faff;
}

.app-page .theme-mode-toggle button {
  min-width: 46px;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  color: #6b7890;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.app-page .theme-mode-toggle button:hover,
.app-page .theme-mode-toggle button:focus-visible {
  color: #1e5eea;
  background: #eef4ff;
  outline: none;
}

.app-page .theme-mode-toggle button.is-active {
  color: #1e5eea;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #bcd1ff, 0 1px 3px rgba(35, 73, 132, 0.12);
}

.app-page .status-dot { background: #2f6bff; box-shadow: 0 0 0 4px #e6efff; }

.app-page .workspace-layout {
  min-height: calc(100vh - var(--app-topbar-height));
  margin: 0;
  padding: var(--app-workspace-top) var(--app-inline-padding) var(--app-workspace-bottom);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-page .workspace-page-header {
  min-height: var(--app-page-header-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 0 0 16px;
  text-align: left;
}

.app-page .workspace-page-header .hero-copy { display: block; }
.app-page .workspace-page-header .page-title-mark,
.app-page .workspace-page-header .api-access-kicker { display: none; }

.app-page .workspace-page-header h1 {
  margin: 0;
  color: #102a68;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.2;
}

.app-page .workspace-page-header p {
  margin: 5px 0 0;
  color: #69758c;
  font-size: 14px;
  line-height: 1.4;
}

.app-page .workspace-action-bar {
  min-width: 188px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.app-page .workspace-content {
  min-width: 0;
  gap: var(--app-content-gap);
  align-items: stretch;
}

.app-page .reverse-grid,
.app-page .generation-workbench-grid,
.app-page .api-access-grid { gap: var(--app-content-gap); }

.app-page .section-card {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--app-border-color);
  border-radius: var(--app-card-radius);
  background: #ffffff;
  box-shadow: var(--app-card-shadow);
}

.app-page .workspace-content > .section-card {
  min-height: var(--app-card-min-height);
  padding: var(--app-card-padding);
}

.app-page .api-side-column { gap: var(--app-content-gap); align-content: start; }
.app-page .api-side-column > .section-card { padding: var(--app-card-padding); }

.app-page .section-card > .panel-head,
.app-page .section-card > .generation-card-header,
.app-page .section-card > .api-card-header { min-height: 52px; }

.app-page .generation-output-card .generation-empty-result,
.app-page .generation-output-card .generation-empty-result.has-generated-image { min-height: 420px; }

@media (max-width: 1279px) {
  html,
  body.app-page,
  .app-page .app-topbar,
  .app-page .top-nav { min-width: 0; }

  .app-page .app-topbar,
  .app-page .top-nav { grid-template-columns: auto minmax(0, 1fr) auto; }

  .app-page .nav-pills { justify-self: stretch; }
  .app-page .nav-pill { min-width: 0; flex: 1; }
}

/* Shared night mode: the route shell owns the theme so changing workbenches never resets it. */
html[data-theme="dark"] {
  --app-border-color: #2a3d5c;
  --app-card-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  color-scheme: dark;
  background: #0b1220;
}

html[data-theme="dark"] body.app-page {
  color: #e7eefb;
  background: #0b1220;
}

html[data-theme="dark"] .noise { opacity: 0.05; }

html[data-theme="dark"] .app-page .app-topbar,
html[data-theme="dark"] .app-page .top-nav {
  border-color: #253752;
  background: #101a2b;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .app-page .brand,
html[data-theme="dark"] .app-page .workspace-page-header h1,
html[data-theme="dark"] .app-page :is(.section-card h2, .section-card h3, .section-card h4, .section-card strong, .section-card label) {
  color: #edf3ff;
}

html[data-theme="dark"] .app-page .workspace-page-header p,
html[data-theme="dark"] .app-page :is(.section-card p, .section-card small, .section-card li, .section-card span) {
  color: #aebdd3;
}

html[data-theme="dark"] .app-page .nav-pills,
html[data-theme="dark"] .app-page .theme-mode-toggle {
  border-color: #2b405f;
  background: #131f33;
}

html[data-theme="dark"] .app-page .nav-pill,
html[data-theme="dark"] .app-page .theme-mode-toggle button {
  color: #9eafc9;
}

html[data-theme="dark"] .app-page .nav-pill:hover,
html[data-theme="dark"] .app-page .nav-pill.active,
html[data-theme="dark"] .app-page .theme-mode-toggle button:hover,
html[data-theme="dark"] .app-page .theme-mode-toggle button:focus-visible,
html[data-theme="dark"] .app-page .theme-mode-toggle button.is-active {
  color: #91b5ff;
  background: #1a2a45;
  box-shadow: inset 0 0 0 1px #3c619f;
}

html[data-theme="dark"] .app-page .account-chip {
  border-color: #2b405f;
  color: #dce7f8;
  background: #131f33;
}

html[data-theme="dark"] .app-page .status-dot { background: #5b93ff; box-shadow: 0 0 0 4px rgba(91, 147, 255, 0.14); }

html[data-theme="dark"] .app-page .workspace-layout { background: transparent; }

html[data-theme="dark"] .app-page .section-card,
html[data-theme="dark"] .app-page :is(.reverse-panel, .generation-card, .api-side-card, .api-main-card, .generation-empty-result, .structured-section-card, .prompt-result-card, .result-card, .history-record-detail, .history-record-list) {
  border-color: #2a3d5c;
  background: #111c2e;
  color: #e7eefb;
}

html[data-theme="dark"] .app-page :is(input, select, textarea) {
  border-color: #304767 !important;
  color: #e8effb !important;
  background: #0d1728 !important;
}

html[data-theme="dark"] .app-page :is(input, textarea)::placeholder { color: #71829d !important; }
html[data-theme="dark"] .app-page select option { color: #e8effb; background: #111c2e; }

html[data-theme="dark"] .app-page :is(.generation-consistency-card, .generation-prompt-preview, .generation-check-card, .generation-plan-placeholder, .api-call-list, .api-side-note, .stale-result-banner, .analysis-statistics, .analysis-step-item, .analysis-metric) {
  border-color: #2a3d5c;
  color: #b9c8dc;
  background: #0f192a;
}

html[data-theme="dark"] .app-page :is(.ghost-button, .api-secondary-button, .api-text-button, .generation-inline-action, .generation-icon-action, .generation-panel-clear-button, .generation-page-actions button, .result-actions button, .history-button) {
  border-color: #36527a;
  color: #bcd2fa;
  background: #14223a;
}

html[data-theme="dark"] .app-page :is(.primary-button, .generation-primary-action, .result-send-button, .generation-inline-action-primary) {
  color: #ffffff;
  background: #2f6bff;
}

html[data-theme="dark"] .app-page :is(.selectable-chip, .generation-chip, .recognition-tag-chip, .tag-chip, .api-skill-chip) {
  border-color: #304b70;
  color: #b9c9e1;
  background: #14223a;
}

html[data-theme="dark"] .app-page :is(.selectable-chip.is-selected, .generation-chip.is-selected, .recognition-tag-chip.is-selected, .tag-chip.is-selected) {
  border-color: #4d7fd5;
  color: #a9c6ff;
  background: #182d50;
}

html[data-theme="dark"] .app-page :is(.generation-generated-preview, .image-preview-state, .generation-image-stage) { background: #0b1423; }
html[data-theme="dark"] .app-page :is(.generation-generated-meta, .image-file-meta, .generation-result-action-message) { color: #aebed5; background: #101a2b; }

html[data-theme="dark"] .app-page :is(.toast, .reverse-history-dialog, dialog) {
  border-color: #2d4668;
  color: #e7eefb;
  background: #111c2e;
}

/* Complete dark-mode coverage for the three workspace interiors. */
html[data-theme="dark"] {
  --dark-surface: #111c2e;
  --dark-surface-raised: #14223a;
  --dark-surface-subtle: #0f192a;
  --dark-control: #0d1728;
  --dark-border: #2d4668;
  --dark-text: #e7eefb;
  --dark-muted: #aebdd3;
}

html[data-theme="dark"] .generation-page :is(.generation-segment, .generation-reference-dropzone, .generation-reference-add, .generation-reference-tile, .generation-reference-tile select, .generation-reference-actions button, .generation-prompt-preview, .generation-negative-preview, .generation-empty-result, .generation-generated-preview-trigger, .generation-generated-preview, .generation-generated-meta, .generation-plan-placeholder, .generation-check-card, .generation-inline-action) {
  border-color: var(--dark-border);
  color: var(--dark-muted);
  background: var(--dark-surface-subtle);
}

html[data-theme="dark"] .generation-page :is(.generation-segment:hover, .generation-reference-add:hover, .generation-reference-actions button:hover:not(:disabled), .generation-icon-action:hover:not(:disabled), .generation-inline-action:hover:not(:disabled)) {
  border-color: #4673b6;
  color: #b7d0ff;
  background: #182d50;
}

html[data-theme="dark"] .generation-page :is(.generation-chip.is-selected, .generation-segment.is-selected) {
  border-color: #5286dd;
  color: #b8d0ff;
  background: #182d50;
}

html[data-theme="dark"] .generation-page .generation-reference-dropzone:is(:hover, .is-dragging) {
  border-color: #5286dd;
  background: #152a49;
}

html[data-theme="dark"] .generation-page :is(.generation-reference-empty, .generation-reference-empty small, .generation-reference-tile select, .generation-reference-actions button, .generation-reference-hint, .generation-duration-hint, .generation-model-feedback, .generation-preview-state, .generation-slider-label, .generation-check-card p, .generation-plan-placeholder small, .generation-generated-meta, .generation-negative-preview) {
  color: #aebdd3;
}

html[data-theme="dark"] .generation-page :is(.generation-reference-empty strong, .generation-empty-result strong, .generation-plan-placeholder span, .generation-check-card h3) {
  color: #e7eefb;
}

html[data-theme="dark"] .generation-page :is(.generation-result-status, .generation-result-status.is-validating, .generation-result-status.is-submitting, .generation-result-status.is-generating) {
  border: 1px solid #35517a;
  color: #b8d0ff;
  background: #162945;
}

html[data-theme="dark"] .generation-page .generation-result-status.is-success { border-color: #287457; color: #73d7ac; background: #102b25; }
html[data-theme="dark"] .generation-page .generation-result-status.is-partial_success { border-color: #856124; color: #f0c66c; background: #2e2613; }
html[data-theme="dark"] .generation-page .generation-result-status.is-failed,
html[data-theme="dark"] .generation-page :is(.generation-empty-result.is-error, .generation-plan-placeholder.is-failed, .generation-generated-meta.is-warning) { border-color: #7e3f50; color: #ffabb7; background: #2b1821; }

html[data-theme="dark"] .generation-page :is(.generation-reference-tile.is-error, .generation-plan-placeholder.is-failed) span,
html[data-theme="dark"] .generation-page .generation-reference-error { color: #ffabb7; }

html[data-theme="dark"] .generation-page :is(.generation-switch, .generation-slider-row input, .generation-lock-option input) {
  accent-color: #5d91ff;
  color-scheme: dark;
}

html[data-theme="dark"] .reverse-page :is(.workspace-hero h1, .reverse-panel .panel-head h2, .input-panel .panel-head h2, .analysis-summary strong, .output-panel #outputBox, .prompt-result-card h3, .result-mini-card h3, .structured-section-card h3, .result-empty-state h3, .result-error-state h3, .applied-focus-head h3, .history-dialog-head h2) {
  color: var(--dark-text);
}

html[data-theme="dark"] .reverse-page :is(.workspace-hero p, .workspace-meta, .reverse-panel label, .drop-zone small, .analysis-summary small, .step-copy small, .image-file-meta, .result-empty-state p, .result-error-state p, .history-empty, .history-detail-meta) {
  color: var(--dark-muted);
}

html[data-theme="dark"] .reverse-page :is(.reverse-panel .ghost-button, .input-panel .drop-zone, .input-panel .image-uploader, .input-panel .upload-icon, .input-panel .image-uploader.has-image, .input-panel .image-preview-strip, .input-panel .preview-thumb-select, .input-panel .preview-thumb-remove, .input-panel .image-preview-actions button, .analysis-summary, .analysis-steps li, .analysis-steps li::before, .analysis-statistics, .result-state-view, .result-empty-state, .result-error-state, .prompt-result-card, .result-mini-card, .structured-section-card, .applied-focus-section, .stale-result-banner, .variable-token-popover, .history-record-list, .history-record-item, .history-detail-prompt) {
  border-color: var(--dark-border);
  color: var(--dark-muted);
  background: var(--dark-surface-subtle);
}

html[data-theme="dark"] .reverse-page :is(.reverse-panel input, .reverse-panel select, .reverse-panel textarea, .reverse-panel input:focus, .reverse-panel select:focus, .reverse-panel textarea:focus, #outputBox, .variable-token-popover input) {
  border-color: #304767;
  color: var(--dark-text);
  background: var(--dark-control);
}

html[data-theme="dark"] .reverse-page .reverse-panel select option { color: var(--dark-text); background: var(--dark-surface); }
html[data-theme="dark"] .reverse-page :is(.analysis-steps li.active, .analysis-steps li.done, .analysis-summary.scanning, .input-panel .upload-empty-state:hover, .history-record-item:hover, .history-record-item.is-selected) { background: #182d50; }
html[data-theme="dark"] .reverse-page :is(.analysis-steps li.active::before, .analysis-steps li.done::before, .input-panel .upload-icon) { border-color: #497bc8; color: #9ec0ff; background: #152a49; }
html[data-theme="dark"] .reverse-page .input-panel .drop-zone.has-image::after { border-color: #385473; color: #d8e5f7; background: rgba(15, 25, 42, 0.92); }
html[data-theme="dark"] .reverse-page .input-panel .image-count-badge { border-color: #385473; color: #d8e5f7; background: rgba(15, 25, 42, 0.92); }
html[data-theme="dark"] .reverse-page .applied-focus-tag {
  border-color: #36557e;
  color: #c6d7ef;
  background: #14233a;
}
html[data-theme="dark"] .reverse-page .applied-focus-tag:hover,
html[data-theme="dark"] .reverse-page .applied-focus-tag.is-selected {
  border-color: #5d91ff;
  color: #dbe8ff;
  background: #1b3560;
}

html[data-theme="dark"] .api-access-page :is(.api-access-header h1, .api-card-header h2, .api-side-card h2, .api-form-section h3, .provider-choice strong, .api-connection-meta dd, .api-usage-metrics b, .api-call-row strong) {
  color: var(--dark-text);
}

html[data-theme="dark"] .api-access-page :is(.api-access-header p, .api-section-heading span, .provider-choice span, .api-field-row label, .api-model-grid label > span, .api-field-help, .api-connection-card > p, .api-connection-meta dt, .api-usage-total span, .api-usage-metrics span, .api-side-note, .api-call-row span, .api-empty-row) {
  color: var(--dark-muted);
}

html[data-theme="dark"] .api-access-page :is(.api-config-card, .api-side-card, .api-header-status, .api-draft-state, .api-field-state, .api-usage-source, .api-setup-steps li span, .provider-choice, .skill-choice, .skill-rule-summary, .api-feedback, .api-field-row input, .api-model-grid select, .api-secondary-button, .api-call-list, .api-error-card) {
  border-color: var(--dark-border);
  color: var(--dark-muted);
  background: var(--dark-surface);
}

html[data-theme="dark"] .api-access-page :is(.api-field-row input, .api-model-grid select) { background: var(--dark-control); color: var(--dark-text); }
html[data-theme="dark"] .api-access-page .api-model-grid select option { color: var(--dark-text); background: var(--dark-surface); }
html[data-theme="dark"] .api-access-page :is(.provider-choice:hover, .provider-choice.is-selected, .skill-choice:has(input:checked), .api-draft-state[data-state="saving"], .api-header-status[data-status="testing"], .api-header-status[data-status="saving"]) { border-color: #4673b6; color: #b7d0ff; background: #182d50; }
html[data-theme="dark"] .api-access-page :is(.api-feedback[data-tone="success"], .api-header-status[data-status="connected"]) { border-color: #287457; color: #73d7ac; background: #102b25; }
html[data-theme="dark"] .api-access-page :is(.api-feedback[data-tone="error"], .api-header-status[data-status="failed"], .api-header-status[data-status="invalid_key"], .api-header-status[data-status="timeout"], .api-header-status[data-status="invalid_base_url"], .api-header-status[data-status="model_unavailable"], .api-header-status[data-status="quota_exhausted"], .api-header-status[data-status="service_error"], .api-error-card) { border-color: #7e3f50; color: #ffabb7; background: #2b1821; }
html[data-theme="dark"] .api-access-page :is(.api-form-section, .api-form-actions, .api-connection-meta div, .api-usage-metrics span, .api-call-row) { border-color: #253a58; }

/* One shared Prompt Cortex brand anchor across every primary workbench. */
.app-page .app-topbar .brand {
  min-width: 0;
  min-height: var(--app-topbar-height);
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  color: #102a68;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
}

.app-page .app-topbar .brand .brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 32px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}

.app-page .app-topbar .brand .brand-name {
  display: block;
  white-space: nowrap;
}

html[data-theme="dark"] .app-page .app-topbar .brand {
  color: #edf3ff;
}

/* Dark-mode surface audit: small state and utility controls must not retain light fills. */
html[data-theme="dark"] .reverse-page .workspace-meta > span {
  border-color: #36527a;
  color: #c4d5ef;
  background: #14223a;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-status-badge {
  border-color: #36527a;
  color: #bcd1f4;
  background: #14223a;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-status-badge.is-analyzing {
  border-color: #3f67aa;
  color: #a9c6ff;
  background: #162945;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-status-badge.is-completed {
  border-color: #287457;
  color: #73d7ac;
  background: #102b25;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-status-badge.is-error {
  border-color: #7e3f50;
  color: #ffabb7;
  background: #2b1821;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-steps li {
  border-color: #29415f;
  color: #b5c5dc;
  background: #101b2e;
}

html[data-theme="dark"] .reverse-page .analysis-panel .step-index {
  border-color: #3b5680;
  color: #c5d7f1;
  background: #172842;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-steps li:not(:last-child) .step-index::after {
  background: #33506f;
}

html[data-theme="dark"] .reverse-page .analysis-panel .step-copy strong {
  color: #edf3ff;
}

html[data-theme="dark"] .reverse-page .analysis-panel .step-copy small,
html[data-theme="dark"] .reverse-page .analysis-panel .step-state {
  color: #aebdd3;
}

html[data-theme="dark"] .reverse-page .analysis-panel .step-state i {
  border-color: #506886;
  background: #101b2e;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-steps li[data-step-state="processing"] {
  border-color: #416aaa;
  background: #142a49;
}

html[data-theme="dark"] .reverse-page .analysis-panel li[data-step-state="processing"] .step-index {
  border-color: #4d7fd5;
  color: #a9c6ff;
  background: #1a365e;
}

html[data-theme="dark"] .reverse-page .analysis-panel li[data-step-state="completed"] .step-index {
  border-color: #287457;
  color: #73d7ac;
  background: #14362c;
}

html[data-theme="dark"] .reverse-page .analysis-panel li[data-step-state="error"] {
  border-color: #7e3f50;
  background: #2b1821;
}

html[data-theme="dark"] .reverse-page .analysis-panel .metric-track {
  background: #253a57;
}

html[data-theme="dark"] .reverse-page .analysis-panel .metric-track i {
  background: #5d91ff;
}

html[data-theme="dark"] .reverse-page .analysis-panel .metric-progress strong {
  color: #b9c9df;
}

html[data-theme="dark"] .reverse-page .analysis-panel .analysis-statistics {
  border-color: #2a4364;
  background: #101b2e;
}

html[data-theme="dark"] .reverse-page .output-panel :is(.result-state-icon, .tab-empty-icon) {
  border-color: #3b5d87;
  color: #9fc0ff;
  background: #152842;
}

html[data-theme="dark"] .reverse-page .output-panel .result-state-icon.is-error {
  border-color: #7e3f50;
  color: #ffabb7;
  background: #2b1821;
}

html[data-theme="dark"] .reverse-page .output-panel .optimized-badge {
  color: #73d7ac;
  background: #102b25;
}

html[data-theme="dark"] .reverse-page .output-panel .unsaved-indicator {
  color: #f0c66c;
  background: #2e2613;
}

html[data-theme="dark"] .reverse-page .output-panel :is(.prompt-card-actions button, .structured-view-head button, .negative-prompt-card header button) {
  border-color: #36527a;
  color: #bcd2fa;
  background: #14223a;
}

html[data-theme="dark"] .reverse-page .generator-source-badge {
  border-color: #315c55;
  color: #9edabc;
  background: #102b25;
}

html[data-theme="dark"] .generation-page .generation-source-badge {
  border: 1px solid #315c55;
  color: #9edabc;
  background: #102b25;
}

html[data-theme="dark"] .generation-page .generation-generated-meta.is-warning {
  border-color: #7e3f50;
  color: #ffabb7;
  background: #2b1821;
}

html[data-theme="dark"] .api-access-page .api-draft-state[data-state="dirty"] {
  border-color: #856124;
  color: #f0c66c;
  background: #2e2613;
}

html[data-theme="dark"] .api-access-page :is(.toast[data-tone="success"], .api-header-status[data-status="connected"]) {
  border-color: #287457;
  color: #73d7ac;
  background: #102b25;
}

html[data-theme="dark"] .api-access-page :is(.toast[data-tone="error"], .api-header-status[data-status="failed"], .api-header-status[data-status="invalid_key"], .api-header-status[data-status="timeout"], .api-header-status[data-status="invalid_base_url"], .api-header-status[data-status="model_unavailable"], .api-header-status[data-status="quota_exhausted"], .api-header-status[data-status="service_error"]) {
  border-color: #7e3f50;
  color: #ffabb7;
  background: #2b1821;
}

/* Dark-mode control sweep: scoped surfaces that use more specific base selectors. */
html[data-theme="dark"] .reverse-page .analysis-panel .step-state {
  border-color: #304b70;
  color: #b9c9e1;
  background: #14223a;
}

html[data-theme="dark"] .reverse-page :is(.input-panel .focus-info, .analysis-panel .statistics-icon) {
  border-color: #3b5d87;
  color: #9fc0ff;
  background: #152842;
}

html[data-theme="dark"] .reverse-page .analysis-panel li[data-step-state="completed"] .step-state {
  border-color: #287457;
  color: #73d7ac;
  background: #102b25;
}

html[data-theme="dark"] .reverse-page .analysis-panel li[data-step-state="error"] .step-state {
  border-color: #7e3f50;
  color: #ffabb7;
  background: #2b1821;
}

html[data-theme="dark"] .reverse-page :is(.history-dialog-head button, .history-detail-actions button, .action-dialog button:not(.primary-button), .variable-token-popover button, .result-tabs button) {
  border-color: #36527a;
  color: #bcd2fa;
  background: #14223a;
}

html[data-theme="dark"] .reverse-page :is(.history-dialog-head button:hover, .history-detail-actions button:hover, .action-dialog button:not(.primary-button):hover, .variable-token-popover button:hover, .result-tabs button:hover) {
  border-color: #5286dd;
  color: #d8e7ff;
  background: #182d50;
}

html[data-theme="dark"] .generation-page :is(.generation-consistency-card .generation-switch-track, .generation-consistency-card details, .generation-consistency-card summary, .generation-consistency-card .generation-lock-option, .generation-control-card .generation-slider-row, .generation-control-card .generation-output-settings) {
  border-color: #2d4668;
  color: #b9c9e1;
  background-color: #0f192a;
}

html[data-theme="dark"] .generation-page .generation-lock-option:hover,
html[data-theme="dark"] .generation-page .generation-lock-option:has(input:checked) {
  border-color: #4d7fd5;
  color: #a9c6ff;
  background: #182d50;
}

html[data-theme="dark"] .generation-page :is(.generation-segment:disabled, .generation-chip:disabled, .generation-reference-add:disabled, .generation-reference-actions button:disabled, .generation-inline-action:disabled, .generation-icon-action:disabled) {
  border-color: #304767;
  color: #8292aa;
  background: #14223a;
  opacity: 0.72;
}

html[data-theme="dark"] .generation-page :is(.generation-segment.is-selected:disabled, .generation-chip.is-selected:disabled) {
  border-color: #4d7fd5;
  color: #a9c6ff;
  background: #182d50;
}

html[data-theme="dark"] .api-access-page :is(.api-icon-button, .api-setup-steps li span, .api-retry-button, .api-call-row button, .api-call-row .api-text-button, .api-error-card button) {
  border-color: #36527a;
  color: #bcd2fa;
  background: #14223a;
}

html[data-theme="dark"] .api-access-page :is(.api-icon-button:hover, .api-retry-button:hover, .api-call-row button:hover, .api-call-row .api-text-button:hover, .api-error-card button:hover) {
  border-color: #5286dd;
  color: #d8e7ff;
  background: #182d50;
}

html[data-theme="dark"] .api-access-page .api-setup-steps li.is-active span {
  border-color: #5d91ff;
  color: #ffffff;
  background: #2f6bff;
}

html[data-theme="dark"] .app-page :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  background-color: #14223a !important;
}

/* Shared select menu: native selects remain the value and event source. */
.app-page .select-menu,
.select-menu-list--portal {
  --select-menu-surface: #ffffff;
  --select-menu-surface-hover: #f4f7fc;
  --select-menu-surface-selected: #eef4ff;
  --select-menu-border: #d8e3f2;
  --select-menu-border-strong: #2f6bff;
  --select-menu-text: #22375a;
  --select-menu-muted: #71819b;
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.app-page .select-menu-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-page .select-menu-trigger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--select-menu-border);
  border-radius: 9px;
  color: var(--select-menu-text);
  background: var(--select-menu-surface);
  box-shadow: 0 1px 0 rgba(16, 42, 104, 0.02);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.app-page .select-menu-trigger:hover:not(:disabled) {
  border-color: #8eb0f2;
  background: #fbfdff;
}

.app-page .select-menu.is-open .select-menu-trigger,
.app-page .select-menu-trigger:focus-visible {
  border-color: var(--select-menu-border-strong);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.13);
  outline: 0;
}

.app-page .select-menu.is-invalid .select-menu-trigger {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12);
}

.app-page .select-menu-value {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page .select-menu-value.is-placeholder { color: var(--select-menu-muted); font-weight: 500; }

.app-page .select-menu-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: #637898;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.app-page .select-menu.is-open .select-menu-chevron { transform: rotate(225deg) translate(-2px, -1px); }

.select-menu-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: min(280px, 40vh);
  display: grid;
  gap: 2px;
  padding: 5px;
  overflow: auto;
  border: 1px solid var(--select-menu-border);
  border-radius: 9px;
  background: var(--select-menu-surface);
  box-shadow: 0 14px 32px rgba(23, 46, 87, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.select-menu-list[hidden] { display: none !important; }

.app-page .select-menu.is-open .select-menu-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.select-menu-list.select-menu-list--portal {
  position: fixed;
  z-index: 1000;
  right: auto;
  left: auto;
  top: auto;
  bottom: auto;
}

.select-menu-list.select-menu-list--portal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.select-menu-option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--select-menu-text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.select-menu-option:hover:not(:disabled),
.select-menu-option:focus-visible {
  border-color: #dce8ff;
  color: #1d60db;
  background: var(--select-menu-surface-hover);
  outline: 0;
}

.select-menu-option.is-selected {
  color: #173f8e;
  background: var(--select-menu-surface-selected);
  font-weight: 700;
}

.select-menu-option-check {
  color: #173f8e;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
}

.select-menu-option.is-selected .select-menu-option-check { opacity: 1; }
.select-menu-option:disabled { cursor: not-allowed; opacity: 0.46; }
.app-page .select-menu.is-disabled .select-menu-trigger { cursor: not-allowed; opacity: 0.58; }

.generation-page .generation-reference-tile:has(.select-menu.is-open) {
  z-index: 8;
  overflow: visible;
}

.generation-page .generation-reference-tile .select-menu-trigger {
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  border-top: 1px solid #dbe5f4;
  border-radius: 0;
  box-shadow: none;
  color: #526684;
  font-size: 11px;
}

.generation-page .generation-reference-tile .select-menu-list {
  right: -1px;
  left: -1px;
  max-height: 210px;
  border-radius: 7px;
}

.generation-page .generation-reference-tile .select-menu-option {
  min-height: 30px;
  font-size: 11px;
}

html[data-theme="dark"] .app-page .select-menu,
html[data-theme="dark"] .select-menu-list--portal {
  --select-menu-surface: #0d1728;
  --select-menu-surface-hover: #162945;
  --select-menu-surface-selected: #182d50;
  --select-menu-border: #304767;
  --select-menu-border-strong: #5b91ff;
  --select-menu-text: #e8effb;
  --select-menu-muted: #92a5c1;
}

html[data-theme="dark"] .app-page .select-menu-trigger {
  box-shadow: 0 1px 0 rgba(232, 239, 251, 0.03);
}

html[data-theme="dark"] .app-page .select-menu-trigger:hover:not(:disabled) {
  border-color: #497bc8;
  background: #101f35;
}

html[data-theme="dark"] .app-page .select-menu.is-open .select-menu-trigger,
html[data-theme="dark"] .app-page .select-menu-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(91, 145, 255, 0.18);
}

html[data-theme="dark"] .app-page .select-menu-chevron { color: #9fb6d7; }

html[data-theme="dark"] .select-menu-list {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .select-menu-option:hover:not(:disabled),
html[data-theme="dark"] .select-menu-option:focus-visible {
  border-color: #335585;
  color: #d9e7ff;
}

html[data-theme="dark"] .select-menu-option.is-selected {
  color: #c9dbff;
  background: #1b3560;
}

html[data-theme="dark"] .select-menu-option-check { color: #8bb4ff; }

html[data-theme="dark"] .generation-page .generation-reference-tile .select-menu-trigger {
  border-color: #304767;
  color: #b7c7df;
  background: #0d1728;
}